some restylings and workspace page

src/App.tsx

@@ -4,6 +4,8 @@ import useClientSession from "./hooks/useClientSession";
 import { ProjectsManagementPage } from "./features/projects-management/ProjectsManagementPage";
 import { Button } from "./components/ui/button";
 import { ErrorPageTemplate } from "./components/template/ErrorPage";
+import { Anchor } from "./components/ui/typography";
+import { ProjectWorkspacePage } from "./features/project-workspace/ProjectWorkspacePage";
 
 export default function App() {
   const { isActive, doActiveThisSession, isOfflineModeSupported } =
@@ -25,8 +27,9 @@ export default function App() {
     return (
       <ErrorPageTemplate>
         <span className="block mb-2">
-          The app was opened in another tab or window. In offline mode you can
-          use it only one at a time.
+          The app was opened in another tab or window.
+          <br />
+          In offline mode you can use it only one at a time.
         </span>
         <Button type="button" onClick={doActiveThisSession}>
           Keep using it here
@@ -40,8 +43,12 @@ export default function App() {
       <Router>
         <Switch>
           <Route path="/" component={ProjectsManagementPage} />
+          <Route path="/project/:uuid" component={ProjectWorkspacePage} />
           <Route>
-            <ErrorPageTemplate>Page not found.</ErrorPageTemplate>
+            <ErrorPageTemplate>
+              Page not found. Go to the <Anchor href="/">root page</Anchor> to
+              keep working.
+            </ErrorPageTemplate>
           </Route>
         </Switch>
       </Router>

src/components/template/ErrorPage.tsx

@@ -2,7 +2,7 @@ import { AppPageTemplate } from "./AppPageTemplate";
 
 export function ErrorPageTemplate({ children }: { children: React.ReactNode }) {
   return (
-    <AppPageTemplate>
+    <AppPageTemplate container>
       <p>
         <strong>Error!</strong>
         <br />

src/components/ui/button.tsx

@@ -1,16 +1,16 @@
-import * as React from "react";
+import { ButtonHTMLAttributes, forwardRef } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "./button-stuff";
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (

src/components/ui/typography.tsx

@@ -1,9 +1,31 @@
-import { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import { AnchorHTMLAttributes, ReactNode } from "react";
 
-export function Title({ children }: { children: ReactNode | string }) {
+export interface TitleProps {
+  children: ReactNode | string;
+}
+
+export function Title({ children }: TitleProps) {
   return (
     <h2 className="scroll-m-20 pb-2 text-xl font-semibold tracking-tight first:mt-0">
       {children}
     </h2>
   );
 }
+
+export function Anchor({
+  children,
+  ...props
+}: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  return (
+    <a
+      {...props}
+      className={cn(
+        "transition-colors hover:text-foreground/80 text-foreground/60",
+        props.className
+      )}
+    >
+      {children}
+    </a>
+  );
+}

src/features/project-workspace/ProjectWorkspacePage.tsx

@@ -0,0 +1,42 @@
+import { useParams } from "wouter";
+import { validate as validateUuid } from "uuid";
+import { AppPageTemplate } from "@/components/template/AppPageTemplate";
+import { Anchor, Title } from "@/components/ui/typography";
+import { useEffect } from "react";
+
+export function ProjectWorkspacePage() {
+  const params = useParams();
+  const projectUUID = validateUuid(params.uuid || "") ? params.uuid : "";
+
+  useEffect(() => {
+    if (!projectUUID) {
+      return;
+    }
+
+    console.warn("TODO", projectUUID);
+  }, [projectUUID]);
+
+  if (!projectUUID) {
+    return (
+      <AppPageTemplate>
+        <Title>Invalid project URL</Title>
+        <p>If you copied and pasted from somewhare, maybe it was incomplete.</p>
+        <p>
+          <Anchor href="/">Click here to go to projects selection.</Anchor>
+        </p>
+      </AppPageTemplate>
+    );
+  }
+
+  return (
+    <AppPageTemplate container>
+      <p>
+        <Anchor href="/">
+          <small>Back to Projects selection</small>
+        </Anchor>
+      </p>
+      <Title>Project workspace</Title>
+      <p>Wadda wadda.</p>
+    </AppPageTemplate>
+  );
+}

src/features/projects-management/ProjectsManagementPage.tsx

@@ -2,8 +2,6 @@ import { SyntheticEvent, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useProjectsManagement } from "./ProjectsManagementContext";
-import { ProjectsManagementContextProvider } from "./ProjectsManagementContextProvider";
 import {
   Dialog,
   DialogContent,
@@ -22,9 +20,12 @@ import {
   FormProvider,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { Title } from "@/components/ui/typography";
+import { Anchor, Title } from "@/components/ui/typography";
 import { AppPageTemplate } from "@/components/template/AppPageTemplate";
 import { ProjectListingItem } from "./projects-management-entities";
+import { cn } from "@/lib/utils";
+import { useProjectsManagement } from "./ProjectsManagementContext";
+import { ProjectsManagementContextProvider } from "./ProjectsManagementContextProvider";
 
 export function ProjectsManagementPage() {
   return (
@@ -46,13 +47,15 @@ function ProjectsManagementHeader() {
 
   return (
     <Title>
-      <span className="pr-4">My projects</span>
+      <span className="pr-4">List of projects</span>
       <ProjectsCreationButton />
     </Title>
   );
 }
 
 function ProjectsList() {
+  const [hoveredProject, setHoveredProject] = useState<string | null>(null);
+
   const { items: projects, isLoading, isError } = useProjectsManagement();
 
   if (isLoading) {
@@ -77,13 +80,30 @@ function ProjectsList() {
   }
 
   return (
-    <ul className="pl-3">
-      {projects.map((project) => (
-        <li key={project.uuid}>
-          {project.name} <ProjectRemovalButton project={project} />
-        </li>
-      ))}
-    </ul>
+    <div>
+      <p>Click on a project to open it:</p>
+      <ul className="list-disc pl-4 mt-2">
+        {projects.map((project) => (
+          <li
+            key={project.uuid}
+            onMouseEnter={() => setHoveredProject(project.uuid)}
+            onMouseLeave={() => setHoveredProject(null)}
+          >
+            <Anchor href={`/project/${project.uuid}`} className="py-4">
+              {project.name}
+            </Anchor>
+            <span
+              className={cn(
+                "ml-5",
+                hoveredProject === project.uuid ? "visible" : "invisible"
+              )}
+            >
+              <ProjectRemovalButton project={project} />
+            </span>
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }