right nav

src/app/(main)/(narrow)/RightNav.tsx

@@ -1,11 +1,20 @@
+"use client"
+
 import clsx from "clsx"
+import { Fragment } from "react"
+import { useSettings } from "~/features/settings"
 
 export default function RightNav() {
-  const w = "w-72 xl:w-96 "
+  const [settings] = useSettings()
+
+  const w = "w-72 xl:w-96"
   return (
     <div className={clsx(w, "hidden lg:block")}>
       <div className={clsx(w, "fixed flex h-full flex-col gap-4 border-l pl-8 pt-2.5")}>
-        <input className="rounded-full bg-gray-200 px-4 py-2" placeholder="検索" />
+        {settings.ui.rnav.map(
+          (item, i) =>
+            item in items && <Fragment key={i}>{items[item as keyof typeof items]()}</Fragment>,
+        )}
         <div className="px-4 font-inter text-xs text-gray-600">
           <a className="hover:underline" href="/about/">
             minskeyについて
@@ -21,3 +30,18 @@ export default function RightNav() {
     </div>
   )
 }
+
+const items = {
+  search: SearchBar,
+  aichan: AiChan,
+}
+
+// todo: impl
+function SearchBar() {
+  return <input className="rounded-full bg-gray-200 px-4 py-2" placeholder="検索" />
+}
+
+// todo: track eyes
+function AiChan() {
+  return <iframe className="h-64" src="https://misskey-dev.github.io/mascot-web/?scale=1.3" />
+}

src/app/(main)/(wide)/settings/SettingsSectionBar.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import clsx from "clsx"
+import { ChevronRight } from "lucide-react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+export default function SettingsSectionBar({ tag, href }: { tag: string; href: string }) {
+  const pathname = usePathname()
+
+  return (
+    <Link href={href} passHref>
+      <div
+        className={clsx(
+          "relative flex items-center justify-between p-3 transition hover:bg-neutral-200",
+          pathname.startsWith(href) &&
+            "after:absolute after:right-0 after:h-full after:w-[3px] after:bg-misskey",
+        )}>
+        <span>{tag}</span>
+        <ChevronRight size={20} />
+      </div>
+    </Link>
+  )
+}

src/app/(main)/(wide)/settings/layout.tsx

@@ -1,10 +1,5 @@
-"use client"
-
-import clsx from "clsx"
-import { ChevronRight } from "lucide-react"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
 import TopAppBar from "~/components/TopAppBar"
+import SettingsSectionBar from "./SettingsSectionBar"
 
 export default function SetingsPage({ children }: { children: React.ReactNode }) {
   return (
@@ -21,21 +16,3 @@ export default function SetingsPage({ children }: { children: React.ReactNode })
     </>
   )
 }
-
-function SettingsSectionBar({ tag, href }: { tag: string; href: string }) {
-  const pathname = usePathname()
-
-  return (
-    <Link href={href} passHref>
-      <div
-        className={clsx(
-          "relative flex items-center justify-between p-3 transition hover:bg-neutral-200",
-          pathname.startsWith(href) &&
-            "after:absolute after:right-0 after:h-full after:w-[3px] after:bg-misskey",
-        )}>
-        <span>{tag}</span>
-        <ChevronRight size={20} />
-      </div>
-    </Link>
-  )
-}

src/app/(main)/(wide)/settings/ui/page.tsx

@@ -1,6 +1,8 @@
 "use client"
 
+import RawJson from "~/components/RawJson"
 import H2 from "~/components/html/H2"
+import H3 from "~/components/html/H3"
 import { useSettings } from "~/features/settings"
 
 export default function GeneralSettingsPage() {
@@ -9,6 +11,8 @@ export default function GeneralSettingsPage() {
   return (
     <>
       <H2>外観</H2>
+      <H3>右のバー</H3>
+      <RawJson json={settings.ui.rnav} />
       <hr />
     </>
   )

src/components/html/H3.tsx

@@ -0,0 +1,5 @@
+import { HTMLProps } from "react"
+
+export default function H3(props: HTMLProps<HTMLHeadingElement>) {
+  return <h2 className={"mx-4 my-2 mb-1 text-lg font-bold"} {...props} />
+}

src/features/settings/index.ts

@@ -1,16 +1,17 @@
 import { atom, useAtom } from "jotai"
 import { atomWithStorage } from "jotai/utils"
 
-// atoms
-
 type Settings = {
   version: number
   dark: boolean
   absDate: boolean
+  ui: {
+    rnav: string[]
+  }
 }
 
 const rawSettingsAtom = atomWithStorage("minsk::settings", {})
-export const settingsAtom = atom(
+const settingsAtom = atom(
   get => {
     const rawSettings = get(rawSettingsAtom)
     return settingsMigrator(rawSettings)
@@ -20,21 +21,21 @@ export const settingsAtom = atom(
   },
 )
 
-// hooks
-
-export function useSettings() {
-  return useAtom(settingsAtom)
-}
-
-// utils
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function settingsMigrator(settings: any): Settings {
-  if (!settings.version || settings.version < 0) {
-    settings.version = 0
-    settings.dark = false
-    settings.absDate = false
+  if (!settings.version || settings.version < 1) {
+    settings.version = 0.1
+    settings.dark ??= false
+    settings.absDate ??= false
+    settings.ui = {
+      rnav: ["search"],
+      ...settings.ui,
+    }
   }
 
   return settings
 }
+
+export function useSettings() {
+  return useAtom(settingsAtom)
+}