Refactor favorites management and enhance UI components

- Updated the favorites section in the popup to include a new confirmation modal for removing favorites, improving user experience.
- Redesigned the layout of favorite items to include a copy key button and a dynamic label display.
- Refactored the handling of favorite actions to streamline the process of adding and removing favorites.
- Improved the styling of toast notifications for success and error messages to enhance visual consistency across the application.
- Removed deprecated confirmation modal code to clean up the codebase.

Author: MiguelMedeiros

src/lib/cards.ts

@@ -132,11 +132,11 @@ export function renderRecentCard(entry: RecentEntry, favLabel?: string): string
 
         <!-- Content -->
         <div class="flex-1 min-w-0">
-          <div class="flex items-center gap-2 mb-0.5">
-            <p class="text-sm font-mono text-foreground truncate" title="${entry.key}">${truncateKey(entry.key, 16, 12)}</p>
+          <p class="text-sm font-mono text-foreground truncate mb-0.5" title="${entry.key}">${truncateKey(entry.key, 16, 12)}</p>
+          <div class="flex items-center gap-2">
+            <span class="text-[10px] text-muted-foreground">${formatRelativeDate(entry.searchedAt)}</span>
             ${favBadge}
           </div>
-          <span class="text-[10px] text-muted-foreground/50">${formatRelativeDate(entry.searchedAt)}</span>
         </div>
 
         <!-- Actions -->

src/popup/index.html

@@ -57,20 +57,28 @@ <h1 class="text-sm font-bold text-foreground whitespace-nowrap" data-i18n="popup
       <div id="result-preview" class="hidden mb-3">
         <div class="card">
           <div class="flex items-center justify-between mb-2">
-            <div class="flex items-center gap-1">
+            <div class="flex items-center gap-1.5">
               <span class="text-xs text-muted-foreground" data-i18n="popup.dnsRecords">DNS Records</span>
               <button id="fav-toggle-btn" class="btn-star" title="Add to favorites">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                 </svg>
               </button>
+              <span id="popup-fav-label" class="hidden text-[10px] font-semibold text-yellow-400 bg-yellow-400/10 px-1.5 py-0.5 rounded-full cursor-pointer hover:bg-yellow-400/20 transition-colors truncate max-w-[120px]" title="Click to edit"></span>
+            </div>
+            <div class="flex items-center gap-0.5">
+              <button id="copy-key-btn" class="btn-ghost p-1 text-muted-foreground hover:text-foreground" title="Copy key">
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+              </button>
+              <button id="open-full-btn" class="btn-ghost text-xs">
+                <span data-i18n="popup.fullView">Full View</span>
+                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                </svg>
+              </button>
             </div>
-            <button id="open-full-btn" class="btn-ghost text-xs">
-              <span data-i18n="popup.fullView">Full View</span>
-              <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
-              </svg>
-            </button>
           </div>
           <div id="records-list" class="space-y-1 max-h-[200px] overflow-y-auto"></div>
           <div id="popup-relay-info" class="hidden mt-2 pt-2 border-t border-border">
@@ -147,6 +155,25 @@ <h1 class="text-sm font-bold text-foreground whitespace-nowrap" data-i18n="popup
         </div>
       </div>
 
+      <!-- Remove Favorite Confirmation Modal -->
+      <div id="fav-remove-modal" class="hidden">
+        <div class="modal-overlay" id="fav-remove-modal-overlay">
+          <div class="modal-content">
+            <h3 class="text-sm font-semibold text-foreground mb-2">Remove Favorite</h3>
+            <p id="fav-remove-msg" class="text-xs text-muted-foreground mb-4">Are you sure you want to remove this favorite?</p>
+            <div class="flex gap-2">
+              <button id="fav-remove-cancel-btn" class="btn-secondary text-xs py-1.5 px-4 flex-1" data-i18n="common.cancel">Cancel</button>
+              <button id="fav-remove-confirm-btn" class="btn-primary text-xs py-1.5 px-4 flex-1" style="color: var(--destructive); border-color: var(--destructive); background-color: oklch(from var(--destructive) l c h / 0.15);">
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+                <span data-i18n="common.remove">Remove</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <!-- Favorite Modal -->
       <div id="fav-modal" class="hidden">
         <div class="modal-overlay" id="fav-modal-overlay">
@@ -177,32 +204,6 @@ <h3 id="fav-modal-title" class="text-sm font-semibold text-foreground mb-3" data
         </div>
       </div>
 
-      <!-- Remove Favorite Confirmation Modal -->
-      <div id="confirm-remove-modal" class="hidden">
-        <div class="modal-overlay" id="confirm-remove-overlay">
-          <div class="modal-content">
-            <div class="flex items-center gap-2 mb-2">
-              <div class="text-destructive">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              </div>
-              <h3 class="text-sm font-semibold text-foreground" data-i18n="favorites.removeFavorite">Remove Favorite</h3>
-            </div>
-            <p id="confirm-remove-msg" class="text-xs text-muted-foreground mb-4" data-i18n="favorites.removeFavoriteMsg">Are you sure you want to remove this favorite?</p>
-            <div class="flex gap-2">
-              <button id="confirm-remove-cancel" class="btn-secondary text-xs py-1.5 px-4 flex-1" data-i18n="common.cancel">Cancel</button>
-              <button id="confirm-remove-btn" class="text-xs py-1.5 px-4 flex-1 inline-flex items-center justify-center gap-1.5 rounded-lg font-medium transition-all cursor-pointer bg-destructive text-destructive-foreground hover:brightness-110">
-                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                </svg>
-                <span data-i18n="common.remove">Remove</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
     </div>
 
     <script type="module" src="./main.ts"></script>