feat: unread/all tab

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

@@ -1,7 +1,9 @@
+import { Tabs, TabsList, TabsTrigger } from "@renderer/components/ui/tabs"
 import { cn } from "@renderer/lib/utils"
 import { useEntries } from "@renderer/queries/entries"
 import { useFeedStore } from "@renderer/store"
 import { m } from "framer-motion"
+import { useState } from "react"
 
 import { ArticleItem } from "./article-item"
 import { EntryItemWrapper } from "./item-wrapper"
@@ -13,11 +15,14 @@ import { VideoItem } from "./video-item"
 const gridMode = new Set([2, 3])
 
 export function EntryColumn() {
+  const [filterTab, setFilterTab] = useState("unread")
+
   const activeList = useFeedStore((state) => state.activeList)
   const entries = useEntries({
     level: activeList?.level,
     id: activeList?.id,
     view: activeList?.view,
+    ...(filterTab === "unread" && { read: false }),
   })
 
   let Item
@@ -49,18 +54,26 @@ export function EntryColumn() {
 
   return (
     <div className="px-2">
-      <div className="mb-5 ml-9">
-        <div className="text-lg font-bold">{activeList?.name}</div>
-        <div className="text-xs font-medium text-zinc-400">
-          {entries.data?.pages?.[0].total}
-          {" "}
-          Items
+      <div className="mb-5 px-9 flex justify-between items-center w-full">
+        <div>
+          <div className="text-lg font-bold">{activeList?.name}</div>
+          <div className="text-xs font-medium text-zinc-400">
+            {entries.data?.pages?.[0].total}
+            {" "}
+            Items
+          </div>
         </div>
+        <Tabs value={filterTab} onValueChange={setFilterTab}>
+          <TabsList variant="rounded">
+            <TabsTrigger variant="rounded" value="unread">Unread</TabsTrigger>
+            <TabsTrigger variant="rounded" value="all">All</TabsTrigger>
+          </TabsList>
+        </Tabs>
       </div>
       <div>
-        {entries.data?.pages?.map((page, index) => (
+        {entries.data?.pages?.map((page) => (
           <m.div
-            key={`${activeList?.level}-${activeList?.id}-${index}`}
+            key={`${activeList?.level}-${activeList?.id}`}
             initial={{ opacity: 0.01, y: 100 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0.01, y: -100 }}

src/renderer/src/components/ui/tabs.tsx

@@ -1,32 +1,74 @@
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 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 Tabs = TabsPrimitive.Root
 
+const tabsListVariants = cva(
+  "",
+  {
+    variants: {
+      variant: {
+        default: "border-b",
+        rounded: "rounded-md bg-muted p-1",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+  VariantProps<typeof tabsListVariants> {
+}
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
+  TabsListProps
+>(({ className, variant, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center border-b text-muted-foreground",
+      "inline-flex items-center justify-center text-muted-foreground",
+      tabsListVariants({ variant }),
       className,
     )}
     {...props}
   />
 ))
 TabsList.displayName = TabsPrimitive.List.displayName
 
+const tabsTriggerVariants = cva(
+  "",
+  {
+    variants: {
+      variant: {
+        default: "py-1.5 border-b-2 border-transparent data-[state=active]:border-foreground",
+        rounded: "py-1 rounded-sm data-[state=active]:bg-background data-[state=active]:shadow-sm",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export interface TabsTriggerProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>,
+  VariantProps<typeof tabsTriggerVariants> {
+}
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+  TabsTriggerProps
+>(({ className, variant, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap border-b-2 border-transparent px-3 py-1.5 text-sm font-medium ring-offset-background transition-all 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=active]:border-foreground data-[state=active]:text-foreground",
+      "inline-flex items-center justify-center whitespace-nowrap px-3 text-sm font-medium ring-offset-background transition-all 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=active]:text-foreground",
+      tabsTriggerVariants({ variant }),
       className,
     )}
     {...props}

src/renderer/src/queries/entries.ts

@@ -11,13 +11,15 @@ export const entries = {
     level,
     id,
     view,
+    read,
   }: {
     level?: string
     id?: number | string
     view?: number
+    read?: boolean
   }) =>
     defineQuery(
-      ["entries", level, id, view],
+      ["entries", level, id, view, read],
       async ({ pageParam }) => {
         const params: {
           feedId?: string
@@ -32,6 +34,7 @@ export const entries = {
           json: {
             offset: pageParam as number | undefined,
             view,
+            read,
             ...params,
           },
         })
@@ -67,12 +70,14 @@ export const useEntries = ({
   level,
   id,
   view,
+  read,
 }: {
   level?: string
   id?: number | string
   view?: number
+  read?: boolean
 }) =>
-  useBizInfiniteQuery(entries.entries({ level, id, view }), {
+  useBizInfiniteQuery(entries.entries({ level, id, view, read }), {
     enabled: level !== undefined && id !== undefined,
     getNextPageParam: (lastPage, _, lastPageParam) =>
       (lastPageParam as number) + (lastPage.data?.length || 0),