✨ Make favorites work

pkg/server/static/js/favorites.js

@@ -1,36 +1,70 @@
-// static/js/favorites.js
-let favorites = [];
+// Utility functions for managing favorites
+function initFavorites() {
+    if (!localStorage.getItem('favorites')) {
+        localStorage.setItem('favorites', JSON.stringify([]));
+    }
+}
 
-function addToFavorites(promptName) {
-    if (!favorites.includes(promptName)) {
-        favorites.push(promptName);
+function getFavorites() {
+    return JSON.parse(localStorage.getItem('favorites') || '[]');
+}
+
+function copyToClipboard(text) {
+    fetch("/prompts/" + text)
+        .then(response => response.text())
+        .then(content => {
+            navigator.clipboard.writeText(content).then(() => {
+                const toastEl = document.getElementById('copyToast');
+                const toast = new bootstrap.Toast(toastEl);
+                toast.show();
+            });
+        });
+}
+
+function addToFavorites(name) {
+    const favorites = getFavorites();
+    if (!favorites.includes(name)) {
+        favorites.push(name);
+        localStorage.setItem('favorites', JSON.stringify(favorites));
         renderFavorites();
+
+        const toastEl = document.getElementById('favToast');
+        const toast = new bootstrap.Toast(toastEl);
+        toast.show();
     }
 }
 
-function removeFromFavorites(promptName) {
-    favorites = favorites.filter(fav => fav !== promptName);
+function removeFromFavorites(name) {
+    const favorites = getFavorites();
+    const newFavorites = favorites.filter(fav => fav !== name);
+    localStorage.setItem('favorites', JSON.stringify(newFavorites));
     renderFavorites();
 }
 
 function renderFavorites() {
+    const favorites = getFavorites();
     const favoritesList = document.getElementById('favorites-list');
-    favoritesList.innerHTML = '';
-    favorites.forEach(fav => {
-        const li = document.createElement('li');
-        li.innerHTML = `
-            <a href="/prompts/${fav}">${fav}</a>
-            <span class="clipboard-icon" onclick="copyToClipboard('/prompts/${fav}')">📋</span>
-            <span class="remove-icon" onclick="removeFromFavorites('${fav}')">-</span>
-        `;
-        favoritesList.appendChild(li);
-    });
+    if (!favoritesList) return;
+
+    favoritesList.innerHTML = favorites.length === 0 
+        ? '<p class="text-muted mb-0">No favorites yet</p>'
+        : favorites.map(fav => `
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <a href="/prompts/${fav}" class="text-decoration-none">${fav}</a>
+                <div>
+                    <button class="btn btn-sm btn-outline-secondary me-2" onclick="copyToClipboard('${fav}')">
+                        <i class="bi bi-clipboard"></i>
+                    </button>
+                    <button class="btn btn-sm btn-outline-danger" onclick="removeFromFavorites('${fav}')">
+                        <i class="bi bi-x-lg"></i>
+                    </button>
+                </div>
+            </div>
+        `).join('');
 }
 
-function copyToClipboard(text) {
-    navigator.clipboard.writeText(text).then(function() {
-        alert('Copied to clipboard');
-    }, function(err) {
-        alert('Failed to copy: ', err);
-    });
-}
+// Initialize favorites when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    initFavorites();
+    renderFavorites();
+});

pkg/server/templates/pages/index.templ

@@ -6,23 +6,16 @@ import (
 )
 
 script copyToClipboard(text string) {
-	fetch("/prompts/" + text)
-		.then(response => response.text())
-		.then(content => {
-			navigator.clipboard.writeText(content).then(() => {
-				const toastEl = document.getElementById('copyToast');
-				const toast = new bootstrap.Toast(toastEl);
-				toast.show();
-			});
-		});
+    copyToClipboard(text)
 }
 
 script addToFavorites(name string) {
-	// TODO: Implement favorites functionality
+    addToFavorites(name)
 }
 
 templ Index(repositories []string, repos map[string]*pkg.Repository) {
 	@templates.Layout() {
+		<script src="/static/js/favorites.js"></script>
 		<div class="toast-container position-fixed bottom-0 end-0 p-3">
 			<div id="copyToast" class="toast align-items-center text-bg-success" role="alert" aria-live="assertive" aria-atomic="true">
 				<div class="d-flex">
@@ -32,6 +25,14 @@ templ Index(repositories []string, repos map[string]*pkg.Repository) {
 					<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
 				</div>
 			</div>
+			<div id="favToast" class="toast align-items-center text-bg-primary" role="alert" aria-live="assertive" aria-atomic="true">
+				<div class="d-flex">
+					<div class="toast-body">
+						<i class="bi bi-star-fill me-2"></i>Added to favorites!
+					</div>
+					<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+				</div>
+			</div>
 		</div>
 		<div class="row g-4">
 			<div class="col-12 col-lg-8">
@@ -88,11 +89,19 @@ templ Index(repositories []string, repos map[string]*pkg.Repository) {
 				</div>
 			</div>
 			<div class="col-12 col-lg-4">
-				<div id="prompt-content" class="card">
+				<div id="prompt-content" class="card mb-4">
 					<div class="card-body">
 						<p class="text-muted">Select a prompt to view its details</p>
 					</div>
 				</div>
+				<div class="card">
+					<div class="card-header d-flex justify-content-between align-items-center">
+						<h5 class="mb-0">Favorites</h5>
+					</div>
+					<div class="card-body" id="favorites-list">
+						<p class="text-muted mb-0">No favorites yet</p>
+					</div>
+				</div>
 			</div>
 		</div>
 	}