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

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

@ -3,9 +3,15 @@ import type { ReadLaterItem } from './types';
function createReadLaterStore() {
const { subscribe, set, update } = writable<ReadLaterItem[]>([]);
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) {

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

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

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

@ -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 () => {

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

@ -7,11 +7,22 @@
let url = '';
let isLoading = false;
let error: string | null = null;
let showArchived = false;
let archivingItems: Record<string, boolean> = {};
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;
}
</script>
<div class="container">
@ -64,8 +94,21 @@
{/if}
</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
items={$readlist}
items={getFilteredItems()}
renderCard={(item) => {
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',

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

@ -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;
}
}
</script>
<div class="container">
@ -101,6 +127,25 @@
<span>Create Note</span>
</button>
</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">
<button class="button is-danger" onclick={() => item && readlist.delete(item.id)}>
<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"`
UpdatedAt time.Time `json:"updatedAt"`
ReadAt *time.Time `json:"readAt"`
ArchivedAt *time.Time `json:"archivedAt"`
}
// 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.GET("/:id", h.handleGet)
readlist.POST("/:id/read", h.handleMarkRead)
readlist.POST("/:id/archive", h.handleArchive)
readlist.POST("/:id/unarchive", h.handleUnarchive)
readlist.DELETE("/:id", h.handleDelete)
}
@ -32,7 +34,8 @@ func (h *Handler) RegisterRoutes(group *gin.RouterGroup) {
}
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 {
c.JSON(http.StatusInternalServerError, gin.H{"error": err.Error()})
return
@ -101,3 +104,23 @@ func (h *Handler) handleReset(c *gin.Context) {
}
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
func (s *Service) List() ([]ReadLaterItem, error) {
func (s *Service) List(includeArchived bool) ([]ReadLaterItem, error) {
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 items, nil
@ -74,6 +80,34 @@ func (s *Service) MarkRead(id string) error {
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
func (s *Service) Delete(id string) error {
if err := s.db.Delete(&ReadLaterItem{}, "id = ?", id).Error; err != nil {