Move add server form inside of server list

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

@@ -1,13 +1,17 @@
 import { Accordion, Group } from '@mantine/core';
+import { openContextModal } from '@mantine/modals';
 import { RiServerFill } from 'react-icons/ri';
-import { Text } from '@/renderer/components';
+import { Text, Button, ContextModalVars } from '@/renderer/components';
 import { ServerListItem } from '@/renderer/features/servers/components/server-list-item';
 import { useServerList } from '@/renderer/features/servers/queries/use-server-list';
+import { usePermissions } from '@/renderer/features/shared';
 import { Font } from '@/renderer/styles';
 import { titleCase } from '@/renderer/utils';
+import { AddServerForm } from './add-server-form';
 
 export const ServerList = () => {
   const { data: servers } = useServerList();
+  const permissions = usePermissions();
 
   return (
     <>
@@ -27,6 +31,31 @@ 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/titlebar/components/app-menu.tsx

@@ -1,5 +1,5 @@
 import { Group } from '@mantine/core';
-import { openModal, closeAllModals } from '@mantine/modals';
+import { openModal } from '@mantine/modals';
 import { useQueryClient } from '@tanstack/react-query';
 import {
   RiLock2Line,
@@ -10,18 +10,12 @@ import {
   RiSettings2Line,
   RiEdit2Line,
   RiUserAddLine,
-  RiAddLine,
 } from 'react-icons/ri';
 import { useNavigate } from 'react-router';
 import { queryKeys } from '@/renderer/api/query-keys';
 import { Button, DropdownMenu, Text } from '@/renderer/components';
-import {
-  AddServerForm,
-  ServerList,
-  useServerList,
-} from '@/renderer/features/servers';
+import { ServerList, useServerList } from '@/renderer/features/servers';
 import { Settings } from '@/renderer/features/settings';
-import { usePermissions } from '@/renderer/features/shared';
 import { useAuthStore } from '@/renderer/store';
 
 export const AppMenu = () => {
@@ -31,7 +25,6 @@ export const AppMenu = () => {
   const currentServer = useAuthStore((state) => state.currentServer);
   const setCurrentServer = useAuthStore((state) => state.setCurrentServer);
   const serverCredentials = useAuthStore((state) => state.serverCredentials);
-  const permissions = usePermissions();
   const { data: servers } = useServerList();
 
   const serverList =
@@ -46,17 +39,6 @@ export const AppMenu = () => {
     navigate('/login');
   };
 
-  const handleAddServerModal = () => {
-    openModal({
-      centered: true,
-      children: <AddServerForm onCancel={closeAllModals} />,
-      exitTransitionDuration: 300,
-      overflow: 'inside',
-      title: 'Add server',
-      transition: 'slide-down',
-    });
-  };
-
   const handleManageServersModal = () => {
     openModal({
       centered: true,
@@ -138,23 +120,15 @@ export const AppMenu = () => {
           Settings
         </DropdownMenu.Item>
         <DropdownMenu.Divider />
-        {permissions.createServer && (
-          <DropdownMenu.Item
-            rightSection={<RiAddLine />}
-            onClick={handleAddServerModal}
-          >
-            Add server
-          </DropdownMenu.Item>
-        )}
+        <DropdownMenu.Item disabled rightSection={<RiUserAddLine />}>
+          Manage users
+        </DropdownMenu.Item>
         <DropdownMenu.Item
           rightSection={<RiEdit2Line />}
           onClick={handleManageServersModal}
         >
           Manage servers
         </DropdownMenu.Item>
-        <DropdownMenu.Item disabled rightSection={<RiUserAddLine />}>
-          Manage users
-        </DropdownMenu.Item>
         <DropdownMenu.Divider />
         <DropdownMenu.Item
           rightSection={<RiLogoutBoxLine />}