wasp/quicknotes
1
0
Fork 0
Code Issues 1 Pull requests 1 Releases Activity Actions

feat(readlist): added link archiving functionality

Browse source
This commit is contained in:
Nicola Zangrandi 2025-02-28 12:53:43 +01:00
parent b57d4f45fd
commit c11301e0c0
Signed by: wasp
GPG key ID: 43C1470D890F23ED
10 changed files with 284 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

140
frontend/src/app.html
View file

@ -1,75 +1,79 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" /> <head>
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <meta charset="utf-8" />
<meta <link rel="icon" href="%sveltekit.assets%/favicon.png" />
name="viewport" <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" <link rel="stylesheet" href="/css/bulma.min.css" />
/> <!-- Font Awesome -->
<link rel="stylesheet" href="/css/bulma.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
<style> integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
/* Dark mode theme using Bulma's CSS variables */ crossorigin="anonymous" referrerpolicy="no-referrer" />
body.dark-mode {
--bulma-scheme-main: #1a1a1a; <!-- Dark mode theme using Bulma's CSS variables -->
--bulma-scheme-main-bis: #242424; <style>
--bulma-scheme-main-ter: #2f2f2f; body.dark-mode {
--bulma-background: #1a1a1a; --bulma-scheme-main: #1a1a1a;
--bulma-text: #e6e6e6; --bulma-scheme-main-bis: #242424;
--bulma-text-strong: #ffffff; --bulma-scheme-main-ter: #2f2f2f;
--bulma-border: #4a4a4a; --bulma-background: #1a1a1a;
--bulma-link: #3273dc; --bulma-text: #e6e6e6;
--bulma-link-hover: #5c93e6; --bulma-text-strong: #ffffff;
--bulma-border: #4a4a4a;
--bulma-link: #3273dc;
--bulma-link-hover: #5c93e6;
}
body.dark-mode .button.is-light {
--bulma-button-background-color: #363636;
--bulma-button-color: #e6e6e6;
--bulma-button-border-color: transparent;
}
body.dark-mode .input,
body.dark-mode .textarea {
--bulma-input-background-color: #2b2b2b;
--bulma-input-color: #e6e6e6;
--bulma-input-border-color: #4a4a4a;
}
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;
} }
body.dark-mode .button.is-light { .textarea {
--bulma-button-background-color: #363636; min-height: 200px;
--bulma-button-color: #e6e6e6;
--bulma-button-border-color: transparent;
} }
}
</style>
%sveltekit.head%
</head>
body.dark-mode .input, <body data-sveltekit-preload-data="hover">
body.dark-mode .textarea { <div style="display: contents">%sveltekit.body%</div>
--bulma-input-background-color: #2b2b2b; </body>
--bulma-input-color: #e6e6e6;
--bulma-input-border-color: #4a4a4a;
}
body.dark-mode .box { </html>
--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;
}
}
</style>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

46
frontend/src/lib/readlist.ts
View file

@ -3,9 +3,15 @@ import type { ReadLaterItem } from './types';
function createReadLaterStore() { function createReadLaterStore() {
const { subscribe, set, update } = writable<ReadLaterItem[]>([]); const { subscribe, set, update } = writable<ReadLaterItem[]>([]);
let showArchived = false;
return { return {
subscribe, subscribe,
showArchived,
toggleShowArchived: () => {
showArchived = !showArchived;
return showArchived;
},
add: async (url: string) => { add: async (url: string) => {
const response = await fetch('/api/readlist', { const response = await fetch('/api/readlist', {
method: 'POST', method: 'POST',
@ -26,7 +32,8 @@ function createReadLaterStore() {
createdAt: new Date(item.createdAt), createdAt: new Date(item.createdAt),
updatedAt: new Date(item.updatedAt), updatedAt: new Date(item.updatedAt),
savedAt: new Date(item.savedAt), 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 ...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) => { delete: async (id: string) => {
const response = await fetch(`/api/readlist/${id}`, { const response = await fetch(`/api/readlist/${id}`, {
method: 'DELETE' method: 'DELETE'
@ -58,9 +95,9 @@ function createReadLaterStore() {
update((items) => items.filter((item) => item.id !== id)); update((items) => items.filter((item) => item.id !== id));
}, },
load: async () => { load: async (includeArchived = false) => {
try { try {
const response = await fetch('/api/readlist'); const response = await fetch(`/api/readlist?includeArchived=${includeArchived}`);
if (!response.ok) { if (!response.ok) {
throw new Error('Failed to load read later items'); throw new Error('Failed to load read later items');
} }
@ -76,7 +113,8 @@ function createReadLaterStore() {
...item, ...item,
createdAt: new Date(item.createdAt), createdAt: new Date(item.createdAt),
updatedAt: new Date(item.updatedAt), 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) { } catch (error) {

1
frontend/src/lib/types.ts
View file

@ -46,6 +46,7 @@ export interface ReadLaterItem {
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
readAt?: Date; readAt?: Date;
archivedAt?: Date;
} }
export interface CardAction { export interface CardAction {

6
frontend/src/routes/+page.svelte
View file

@ -21,17 +21,17 @@
timestamp: new Date(item.createdAt), timestamp: new Date(item.createdAt),
actions: [ actions: [
{ {
icon: 'eye', icon: 'fas fa-eye',
label: 'View', label: 'View',
href: `/notes/${item.id}` href: `/notes/${item.id}`
}, },
{ {
icon: 'edit', icon: 'fas fa-edit',
label: 'Edit', label: 'Edit',
href: `/notes/${item.id}?edit=true` href: `/notes/${item.id}?edit=true`
}, },
{ {
icon: 'trash', icon: 'fas fa-trash',
label: 'Delete', label: 'Delete',
isDangerous: true, isDangerous: true,
onClick: async () => { onClick: async () => {

52
frontend/src/routes/readlist/+page.svelte
View file

@ -7,11 +7,22 @@
let url = ''; let url = '';
let isLoading = false; let isLoading = false;
let error: string | null = null; let error: string | null = null;
let showArchived = false;
let archivingItems: Record<string, boolean> = {};
onMount(() => { onMount(() => {
readlist.load(); loadItems();
}); });
async function loadItems() {
await readlist.load(showArchived);
}
async function toggleArchived() {
showArchived = !showArchived;
await loadItems();
}
async function handleSubmit() { async function handleSubmit() {
if (!url) return; if (!url) return;
@ -31,6 +42,25 @@
function handleDelete(item: ReadLaterItem) { function handleDelete(item: ReadLaterItem) {
readlist.delete(item.id); 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;
}
</script> </script>
<div class="container"> <div class="container">
@ -64,8 +94,21 @@
{/if} {/if}
</form> </form>
<div class="level mb-4">
<div class="level-left">
<div class="level-item">
<button class="button is-small" onclick={toggleArchived}>
<span class="icon">
<i class="fas fa-archive"></i>
</span>
<span>{showArchived ? 'Hide Archived' : 'Show Archived'}</span>
</button>
</div>
</div>
</div>
<CardList <CardList
items={$readlist} items={getFilteredItems()}
renderCard={(item) => { renderCard={(item) => {
const readLaterItem = item as ReadLaterItem; const readLaterItem = item as ReadLaterItem;
return { return {
@ -84,6 +127,11 @@
href: readLaterItem.url, href: readLaterItem.url,
target: '_blank' target: '_blank'
}, },
{
icon: readLaterItem.archivedAt ? 'fas fa-box-open' : 'fas fa-archive',
label: readLaterItem.archivedAt ? 'Unarchive' : 'Archive',
onClick: () => handleToggleArchive(readLaterItem)
},
{ {
icon: 'fas fa-trash', icon: 'fas fa-trash',
label: 'Delete', label: 'Delete',

47
frontend/src/routes/readlist/[id]/+page.svelte
View file

@ -8,6 +8,7 @@
let id = data.id; let id = data.id;
let item: ReadLaterItem | null = null; let item: ReadLaterItem | null = null;
let error: string | null = null; let error: string | null = null;
let isArchiving = false;
onMount(async () => { onMount(async () => {
try { try {
@ -21,7 +22,8 @@
...data, ...data,
createdAt: new Date(data.createdAt), createdAt: new Date(data.createdAt),
updatedAt: new Date(data.updatedAt), 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; item = newItem;
@ -47,6 +49,30 @@
goto(`/notes/new?${params.toString()}`); 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;
}
}
</script> </script>
<div class="container"> <div class="container">
@ -101,6 +127,25 @@
<span>Create Note</span> <span>Create Note</span>
</button> </button>
</div> </div>
<div class="level-item">
<button
class="button"
class:is-warning={!item?.archivedAt}
class:is-success={item?.archivedAt}
onclick={toggleArchive}
disabled={isArchiving}
>
<span class="icon">
<i
class="fas"
class:fa-archive={!item?.archivedAt}
class:fa-box-open={item?.archivedAt}
class:fa-spin={isArchiving}
></i>
</span>
<span>{item?.archivedAt ? 'Unarchive' : 'Archive'}</span>
</button>
</div>
<div class="level-item"> <div class="level-item">
<button class="button is-danger" onclick={() => item && readlist.delete(item.id)}> <button class="button is-danger" onclick={() => item && readlist.delete(item.id)}>
<span class="icon"> <span class="icon">

9
frontend/static/css/fontawesome.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

1
readlist/model.go
View file

@ -17,6 +17,7 @@ type ReadLaterItem struct {
CreatedAt time.Time `json:"createdAt"` CreatedAt time.Time `json:"createdAt"`
UpdatedAt time.Time `json:"updatedAt"` UpdatedAt time.Time `json:"updatedAt"`
ReadAt *time.Time `json:"readAt"` ReadAt *time.Time `json:"readAt"`
ArchivedAt *time.Time `json:"archivedAt"`
} }
// ParseURL fetches the URL and extracts readable content // ParseURL fetches the URL and extracts readable content

25
readlist/routes.go
View file

@ -24,6 +24,8 @@ func (h *Handler) RegisterRoutes(group *gin.RouterGroup) {
readlist.POST("", h.handleCreate) readlist.POST("", h.handleCreate)
readlist.GET("/:id", h.handleGet) readlist.GET("/:id", h.handleGet)
readlist.POST("/:id/read", h.handleMarkRead) readlist.POST("/:id/read", h.handleMarkRead)
readlist.POST("/:id/archive", h.handleArchive)
readlist.POST("/:id/unarchive", h.handleUnarchive)
readlist.DELETE("/:id", h.handleDelete) readlist.DELETE("/:id", h.handleDelete)
} }
@ -32,7 +34,8 @@ func (h *Handler) RegisterRoutes(group *gin.RouterGroup) {
} }
func (h *Handler) handleList(c *gin.Context) { func (h *Handler) handleList(c *gin.Context) {
items, err := h.service.List() includeArchived := c.Query("includeArchived") == "true"
items, err := h.service.List(includeArchived)
if err != nil { if err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()}) c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
return return
@ -101,3 +104,23 @@ func (h *Handler) handleReset(c *gin.Context) {
} }
c.Status(http.StatusOK) c.Status(http.StatusOK)
} }
func (h *Handler) handleArchive(c *gin.Context) {
id := c.Param("id")
if err := h.service.Archive(id); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
return
}
c.Status(http.StatusOK)
}
func (h *Handler) handleUnarchive(c *gin.Context) {
id := c.Param("id")
if err := h.service.Unarchive(id); err != nil {
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
return
}
c.Status(http.StatusOK)
}

38
readlist/service.go
View file

@ -52,9 +52,15 @@ func (s *Service) Get(id string) (*ReadLaterItem, error) {
} }
// List retrieves all read later items // List retrieves all read later items
func (s *Service) List() ([]ReadLaterItem, error) { func (s *Service) List(includeArchived bool) ([]ReadLaterItem, error) {
var items []ReadLaterItem var items []ReadLaterItem
if err := s.db.Order("created_at desc").Find(&items).Error; err != nil { query := s.db.Order("created_at desc")
if !includeArchived {
query = query.Where("archived_at IS NULL")
}
if err := query.Find(&items).Error; err != nil {
return nil, fmt.Errorf("failed to list read later items: %w", err) return nil, fmt.Errorf("failed to list read later items: %w", err)
} }
return items, nil return items, nil
@ -74,6 +80,34 @@ func (s *Service) MarkRead(id string) error {
return nil return nil
} }
// Archive marks an item as archived
func (s *Service) Archive(id string) error {
now := time.Now()
if err := s.db.Model(&ReadLaterItem{}).
Where("id = ?", id).
Updates(map[string]interface{}{
"archived_at": &now,
"updated_at": now,
}).Error; err != nil {
return fmt.Errorf("failed to archive item: %w", err)
}
return nil
}
// Unarchive removes the archived status from an item
func (s *Service) Unarchive(id string) error {
now := time.Now()
if err := s.db.Model(&ReadLaterItem{}).
Where("id = ?", id).
Updates(map[string]interface{}{
"archived_at": nil,
"updated_at": now,
}).Error; err != nil {
return fmt.Errorf("failed to unarchive item: %w", err)
}
return nil
}
// Delete removes a read later item // Delete removes a read later item
func (s *Service) Delete(id string) error { func (s *Service) Delete(id string) error {
if err := s.db.Delete(&ReadLaterItem{}, "id = ?", id).Error; err != nil { if err := s.db.Delete(&ReadLaterItem{}, "id = ?", id).Error; err != nil {