draft: Notes navigation

src/app/routes/notes/notes-id.tsx

@@ -1,7 +1,66 @@
-import { useHashRouter } from "components/utility/hash-router"
+import { ArrowLeft, GripHorizontal, Trash } from "lucide-react"
+import { PropsWithChildren } from "react"
+
+import { Layout } from "components/layouts"
+import { Button } from "components/ui/button"
+import { Divider } from "components/ui/divider"
+import { IconButton } from "components/ui/icon-button"
+import { HashRouter, useHashRouter } from "components/utility/hash-router"
+import { cn } from "utils/cn"
+import { hstack, interactive } from "utils/styles"
+
+const ListItem = ({
+  children,
+  active,
+}: PropsWithChildren<{ active?: boolean }>) => (
+  <li
+    className={cn(
+      hstack({}),
+      active ? "border-text-highlight/50" : "border-text-gentle/10",
+      "bgl-base-b/10 list-none rounded border [&>*]:rounded-none [&>:first-child]:rounded-l [&>:last-child]:rounded-e"
+    )}
+  >
+    <IconButton
+      icon={GripHorizontal}
+      title="Re-order note"
+      hideTitle
+      className="cursor-grab active:cursor-grabbing"
+    />
+    <button
+      className={cn(
+        interactive({}),
+        hstack({ justify: "between", align: "center" }),
+        "h-10 flex-1 gap-2 truncate px-3"
+      )}
+    >
+      <span className="truncate">{children}</span>
+    </button>
+    <IconButton
+      icon={Trash}
+      title="Delete note"
+      hideTitle
+      className="[*:not(:hover):not(:focus-within)>&]:sr-only"
+    />
+  </li>
+)
 
 const NotesIdRoute = () => {
   const { params } = useHashRouter()
-  return <div className="">Notes id: {params["id"]}</div>
+
+  return (
+    <Layout.Multiple>
+      <Layout.Side>
+        <div>
+          <HashRouter.Link to="notes">
+            <Button icon={ArrowLeft}>Back</Button>
+          </HashRouter.Link>
+        </div>
+        <Divider color="gentle" />
+        <ListItem active>My useful note</ListItem>
+        <ListItem>My other useful note</ListItem>
+      </Layout.Side>
+      <div className="">Notes id: {params["id"]}</div>
+    </Layout.Multiple>
+  )
 }
 export default NotesIdRoute

src/components/layouts/index.ts

@@ -1,2 +1,3 @@
 export * from "./settings-layout"
 export * from "./tools-layout"
+export * from "./layout"

src/components/layouts/layout.tsx

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from "react"
+
+import { cn } from "utils/cn"
+import { hstack, surface, vstack } from "utils/styles"
+
+const Centered = ({ children }: PropsWithChildren) => (
+  <div className={cn("grid place-content-center")}>{children}</div>
+)
+
+const Grid = ({ children }: PropsWithChildren) => <>{children}</>
+
+const Side = ({ children }: PropsWithChildren) => (
+  <div
+    className={cn(
+      surface({ look: "card" }),
+      vstack({ gap: 2, align: "stretch" }),
+      "h-full w-60 p-2"
+    )}
+  >
+    {children}
+  </div>
+)
+
+const Multiple = ({ children }: PropsWithChildren) => (
+  <div className={cn(hstack({ gap: 4 }), "size-full")}>{children}</div>
+)
+
+export const Layout = {
+  Multiple,
+  Centered,
+  Side,
+  Grid,
+}

src/utils/styles.ts

@@ -12,7 +12,7 @@ export const interactive = cva("", {
       key: "bgl-base-background-surface text-text-surface hover:bgl-layer-b/10 active:bgl-layer-b/20",
       ghost:
         "text-text bgl-base-transparent border-input hover:bgl-layer-w/10 active:bgl-layer-w/15 border",
-      flat: "text-text bgl-base-transparent hover:bgl-layer-w/10 active:bgl-layer-w/15",
+      flat: "text-text bgl-base-transparent hover:bgl-layer-w/5 active:bgl-layer-w/10",
       link: "text-text-priority underline-offset-4 hover:underline active:opacity-80",
       destructive:
         "bg-alert-error/10 border-alert-error text-alert-error hover:bg-alert-error/15 active:bg-alert-error/20 border",