From 78900a30d55445c5193b2dc7917e31f9281b0e55 Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Wed, 18 Dec 2024 23:36:59 +0100
Subject: [PATCH] Update user settings

---
 web/src/components/settings/nav.tsx | 20 +++++++++++++++++---
 web/src/routeTree.gen.ts            | 26 ++++++++++++++++++++++++++
 web/src/routes/settings/users.tsx   | 16 ++++++++++++++++
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 web/src/routes/settings/users.tsx

diff --git a/web/src/components/settings/nav.tsx b/web/src/components/settings/nav.tsx
index b7bbe78..9d3cb76 100644
--- a/web/src/components/settings/nav.tsx
+++ b/web/src/components/settings/nav.tsx
@@ -10,9 +10,18 @@ import {
     LuSearch,
     LuSettings,
     LuTag,
+    LuUsers,
 } from 'react-icons/lu';
 
+import { useHasPolicy } from '@/api/policy';
+
+export function isTruthy<T>(value?: T | undefined | null | false): value is T {
+    return !!value;
+}
+
 export const SettingsNav = () => {
+    const { ok: hasUsersPermissions } = useHasPolicy('user', '', 'write');
+
     return (
         <ul className="flex flex-col divide-y">
             {(
@@ -44,6 +53,11 @@ export const SettingsNav = () => {
                     [
                         'Authentication',
                         [
+                            hasUsersPermissions && [
+                                '/settings/users',
+                                'Users',
+                                <LuUsers />,
+                            ],
                             ['/settings/sessions', 'Sessions', <LuClock />],
                             [
                                 '/settings/pat',
@@ -68,13 +82,13 @@ export const SettingsNav = () => {
                         </h3>
                     )}
                     <ul className="flex flex-col pb-4 pl-2">
-                        {items.map(([path, label, icon]) => (
+                        {items.filter(isTruthy).map(([path, label, icon]) => (
                             <li
-                                key={path}
+                                key={path as string}
                                 className={clsx('gap-1 flex items-center')}
                             >
                                 <Link
-                                    to={path}
+                                    to={path as string}
                                     activeOptions={{ exact: true }}
                                     className={clsx(
                                         'py-1 px-2 hover:bg-neutral-100 rounded-md flex items-center relative gap-2 cursor-pointer w-full text-neutral-700',
diff --git a/web/src/routeTree.gen.ts b/web/src/routeTree.gen.ts
index 31e6b01..57ec550 100644
--- a/web/src/routeTree.gen.ts
+++ b/web/src/routeTree.gen.ts
@@ -21,6 +21,7 @@ import { Route as SearchIndexImport } from './routes/search/index'
 import { Route as ProductsIndexImport } from './routes/products/index'
 import { Route as ItemsIndexImport } from './routes/items/index'
 import { Route as UserUserIdImport } from './routes/user/$userId'
+import { Route as SettingsUsersImport } from './routes/settings/users'
 import { Route as SettingsTagsImport } from './routes/settings/tags'
 import { Route as SettingsStorageImport } from './routes/settings/storage'
 import { Route as SettingsSessionsImport } from './routes/settings/sessions'
@@ -95,6 +96,12 @@ const UserUserIdRoute = UserUserIdImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const SettingsUsersRoute = SettingsUsersImport.update({
+  id: '/settings/users',
+  path: '/settings/users',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const SettingsTagsRoute = SettingsTagsImport.update({
   id: '/settings/tags',
   path: '/settings/tags',
@@ -249,6 +256,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof SettingsTagsImport
       parentRoute: typeof rootRoute
     }
+    '/settings/users': {
+      id: '/settings/users'
+      path: '/settings/users'
+      fullPath: '/settings/users'
+      preLoaderRoute: typeof SettingsUsersImport
+      parentRoute: typeof rootRoute
+    }
     '/user/$userId': {
       id: '/user/$userId'
       path: '/user/$userId'
@@ -330,6 +344,7 @@ export interface FileRoutesByFullPath {
   '/settings/sessions': typeof SettingsSessionsRoute
   '/settings/storage': typeof SettingsStorageRoute
   '/settings/tags': typeof SettingsTagsRoute
+  '/settings/users': typeof SettingsUsersRoute
   '/user/$userId': typeof UserUserIdRoute
   '/items': typeof ItemsIndexRoute
   '/products': typeof ProductsIndexRoute
@@ -354,6 +369,7 @@ export interface FileRoutesByTo {
   '/settings/sessions': typeof SettingsSessionsRoute
   '/settings/storage': typeof SettingsStorageRoute
   '/settings/tags': typeof SettingsTagsRoute
+  '/settings/users': typeof SettingsUsersRoute
   '/user/$userId': typeof UserUserIdRoute
   '/items': typeof ItemsIndexRoute
   '/products': typeof ProductsIndexRoute
@@ -379,6 +395,7 @@ export interface FileRoutesById {
   '/settings/sessions': typeof SettingsSessionsRoute
   '/settings/storage': typeof SettingsStorageRoute
   '/settings/tags': typeof SettingsTagsRoute
+  '/settings/users': typeof SettingsUsersRoute
   '/user/$userId': typeof UserUserIdRoute
   '/items/': typeof ItemsIndexRoute
   '/products/': typeof ProductsIndexRoute
@@ -405,6 +422,7 @@ export interface FileRouteTypes {
     | '/settings/sessions'
     | '/settings/storage'
     | '/settings/tags'
+    | '/settings/users'
     | '/user/$userId'
     | '/items'
     | '/products'
@@ -428,6 +446,7 @@ export interface FileRouteTypes {
     | '/settings/sessions'
     | '/settings/storage'
     | '/settings/tags'
+    | '/settings/users'
     | '/user/$userId'
     | '/items'
     | '/products'
@@ -451,6 +470,7 @@ export interface FileRouteTypes {
     | '/settings/sessions'
     | '/settings/storage'
     | '/settings/tags'
+    | '/settings/users'
     | '/user/$userId'
     | '/items/'
     | '/products/'
@@ -476,6 +496,7 @@ export interface RootRouteChildren {
   SettingsSessionsRoute: typeof SettingsSessionsRoute
   SettingsStorageRoute: typeof SettingsStorageRoute
   SettingsTagsRoute: typeof SettingsTagsRoute
+  SettingsUsersRoute: typeof SettingsUsersRoute
   UserUserIdRoute: typeof UserUserIdRoute
   ItemsIndexRoute: typeof ItemsIndexRoute
   ProductsIndexRoute: typeof ProductsIndexRoute
@@ -500,6 +521,7 @@ const rootRouteChildren: RootRouteChildren = {
   SettingsSessionsRoute: SettingsSessionsRoute,
   SettingsStorageRoute: SettingsStorageRoute,
   SettingsTagsRoute: SettingsTagsRoute,
+  SettingsUsersRoute: SettingsUsersRoute,
   UserUserIdRoute: UserUserIdRoute,
   ItemsIndexRoute: ItemsIndexRoute,
   ProductsIndexRoute: ProductsIndexRoute,
@@ -533,6 +555,7 @@ export const routeTree = rootRoute
         "/settings/sessions",
         "/settings/storage",
         "/settings/tags",
+        "/settings/users",
         "/user/$userId",
         "/items/",
         "/products/",
@@ -580,6 +603,9 @@ export const routeTree = rootRoute
     "/settings/tags": {
       "filePath": "settings/tags.tsx"
     },
+    "/settings/users": {
+      "filePath": "settings/users.tsx"
+    },
     "/user/$userId": {
       "filePath": "user/$userId.tsx"
     },
diff --git a/web/src/routes/settings/users.tsx b/web/src/routes/settings/users.tsx
new file mode 100644
index 0000000..67889b7
--- /dev/null
+++ b/web/src/routes/settings/users.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute } from '@tanstack/react-router';
+
+import { SettingsNav } from '@/components/settings/nav';
+import { SidePage } from '@/layouts/SidebarPage';
+
+export const Route = createFileRoute('/settings/users')({
+    component: RouteComponent,
+});
+
+function RouteComponent() {
+    return (
+        <SidePage title="Users" sidebar={<SettingsNav />}>
+            Hello "/settings/users"!
+        </SidePage>
+    );
+}