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>
     </>
   );
 };