feat(misc/tree): replace some states with URL state

src/app/misc/tree/page.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useState } from 'react'
 import { Download } from 'lucide-react'
+import { parseAsBoolean, useQueryState } from 'nuqs'
 
 import { downloadText } from '~/shared/lib/download-text'
 import { Label } from '~/shared/components/label'
@@ -17,10 +18,22 @@ export default function Page() {
   const [plainText, setPlainText] = useState(
     'src\n	app\n		page.tsx\n	components\n		header.tsx'
   )
-  const [fancy, setFancy] = useState(true)
-  const [fullPath, setFullPath] = useState(false)
-  const [rootDot, setRootDot] = useState(false)
-  const [trailingDirSlash, setTrailingDirSlash] = useState(false)
+  const [fancy, setFancy] = useQueryState(
+    'fancy',
+    parseAsBoolean.withDefault(true)
+  )
+  const [fullPath, setFullPath] = useQueryState(
+    'fullPath',
+    parseAsBoolean.withDefault(false)
+  )
+  const [rootDot, setRootDot] = useQueryState(
+    'rootDot',
+    parseAsBoolean.withDefault(false)
+  )
+  const [trailingDirSlash, setTrailingDirSlash] = useQueryState(
+    'trailingDirSlash',
+    parseAsBoolean.withDefault(false)
+  )
 
   const charset: 'utf-8' | 'ascii' = fancy ? 'utf-8' : 'ascii'