Introduce admin role and improved cmdk

Author: lucemans

engine/.sqlx/query-1f612b9033ba9ff47bcfe182f04c913a240359154f13cee1b2e93687b6dd497c.json

@@ -0,0 +1,4 @@
+-- add admin flag to users table
+ALTER TABLE users ADD COLUMN admin BOOLEAN DEFAULT FALSE;
+-- set admin flag for existing users max 1, the first user created
+UPDATE users SET admin = TRUE WHERE created_at = (SELECT MIN(created_at) FROM users);

engine/.sqlx/query-5c960227b225a6ecf280a18a5a07af798d6e361b745bf0f2a04286538798f72b.json

@@ -17,24 +17,27 @@ pub struct User {
     #[oai(skip)]
     pub password: String,
     pub created_at: DateTime<Utc>,
+    pub admin: Option<bool>,
 }
 
 impl User {
     pub async fn new(
         db: &Database,
         name: impl AsRef<str>,
         password: impl AsRef<str>,
+        admin: Option<bool>,
     ) -> Result<(Self, Team), sqlx::Error> {
         let user_id = generate_id(IdType::USER);
         let name = name.as_ref();
         let password = password.as_ref();
 
         let user = query_as!(
             User,
-            "INSERT INTO users (user_id, name, password) VALUES ($1, $2, $3) RETURNING *",
+            "INSERT INTO users (user_id, name, password, admin) VALUES ($1, $2, $3, $4) RETURNING *",
             user_id,
             name,
-            password
+            password,
+            admin
         )
         .fetch_one(&db.pool)
         .await?;

engine/.sqlx/query-73c17b2964e6fdbbfe600c687110004c85905d2f75128538a1f7aa267b05b6f9.json

@@ -102,6 +102,7 @@ impl AuthApi {
             &state.0.database,
             &request.username,
             &hash_password(&request.password),
+            Some(true),
         )
         .await
         .map_err(HttpError::from)?;

engine/.sqlx/query-fdce7cbc7f0b0f4353c10600e949623ea7d7d8a7ddf98596f724827c6570c33f.json

@@ -820,6 +820,7 @@ export type components = {
             name: string;
             /** Format: date-time */
             created_at: string;
+            admin?: boolean;
         };
         UserTeamInvite: {
             invite_id: string;

engine/migrations/0003_admin.sql

@@ -28,19 +28,21 @@ export const ModalContent = React.forwardRef<
     React.ComponentPropsWithoutRef<typeof Dialog.Content> & {
         noPadding?: boolean;
         noCloseButton?: boolean;
+        noBg?: boolean;
     }
 >(
     (
-        { className, children, noPadding, noCloseButton, ...properties },
+        { className, children, noPadding, noCloseButton, noBg, ...properties },
         reference
     ) => (
         <Dialog.Portal>
             <ModalOverlay />
             <Dialog.Content
                 ref={reference}
                 className={clsx(
-                    'bg-default 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border shadow-lg duration-200 sm:rounded-lg',
+                    '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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border shadow-lg duration-200 sm:rounded-lg',
                     noPadding ? '' : 'p-6',
+                    noBg ? '' : 'bg-default',
                     className
                 )}
                 {...properties}

engine/src/models/user/mod.rs

@@ -1,13 +1,14 @@
-import { useParams } from '@tanstack/react-router';
+import { useNavigate, useParams } from '@tanstack/react-router';
 import { Command } from 'cmdk';
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { FiArrowRight, FiChevronRight } from 'react-icons/fi';
 
-import { useSite, useTeam } from '@/api';
+import { useMe, useSite, useTeam } from '@/api';
 import { ModalContent } from '@/components';
 import { ModalRoot } from '@/components/modal';
 
 import {
+    admin_commands,
     CommandEntityGroup,
     main_commands,
     site_commands,
@@ -33,17 +34,28 @@ export const CommandPalette = () => {
 
     return (
         <ModalRoot open={open} onOpenChange={setOpen}>
-            <ModalContent noPadding noCloseButton>
-                <CommandPaletteInternal />
+            <ModalContent
+                noPadding
+                noCloseButton
+                // frosted glass effect
+                // noBg
+                // className="dark:text-default bg-white/90 text-neutral-700 backdrop-blur-sm dark:bg-black/30"
+                className=""
+            >
+                <CommandPaletteInternal requestClose={() => setOpen(false)} />
             </ModalContent>
         </ModalRoot>
     );
 };
 
-const CommandPaletteInternal = () => {
+const CommandPaletteInternal: FC<{ requestClose: () => void }> = ({
+    requestClose,
+}) => {
     const routeParameters = useParams({ from: undefined as any });
     const { data: site } = useSite(routeParameters['siteId']);
     const { data: team } = useTeam(routeParameters['teamId'] || site?.team_id);
+    const { data: user } = useMe();
+    const navigate = useNavigate();
 
     return (
         <Command label="Global Command Palette">
@@ -72,17 +84,10 @@ const CommandPaletteInternal = () => {
                     )}
                 </ul>
             </div>
-            <Command.List className="p-2">
-                <Command.Empty>No results found.</Command.Empty>
-
-                {/* <Command.Group heading="Letters">
-                    {main_commands.map((command) => (
-                        <Command.Item key={command.slug}>
-                            <command.icon className="size-4" />
-                            {command.title}
-                        </Command.Item>
-                    ))}
-                </Command.Group> */}
+            <Command.List className="max-h-[50vh] overflow-y-auto p-2">
+                <Command.Empty className="text-sm">
+                    No results found.
+                </Command.Empty>
 
                 {(
                     [
@@ -102,13 +107,35 @@ const CommandPaletteInternal = () => {
                                   commands: team_commands,
                               }
                             : undefined,
+                        user?.admin
+                            ? {
+                                  title: 'Administration',
+                                  commands: admin_commands,
+                              }
+                            : undefined,
                     ] as CommandEntityGroup[]
                 )
                     .filter(Boolean)
                     .map(({ title, commands }) => (
                         <Command.Group key={title} heading={title}>
                             {commands.map((command) => (
-                                <Command.Item key={command.slug}>
+                                <Command.Item
+                                    key={command.slug}
+                                    onSelect={() => {
+                                        if (command.navigate_to) {
+                                            console.log(command.navigate_to);
+                                            navigate({
+                                                to: command.navigate_to,
+                                                params: {
+                                                    siteId: site?.site_id,
+                                                    teamId: team?.team_id,
+                                                },
+                                            });
+                                            requestClose();
+                                        }
+                                    }}
+                                    keywords={command.aliases}
+                                >
                                     <span className="flex w-full items-center gap-2">
                                         <command.icon className="size-4" />
                                         {command.title}