renewal

recreate project by using https://github.com/shadcn/next-template

App:
- support dark mode
- add toggle theme button
- add clear search button
- add search button
- add current page indicator
- add tool group pages
- add settings tool
- add 1 tab format option to Json format tool
- add paste button to some tools
- add file button to some tools
- add copy button to some tools
- add clear button to some tools
- change favicon
- change search hit rate
- change each page title
- change icons from Material Icons to Lucide
- change sidebar scroll area
- change editor from Ace to Monaco
- change parsable separators of number base converter
- change default value of format option of number base converter
- change default values of some tool forms
- change some styles
- remove disabled tools
- remove real-time search
- fix uri encoding tool

Dev:
- MUI + Emotion -> Radix UI + Tailwind CSS
- Next.js 12 Pages -> Next.js 13 App Router
- React 17 -> React 18
- many other packages upgraded
- use useState instead of recoil
- use Next.js typedRoutes instead of pathpida
- clean npm scripts
- format import statements by Prettier
- no component separations between container and presenter
- effective component memoizations
- add vscode settings
- many refactors

components/sidebar/tool-groups.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import * as Accordion from "@radix-ui/react-accordion";
+
+import { toolGroups } from "@/config/tools";
+
+import { ToolGroup } from "./tool-group";
+
+const isGroupedTool = (path: string) =>
+  Object.values(toolGroups)
+    .map(({ href }) => href as string)
+    .some(group => path.startsWith(`${group}/`));
+
+export function ToolGroups() {
+  const pathname = usePathname();
+  const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (isGroupedTool(pathname)) {
+      const group = `/${pathname.split("/")[1]}`;
+      setExpandedGroups(prev => Array.from(new Set([...prev, group])));
+    }
+  }, [pathname]);
+
+  return (
+    <Accordion.Root type="multiple" value={expandedGroups} onValueChange={setExpandedGroups}>
+      <ul className="space-y-1">
+        {Object.values(toolGroups).map(group => (
+          <li key={group.href}>
+            <ToolGroup {...group} isOpend={expandedGroups.includes(group.href)} />
+          </li>
+        ))}
+      </ul>
+    </Accordion.Root>
+  );
+}