Testing doc view

src/app/workspace/page.tsx

@@ -2,55 +2,25 @@
 
 import Router from "@/components/Router";
 import AppSidebar, { SidebarTrigger } from "@/components/sidebar/AppSidebar";
-import TaskView from "@/components/view/TaskView";
 import useWorkspace from "@/hooks/workspace";
-import { Task } from "@/lib/types";
 import { ChevronRight } from "lucide-react";
-import { useEffect, useState } from "react";
-
-const id = (prefix = "t") =>
-  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
 
 export default function Workspace() {
-  const [route, setRoute] = useState("");
   const workspace = useWorkspace();
 
-  const createTask = (status: string) => {
-    const task: Task = {
-      id: id(),
-      title: "New task",
-      status: status,
-    };
-    workspace.entities[workspace.route].setTasks((c: Task[]) => [...c, task]);
-  };
-
   return (
     <AppSidebar workspace={workspace}>
-      <Router route={route} setRoute={setRoute}>
+      <SidebarTrigger className="w-full px-4">
-        {(route) => (
+        <div className="px-4">
-          <>
+          <header className="w-full border-b-2 pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90">
-            <SidebarTrigger className="w-full px-4">
+            {workspace.name}
-              <div className="px-4">
+            <ChevronRight className="h-5" />
-                <header className="w-full border-b-2 pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90">
+            {workspace.entities[workspace.route].name}
-                  {workspace.name}
+          </header>
-                  <ChevronRight className="h-5" />
+        </div>
-                  {workspace.entities[workspace.route].name}
+      </SidebarTrigger>
-                </header>
+
-              </div>
+      <Router workspace={workspace} />
-            </SidebarTrigger>
-            <TaskView
-              tasks={workspace.entities[workspace.route].tasks}
-              setTasks={workspace.entities[workspace.route].setTasks}
-              createTask={createTask}
-              tags={{
-                website: { color: "yellow", name: "Website" },
-                api: { color: "purple", name: "API" },
-                app: { color: "blue", name: "App" },
-              }}
-            />
-          </>
-        )}
-      </Router>
     </AppSidebar>
   );
 }

src/components/Router.tsx

@@ -1,16 +1,38 @@
 "use client";
 
-import { SetState } from "@/lib/types";
+import { Workspace } from "@/hooks/workspace";
-import React, { useState } from "react";
+import { Task } from "@/lib/types";
+import TaskView from "./view/TaskView";
 
-export default function Router({
+const id = (prefix = "t") =>
-  children,
+  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
-  route,
+
-  setRoute,
+export default function Router({ workspace }: { workspace: Workspace }) {
-}: {
+  const entity = workspace.entities[workspace.route];
-  children: (route: string) => React.JSX.Element;
+  switch (entity.kind) {
-  route: string;
+    case "todo":
-  setRoute: SetState<string>;
+      const createTask = (status: string) => {
-}) {
+        const task: Task = {
-  return children(route);
+          id: id(),
+          title: "New task",
+          status: status,
+        };
+        entity.setTasks((c: Task[]) => [...c, task]);
+      };
+
+      return (
+        <TaskView
+          tasks={entity.tasks}
+          setTasks={entity.setTasks}
+          createTask={createTask}
+          tags={{
+            website: { color: "yellow", name: "Website" },
+            api: { color: "purple", name: "API" },
+            app: { color: "blue", name: "App" },
+          }}
+        />
+      );
+    case "doc":
+      return entity.doc;
+  }
 }

src/hooks/workspace.ts

@@ -2,12 +2,19 @@ import { SidebarEntity } from "@/components/sidebar/Entity";
 import { SetState, Task } from "@/lib/types";
 import { useEffect, useState } from "react";
 
-export type Entity = {
+export type Entity =
-  name: string;
+  | {
-  kind: "todo";
+      name: string;
-  setTasks: SetState<Task[]>;
+      kind: "todo";
-  tasks: Task[];
+      tasks: Task[];
-};
+      setTasks: SetState<Task[]>;
+    }
+  | {
+      name: string;
+      kind: "doc";
+      doc: string;
+      setDoc: SetState<string>;
+    };
 
 export interface Workspace {
   name: string;
@@ -18,13 +25,10 @@ export interface Workspace {
   setRoute: SetState<string>;
 }
 
-function useTasks() {
-  return useState<Task[]>([]);
-}
-
 export default function useWorkspace(): Workspace {
   const [route, setRoute] = useState("alpha_tasks");
-  const [tasks, setTasks] = useTasks();
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [doc, setDoc] = useState("# Hello World!");
 
   useEffect(() => {
     setTasks([
@@ -55,17 +59,30 @@ export default function useWorkspace(): Workspace {
         tasks,
         setTasks,
       },
+
+      alpha_doc: {
+        name: "Alpha docs",
+        kind: "doc",
+        doc,
+        setDoc,
+      },
+      beta_doc: {
+        name: "Beta docs",
+        kind: "doc",
+        doc,
+        setDoc,
+      },
     },
     entityLayout: [
       {
         kind: "group",
         name: "Project alpha",
-        children: [{ id: "alpha_tasks" }],
+        children: [{ id: "alpha_tasks" }, { id: "alpha_doc" }],
       },
       {
         kind: "group",
         name: "Project beta",
-        children: [{ id: "beta_tasks" }],
+        children: [{ id: "beta_tasks" }, { id: "alpha_doc" }],
       },
     ],