feat: Add on/off switch for recent games bar in game list

src/renderer/src/components/Config/Appearances.tsx

@@ -0,0 +1,37 @@
+import { cn } from '~/utils'
+import { Card, CardContent, CardHeader, CardTitle } from '@ui/card'
+import { Switch } from '@ui/switch'
+import { useDBSyncedState } from '~/hooks'
+
+export function Appearances(): JSX.Element {
+  const [showRecentGamesInGameList, setShowRecentGamesInGameList] = useDBSyncedState(
+    true,
+    'config.json',
+    ['appearances', 'gameList', 'showRecentGamesInGameList']
+  )
+
+  return (
+    <div className={cn('flex flex-col w-full h-full')}>
+      <Card className={cn('group')}>
+        <CardHeader>
+          <CardTitle className={cn('relative')}>
+            <div className={cn('flex flex-row justify-between items-center')}>
+              <div className={cn('flex items-center')}>游戏列表</div>
+            </div>
+          </CardTitle>
+        </CardHeader>
+        <CardContent className={cn('')}>
+          <div className={cn('flex flex-col gap-5 justify-center')}>
+            <div className={cn('flex flex-row justify-between items-center')}>
+              <div>是否显示最近游戏栏目</div>
+              <Switch
+                checked={showRecentGamesInGameList}
+                onCheckedChange={(checked) => setShowRecentGamesInGameList(checked)}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/renderer/src/components/Config/main.tsx

@@ -8,6 +8,7 @@ import { Advanced } from './Advanced'
 import { About } from './About'
 import { Scraper } from './Scraper'
 import { Theme } from './Theme'
+import { Appearances } from './Appearances'
 
 export function ConfigDialog({ children }: { children: React.ReactNode }): JSX.Element {
   return (
@@ -22,6 +23,9 @@ export function ConfigDialog({ children }: { children: React.ReactNode }): JSX.E
             <TabsTrigger className={cn('w-full')} value="general">
               通用
             </TabsTrigger>
+            <TabsTrigger className={cn('w-full')} value="appearances">
+              外观
+            </TabsTrigger>
             <TabsTrigger className={cn('w-full')} value="advanced">
               高级
             </TabsTrigger>
@@ -44,6 +48,9 @@ export function ConfigDialog({ children }: { children: React.ReactNode }): JSX.E
           <TabsContent value="general">
             <General />
           </TabsContent>
+          <TabsContent value="appearances">
+            <Appearances />
+          </TabsContent>
           <TabsContent value="advanced">
             <Advanced />
           </TabsContent>

src/renderer/src/components/Librarybar/GameList/RecentGames.tsx

@@ -1,23 +1,47 @@
 import { cn } from '~/utils'
 import { AccordionContent, AccordionItem, AccordionTrigger } from '@ui/accordion'
-import { useGameIndexManager } from '~/hooks'
+import {
+  ContextMenuContent,
+  ContextMenuTrigger,
+  ContextMenu,
+  ContextMenuItem
+} from '@ui/context-menu'
+import { useGameIndexManager, useDBSyncedState } from '~/hooks'
 import { GameNav } from '../GameNav'
 
 export function RecentGames(): JSX.Element {
+  const [showRecentGamesInGameList, setShowRecentGamesInGameList] = useDBSyncedState(
+    true,
+    'config.json',
+    ['appearances', 'gameList', 'showRecentGamesInGameList']
+  )
   const { sort: sortGames } = useGameIndexManager()
   const games = sortGames('lastRunDate', 'desc').slice(0, 5)
   return (
-    <AccordionItem value="recentGames">
-      <AccordionTrigger className={cn('bg-accent/30 text-xs p-1 pl-2')}>
-        <div className={cn('flex flex-row items-center justify-start gap-1')}>
-          <div className={cn('text-xs')}>最近游戏</div>
-        </div>
-      </AccordionTrigger>
-      <AccordionContent className={cn('rounded-none pt-1 flex flex-col gap-1')}>
-        {games.map((gameId) => (
-          <GameNav key={gameId} gameId={gameId} groupId="all" />
-        ))}
-      </AccordionContent>
-    </AccordionItem>
+    <>
+      {showRecentGamesInGameList && (
+        <AccordionItem value="recentGames">
+          <ContextMenu>
+            <ContextMenuTrigger>
+              <AccordionTrigger className={cn('bg-accent/30 text-xs p-1 pl-2')}>
+                <div className={cn('flex flex-row items-center justify-start gap-1')}>
+                  <div className={cn('text-xs')}>最近游戏</div>
+                </div>
+              </AccordionTrigger>
+            </ContextMenuTrigger>
+            <ContextMenuContent>
+              <ContextMenuItem onClick={() => setShowRecentGamesInGameList(false)}>
+                隐藏
+              </ContextMenuItem>
+            </ContextMenuContent>
+          </ContextMenu>
+          <AccordionContent className={cn('rounded-none pt-1 flex flex-col gap-1')}>
+            {games.map((gameId) => (
+              <GameNav key={gameId} gameId={gameId} groupId="all" />
+            ))}
+          </AccordionContent>
+        </AccordionItem>
+      )}
+    </>
   )
 }