feat(app): store search history

packages/app/package.json

@@ -15,9 +15,12 @@
     "@astrojs/react": "^2.2.1",
     "@astrojs/rss": "^2.4.3",
     "@astrojs/sitemap": "^1.3.3",
+    "@nanostores/persistent": "^0.9.0",
+    "@nanostores/react": "^0.7.1",
     "astro": "^2.6.3",
     "astro-robots-txt": "^0.5.0",
     "cmdk": "^0.2.0",
+    "nanostores": "^0.9.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "simptrad": "^0.1.0",

packages/app/src/components/Search.tsx

@@ -2,13 +2,15 @@ import type { SearchParams } from 'animegarden';
 
 import useSWR from 'swr';
 import { Command } from 'cmdk';
+import { useStore } from '@nanostores/react';
 import { tradToSimple } from 'simptrad';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import '../styles/cmdk.css';
 
-import { fansubs, types } from '../constant';
+import { histories } from '../history';
 import { fetchResources } from '../fetch';
+import { fansubs, types } from '../constant';
 
 {
   document.addEventListener('keypress', (ev) => {
@@ -58,6 +60,7 @@ export default function Search() {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const { active } = useActiveElement();
 
+  const history = useStore(histories);
   const [input, setInput] = useState('');
   const [search, setSearch] = useState('');
 
@@ -123,6 +126,9 @@ export default function Search() {
 
   const selectGoToSearch = useCallback(() => {
     if (input) {
+      const newHistories = [...new Set([input, ...histories.get()])];
+      histories.set(newHistories);
+
       stopFetch();
       goToSearch(input);
       disable();
@@ -222,6 +228,24 @@ export default function Search() {
             )}
           </>
         )}
+        {enable && history.length > 0 && (
+          <Command.Group heading="搜索历史">
+            {history.map((h) => (
+              <Command.Item
+                key={h}
+                value={h}
+                onMouseDown={() => {
+                  onInputChange(h);
+                }}
+                onSelect={() => {
+                  onInputChange(h);
+                }}
+              >
+                {h}
+              </Command.Item>
+            ))}
+          </Command.Group>
+        )}
         {enable && (
           <>
             {filteredTypes.length > 0 && (

packages/app/src/history.ts

@@ -0,0 +1,6 @@
+import { persistentAtom } from '@nanostores/persistent';
+
+export const histories = persistentAtom<string[]>('animegarden:histories', [], {
+  encode: JSON.stringify,
+  decode: JSON.parse
+});