feat: add bookmark

README.md

@@ -55,7 +55,6 @@ cd build
 
 ## ToDo
 
-- Bookmark
 - PWA
 
 ## Credits

api/api.go

@@ -32,6 +32,9 @@ func Run() {
 	if conf.Debug {
 		r.Debug = true
 		r.Use(middleware.BodyDump(func(c echo.Context, reqBody, resBody []byte) {
+			if len(resBody) > 500 {
+				resBody = append(resBody[:500], []byte("...")...)
+			}
 			r.Logger.Debugf("req: %s\nresp: %s\n", reqBody, resBody)
 		}))
 	}

frontend/src/lib/api/item.ts

@@ -7,6 +7,7 @@ type listOptions = {
 	keyword?: string;
 	feed_id?: number;
 	unread?: boolean;
+	bookmark?: boolean;
 };
 
 export async function listItems(options?: listOptions) {
@@ -21,10 +22,14 @@ export async function getItem(id: number) {
 	return api.get('items/' + id).json<Item>();
 }
 
-export async function updateItem(id: number, unread: boolean) {
-	return api.patch('items/' + id, {
-		json: {
-			unread: unread
+export async function updateItem(
+	id: number,
+	data: {
+		unread?: boolean;
+		bookmark?: boolean;
 	}
+) {
+	return api.patch('items/' + id, {
+		json: data
 	});
 }

frontend/src/lib/api/model.ts

@@ -20,5 +20,6 @@ export type Item = {
 	content: string;
 	pub_date: Date;
 	unread: boolean;
+	bookmark: boolean;
 	feed: { id: number; name: string };
 };

frontend/src/lib/components/ItemAction.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-	import { CheckIcon, ExternalLinkIcon, UndoIcon } from 'lucide-svelte';
+	import {
+		BookmarkIcon,
+		BookmarkXIcon,
+		CheckIcon,
+		ExternalLinkIcon,
+		UndoIcon
+	} from 'lucide-svelte';
 	import type { ComponentType } from 'svelte';
 	import type { Icon } from 'lucide-svelte';
 	import * as Tooltip from '$lib/components/ui/tooltip';
@@ -12,48 +18,54 @@
 		id: number;
 		link: string;
 		unread: boolean;
+		bookmark: boolean;
 	};
 
 	function getActions(
-		unread: boolean
+		unread: boolean,
+		bookmark: boolean
 	): { icon: ComponentType<Icon>; tooltip: string; handler: (e: Event) => void }[] {
-		const list = [
-			// { icon: BookmarkIcon, tooltip: 'Save to Bookmark', handler: handleSaveToBookmark },
-			{ icon: ExternalLinkIcon, tooltip: 'Visit Original Link', handler: handleExternalLink }
-		];
+		const visitOriginalAction = {
+			icon: ExternalLinkIcon,
+			tooltip: 'Visit Original Link',
+			handler: handleExternalLink
+		};
 		const unreadAction = unread
-			? { icon: CheckIcon, tooltip: 'Mark as Read', handler: handleMarkAsRead }
-			: { icon: UndoIcon, tooltip: 'Mark as Unread', handler: handleMarkAsUnread };
-		list.unshift(unreadAction);
-		return list;
-	}
-	$: actions = getActions(data.unread);
+			? { icon: CheckIcon, tooltip: 'Mark as Read', handler: handleToggleUnread }
+			: { icon: UndoIcon, tooltip: 'Mark as Unread', handler: handleToggleUnread };
+		const bookmarkAction = bookmark
+			? { icon: BookmarkXIcon, tooltip: 'Cancel Bookmark', handler: handleToggleBookmark }
+			: { icon: BookmarkIcon, tooltip: 'Add to Bookmark', handler: handleToggleBookmark };
 
-	async function handleMarkAsRead(e: Event) {
+		return [unreadAction, bookmarkAction, visitOriginalAction];
+	}
+	$: actions = getActions(data.unread, data.bookmark);
+
+	async function handleToggleUnread(e: Event) {
 		e.preventDefault();
 		try {
-			await updateItem(data.id, false);
+			await updateItem(data.id, { unread: !data.unread });
+			invalidateAll();
 		} catch (e) {
 			toast.error((e as Error).message);
 		}
-		invalidateAll();
-	}
-
-	async function handleMarkAsUnread(e: Event) {
-		e.preventDefault();
-		try {
-			await updateItem(data.id, true);
-		} catch (e) {
-			toast.error((e as Error).message);
-		}
-		invalidateAll();
 	}
 
 	function handleExternalLink(e: Event) {
 		e.preventDefault();
-		handleMarkAsRead(e);
+		handleToggleUnread(e);
 		window.open(data.link, '_target');
 	}
+
+	async function handleToggleBookmark(e: Event) {
+		e.preventDefault();
+		try {
+			await updateItem(data.id, { bookmark: !data.bookmark });
+			invalidateAll();
+		} catch (e) {
+			toast.error((e as Error).message);
+		}
+	}
 </script>
 
 <div>

frontend/src/lib/components/ItemList.svelte

@@ -60,7 +60,9 @@
 					</div>
 
 					<div class="w-full hidden group-hover:inline-flex justify-end">
-						<ItemAction data={{ id: item.id, link: item.link, unread: item.unread }} />
+						<ItemAction
+							data={{ id: item.id, link: item.link, unread: item.unread, bookmark: item.bookmark }}
+						/>
 					</div>
 				</div>
 			</Button>

frontend/src/lib/components/Navbar.svelte

@@ -9,6 +9,7 @@
 	}
 	let links: link[] = [
 		{ label: 'Unread', url: '/' },
+		{ label: 'Bookmark', url: '/bookmarks' },
 		{ label: 'All', url: '/all' },
 		{ label: 'Feeds', url: '/feeds' }
 	];
@@ -31,7 +32,7 @@
 
 <nav class="block w-full sm:mt-3 mb-6">
 	<div
-		class="flex justify-around items-center w-full sm:max-w-sm mx-auto px-6 py-4 sm:rounded-2xl shadow-md sm:border bg-background"
+		class="flex justify-around items-center w-full sm:max-w-[600px] mx-auto px-6 py-4 sm:rounded-2xl shadow-md sm:border bg-background"
 	>
 		<div class="flex items-center">
 			<img src="/favicon.png" alt="logo" class="w-10" />

frontend/src/routes/bookmarks/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import ItemList from '$lib/components/ItemList.svelte';
+	import PageHead from '$lib/components/PageHead.svelte';
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>Bookmark</title>
+</svelte:head>
+
+<PageHead title="Bookmark" />
+<ItemList data={data.items} />

frontend/src/routes/bookmarks/+page.ts

@@ -0,0 +1,6 @@
+import { listItems } from '$lib/api/item';
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = () => {
+	return listItems({ bookmark: true });
+};

frontend/src/routes/items/+page.svelte

@@ -57,7 +57,7 @@
 <p class="text-sm text-muted-foreground">
 	{data.feed.name} / {moment(data.pub_date).format('lll')}
 </p>
-<ItemAction data={{ id: data.id, link: data.link, unread: data.unread }} />
+<ItemAction data={{ id: data.id, link: data.link, unread: data.unread, bookmark: data.bookmark }} />
 <article class="mt-6 prose dark:prose-invert prose-lg max-w-full">
 	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 	{@html data.content}

model/item.go

@@ -17,7 +17,8 @@ type Item struct {
 	Link     *string    `gorm:"link,index"`
 	Content  *string    `gorm:"content"`
 	PubDate  *time.Time `gorm:"pub_date"`
-	Unread  *bool      `gorm:"unread;default:true"`
+	Unread   *bool      `gorm:"unread;default:true;index"`
+	Bookmark *bool      `gorm:"bookmark;default:false;index"`
 
 	FeedID uint `gorm:"feed_id;index"`
 	Feed   Feed

repo/item.go

@@ -21,6 +21,7 @@ type ItemFilter struct {
 	Keyword  *string
 	FeedID   *uint
 	Unread   *bool
+	Bookmark *bool
 }
 
 func (i Item) List(filter ItemFilter, offset, count *int) ([]*model.Item, int, error) {
@@ -35,7 +36,10 @@ func (i Item) List(filter ItemFilter, offset, count *int) ([]*model.Item, int, e
 		db = db.Where("feed_id = ?", *filter.FeedID)
 	}
 	if filter.Unread != nil {
-		db = db.Where("unread = true")
+		db = db.Where("unread = ?", *filter.Unread)
+	}
+	if filter.Bookmark != nil {
+		db = db.Where("bookmark = ?", *filter.Bookmark)
 	}
 	err := db.Count(&total).Error
 	if err != nil {

server/item.go

@@ -29,6 +29,7 @@ func (i Item) List(req *ReqItemList) (*RespItemList, error) {
 		Keyword:  req.Keyword,
 		FeedID:   req.FeedID,
 		Unread:   req.Unread,
+		Bookmark: req.Bookmark,
 	}
 	data, total, err := i.repo.List(filter, req.Offset, req.Count)
 	if err != nil {
@@ -44,6 +45,7 @@ func (i Item) List(req *ReqItemList) (*RespItemList, error) {
 			Link:     v.Link,
 			PubDate:  v.PubDate,
 			Unread:   v.Unread,
+			Bookmark: v.Bookmark,
 			Feed: ItemFeed{
 				ID:   v.Feed.ID,
 				Name: v.Feed.Name,
@@ -70,6 +72,7 @@ func (i Item) Get(req *ReqItemGet) (*RespItemGet, error) {
 		Content:  data.Content,
 		PubDate:  data.PubDate,
 		Unread:   data.Unread,
+		Bookmark: data.Bookmark,
 		Feed: ItemFeed{
 			ID:   data.Feed.ID,
 			Name: data.Feed.Name,
@@ -80,6 +83,7 @@ func (i Item) Get(req *ReqItemGet) (*RespItemGet, error) {
 func (i Item) Update(req *ReqItemUpdate) error {
 	return i.repo.Update(req.ID, &model.Item{
 		Unread:   req.Unread,
+		Bookmark: req.Bookmark,
 	})
 }
 

server/item_form.go

@@ -14,6 +14,7 @@ type ItemForm struct {
 	Content  *string    `json:"content"`
 	PubDate  *time.Time `json:"pub_date"`
 	Unread   *bool      `json:"unread"`
+	Bookmark *bool      `json:"bookmark"`
 	Feed     ItemFeed   `json:"feed"`
 }
 
@@ -22,6 +23,7 @@ type ReqItemList struct {
 	Keyword  *string `query:"keyword"`
 	FeedID   *uint   `query:"feed_id"`
 	Unread   *bool   `query:"unread"`
+	Bookmark *bool   `query:"bookmark"`
 }
 
 type RespItemList struct {
@@ -38,6 +40,7 @@ type RespItemGet ItemForm
 type ReqItemUpdate struct {
 	ID       uint  `param:"id" validate:"required"`
 	Unread   *bool `json:"unread"`
+	Bookmark *bool `json:"bookmark"`
 }
 
 type ReqItemDelete struct {