feat: add share option in detail views

frontend/app/src/app/modules/data/data.module.ts

@@ -106,6 +106,7 @@ import {SemesterDetailContentComponent} from './types/semester/semester-detail-c
 import {SemesterListItemComponent} from './types/semester/semester-list-item.component';
 import {VideoDetailContentComponent} from './types/video/video-detail-content.component';
 import {VideoListItemComponent} from './types/video/video-list-item.component';
+import {ShareButtonComponent} from './elements/share-button.component';
 
 /**
  * Module for handling data
@@ -180,6 +181,7 @@ import {VideoListItemComponent} from './types/video/video-list-item.component';
     BookDetailContentComponent,
     PeriodicalListItemComponent,
     PeriodicalDetailContentComponent,
+    ShareButtonComponent,
   ],
   imports: [
     CommonModule,

frontend/app/src/app/modules/data/detail/data-detail.html

@@ -20,6 +20,7 @@
     </ion-buttons>
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
     <ion-buttons [slot]="isModal ? 'start' : 'primary'">
+      <stapps-share-button *ngIf="item" [title]="'name' | thingTranslate: item"></stapps-share-button>
       <stapps-favorite-button *ngIf="item" [item]="$any(item)"></stapps-favorite-button>
     </ion-buttons>
     <ion-buttons slot="end" *ngIf="isModal">

frontend/app/src/app/modules/data/elements/share-button.component.ts

@@ -0,0 +1,33 @@
+import {Component, Input} from '@angular/core';
+import {ToastController} from '@ionic/angular';
+import {environment} from '../../../../environments/environment';
+
+@Component({
+  selector: 'stapps-share-button',
+  templateUrl: 'share-button.html',
+  styleUrls: ['share-button.scss'],
+})
+export class ShareButtonComponent {
+  canShare = false;
+
+  @Input({required: true}) title: string;
+
+  @Input() url: string;
+
+  constructor(readonly toastController: ToastController) {}
+
+  share(): boolean {
+    const url = this.url ?? new URL(window.location.pathname, `https://${environment.app_host}`);
+
+    if (navigator.share) {
+      void navigator.share({
+        url: url.toString(),
+        text: this.title,
+      });
+      return false;
+    } else {
+      void navigator.clipboard.writeText(`${this.title}\n${url}`);
+      return true;
+    }
+  }
+}

frontend/app/src/app/modules/data/elements/share-button.html

@@ -0,0 +1,4 @@
+<ion-button size="small" fill="clear" (click)="share() && toast.present()">
+  <ion-icon size="24" slot="icon-only" name="share" ios="ios_share"></ion-icon>
+</ion-button>
+<ion-toast [message]="'toast.TITLE_COPIED' | translate" #toast [duration]="2000"></ion-toast>

frontend/app/src/assets/i18n/de.json

@@ -25,6 +25,9 @@
     },
     "settings": "Einstellungen"
   },
+  "toast": {
+    "TITLE_COPIED": "In die Zwischenablage kopiert"
+  },
   "app": {
     "ui": {
       "CLOSE": "Schließen",

frontend/app/src/assets/i18n/en.json

@@ -25,6 +25,9 @@
     },
     "settings": "Settings"
   },
+  "toast": {
+    "TITLE_COPIED": "Copied to clipboard"
+  },
   "app": {
     "ui": {
       "CLOSE": "Close",