Add devcontainer configuration

.devcontainer/Dockerfile

@@ -0,0 +1,14 @@
+ARG VARIANT=18-bullseye
+FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
+
+# [Optional] Uncomment this section to install additional OS packages.
+# RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
+#     && apt-get -y install --no-install-recommends <your-package-list-here>
+
+# [Optional] Uncomment if you want to install an additional version of node using nvm
+# ARG EXTRA_NODE_VERSION=10
+# RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"
+
+# [Optional] Uncomment if you want to install more global node modules
+# RUN su node -c "npm install -g <your-package-list-here>"
+

.devcontainer/devcontainer.json

@@ -0,0 +1,29 @@
+{
+	"name": "RedwoosJS & PostgreSQL",
+  "dockerComposeFile": "docker-compose.yml",
+	"service": "app",
+	"workspaceFolder": "/workspace",
+	// Features to add to the dev container. More info: https://containers.dev/features.
+	// "features": {},
+	// Use 'forwardPorts' to make a list of ports inside the container available locally.
+	// This can be used to network with other containers or with the host.
+	"forwardPorts": [ 8910, 8911, 5432, 5555 ],
+	// Use 'postCreateCommand' to run commands after the container is created.
+	"postCreateCommand": "bash scripts/setup.sh",
+	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			// Add the IDs of extensions you want installed when the container is created.
+			"extensions": [
+				"dbaeumer.vscode-eslint",
+				"ofhumanbondage.react-proptypes-intellisense",
+				"mgmcdermott.vscode-language-babel",
+				"editorconfig.editorconfig",
+				"prisma.prisma",
+				"graphql.vscode-graphql"
+			]
+		}
+	},
+	"remoteUser": "node"
+}

.devcontainer/docker-compose.yml

@@ -0,0 +1,64 @@
+version: '3.8'
+
+services:
+  app:
+    # Using a Dockerfile is optional, but included for completeness.
+    build:
+      context: .
+      dockerfile: Dockerfile
+      args:
+        # Update 'VARIANT' to pick an LTS version of Node.js: 18, 16, 14.
+        # Append -bullseye or -buster to pin to an OS version.
+        # Use -bullseye variants on local arm64/Apple Silicon.
+        VARIANT: 18-bullseye
+
+    volumes:
+      # This is where VS Code should expect to find your project's source code and the value of "workspaceFolder" in .devcontainer/devcontainer.json
+      - ..:/workspace:cached
+
+      # Uncomment the next line to use Docker from inside the container. See https://aka.ms/vscode-remote/samples/docker-from-docker-compose for details.
+      # - /var/run/docker.sock:/var/run/docker.sock
+
+    # Overrides default command so things don't shut down after the process ends.
+    command: sleep infinity
+
+    # Runs app on the same network as the service container, allows "forwardPorts" in devcontainer.json function.
+    network_mode: service:db
+
+    # Use "forwardPorts" in **devcontainer.json** to forward an app port locally.
+    # (Adding the "ports" property to this file will not forward from a Codespace.)
+
+    # Uncomment the next line to use a non-root user for all processes - See https://aka.ms/vscode-remote/containers/non-root for details.
+    # user: vscode
+
+    # Uncomment the next four lines if you will use a ptrace-based debugger like C++, Go, and Rust.
+    # cap_add:
+    #   - SYS_PTRACE
+    # security_opt:
+    #   - seccomp:unconfined
+
+  # You can include other services not opened by VS Code as well
+  db:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_DB: development_db
+      POSTGRES_PASSWORD: postgres
+
+  db-test:
+    image: postgres:latest
+    restart: unless-stopped
+    volumes:
+      - postgres-test-data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_DB: test_db
+      POSTGRES_PASSWORD: postgres
+
+    # As in the "app" service, use "forwardPorts" in **devcontainer.json** to forward an app port locally.
+volumes:
+  postgres-data:
+  postgres-test-data:

.vscode/extensions.json

@@ -10,6 +10,8 @@
     "prisma.prisma",
     "graphql.vscode-graphql",
     "csstools.postcss",
+    "bradlc.vscode-tailwindcss",
+    "csstools.postcss",
     "bradlc.vscode-tailwindcss"
   ],
   "unwantedRecommendations": []

.yarnrc.yml

@@ -6,4 +6,4 @@ nmMode: hardlinks-local
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.4.0.cjs
+yarnPath: .yarn/releases/yarn-1.22.21.cjs

api/db/migrations/20241007160248_remove_demo_user/migration.sql

@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - You are about to drop the `UserExample` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropTable
+PRAGMA foreign_keys=off;
+DROP TABLE "UserExample";
+PRAGMA foreign_keys=on;

api/db/schema.prisma

@@ -14,15 +14,6 @@ generator client {
   binaryTargets = "native"
 }
 
-// Define your own datamodels here and run `yarn redwood prisma migrate dev`
-// to create migrations for them and apply to your dev DB.
-// TODO: Please remove the following example:
-model UserExample {
-  id    Int     @id @default(autoincrement())
-  email String  @unique
-  name  String?
-}
-
 model User {
   id                  Int                @id @default(autoincrement())
   email               String             @unique

api/package.json

@@ -3,10 +3,10 @@
   "version": "0.0.0",
   "private": true,
   "dependencies": {
-    "@redwoodjs/api": "8.3.0",
-    "@redwoodjs/api-server": "8.3.0",
-    "@redwoodjs/auth-dbauth-api": "8.3.0",
-    "@redwoodjs/graphql-server": "8.3.0",
+    "@redwoodjs/api": "8.4.0",
+    "@redwoodjs/api-server": "8.4.0",
+    "@redwoodjs/auth-dbauth-api": "8.4.0",
+    "@redwoodjs/graphql-server": "8.4.0",
     "crypto-js": "^4.2.0"
   },
   "devDependencies": {

api/src/graphql/nachhilfeangebots.sdl.ts

@@ -4,6 +4,7 @@ export const schema = gql`
     subject: String!
     currentClass: String!
     cost: Float!
+    userId: Int!
     user: User!
   }
 
@@ -16,12 +17,14 @@ export const schema = gql`
     subject: String!
     currentClass: String!
     cost: Float!
+    userId: Int!
   }
 
   input UpdateNachhilfeangebotInput {
     subject: String
     currentClass: String
     cost: Float
+    userId: Int
   }
 
   type Mutation {

api/src/services/nachhilfeangebots/nachhilfeangebots.scenarios.ts

@@ -7,14 +7,26 @@ export const standard = defineScenario<Prisma.NachhilfeangebotCreateArgs>({
       data: {
         subject: 'String',
         currentClass: 'String',
-        cost: 9626711.68060984,
+        cost: 3141165.177524339,
+        user: {
+          create: {
+            email: 'String393837',
+            updatedAt: '2024-10-25T18:31:22.454Z',
+          },
+        },
       },
     },
     two: {
       data: {
         subject: 'String',
         currentClass: 'String',
-        cost: 3400746.9395209556,
+        cost: 7812680.539293259,
+        user: {
+          create: {
+            email: 'String8800647',
+            updatedAt: '2024-10-25T18:31:22.454Z',
+          },
+        },
       },
     },
   },

api/src/services/nachhilfeangebots/nachhilfeangebots.test.ts

@@ -38,18 +38,20 @@ describe('nachhilfeangebots', () => {
     }
   )
 
-  scenario('creates a nachhilfeangebot', async () => {
+  scenario('creates a nachhilfeangebot', async (scenario: StandardScenario) => {
     const result = await createNachhilfeangebot({
       input: {
         subject: 'String',
         currentClass: 'String',
-        cost: 3443924.824820386,
+        cost: 5231481.901387487,
+        userId: scenario.nachhilfeangebot.two.userId,
       },
     })
 
     expect(result.subject).toEqual('String')
     expect(result.currentClass).toEqual('String')
-    expect(result.cost).toEqual(new Prisma.Decimal(3443924.824820386))
+    expect(result.cost).toEqual(new Prisma.Decimal(5231481.901387487))
+    expect(result.userId).toEqual(scenario.nachhilfeangebot.two.userId)
   })
 
   scenario('updates a nachhilfeangebot', async (scenario: StandardScenario) => {

api/src/services/nachhilfeangebots/nachhilfeangebots.ts

@@ -1,4 +1,8 @@
-import type { QueryResolvers, MutationResolvers } from 'types/graphql'
+import type {
+  QueryResolvers,
+  MutationResolvers,
+  NachhilfeangebotRelationResolvers,
+} from 'types/graphql'
 
 import { db } from 'src/lib/db'
 
@@ -9,21 +13,15 @@ export const nachhilfeangebots: QueryResolvers['nachhilfeangebots'] = () => {
 export const nachhilfeangebot: QueryResolvers['nachhilfeangebot'] = ({
   id,
 }) => {
-  return {
-    ...db.nachhilfeangebot.findUnique({
-      where: { id },
-    }),
-    user: db.nachhilfeangebot.findUnique({ where: { id } }).user(),
-  }
+  return db.nachhilfeangebot.findUnique({
+    where: { id },
+  })
 }
 
 export const createNachhilfeangebot: MutationResolvers['createNachhilfeangebot'] =
   ({ input }) => {
     return db.nachhilfeangebot.create({
-      data: {
-        ...input,
-        userId: context.currentUser.id,
-      },
+      data: input,
     })
   }
 
@@ -41,3 +39,9 @@ export const deleteNachhilfeangebot: MutationResolvers['deleteNachhilfeangebot']
       where: { id },
     })
   }
+
+export const Nachhilfeangebot: NachhilfeangebotRelationResolvers = {
+  user: (_obj, { root }) => {
+    return db.nachhilfeangebot.findUnique({ where: { id: root?.id } }).user()
+  },
+}

package.json

@@ -7,10 +7,10 @@
     ]
   },
   "devDependencies": {
-    "@redwoodjs/auth-dbauth-setup": "8.3.0",
-    "@redwoodjs/cli-storybook-vite": "8.3.0",
-    "@redwoodjs/core": "8.3.0",
-    "@redwoodjs/project-config": "8.3.0",
+    "@redwoodjs/auth-dbauth-setup": "8.4.0",
+    "@redwoodjs/cli-storybook-vite": "8.4.0",
+    "@redwoodjs/core": "8.4.0",
+    "@redwoodjs/project-config": "8.4.0",
     "prettier-plugin-tailwindcss": "^0.5.12"
   },
   "eslintConfig": {
@@ -23,12 +23,15 @@
   "prisma": {
     "seed": "yarn rw exec seed"
   },
-  "packageManager": "yarn@4.4.0",
+  "packageManager": "yarn@1.22.21",
   "resolutions": {
     "@storybook/react-dom-shim@npm:7.6.17": "https://verdaccio.tobbe.dev/@storybook/react-dom-shim/-/react-dom-shim-8.0.8.tgz"
   },
   "dependencies": {
     "@headlessui/react": "^2.1.9",
     "crypto-js": "^4.2.0"
+  },
+  "scripts": {
+    "shad": "cd web && npx shadcn@latest add"
   }
 }

web/components.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "aliases": {
+    "components": "src/components",
+    "ui": "src/components/ui",
+    "utils": "src/lib/utils"
+  },
+  "style": "default",
+  "tailwind": {
+    "baseColor": "neutral",
+    "config": "./config/tailwind.config.js",
+    "css": "./src/index.css",
+    "cssVariables": true,
+    "prefix": "",
+    "rsc": false,
+    "tsx": true
+  }
+}

web/config/tailwind.config.js

@@ -1,9 +1,88 @@
-/** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ['class'],
   content: ['src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    extend: {},
+  	container: {
+  		center: 'true',
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: '`var(--radius)`',
+  			md: '`calc(var(--radius) - 2px)`',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		}
+  	}
   },
-  plugins: [],
+  plugins: [require('tailwindcss-animate')],
 }
-

web/package.json

@@ -12,14 +12,28 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.1.5",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@redwoodjs/auth-dbauth-web": "8.3.0",
     "@redwoodjs/forms": "8.3.0",
     "@redwoodjs/router": "8.3.0",
     "@redwoodjs/web": "8.3.0",
     "@redwoodjs/web-server": "8.3.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "humanize-string": "2.1.0",
+    "lucide-react": "^0.453.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-day-picker": "8.10.1",
+    "react-dom": "18.3.1",
+    "tailwind-merge": "^2.5.4",
+    "tailwindcss-animate": "^1.0.7",
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "devDependencies": {
     "@redwoodjs/vite": "8.3.0",
@@ -28,6 +42,6 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
-    "tailwindcss": "^3.4.13"
+    "tailwindcss": "^3.4.14"
   }
 }

web/src/App.tsx

@@ -10,7 +10,6 @@ import { AuthProvider, useAuth } from './auth'
 import './index.css'
 import './scaffold.css'
 
-
 interface AppProps {
   children?: ReactNode
 }
@@ -19,7 +18,9 @@ const App = ({ children }: AppProps) => (
   <FatalErrorBoundary page={FatalErrorPage}>
     <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
       <AuthProvider>
-        <RedwoodApolloProvider useAuth={useAuth}>{children}</RedwoodApolloProvider>
+        <RedwoodApolloProvider useAuth={useAuth}>
+          {children}
+        </RedwoodApolloProvider>
       </AuthProvider>
     </RedwoodProvider>
   </FatalErrorBoundary>

web/src/Routes.tsx

@@ -9,16 +9,20 @@
 
 import { Set, Router, Route, PrivateSet } from '@redwoodjs/router'
 
-import NavigationLayout from 'src/layouts/NavigationLayout'
 import ScaffoldLayout from 'src/layouts/ScaffoldLayout'
+import SidebarLayout from 'src/layouts/SidebarLayout'
 
 import { useAuth } from './auth'
 
 const Routes = () => {
   return (
     <Router useAuth={useAuth}>
-      <PrivateSet wrap={NavigationLayout} unauthenticated="home">
+      <PrivateSet wrap={SidebarLayout} unauthenticated="home">
         <Route path="/dashboard" page={DashboardPage} name="dashboard" />
+        <Route path="/search" page={SearchPage} name="search" />
+        <Route path="/calendar" page={CalendarPage} name="calendar" />
+        <Route path="/offer" page={OfferPage} name="offer" />
+
         <PrivateSet unauthenticated="home" roles="admin">
           <Set wrap={ScaffoldLayout} title="Posts" titleTo="posts" buttonLabel="New Post" buttonTo="newPost">
             <Route path="/admin/posts/new" page={PostNewPostPage} name="newPost" />
@@ -26,18 +30,15 @@ const Routes = () => {
             <Route path="/admin/posts/{id:Int}" page={PostPostPage} name="post" />
             <Route path="/admin/posts" page={PostPostsPage} name="posts" />
           </Set>
-          <Set wrap={ScaffoldLayout} title="Nachhilfeangebote" titleTo="nachhilfeangebote" buttonLabel="New Nachhilfeangebot" buttonTo="newNachhilfeangebot">
-            <Route path="/admin/nachhilfeangebote/new" page={NachhilfeangebotNewNachhilfeangebotPage} name="newNachhilfeangebot" />
-            <Route path="/admin/nachhilfeangebote/{id:Int}/edit" page={NachhilfeangebotEditNachhilfeangebotPage} name="editNachhilfeangebot" />
-            <Route path="/admin/nachhilfeangebote/{id:Int}" page={NachhilfeangebotNachhilfeangebotPage} name="nachhilfeangebot" />
-            <Route path="/admin/nachhilfeangebote" page={NachhilfeangebotNachhilfeangebotsPage} name="nachhilfeangebote" />
+          <Set wrap={ScaffoldLayout} title="Nachhilfeangebots" titleTo="nachhilfeangebots" buttonLabel="New Nachhilfeangebot" buttonTo="newNachhilfeangebot">
+            <Route path="/nachhilfeangebots/new" page={NachhilfeangebotNewNachhilfeangebotPage} name="newNachhilfeangebot" />
+            <Route path="/nachhilfeangebots/{id:Int}/edit" page={NachhilfeangebotEditNachhilfeangebotPage} name="editNachhilfeangebot" />
+            <Route path="/nachhilfeangebots/{id:Int}" page={NachhilfeangebotNachhilfeangebotPage} name="nachhilfeangebot" />
+            <Route path="/nachhilfeangebots" page={NachhilfeangebotNachhilfeangebotsPage} name="nachhilfeangebots" />
           </Set>
         </PrivateSet>
       </PrivateSet>
-      {/* <Route path="/login" page={LoginPage} name="login" /> */}
-      {/* <Route path="/signup" page={SignupPage} name="signup" /> */}
-      {/* <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" /> */}
-      {/* <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" /> */}
+
       <Route path="/" page={HomePage} name="home" />
       <Route notfound page={NotFoundPage} />
     </Router>

web/src/components/Nachhilfeangebot/EditNachhilfeangebotCell/EditNachhilfeangebotCell.tsx

@@ -22,6 +22,7 @@ export const QUERY: TypedDocumentNode<EditNachhilfeangebotById> = gql`
       subject
       currentClass
       cost
+      userId
     }
   }
 `
@@ -39,6 +40,7 @@ const UPDATE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
       subject
       currentClass
       cost
+      userId
     }
   }
 `

web/src/components/Nachhilfeangebot/Nachhilfeangebot/Nachhilfeangebot.tsx

@@ -32,7 +32,7 @@ const Nachhilfeangebot = ({ nachhilfeangebot }: Props) => {
     {
       onCompleted: () => {
         toast.success('Nachhilfeangebot deleted')
-        navigate(routes.nachhilfeangebote())
+        navigate(routes.nachhilfeangebots())
       },
       onError: (error) => {
         toast.error(error.message)
@@ -74,6 +74,10 @@ const Nachhilfeangebot = ({ nachhilfeangebot }: Props) => {
               <th>Cost</th>
               <td>{nachhilfeangebot.cost}</td>
             </tr>
+            <tr>
+              <th>User id</th>
+              <td>{nachhilfeangebot.userId}</td>
+            </tr>
           </tbody>
         </table>
       </div>

web/src/components/Nachhilfeangebot/NachhilfeangebotCell/NachhilfeangebotCell.tsx

@@ -21,6 +21,7 @@ export const QUERY: TypedDocumentNode<
       subject
       currentClass
       cost
+      userId
     }
   }
 `

web/src/components/Nachhilfeangebot/NachhilfeangebotForm/NachhilfeangebotForm.tsx

@@ -10,6 +10,7 @@ import {
   FieldError,
   Label,
   TextField,
+  NumberField,
   Submit,
 } from '@redwoodjs/forms'
 
@@ -96,6 +97,24 @@ const NachhilfeangebotForm = (props: NachhilfeangebotFormProps) => {
 
         <FieldError name="cost" className="rw-field-error" />
 
+        <Label
+          name="userId"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          User id
+        </Label>
+
+        <NumberField
+          name="userId"
+          defaultValue={props.nachhilfeangebot?.userId}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="userId" className="rw-field-error" />
+
         <div className="rw-button-group">
           <Submit disabled={props.loading} className="rw-button rw-button-blue">
             Save

web/src/components/Nachhilfeangebot/Nachhilfeangebots/Nachhilfeangebots.tsx

@@ -60,6 +60,7 @@ const NachhilfeangebotsList = ({
             <th>Subject</th>
             <th>Current class</th>
             <th>Cost</th>
+            <th>User id</th>
             <th>&nbsp;</th>
           </tr>
         </thead>
@@ -70,6 +71,7 @@ const NachhilfeangebotsList = ({
               <td>{truncate(nachhilfeangebot.subject)}</td>
               <td>{truncate(nachhilfeangebot.currentClass)}</td>
               <td>{truncate(nachhilfeangebot.cost)}</td>
+              <td>{truncate(nachhilfeangebot.userId)}</td>
               <td>
                 <nav className="rw-table-actions">
                   <Link

web/src/components/Nachhilfeangebot/NachhilfeangebotsCell/NachhilfeangebotsCell.tsx

@@ -22,6 +22,7 @@ export const QUERY: TypedDocumentNode<
       subject
       currentClass
       cost
+      userId
     }
   }
 `
@@ -31,9 +32,9 @@ export const Loading = () => <div>Loading...</div>
 export const Empty = () => {
   return (
     <div className="rw-text-center">
-      Keine Nachhilfeangebote bis jetzt.{' '}
+      No nachhilfeangebots yet.{' '}
       <Link to={routes.newNachhilfeangebot()} className="rw-link">
-        Ein neues erstellen?
+        Create one?
       </Link>
     </div>
   )

web/src/components/Nachhilfeangebot/NewNachhilfeangebot/NewNachhilfeangebot.tsx

@@ -30,7 +30,7 @@ const NewNachhilfeangebot = () => {
     {
       onCompleted: () => {
         toast.success('Nachhilfeangebot created')
-        navigate(routes.nachhilfeangebote())
+        navigate(routes.nachhilfeangebots())
       },
       onError: (error) => {
         toast.error(error.message)

web/src/components/Post/Posts/Posts.tsx

@@ -49,7 +49,7 @@ const PostsList = ({ posts }: FindPosts) => {
       <table className="rw-table">
         <thead>
           <tr>
-            <th>Id</th>
+            <th>Idsss</th>
             <th>Title</th>
             <th>Body</th>
             <th>Created at</th>

web/src/components/calendar/sidebar.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { Calendar } from '@/components/ui/calendar'
+import { Sidebar, SidebarHeader } from '@/components/ui/sidebar'
+
+export function CalendarSidebar() {
+  return (
+    <Sidebar side="right">
+      <SidebarHeader>
+        <Calendar
+          mode="single"
+          // selected={date}
+          // onSelect={setDate}
+          className="w-full rounded-md border"
+        />
+      </SidebarHeader>
+    </Sidebar>
+  )
+}

web/src/components/navigation/navbar.tsx

@@ -0,0 +1,112 @@
+import { Calendar, ChevronUp, Home, Inbox, Search, User2 } from 'lucide-react'
+
+import { Link, routes } from '@redwoodjs/router'
+
+import { useAuth } from 'src/auth'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarFooter,
+} from '@/components/ui/sidebar'
+
+// Menu items.
+const items = [
+  {
+    title: 'Dashboard',
+    // url: routes.dashboard(),
+    url: '/dashboard',
+    icon: Home,
+  },
+  {
+    title: 'Nachhilfe suchen',
+    // url: routes.posts(),
+    url: '/admin/posts',
+    icon: Search,
+  },
+  {
+    title: 'Nachhilfetermine planen',
+    url: '#',
+    icon: Calendar,
+  },
+  {
+    title: 'Nachhilfe anbieten',
+    url: '#',
+    icon: Inbox,
+  },
+]
+
+export function AppSidebar() {
+  const { logOut, currentUser: user } = useAuth()
+
+  return (
+    <Sidebar>
+      <SidebarHeader>
+        <Link to={routes.dashboard()}>
+          <span className="m-2 inline-block aspect-square rounded bg-blue-500 p-2">
+            NH
+          </span>
+          Nachhilfesystem 2024
+        </Link>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Application</SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              {items.map((item) => (
+                <SidebarMenuItem key={item.title}>
+                  <SidebarMenuButton asChild>
+                    <Link to={item.url}>
+                      <item.icon />
+                      <span>{item.title}</span>
+                    </Link>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              ))}
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuButton>
+                  <User2 /> {user.firstName + ' ' + user.lastName}
+                  <ChevronUp className="ml-auto" />
+                </SidebarMenuButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                side="top"
+                className="w-[--radix-popper-anchor-width]"
+              >
+                <DropdownMenuItem>Account</DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Link to={''}>Settings</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <button onClick={logOut}>Sign out</button>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarFooter>
+    </Sidebar>
+  )
+}

web/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

web/src/components/ui/calendar.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react'
+
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { DayPicker } from 'react-day-picker'
+
+import { buttonVariants } from 'src/components/ui/button'
+
+import { cn } from '@/lib/utils'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'
+
+export { Calendar }

web/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,199 @@
+import * as React from 'react'
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}

web/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'border-input bg-background ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = 'Input'
+
+export { Input }

web/src/components/ui/separator.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from '@/lib/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }

web/src/components/ui/sheet.tsx

@@ -0,0 +1,141 @@
+'use client'
+
+import * as React from 'react'
+
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+          'inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = 'right', className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-2 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = 'SheetHeader'
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = 'SheetFooter'
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn('text-foreground text-lg font-semibold', className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

web/src/components/ui/sidebar.tsx

@@ -0,0 +1,764 @@
+import * as React from 'react'
+
+import { Slot } from '@radix-ui/react-slot'
+import { VariantProps, cva } from 'class-variance-authority'
+import { PanelLeft } from 'lucide-react'
+
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from 'src/components/ui/tooltip'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Separator } from '@/components/ui/separator'
+import { Sheet, SheetContent } from '@/components/ui/sheet'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useIsMobile } from '@/hooks/use-mobile'
+import { cn } from '@/lib/utils'
+
+const SIDEBAR_COOKIE_NAME = 'sidebar:state'
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = '16rem'
+const SIDEBAR_WIDTH_MOBILE = '18rem'
+const SIDEBAR_WIDTH_ICON = '3rem'
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+type SidebarContext = {
+  state: 'expanded' | 'collapsed'
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.')
+  }
+
+  return context
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    defaultOpen?: boolean
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  }
+>(
+  (
+    {
+      defaultOpen = true,
+      open: openProp,
+      onOpenChange: setOpenProp,
+      className,
+      style,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isMobile = useIsMobile()
+    const [openMobile, setOpenMobile] = React.useState(false)
+
+    // This is the internal state of the sidebar.
+    // We use openProp and setOpenProp for control from outside the component.
+    const [_open, _setOpen] = React.useState(defaultOpen)
+    const open = openProp ?? _open
+    const setOpen = React.useCallback(
+      (value: boolean | ((value: boolean) => boolean)) => {
+        if (setOpenProp) {
+          return setOpenProp?.(
+            typeof value === 'function' ? value(open) : value
+          )
+        }
+
+        _setOpen(value)
+
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+      },
+      [setOpenProp, open]
+    )
+
+    // Helper to toggle the sidebar.
+    const toggleSidebar = React.useCallback(() => {
+      return isMobile
+        ? setOpenMobile((open) => !open)
+        : setOpen((open) => !open)
+    }, [isMobile, setOpen, setOpenMobile])
+
+    // Adds a keyboard shortcut to toggle the sidebar.
+    React.useEffect(() => {
+      const handleKeyDown = (event: KeyboardEvent) => {
+        if (
+          event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+          (event.metaKey || event.ctrlKey)
+        ) {
+          event.preventDefault()
+          toggleSidebar()
+        }
+      }
+
+      window.addEventListener('keydown', handleKeyDown)
+      return () => window.removeEventListener('keydown', handleKeyDown)
+    }, [toggleSidebar])
+
+    // We add a state so that we can do data-state="expanded" or "collapsed".
+    // This makes it easier to style the sidebar with Tailwind classes.
+    const state = open ? 'expanded' : 'collapsed'
+
+    const contextValue = React.useMemo<SidebarContext>(
+      () => ({
+        state,
+        open,
+        setOpen,
+        isMobile,
+        openMobile,
+        setOpenMobile,
+        toggleSidebar,
+      }),
+      [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    )
+
+    return (
+      <SidebarContext.Provider value={contextValue}>
+        <TooltipProvider delayDuration={0}>
+          <div
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH,
+                '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+                ...style,
+              } as React.CSSProperties
+            }
+            className={cn(
+              'group/sidebar-wrapper has-[[data-variant=inset]]:bg-sidebar flex min-h-svh w-full',
+              className
+            )}
+            ref={ref}
+            {...props}
+          >
+            {children}
+          </div>
+        </TooltipProvider>
+      </SidebarContext.Provider>
+    )
+  }
+)
+SidebarProvider.displayName = 'SidebarProvider'
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    side?: 'left' | 'right'
+    variant?: 'sidebar' | 'floating' | 'inset'
+    collapsible?: 'offcanvas' | 'icon' | 'none'
+  }
+>(
+  (
+    {
+      side = 'left',
+      variant = 'sidebar',
+      collapsible = 'offcanvas',
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+    if (collapsible === 'none') {
+      return (
+        <div
+          className={cn(
+            'bg-sidebar text-sidebar-foreground flex h-full w-[--sidebar-width] flex-col',
+            className
+          )}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      )
+    }
+
+    if (isMobile) {
+      return (
+        <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetContent
+            data-sidebar="sidebar"
+            data-mobile="true"
+            className="bg-sidebar text-sidebar-foreground w-[--sidebar-width] p-0 [&>button]:hidden"
+            style={
+              {
+                '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+              } as React.CSSProperties
+            }
+            side={side}
+          >
+            <div className="flex h-full w-full flex-col">{children}</div>
+          </SheetContent>
+        </Sheet>
+      )
+    }
+
+    return (
+      <div
+        ref={ref}
+        className="text-sidebar-foreground group peer hidden md:block"
+        data-state={state}
+        data-collapsible={state === 'collapsed' ? collapsible : ''}
+        data-variant={variant}
+        data-side={side}
+      >
+        {/* This is what handles the sidebar gap on desktop */}
+        <div
+          className={cn(
+            'relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear',
+            'group-data-[collapsible=offcanvas]:w-0',
+            'group-data-[side=right]:rotate-180',
+            variant === 'floating' || variant === 'inset'
+              ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]'
+          )}
+        />
+        <div
+          className={cn(
+            'fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex',
+            side === 'left'
+              ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+              : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+            // Adjust the padding for floating and inset variants.
+            variant === 'floating' || variant === 'inset'
+              ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'
+              : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',
+            className
+          )}
+          {...props}
+        >
+          <div
+            data-sidebar="sidebar"
+            className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow"
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+Sidebar.displayName = 'Sidebar'
+
+const SidebarTrigger = React.forwardRef<
+  React.ElementRef<typeof Button>,
+  React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      ref={ref}
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('h-7 w-7', className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeft />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+})
+SidebarTrigger.displayName = 'SidebarTrigger'
+
+const SidebarRail = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'>
+>(({ className, ...props }, ref) => {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      ref={ref}
+      data-sidebar="rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+        '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'group-data-[collapsible=offcanvas]:hover:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarRail.displayName = 'SidebarRail'
+
+const SidebarInset = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'main'>
+>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        'bg-background relative flex min-h-svh flex-1 flex-col',
+        'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInset.displayName = 'SidebarInset'
+
+const SidebarInput = React.forwardRef<
+  React.ElementRef<typeof Input>,
+  React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+  return (
+    <Input
+      ref={ref}
+      data-sidebar="input"
+      className={cn(
+        'bg-background focus-visible:ring-sidebar-ring h-8 w-full shadow-none focus-visible:ring-2',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarInput.displayName = 'SidebarInput'
+
+const SidebarHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+})
+SidebarHeader.displayName = 'SidebarHeader'
+
+const SidebarFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  )
+})
+SidebarFooter.displayName = 'SidebarFooter'
+
+const SidebarSeparator = React.forwardRef<
+  React.ElementRef<typeof Separator>,
+  React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+  return (
+    <Separator
+      ref={ref}
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  )
+})
+SidebarSeparator.displayName = 'SidebarSeparator'
+
+const SidebarContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarContent.displayName = 'SidebarContent'
+
+const SidebarGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+      {...props}
+    />
+  )
+})
+SidebarGroup.displayName = 'SidebarGroup'
+
+const SidebarGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'div'
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-none transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupLabel.displayName = 'SidebarGroupLabel'
+
+const SidebarGroupAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarGroupAction.displayName = 'SidebarGroupAction'
+
+const SidebarGroupContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="group-content"
+    className={cn('w-full text-sm', className)}
+    {...props}
+  />
+))
+SidebarGroupContent.displayName = 'SidebarGroupContent'
+
+const SidebarMenu = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu"
+    className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+    {...props}
+  />
+))
+SidebarMenu.displayName = 'SidebarMenu'
+
+const SidebarMenuItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    data-sidebar="menu-item"
+    className={cn('group/menu-item relative', className)}
+    {...props}
+  />
+))
+SidebarMenuItem.displayName = 'SidebarMenuItem'
+
+const sidebarMenuButtonVariants = cva(
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+)
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean
+    isActive?: boolean
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+  (
+    {
+      asChild = false,
+      isActive = false,
+      variant = 'default',
+      size = 'default',
+      tooltip,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'button'
+    const { isMobile, state } = useSidebar()
+
+    const button = (
+      <Comp
+        ref={ref}
+        data-sidebar="menu-button"
+        data-size={size}
+        data-active={isActive}
+        className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+        {...props}
+      />
+    )
+
+    if (!tooltip) {
+      return button
+    }
+
+    if (typeof tooltip === 'string') {
+      tooltip = {
+        children: tooltip,
+      }
+    }
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent
+          side="right"
+          align="center"
+          hidden={state !== 'collapsed' || isMobile}
+          {...tooltip}
+        />
+      </Tooltip>
+    )
+  }
+)
+SidebarMenuButton.displayName = 'SidebarMenuButton'
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> & {
+    asChild?: boolean
+    showOnHover?: boolean
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 after:md:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuAction.displayName = 'SidebarMenuAction'
+
+const SidebarMenuBadge = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-sidebar="menu-badge"
+    className={cn(
+      'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums',
+      'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+      'peer-data-[size=sm]/menu-button:top-1',
+      'peer-data-[size=default]/menu-button:top-1.5',
+      'peer-data-[size=lg]/menu-button:top-2.5',
+      'group-data-[collapsible=icon]:hidden',
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuBadge.displayName = 'SidebarMenuBadge'
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & {
+    showIcon?: boolean
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+})
+SidebarMenuSkeleton.displayName = 'SidebarMenuSkeleton'
+
+const SidebarMenuSub = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<'ul'>
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    data-sidebar="menu-sub"
+    className={cn(
+      'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+      'group-data-[collapsible=icon]:hidden',
+      className
+    )}
+    {...props}
+  />
+))
+SidebarMenuSub.displayName = 'SidebarMenuSub'
+
+const SidebarMenuSubItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<'li'>
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+SidebarMenuSubItem.displayName = 'SidebarMenuSubItem'
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<'a'> & {
+    asChild?: boolean
+    size?: 'sm' | 'md'
+    isActive?: boolean
+  }
+>(({ asChild = false, size = 'md', isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a'
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className
+      )}
+      {...props}
+    />
+  )
+})
+SidebarMenuSubButton.displayName = 'SidebarMenuSubButton'
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

web/src/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from '@/lib/utils'
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn('bg-muted animate-pulse rounded-md', className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

web/src/components/ui/tooltip.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

web/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

web/src/index.css

@@ -11,3 +11,137 @@
 /**
  * END --- SETUP TAILWINDCSS EDIT
  */
+
+ @layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+
+    --sidebar-background: 0 0% 98%;
+
+    --sidebar-foreground: 240 5.3% 26.1%;
+
+    --sidebar-primary: 240 5.9% 10%;
+
+    --sidebar-primary-foreground: 0 0% 98%;
+
+    --sidebar-accent: 240 4.8% 95.9%;
+
+    --sidebar-accent-foreground: 240 5.9% 10%;
+
+    --sidebar-border: 220 13% 91%;
+
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+
+    --sidebar-background: 240 5.9% 10%;
+
+    --sidebar-foreground: 240 4.8% 95.9%;
+
+    --sidebar-primary: 224.3 76.3% 48%;
+
+    --sidebar-primary-foreground: 0 0% 100%;
+
+    --sidebar-accent: 240 3.7% 15.9%;
+
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+
+    --sidebar-border: 240 3.7% 15.9%;
+
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+}
+
+/* @layer base {
+  :root {
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
+  .dark {
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+} */

web/src/index.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/png" href="/favicon.png" />
 </head>
 
-<body>
+<body class="dark">
   <!-- Please keep this div empty -->
   <div id="redwood-app"></div>
 </body>

web/src/layouts/SidebarLayout/SidebarLayout.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import SidebarLayout from './SidebarLayout'
+
+const meta: Meta<typeof SidebarLayout> = {
+  component: SidebarLayout,
+}
+
+export default meta
+
+type Story = StoryObj<typeof SidebarLayout>
+
+export const Primary: Story = {}

web/src/layouts/SidebarLayout/SidebarLayout.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import SidebarLayout from './SidebarLayout'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('SidebarLayout', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<SidebarLayout />)
+    }).not.toThrow()
+  })
+})

web/src/layouts/SidebarLayout/SidebarLayout.tsx

@@ -0,0 +1,20 @@
+import { AppSidebar } from '@/components/navigation/navbar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+
+type SidebarLayoutProps = {
+  children?: React.ReactNode
+}
+
+const SidebarLayout = ({ children }: SidebarLayoutProps) => {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+
+export default SidebarLayout

web/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

web/src/pages/AboutPage/AboutPage.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import AboutPage from './AboutPage'
+
+const meta: Meta<typeof AboutPage> = {
+  component: AboutPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof AboutPage>
+
+export const Primary: Story = {}

web/src/pages/AboutPage/AboutPage.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import AboutPage from './AboutPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('AboutPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<AboutPage />)
+    }).not.toThrow()
+  })
+})

web/src/pages/AboutPage/AboutPage.tsx

@@ -0,0 +1,21 @@
+// import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+const AboutPage = () => {
+  return (
+    <>
+      <Metadata title="About" description="About page" />
+
+      <h1>AboutPage</h1>
+      <p>
+        Find me inasdf <code>./web/src/pages/AboutPage/AboutPage.tsx</code>
+      </p>
+      {/*
+          My default route is named `about`, link to me with:
+          `<Link to={routes.about()}>About</Link>`
+      */}
+    </>
+  )
+}
+
+export default AboutPage

web/src/pages/CalendarPage/CalendarPage.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import CalendarPage from './CalendarPage'
+
+const meta: Meta<typeof CalendarPage> = {
+  component: CalendarPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof CalendarPage>
+
+export const Primary: Story = {}

web/src/pages/CalendarPage/CalendarPage.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import CalendarPage from './CalendarPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('CalendarPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<CalendarPage />)
+    }).not.toThrow()
+  })
+})

web/src/pages/CalendarPage/CalendarPage.tsx

@@ -0,0 +1,22 @@
+// import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+import { CalendarSidebar } from '@/components/calendar/sidebar'
+import { SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar'
+
+const CalendarPage = () => {
+  return (
+    <SidebarProvider>
+      <Metadata title="Calendar" description="Calendar page" />
+
+      <SidebarTrigger />
+      <h1>CalendarPage</h1>
+      <p>
+        Find me in <code>./web/src/pages/CalendarPage/CalendarPage.tsx</code>
+      </p>
+      <CalendarSidebar />
+    </SidebarProvider>
+  )
+}
+
+export default CalendarPage

web/src/pages/OfferPage/OfferPage.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import OfferPage from './OfferPage'
+
+const meta: Meta<typeof OfferPage> = {
+  component: OfferPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof OfferPage>
+
+export const Primary: Story = {}

web/src/pages/OfferPage/OfferPage.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import OfferPage from './OfferPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('OfferPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<OfferPage />)
+    }).not.toThrow()
+  })
+})

web/src/pages/OfferPage/OfferPage.tsx

@@ -0,0 +1,21 @@
+// import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+const OfferPage = () => {
+  return (
+    <>
+      <Metadata title="Offer" description="Offer page" />
+
+      <h1>OfferPage</h1>
+      <p>
+        Find me in <code>./web/src/pages/OfferPage/OfferPage.tsx</code>
+      </p>
+      {/*
+          My default route is named `offer`, link to me with:
+          `<Link to={routes.offer()}>Offer</Link>`
+      */}
+    </>
+  )
+}
+
+export default OfferPage

web/src/pages/SearchPage/SearchPage.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import SearchPage from './SearchPage'
+
+const meta: Meta<typeof SearchPage> = {
+  component: SearchPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof SearchPage>
+
+export const Primary: Story = {}

web/src/pages/SearchPage/SearchPage.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import SearchPage from './SearchPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('SearchPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<SearchPage />)
+    }).not.toThrow()
+  })
+})

web/src/pages/SearchPage/SearchPage.tsx

@@ -0,0 +1,21 @@
+// import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+const SearchPage = () => {
+  return (
+    <>
+      <Metadata title="Search" description="Search page" />
+
+      <h1>SearchPage</h1>
+      <p>
+        Find me in <code>./web/src/pages/SearchPage/SearchPage.tsx</code>
+      </p>
+      {/*
+          My default route is named `search`, link to me with:
+          `<Link to={routes.search()}>Search</Link>`
+      */}
+    </>
+  )
+}
+
+export default SearchPage

web/src/scaffold.css

@@ -21,26 +21,26 @@
   @apply text-gray-500;
 }
 .rw-header {
-  @apply flex justify-between py-4 px-8;
+  @apply flex justify-between px-8 py-4;
 }
 .rw-main {
   @apply mx-4 pb-4;
 }
 .rw-segment {
-  @apply rounded-lg overflow-hidden w-full border border-gray-200;
+  @apply w-full overflow-hidden rounded-lg border border-gray-200;
   scrollbar-color: theme('colors.zinc.400') transparent;
 }
 .rw-segment::-webkit-scrollbar {
   height: initial;
 }
 .rw-segment::-webkit-scrollbar-track {
-  @apply border-gray-200 bg-transparent border-solid rounded-t-none rounded-b-[10px] border-0 border-t p-[2px];
+  @apply rounded-b-[10px] rounded-t-none border-0 border-t border-solid border-gray-200 bg-transparent p-[2px];
 }
 .rw-segment::-webkit-scrollbar-thumb {
-  @apply bg-zinc-400 bg-clip-content border-[3px] border-solid border-transparent rounded-full;
+  @apply rounded-full border-[3px] border-solid border-transparent bg-zinc-400 bg-clip-content;
 }
 .rw-segment-header {
-  @apply bg-gray-200 text-gray-700 py-3 px-4;
+  @apply bg-gray-200 px-4 py-3 text-gray-700;
 }
 .rw-segment-main {
   @apply bg-gray-100 p-4;
@@ -52,7 +52,7 @@
   @apply text-blue-500;
 }
 .rw-forgot-link {
-  @apply text-xs text-gray-400 text-right mt-1 underline;
+  @apply mt-1 text-right text-xs text-gray-400 underline;
 }
 .rw-forgot-link:hover {
   @apply text-blue-500;
@@ -76,26 +76,26 @@
   @apply text-sm font-semibold;
 }
 .rw-form-wrapper {
-  @apply text-sm -mt-4;
+  @apply -mt-4 text-sm;
 }
 .rw-cell-error,
 .rw-form-error-wrapper {
-  @apply p-4 bg-red-50 text-red-600 border border-red-100 rounded my-4;
+  @apply my-4 rounded border border-red-100 bg-red-50 p-4 text-red-600;
 }
 .rw-form-error-title {
   @apply m-0 font-semibold;
 }
 .rw-form-error-list {
-  @apply mt-2 list-disc list-inside;
+  @apply mt-2 list-inside list-disc;
 }
 .rw-button {
-  @apply flex justify-center py-1 px-4 border-0 rounded bg-gray-200 text-gray-500 text-xs font-semibold uppercase tracking-wide leading-loose no-underline cursor-pointer transition duration-100;
+  @apply flex cursor-pointer justify-center rounded border-0 bg-gray-200 px-4 py-1 text-xs font-semibold uppercase leading-loose tracking-wide text-gray-500 no-underline transition duration-100;
 }
 .rw-button:hover {
   @apply bg-gray-500 text-white;
 }
 .rw-button.rw-button-small {
-  @apply text-xs rounded-sm py-1 px-2;
+  @apply rounded-sm px-2 py-1 text-xs;
 }
 .rw-button.rw-button-green {
   @apply bg-green-500 text-white;
@@ -116,10 +116,10 @@
   @apply bg-red-700 text-white;
 }
 .rw-button-icon {
-  @apply text-xl leading-5 mr-1;
+  @apply mr-1 text-xl leading-5;
 }
 .rw-button-group {
-  @apply flex justify-center my-3 mx-2;
+  @apply mx-2 my-3 flex justify-center;
 }
 .rw-button-group .rw-button {
   @apply mx-1;
@@ -128,13 +128,13 @@
   @apply mt-8;
 }
 .rw-label {
-  @apply block mt-6 text-gray-600 font-semibold text-left;
+  @apply mt-6 block text-left font-semibold text-gray-600;
 }
 .rw-label.rw-label-error {
   @apply text-red-600;
 }
 .rw-input {
-  @apply block mt-2 w-full p-2 bg-white border border-gray-200 rounded outline-none;
+  @apply mt-2 block w-full rounded border border-gray-200 bg-white p-2 outline-none;
 }
 .rw-check-radio-items {
   @apply flex justify-items-center;
@@ -144,7 +144,7 @@
 }
 .rw-input[type='checkbox'],
 .rw-input[type='radio'] {
-  @apply inline w-4 ml-0 mr-1 mt-1;
+  @apply ml-0 mr-1 mt-1 inline w-4;
 }
 .rw-input:focus {
   @apply border-gray-400;
@@ -157,7 +157,7 @@
   box-shadow: 0 0 5px #c53030;
 }
 .rw-field-error {
-  @apply block mt-1 font-semibold text-xs text-red-600 uppercase;
+  @apply mt-1 block text-xs font-semibold uppercase text-red-600;
 }
 .rw-table-wrapper-responsive {
   @apply overflow-x-auto;
@@ -183,7 +183,7 @@
   @apply bg-gray-200 text-gray-600;
 }
 .rw-table th {
-  @apply font-semibold text-left;
+  @apply text-left font-semibold;
 }
 .rw-table thead th {
   @apply text-left;
@@ -203,7 +203,7 @@
   @apply ml-0;
 }
 .rw-table-actions {
-  @apply flex justify-end items-center h-4 pr-1;
+  @apply flex h-4 items-center justify-end pr-1;
 }
 .rw-table-actions .rw-button {
   @apply bg-transparent;
@@ -227,16 +227,16 @@
   @apply text-center;
 }
 .rw-login-container {
-  @apply flex items-center justify-center flex-wrap mx-auto w-96 my-16;
+  @apply mx-auto my-16 flex w-96 flex-wrap items-center justify-center;
 }
 .rw-login-container .rw-form-wrapper {
   @apply w-full text-center;
 }
 .rw-login-link {
-  @apply mt-4 text-gray-600 text-sm text-center w-full;
+  @apply mt-4 w-full text-center text-sm text-gray-600;
 }
 .rw-webauthn-wrapper {
-  @apply mt-6 mx-4 leading-6;
+  @apply mx-4 mt-6 leading-6;
 }
 .rw-webauthn-wrapper h2 {
   @apply mb-4 text-xl font-bold;

web/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "noEmit": true,
     "allowJs": true,
     "esModuleInterop": true,
@@ -22,7 +23,8 @@
       ],
       "$api/*": ["../api/*"],
       "types/*": ["./types/*", "../types/*"],
-      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"]
+      "@redwoodjs/testing": ["../node_modules/@redwoodjs/testing/web"],
+      "@/*": ["./src/*"]
     },
     "typeRoots": [
       "../node_modules/@types",

web/vite.config.mts

@@ -2,6 +2,7 @@ import dns from 'dns'
 
 import type { UserConfig } from 'vite'
 import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 import redwood from '@redwoodjs/vite'
 
@@ -10,7 +11,7 @@ import redwood from '@redwoodjs/vite'
 dns.setDefaultResultOrder('verbatim')
 
 const viteConfig: UserConfig = {
-  plugins: [redwood()],
+  plugins: [redwood(), tsconfigPaths()],
 }
 
 export default defineConfig(viteConfig)

web/vite.config.mts.timestamp-1729886814004-934caa5555c9c.mjs

@@ -0,0 +1,14 @@
+// vite.config.mts
+import dns from "dns";
+import { defineConfig } from "file:///home/kocoder/.git/nachhilfesystem/node_modules/vite/dist/node/index.js";
+import tsconfigPaths from "file:///home/kocoder/.git/nachhilfesystem/node_modules/vite-tsconfig-paths/dist/index.js";
+import redwood from "file:///home/kocoder/.git/nachhilfesystem/node_modules/@redwoodjs/vite/dist/index.js";
+dns.setDefaultResultOrder("verbatim");
+var viteConfig = {
+  plugins: [tsconfigPaths(), redwood()]
+};
+var vite_config_default = defineConfig(viteConfig);
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcubXRzIl0sCiAgInNvdXJjZXNDb250ZW50IjogWyJjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZGlybmFtZSA9IFwiL2hvbWUva29jb2Rlci8uZ2l0L25hY2hoaWxmZXN5c3RlbS93ZWJcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9ob21lL2tvY29kZXIvLmdpdC9uYWNoaGlsZmVzeXN0ZW0vd2ViL3ZpdGUuY29uZmlnLm10c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vaG9tZS9rb2NvZGVyLy5naXQvbmFjaGhpbGZlc3lzdGVtL3dlYi92aXRlLmNvbmZpZy5tdHNcIjtpbXBvcnQgZG5zIGZyb20gJ2RucydcblxuaW1wb3J0IHR5cGUgeyBVc2VyQ29uZmlnIH0gZnJvbSAndml0ZSdcbmltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGUnXG5pbXBvcnQgdHNjb25maWdQYXRocyBmcm9tICd2aXRlLXRzY29uZmlnLXBhdGhzJ1xuXG5pbXBvcnQgcmVkd29vZCBmcm9tICdAcmVkd29vZGpzL3ZpdGUnXG5cbi8vIFNvIHRoYXQgVml0ZSB3aWxsIGxvYWQgb24gbG9jYWxob3N0IGluc3RlYWQgb2YgYDEyNy4wLjAuMWAuXG4vLyBTZWU6IGh0dHBzOi8vdml0ZWpzLmRldi9jb25maWcvc2VydmVyLW9wdGlvbnMuaHRtbCNzZXJ2ZXItaG9zdC5cbmRucy5zZXREZWZhdWx0UmVzdWx0T3JkZXIoJ3ZlcmJhdGltJylcblxuY29uc3Qgdml0ZUNvbmZpZzogVXNlckNvbmZpZyA9IHtcbiAgcGx1Z2luczogW3RzY29uZmlnUGF0aHMoKSwgcmVkd29vZCgpXSxcbn1cblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHZpdGVDb25maWcpXG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQXNTLE9BQU8sU0FBUztBQUd0VCxTQUFTLG9CQUFvQjtBQUM3QixPQUFPLG1CQUFtQjtBQUUxQixPQUFPLGFBQWE7QUFJcEIsSUFBSSxzQkFBc0IsVUFBVTtBQUVwQyxJQUFNLGFBQXlCO0FBQUEsRUFDN0IsU0FBUyxDQUFDLGNBQWMsR0FBRyxRQUFRLENBQUM7QUFDdEM7QUFFQSxJQUFPLHNCQUFRLGFBQWEsVUFBVTsiLAogICJuYW1lcyI6IFtdCn0K