feat: display availability and item data for library items

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

@@ -90,6 +90,7 @@ import {TreeListComponent} from './list/tree-list.component';
 import {TreeListFragmentComponent} from './list/tree-list-fragment.component';
 import {SettingsProvider} from '../settings/settings.provider';
 import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
+import {ExternalLinkComponent} from './elements/external-link.component';
 
 /**
  * Module for handling data
@@ -150,6 +151,7 @@ import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
     VideoListItemComponent,
     SimpleDataListComponent,
     TitleCardComponent,
+    ExternalLinkComponent,
   ],
   entryComponents: [DataListComponent, SimpleDataListComponent],
   imports: [
@@ -201,6 +203,7 @@ import {IonIconModule} from '../../util/ion-icon/ion-icon.module';
     OriginDetailComponent,
     FavoriteButtonComponent,
     TreeListComponent,
+    ExternalLinkComponent,
   ],
 })
 export class DataModule {}

src/app/modules/data/elements/external-link.component.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright (C) 2022 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {Component, Input} from '@angular/core';
+import {Browser} from '../../../util/browser.factory';
+
+@Component({
+  selector: 'stapps-external-link',
+  templateUrl: './external-link.html',
+  styleUrls: ['./external-link.scss'],
+})
+export class ExternalLinkComponent {
+  @Input() link: string;
+
+  @Input() text: string;
+
+  constructor(private browser: Browser) {}
+
+  onLinkClick(url: string) {
+    this.browser.open(url);
+  }
+}

src/app/modules/data/elements/external-link.html

@@ -0,0 +1,17 @@
+<!--
+  ~ Copyright (C) 2022 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+<a (click)="onLinkClick(link)"
+  >{{ text }}<ion-icon name="open_in_browser"></ion-icon>
+</a>

src/app/modules/data/elements/external-link.scss

@@ -0,0 +1,8 @@
+:host a {
+  cursor: pointer;
+  ion-icon {
+    vertical-align: text-top;
+    font-size: 80%;
+    padding-left: 2px;
+  }
+}

src/app/modules/data/types/message/message-detail-content.html

@@ -1,16 +1,16 @@
 <!--
   ~ Copyright (C) 2022 StApps
-  ~  This program is free software: you can redistribute it and/or modify it
-  ~  under the terms of the GNU General Public License as published by the Free
-  ~  Software Foundation, version 3.
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
   ~
-  ~  This program is distributed in the hope that it will be useful, but WITHOUT
-  ~  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-  ~  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-  ~  more details.
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
   ~
-  ~  You should have received a copy of the GNU General Public License along with
-  ~  this program. If not, see <https://www.gnu.org/licenses/>.
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
 <div *ngIf="!item.categories.includes('news'); else news">
@@ -59,9 +59,10 @@
       {{ 'sameAs' | propertyNameTranslate: item | titlecase }}
     </ion-card-header>
     <ion-card-content>
-      <a (click)="onLinkClick(item.sameAs)"
-        >{{ item.name }}<ion-icon name="open_in_browser"></ion-icon>
-      </a>
+      <stapps-external-link
+        [link]="item.sameAs"
+        [text]="item.name"
+      ></stapps-external-link>
     </ion-card-content>
   </ion-card>
 </ng-template>

src/app/modules/data/types/message/message-detail-content.scss

@@ -21,14 +21,6 @@
       display: block;
     }
   }
-  a {
-    cursor: pointer;
-    ion-icon {
-      vertical-align: text-top;
-      font-size: 80%;
-      padding-left: 2px;
-    }
-  }
   // Show smaller image on a desktop
   @media (min-width: 992px) {
     ion-thumbnail {