bookmarks.component.html raw

   1  <!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
   2  <!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
   3  <div class="sam-text-header">
   4    <div class="header-buttons">
   5      <button class="header-btn" title="Lock" (click)="onClickLock()">
   6        <span class="emoji">🔒</span>
   7      </button>
   8      @if (devMode) {
   9        <button class="header-btn" title="Test Permission Prompt" (click)="onTestPrompt()">
  10          <span class="emoji">✨</span>
  11        </button>
  12      }
  13    </div>
  14    <span>Bookmarks</span>
  15    <button class="add-btn" title="Bookmark This Page" (click)="onBookmarkThisPage()">
  16      <span class="emoji">➕</span>
  17    </button>
  18  </div>
  19  
  20  <div class="bookmarks-container">
  21    @if (isLoading) {
  22      <div class="loading-state">Loading...</div>
  23    } @else if (bookmarks.length === 0) {
  24      <div class="empty-state">
  25        <span class="sam-text-muted">
  26          No bookmarks yet. Click "Bookmark This Page" to add the current page.
  27        </span>
  28      </div>
  29    } @else {
  30      @for (bookmark of bookmarks; track bookmark.id) {
  31        <div class="bookmark-item" (click)="openBookmark(bookmark)">
  32          <div class="bookmark-info">
  33            <span class="bookmark-title">{{ bookmark.title }}</span>
  34            <span class="bookmark-url">{{ getDomain(bookmark.url) }}</span>
  35          </div>
  36          <button
  37            class="remove-btn"
  38            title="Remove bookmark"
  39            (click)="onRemoveBookmark(bookmark); $event.stopPropagation()"
  40          >
  41            <span class="emoji">✕</span>
  42          </button>
  43        </div>
  44      }
  45    }
  46  </div>
  47