From c11301e0c0d92b1722d9504654f774478a1da849 Mon Sep 17 00:00:00 2001 From: Nicola Zangrandi Date: Fri, 28 Feb 2025 12:53:43 +0100 Subject: [PATCH] feat(readlist): added link archiving functionality --- frontend/src/app.html | 140 +++++++++--------- frontend/src/lib/readlist.ts | 46 +++++- frontend/src/lib/types.ts | 1 + frontend/src/routes/+page.svelte | 6 +- frontend/src/routes/readlist/+page.svelte | 52 ++++++- .../src/routes/readlist/[id]/+page.svelte | 47 +++++- frontend/static/css/fontawesome.min.css | 9 ++ readlist/model.go | 1 + readlist/routes.go | 25 +++- readlist/service.go | 38 ++++- 10 files changed, 284 insertions(+), 81 deletions(-) create mode 100644 frontend/static/css/fontawesome.min.css diff --git a/frontend/src/app.html b/frontend/src/app.html index 05b6c02..7a80319 100644 --- a/frontend/src/app.html +++ b/frontend/src/app.html @@ -1,75 +1,79 @@ - - - - - - + %sveltekit.head% + - body.dark-mode .input, - body.dark-mode .textarea { - --bulma-input-background-color: #2b2b2b; - --bulma-input-color: #e6e6e6; - --bulma-input-border-color: #4a4a4a; - } + +
%sveltekit.body%
+ - body.dark-mode .box { - --bulma-box-background-color: #2b2b2b; - --bulma-box-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3); - } - - body.dark-mode .card { - --bulma-card-background-color: #2b2b2b; - --bulma-card-shadow: 0 0.5em 1em -0.125em rgba(0, 0, 0, 0.3); - } - - body.dark-mode .notification.is-info { - --bulma-notification-background-color: #1d4ed8; - --bulma-notification-color: #e6e6e6; - } - - body.dark-mode .notification.is-danger { - --bulma-notification-background-color: #dc2626; - --bulma-notification-color: #e6e6e6; - } - - /* Responsive adjustments */ - @media (max-width: 768px) { - .section { - padding: 1.5rem 1rem; - } - - .textarea { - min-height: 200px; - } - } - - %sveltekit.head% - - - -
%sveltekit.body%
- - + \ No newline at end of file diff --git a/frontend/src/lib/readlist.ts b/frontend/src/lib/readlist.ts index 4bfd0da..fa72dd5 100644 --- a/frontend/src/lib/readlist.ts +++ b/frontend/src/lib/readlist.ts @@ -3,9 +3,15 @@ import type { ReadLaterItem } from './types'; function createReadLaterStore() { const { subscribe, set, update } = writable([]); + let showArchived = false; return { subscribe, + showArchived, + toggleShowArchived: () => { + showArchived = !showArchived; + return showArchived; + }, add: async (url: string) => { const response = await fetch('/api/readlist', { method: 'POST', @@ -26,7 +32,8 @@ function createReadLaterStore() { createdAt: new Date(item.createdAt), updatedAt: new Date(item.updatedAt), savedAt: new Date(item.savedAt), - readAt: item.readAt ? new Date(item.readAt) : undefined + readAt: item.readAt ? new Date(item.readAt) : undefined, + archivedAt: item.archivedAt ? new Date(item.archivedAt) : undefined }, ...items ]); @@ -47,6 +54,36 @@ function createReadLaterStore() { ) ); }, + archive: async (id: string) => { + const response = await fetch(`/api/readlist/${id}/archive`, { + method: 'POST' + }); + + if (!response.ok) { + throw new Error('Failed to archive item'); + } + + update((items) => + items.map((item) => + item.id === id ? { ...item, archivedAt: new Date(), updatedAt: new Date() } : item + ) + ); + }, + unarchive: async (id: string) => { + const response = await fetch(`/api/readlist/${id}/unarchive`, { + method: 'POST' + }); + + if (!response.ok) { + throw new Error('Failed to unarchive item'); + } + + update((items) => + items.map((item) => + item.id === id ? { ...item, archivedAt: undefined, updatedAt: new Date() } : item + ) + ); + }, delete: async (id: string) => { const response = await fetch(`/api/readlist/${id}`, { method: 'DELETE' @@ -58,9 +95,9 @@ function createReadLaterStore() { update((items) => items.filter((item) => item.id !== id)); }, - load: async () => { + load: async (includeArchived = false) => { try { - const response = await fetch('/api/readlist'); + const response = await fetch(`/api/readlist?includeArchived=${includeArchived}`); if (!response.ok) { throw new Error('Failed to load read later items'); } @@ -76,7 +113,8 @@ function createReadLaterStore() { ...item, createdAt: new Date(item.createdAt), updatedAt: new Date(item.updatedAt), - readAt: item.readAt ? new Date(item.readAt) : undefined + readAt: item.readAt ? new Date(item.readAt) : undefined, + archivedAt: item.archivedAt ? new Date(item.archivedAt) : undefined })) ); } catch (error) { diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts index f60b2a0..cb7feff 100644 --- a/frontend/src/lib/types.ts +++ b/frontend/src/lib/types.ts @@ -46,6 +46,7 @@ export interface ReadLaterItem { createdAt: Date; updatedAt: Date; readAt?: Date; + archivedAt?: Date; } export interface CardAction { diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index ad17b4a..5deb53e 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -21,17 +21,17 @@ timestamp: new Date(item.createdAt), actions: [ { - icon: 'eye', + icon: 'fas fa-eye', label: 'View', href: `/notes/${item.id}` }, { - icon: 'edit', + icon: 'fas fa-edit', label: 'Edit', href: `/notes/${item.id}?edit=true` }, { - icon: 'trash', + icon: 'fas fa-trash', label: 'Delete', isDangerous: true, onClick: async () => { diff --git a/frontend/src/routes/readlist/+page.svelte b/frontend/src/routes/readlist/+page.svelte index 32b1985..2dc05a9 100644 --- a/frontend/src/routes/readlist/+page.svelte +++ b/frontend/src/routes/readlist/+page.svelte @@ -7,11 +7,22 @@ let url = ''; let isLoading = false; let error: string | null = null; + let showArchived = false; + let archivingItems: Record = {}; onMount(() => { - readlist.load(); + loadItems(); }); + async function loadItems() { + await readlist.load(showArchived); + } + + async function toggleArchived() { + showArchived = !showArchived; + await loadItems(); + } + async function handleSubmit() { if (!url) return; @@ -31,6 +42,25 @@ function handleDelete(item: ReadLaterItem) { readlist.delete(item.id); } + + async function handleToggleArchive(item: ReadLaterItem) { + archivingItems[item.id] = true; + try { + if (item.archivedAt) { + await readlist.unarchive(item.id); + } else { + await readlist.archive(item.id); + } + } catch (e) { + error = e instanceof Error ? e.message : 'Failed to update archive status'; + } finally { + archivingItems[item.id] = false; + } + } + + function getFilteredItems() { + return $readlist; + }
@@ -64,8 +94,21 @@ {/if} +
+
+
+ +
+
+
+ { const readLaterItem = item as ReadLaterItem; return { @@ -84,6 +127,11 @@ href: readLaterItem.url, target: '_blank' }, + { + icon: readLaterItem.archivedAt ? 'fas fa-box-open' : 'fas fa-archive', + label: readLaterItem.archivedAt ? 'Unarchive' : 'Archive', + onClick: () => handleToggleArchive(readLaterItem) + }, { icon: 'fas fa-trash', label: 'Delete', diff --git a/frontend/src/routes/readlist/[id]/+page.svelte b/frontend/src/routes/readlist/[id]/+page.svelte index f9b6d70..8e58d19 100644 --- a/frontend/src/routes/readlist/[id]/+page.svelte +++ b/frontend/src/routes/readlist/[id]/+page.svelte @@ -8,6 +8,7 @@ let id = data.id; let item: ReadLaterItem | null = null; let error: string | null = null; + let isArchiving = false; onMount(async () => { try { @@ -21,7 +22,8 @@ ...data, createdAt: new Date(data.createdAt), updatedAt: new Date(data.updatedAt), - readAt: data.readAt ? new Date(data.readAt) : undefined + readAt: data.readAt ? new Date(data.readAt) : undefined, + archivedAt: data.archivedAt ? new Date(data.archivedAt) : undefined }; item = newItem; @@ -47,6 +49,30 @@ goto(`/notes/new?${params.toString()}`); } + + async function toggleArchive() { + if (!item) return; + + isArchiving = true; + + try { + if (item.archivedAt) { + await readlist.unarchive(item.id); + if (item) { + item = { ...item, archivedAt: undefined }; + } + } else { + await readlist.archive(item.id); + if (item) { + item = { ...item, archivedAt: new Date() }; + } + } + } catch (e) { + error = e instanceof Error ? e.message : 'Failed to update archive status'; + } finally { + isArchiving = false; + } + }
@@ -101,6 +127,25 @@ Create Note
+
+ +