Update user settings

v3xlabs · Dec 18, 2024 · 78900a3 · 78900a3
1 parent b968893
commit 78900a3
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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>
+    );
+}