add save action

ui/src/components/entry/entry-actions.tsx

@@ -8,6 +8,7 @@ import {
 } from 'solid-icons/hi';
 import type { Component } from 'solid-js';
 import { useEntryRead } from '~/hooks/queries/use-entry-read';
+import { useEntrySaved } from '~/hooks/queries/use-entry-saved';
 import type { Entry } from '~/types/bindings';
 import { ActionButton } from '../ui/button/action-button';
 
@@ -17,12 +18,18 @@ type EntryActionsProps = {
 
 export const EntryActions: Component<EntryActionsProps> = props => {
   const entryRead = useEntryRead();
+  const entrySaved = useEntrySaved();
 
   const handleToggleRead = () => {
     const action = props.entry.read_at ? entryRead.markUnread : entryRead.markRead;
     action(props.entry.uuid, props.entry.feed_uuid);
   };
 
+  const handleToggleSaved = () => {
+    const action = props.entry.saved_at ? entrySaved.markUnsaved : entrySaved.markSaved;
+    action(props.entry.uuid, props.entry.feed_uuid);
+  };
+
   return (
     <div
       class={cx(
@@ -42,10 +49,10 @@ export const EntryActions: Component<EntryActionsProps> = props => {
         icon={props.entry.saved_at ? HiSolidBookmark : HiOutlineBookmark}
         tooltip={props.entry.saved_at ? 'Mark as unsaved' : 'Mark as saved'}
         class="p-2 md:p-1"
+        onClick={handleToggleSaved}
       />
 
       <ActionButton icon={HiSolidArrowLeft} tooltip="View previous item" class="ml-auto p-2 md:hidden md:p-1" />
-
       <ActionButton icon={HiSolidArrowRight} tooltip="View next item" class="p-2 md:hidden md:p-1" />
     </div>
   );

ui/src/components/panels/list-panel.tsx

@@ -60,7 +60,7 @@ export const ListPanel = () => {
       <Portal>
         <button
           type="button"
-          class="-translate-y-[9999px] absolute top-2 left-2 z-[9999] select-none appearance-none rounded-lg border bg-white px-3 py-2 text-black text-sm shadow-lg focus:translate-y-0 dark:focus:border-gray-400 focus:border-gray-200 active:bg-gray-100 dark:bg-gray-950 dark:text-gray-300 focus:outline-none dark:focus:ring-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30"
+          class="-translate-y-[9999px] absolute top-2 left-2 z-[9999] hidden select-none appearance-none rounded-lg border bg-white px-3 py-2 text-black text-sm shadow-lg md:flex focus:translate-y-0 dark:focus:border-gray-400 focus:border-gray-200 active:bg-gray-100 dark:bg-gray-950 dark:text-gray-300 focus:outline-none dark:focus:ring-gray-600 focus:ring-2 focus:ring-gray-500 focus:ring-opacity-30"
           tabindex={1}
           onClick={handleSkipToContent}
         >

ui/src/constants/query.ts

@@ -12,4 +12,6 @@ export const QUERY_KEYS = {
   ENTRIES_VIEW: 'entries.view',
   ENTRIES_VIEW_READ: 'mut.entries.view.read',
   ENTRIES_VIEW_UNREAD: 'mut.entries.view.unread',
+  ENTRIES_VIEW_SAVED: 'mut.entries.view.saved',
+  ENTRIES_VIEW_UNSAVED: 'mut.entries.view.unsaved',
 } as const;

ui/src/hooks/queries/use-entry-saved.ts

@@ -0,0 +1,40 @@
+import { createMutation, useQueryClient } from '@tanstack/solid-query';
+import { updateEntryAsSaved, updateEntryAsUnsaved } from '~/api/entries';
+import { QUERY_KEYS } from '~/constants/query';
+import { useQueryState } from '~/contexts/query-state-context';
+import { useInvalidateStats } from '~/hooks/queries/use-invalidate-stats';
+
+export const useEntrySaved = () => {
+  const state = useQueryState();
+  const queryClient = useQueryClient();
+  const invalidateStats = useInvalidateStats();
+
+  const markAsSaved = createMutation(() => ({
+    mutationKey: [QUERY_KEYS.ENTRIES_VIEW_SAVED],
+    mutationFn: updateEntryAsSaved,
+  }));
+
+  const markAsUnsaved = createMutation(() => ({
+    mutationKey: [QUERY_KEYS.ENTRIES_VIEW_UNSAVED],
+    mutationFn: updateEntryAsUnsaved,
+  }));
+
+  const invalidate = (entry_uuid: string, feed_uuid: string, invalidateIndex: boolean) => {
+    invalidateStats();
+    queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_VIEW, entry_uuid] });
+
+    if (invalidateIndex)
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_INDEX, feed_uuid, state.getView()] });
+  };
+
+  const handleMarkSaved = (entry_uuid: string, feed_uuid: string, invalidateIndex = false) =>
+    markAsSaved.mutateAsync(entry_uuid).then(() => invalidate(entry_uuid, feed_uuid, invalidateIndex));
+
+  const handleMarkUnsaved = (entry_uuid: string, feed_uuid: string, invalidateIndex = false) =>
+    markAsUnsaved.mutateAsync(entry_uuid).then(() => invalidate(entry_uuid, feed_uuid, invalidateIndex));
+
+  return {
+    markSaved: handleMarkSaved,
+    markUnsaved: handleMarkUnsaved,
+  };
+};