feat: support favorite

Author: l1xnan

src/components/PageTabs.tsx

@@ -1,7 +1,9 @@
+import { favoriteAtom } from '@/stores/app';
 import CloseIcon from '@mui/icons-material/Close';
 import { TabContext, TabList, TabPanelProps, useTabContext } from '@mui/lab';
 import { Box, IconButton, Tab, TabProps, styled } from '@mui/material';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
+import { useSetAtom } from 'jotai';
 import {
   FunctionComponent,
   PropsWithChildren,
@@ -102,6 +104,7 @@ export function PageTabs({
   onRemove,
   onRemoveOther,
 }: PageTabsProps) {
+  const setFavorite = useSetAtom(favoriteAtom);
   const tabList = useMemo(() => {
     return (
       <PageTabList
@@ -155,6 +158,16 @@ export function PageTabs({
 
                     <ContextMenuSeparator />
 
+                    <ContextMenuItem
+                      onClick={async () => {
+                        setFavorite((prev) => [...prev, tab]);
+                      }}
+                    >
+                      Favorite
+                    </ContextMenuItem>
+
+                    <ContextMenuSeparator />
+
                     <ContextMenuItem
                       onClick={async () => {
                         await writeText(tab.displayName);

src/components/TreeItem.tsx

@@ -231,7 +231,7 @@ export const TreeItemLabel = React.forwardRef(
         className="flex items-center p-0 pt-0.5 pb-0.5 text-sm h-6"
         ref={ref as React.Ref<HTMLDivElement>}
       >
-        <div className="mr-1 flex items-center h-full [&_svg]:text-base [&_svg]:h-4 [&_svg]:w-4">
+        <div className="mr-1 flex items-center h-full [&_svg]:text-base [&_svg]:size-4">
           {getTypeIcon(icon, expanded)}
         </div>
         <div className="overflow-hidden text-ellipsis font-mono">

src/pages/sidebar/Favorite.tsx

@@ -1,4 +1,11 @@
+import { favoriteAtom } from '@/stores/app';
+import { useAtomValue } from 'jotai';
+import { Code2Icon, SearchIcon, TableIcon } from 'lucide-react';
+
 export function Favorite() {
+  const items = useAtomValue(favoriteAtom);
+
+  console.log(items);
   return (
     <div className="grid min-h-screen w-full">
       <div className="hidden border-r bg-muted/40 md:block">
@@ -9,7 +16,28 @@ export function Favorite() {
             </a>
           </div>
           <div className="flex-1">
-            <nav className="grid items-start px-1 text-sm font-medium"></nav>
+            <nav className="grid items-start px-1 text-sm">
+              {items.map((item, i) => {
+                const Comp =
+                  item.type == 'search'
+                    ? SearchIcon
+                    : item.type == 'editor'
+                      ? Code2Icon
+                      : TableIcon;
+                return (
+                  <a
+                    key={i}
+                    href="#"
+                    className="flex items-center rounded-lg px-2 py-1 text-muted-foreground transition-all hover:text-primary overflow-hidden"
+                  >
+                    <Comp className="size-4 min-w-4 mr-1" />
+                    <div className="overflow-hidden text-ellipsis font-mono font-normal whitespace-nowrap">
+                      {item.displayName}
+                    </div>
+                  </a>
+                );
+              })}
+            </nav>
           </div>
         </div>
       </div>

src/stores/app.ts

@@ -1,11 +1,13 @@
+import { TabContextType } from '@/stores/tabs';
+
+import { createSelectors } from '@/stores/utils';
 import { focusAtom } from 'jotai-optics';
 import { atomWithStore } from 'jotai-zustand';
+import { atomWithStorage } from 'jotai/utils';
+import { debounce } from 'radash';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-import { createSelectors } from '@/stores/utils';
-import { debounce } from 'radash';
-
 type AppState = {
   size: number;
 };
@@ -33,3 +35,5 @@ const useAppStore = createSelectors(store);
 export const appAtom = atomWithStore(useAppStore);
 
 export const sizeAtom = focusAtom(appAtom, (optic) => optic.prop('size'));
+
+export const favoriteAtom = atomWithStorage<TabContextType[]>('favorite', []);