Update forms

src/renderer/features/servers/components/server-list.tsx

@@ -13,8 +13,34 @@ export const ServerList = () => {
   const { data: servers } = useServerList();
   const permissions = usePermissions();
 
+  const handleAddServerModal = () => {
+    openContextModal({
+      centered: true,
+      exitTransitionDuration: 300,
+      innerProps: {
+        modalBody: (vars: ContextModalVars) => (
+          <AddServerForm onCancel={() => vars.context.closeModal(vars.id)} />
+        ),
+      },
+      modal: 'base',
+      overflow: 'inside',
+      title: 'Add server',
+      transition: 'slide-down',
+    });
+  };
+
   return (
     <>
+      <Group mb={10} position="right">
+        <Button
+          compact
+          disabled={!permissions.createServer}
+          variant="subtle"
+          onClick={handleAddServerModal}
+        >
+          Add server
+        </Button>
+      </Group>
       <Accordion variant="separated">
         {servers?.data?.map((s) => (
           <Accordion.Item key={s.id} value={s.name}>
@@ -31,31 +57,6 @@ export const ServerList = () => {
           </Accordion.Item>
         ))}
       </Accordion>
-      <Group mt={10} position="right">
-        <Button
-          compact
-          disabled={!permissions.createServer}
-          onClick={() =>
-            openContextModal({
-              centered: true,
-              exitTransitionDuration: 300,
-              innerProps: {
-                modalBody: (vars: ContextModalVars) => (
-                  <AddServerForm
-                    onCancel={() => vars.context.closeModal(vars.id)}
-                  />
-                ),
-              },
-              modal: 'base',
-              overflow: 'inside',
-              title: 'Add server',
-              transition: 'slide-down',
-            })
-          }
-        >
-          Add server
-        </Button>
-      </Group>
     </>
   );
 };

src/renderer/features/users/components/add-user-form.tsx

@@ -51,7 +51,10 @@ export const AddUserForm = ({ onCancel }: AddUserFormProps) => {
         onError: (err) =>
           toast.error({ message: err.response?.data?.error?.message }),
         onSuccess: () => {
-          toast.success({ message: 'User created' });
+          toast.success({
+            message: `${values.username} was successfully created.`,
+            title: 'User created',
+          });
           onCancel();
         },
       }

src/renderer/features/users/components/edit-user-form.tsx

@@ -59,7 +59,10 @@ export const EditUserForm = ({ user, onCancel }: AddUserFormProps) => {
         onError: (err) =>
           toast.error({ message: err.response?.data?.error?.message }),
         onSuccess: () => {
-          toast.success({ message: 'User updated' });
+          toast.success({
+            message: `${values.username} was successfully updated.`,
+            title: 'User updated',
+          });
           onCancel();
         },
       }

src/renderer/features/users/components/user-list.tsx

@@ -5,6 +5,7 @@ import { User } from '@/renderer/api/types';
 import {
   Button,
   ContextModalVars,
+  Popover,
   Text,
   toast,
   Tooltip,
@@ -112,14 +113,34 @@ export const UserList = () => {
             >
               Edit
             </Button>
-            <Button
-              compact
-              disabled={!permissions.isAdmin}
-              variant="subtle"
-              onClick={() => handleDeleteUser(u)}
-            >
-              <RiDeleteBin2Line color="var(--danger-color)" size={15} />
-            </Button>
+            <Popover position="bottom-start">
+              <Popover.Target>
+                <Button
+                  compact
+                  disabled={!permissions.isAdmin}
+                  variant="subtle"
+                >
+                  <RiDeleteBin2Line color="var(--danger-color)" size={15} />
+                </Button>
+              </Popover.Target>
+              <Popover.Dropdown>
+                <Group>
+                  <Button
+                    compact
+                    uppercase
+                    sx={{
+                      '&:hover': {
+                        background: 'var(--danger-color)',
+                      },
+                      background: 'var(--danger-color)',
+                    }}
+                    onClick={() => handleDeleteUser(u)}
+                  >
+                    Delete
+                  </Button>
+                </Group>
+              </Popover.Dropdown>
+            </Popover>
           </Group>
         </Group>
       ))}