better unread display

Author: zaknesler

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

@@ -1,7 +1,10 @@
 import { A } from '@solidjs/router';
+import { createQuery } from '@tanstack/solid-query';
 import { cx } from 'class-variance-authority';
 import dayjs from 'dayjs';
 import { type Component } from 'solid-js';
+import { getEntry } from '~/api/entries';
+import { QUERY_KEYS } from '~/constants/query';
 import { useFilterParams } from '~/hooks/use-filter-params';
 import { Entry } from '~/types/bindings/entry';
 import { Feed } from '~/types/bindings/feed';
@@ -14,20 +17,34 @@ type EntryItemProps = {
 export const EntryItem: Component<EntryItemProps> = props => {
   const filter = useFilterParams();
 
+  // Get the data for an entry to check if user marked it as read
+  const entryData = createQuery(() => ({
+    enabled: filter.params.entry_uuid === props.entry.uuid,
+    queryKey: [QUERY_KEYS.ENTRIES_VIEW, props.entry.uuid],
+    queryFn: () => getEntry(props.entry.uuid),
+  }));
+
+  const isRead = () => !!props.entry.read_at || !!entryData.data?.read_at;
+
   return (
     <A
       href={filter.getEntryUrl(props.entry.uuid)}
       activeClass="bg-gray-100 dark:bg-gray-950"
-      inactiveClass={cx('hover:bg-gray-100 dark:hover:bg-gray-950', props.entry.read_at && 'opacity-50')}
+      inactiveClass={cx(
+        'hover:bg-gray-100 dark:hover:bg-gray-950',
+        filter.getView() === 'unread' && isRead() && 'opacity-50',
+      )}
       class={cx(
         '-mx-2 flex flex-col gap-1 rounded-lg p-2 ring-gray-300 transition dark:ring-gray-700',
         'focus:bg-gray-100 focus:outline-none focus:ring focus:dark:bg-gray-950',
       )}
     >
       <h4 class="text-base/5 md:text-sm xl:text-base/5">{props.entry.title}</h4>
+
       <small class="flex w-full gap-1 text-xs text-gray-500 dark:text-gray-400">
+        {!isRead() && <span class="h-2 w-2 self-center rounded-full bg-gray-500 dark:bg-gray-300" />}
         <span class="font-medium">{props.feed.title}</span>
-        <span class="text-gray-300 dark:text-gray-600">&ndash;</span>
+        <span class="text-gray-400 dark:text-gray-600">&ndash;</span>
         <span>{dayjs(props.entry.published_at).format('MMM D, YYYY')}</span>
       </small>
     </A>

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

@@ -28,7 +28,6 @@ export const EntryPanel = () => {
 
     markAsRead.mutateAsync(entry.data.uuid).then(() => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS_STATS] });
-      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_INDEX, filter.params.feed_uuid] });
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_VIEW, entry.data.uuid] });
     });
   });

ui/src/hooks/use-ws.ts

@@ -3,8 +3,10 @@ import { WebSocket } from 'partysocket';
 import { Notification } from '~/types/bindings/notification';
 import { useQueryClient } from '@tanstack/solid-query';
 import { QUERY_KEYS } from '~/constants/query';
+import { useFilterParams } from './use-filter-params';
 
 export const useWs = () => {
+  const filter = useFilterParams();
   const queryClient = useQueryClient();
 
   const socket = new WebSocket(wsUrl('/notifs'), undefined, {
@@ -24,7 +26,7 @@ export const useWs = () => {
       case 'EntriesFetched':
         queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS] });
         queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FEEDS_VIEW, notif.feed_uuid] });
-        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_INDEX, notif.feed_uuid] });
+        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.ENTRIES_INDEX, notif.feed_uuid, filter.getView()] });
     }
   });
 };