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

app/settings/layout.tsx

@@ -0,0 +1,11 @@
+import { Metadata } from "next";
+
+import { singleTools } from "@/config/tools";
+
+export const metadata: Metadata = {
+  title: singleTools.settings.longTitle,
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/settings/page.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useMemo } from "react";
+import { useTheme } from "next-themes";
+
+import { singleTools } from "@/config/tools";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Configuration } from "@/components/configuration";
+import { Configurations } from "@/components/configurations";
+import { icons } from "@/components/icons";
+import { PageRootSection } from "@/components/page-root-section";
+import { PageSection } from "@/components/page-section";
+
+export default function Page() {
+  const { theme = "system", setTheme } = useTheme();
+
+  const appThemeIcon = useMemo(() => <icons.Paintbrush size={24} />, []);
+
+  const appThemeConfig = useMemo(
+    () => (
+      <Configuration
+        icon={appThemeIcon}
+        title="App theme"
+        description="Select which app theme to display"
+        control={
+          <Select value={theme} onValueChange={setTheme}>
+            <SelectTrigger
+              className="w-28"
+              aria-label="toggle open/close state of app theme selection"
+            >
+              <SelectValue placeholder={theme} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="light">Light</SelectItem>
+              <SelectItem value="dark">Dark</SelectItem>
+              <SelectItem value="system">System</SelectItem>
+            </SelectContent>
+          </Select>
+        }
+      />
+    ),
+    [appThemeIcon, setTheme, theme]
+  );
+
+  return (
+    <PageRootSection title={singleTools.settings.longTitle}>
+      <PageSection>
+        <Configurations list={[appThemeConfig]} />
+      </PageSection>
+    </PageRootSection>
+  );
+}