feat: unread only toggle

package.json

@@ -42,6 +42,7 @@
     "@radix-ui/react-switch": "1.0.3",
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-toast": "1.1.5",
+    "@radix-ui/react-toggle": "1.0.3",
     "@radix-ui/react-tooltip": "1.0.7",
     "@tanstack/query-sync-storage-persister": "5.40.0",
     "@tanstack/react-query": "5.40.0",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       '@radix-ui/react-toast':
         specifier: 1.1.5
         version: 1.1.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle':
+        specifier: 1.0.3
+        version: 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: 1.0.7
         version: 1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1576,6 +1579,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-toggle@1.0.3':
+    resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tooltip@1.0.7':
     resolution: {integrity: sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==}
     peerDependencies:
@@ -6636,6 +6652,18 @@ snapshots:
       '@types/react': 18.3.3
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-toggle@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.3)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.3
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-tooltip@1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.24.4

src/renderer/src/components/entry-column/index.tsx

@@ -1,4 +1,9 @@
-import { Tabs, TabsList, TabsTrigger } from "@renderer/components/ui/tabs"
+import { Toggle } from "@renderer/components/ui/toggle"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@renderer/components/ui/tooltip"
 import { views } from "@renderer/lib/constants"
 import { buildStorageNS } from "@renderer/lib/ns"
 import { apiClient } from "@renderer/queries/api-fetch"
@@ -21,12 +26,12 @@ import { EntryItemWrapper } from "./item-wrapper"
 import { NotificationItem } from "./notification-item"
 import { PictureItem } from "./picture-item"
 import { SocialMediaItem } from "./social-media-item"
-import type { FilterTab, UniversalItemProps } from "./types"
+import type { UniversalItemProps } from "./types"
 import { VideoItem } from "./video-item"
 
-const filterTabAtom = atomWithStorage<FilterTab>(
-  buildStorageNS("entry-tab"),
-  "unread",
+const unreadOnlyAtom = atomWithStorage<boolean>(
+  buildStorageNS("entry-unreadonly"),
+  true,
 )
 
 const { setActiveEntry } = feedActions
@@ -143,23 +148,23 @@ export function EntryColumn() {
 
 const useEntriesByTab = () => {
   const activeList = useFeedStore(useShallow((state) => state.activeList))
-  const filterTab = useAtomValue(filterTabAtom)
+  const unreadOnly = useAtomValue(unreadOnlyAtom)
 
   return useEntries({
     level: activeList?.level,
     id: activeList?.id,
     view: activeList?.view,
-    ...(filterTab === "unread" && { read: false }),
+    ...(unreadOnly === true && { read: false }),
   })
 }
 
 const ListHeader: FC = () => {
   const activeList = useFeedStore(useShallow((state) => state.activeList))
-  const [filterTab, setFilterTab] = useAtom(filterTabAtom)
+  const [unreadOnly, setUnreadOnly] = useAtom(unreadOnlyAtom)
   const entries = useEntriesByTab()
 
   return (
-    <div className="mb-5 flex w-full items-center justify-between px-9">
+    <div className="mb-5 flex w-full items-center justify-between pl-9 pr-2">
       <div>
         <div className="text-lg font-bold">{activeList?.name}</div>
         <div className="text-xs font-medium text-zinc-400">
@@ -168,17 +173,14 @@ const ListHeader: FC = () => {
           Items
         </div>
       </div>
-      {/* @ts-expect-error */}
-      <Tabs value={filterTab} onValueChange={setFilterTab}>
-        <TabsList variant="rounded">
-          <TabsTrigger variant="rounded" value="unread">
-            Unread
-          </TabsTrigger>
-          <TabsTrigger variant="rounded" value="all">
-            All
-          </TabsTrigger>
-        </TabsList>
-      </Tabs>
+      <Tooltip>
+        <TooltipTrigger>
+          <Toggle pressed={unreadOnly} onPressedChange={setUnreadOnly} className="size-8 rounded-full p-0">
+            <i className="i-mingcute-round-line" />
+          </Toggle>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">{unreadOnly ? "Unread Only" : "All"}</TooltipContent>
+      </Tooltip>
     </div>
   )
 }

src/renderer/src/components/entry-column/types.ts

@@ -6,5 +6,3 @@ export type UniversalItemProps = {
     feeds: FeedModel
   }
 }
-
-export type FilterTab = "all" | "unread"

src/renderer/src/components/ui/toggle.tsx

@@ -0,0 +1,43 @@
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cn } from "@renderer/lib/utils"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import * as React from "react"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }