feat(share link): share link directly under title

Author: 4drianMatei

frontend/src/app/shared/bookmark-list-element/bookmark-list-element.component.html

@@ -28,6 +28,9 @@ <h6 class="card-subtitle mb-2 text-muted url-under-title">
               [innerHtml]="bookmark.location | slice:0:100 | highlight: filterText | highlight: queryText"></span>
             <span>...</span>
           </ng-template>
+          <span class="btn-light btn-sm" (click)="copyToClipboard(bookmark.location)" title="Copy link to clipboard">
+            <i class="far fa-copy copy-link"></i><span class="copy-btn-text">{{copyLinkButtonText}}</span>
+          </span>
         </h6>
       </div>
       <div style="display: flex">

frontend/src/app/shared/bookmark-list-element/bookmark-list-element.component.scss

@@ -29,7 +29,7 @@
 }
 
 .youtube-icon {
-  color:red;
+  color: red;
   margin-right: 0.5rem;
   cursor: pointer;
 }
@@ -44,3 +44,10 @@
   pointer-events: none;
 }
 
+.copy-link {
+  font-size: 0.95rem;
+}
+
+.copy-btn-text {
+  font-size: 0.8rem;
+}

frontend/src/app/shared/bookmark-list-element/bookmark-list-element.component.ts

@@ -25,6 +25,7 @@ import { MyBookmarksStore } from '../../core/user/my-bookmarks.store';
 import { NavigationEnd, Router } from '@angular/router';
 import { LoginDialogHelperService } from '../../core/login-dialog-helper.service';
 import { AddToHistoryService } from '../../core/user/add-to-history.service';
+import { Clipboard } from '@angular/cdk/clipboard';
 
 @Component({
   selector: 'app-bookmark-list-element',
@@ -64,6 +65,8 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
 
   private navigationSubscription: Subscription;
 
+  copyLinkButtonText = '';
+
   constructor(private router: Router,
               private playYoutubeDialog: MatDialog,
               public loginDialog: MatDialog,
@@ -81,7 +84,8 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
               private feedStore: FeedStore,
               private loginDialogHelperService: LoginDialogHelperService,
               private myBookmarksStore: MyBookmarksStore,
-              public addToHistoryService: AddToHistoryService) {
+              public addToHistoryService: AddToHistoryService,
+              private clipboard: Clipboard) {
     super(loginDialog, userDataWatchedTagsStore);
 
     // START force reload on same root - solution taken from https://github.com/angular/angular/issues/13831
@@ -280,4 +284,11 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
     }
   }
 
+  copyToClipboard(location: string) {
+    const copied = this.clipboard.copy(location);
+    if (copied) {
+      this.copyLinkButtonText = ' Copied';
+      setTimeout(() => this.copyLinkButtonText = '', 1300);
+    }
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Codever",
-  "version": "4.9.1",
+  "version": "4.10.0",
   "description": "Codever - bookmarks and snippets manager for developers & co",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",