💄 Change UI for docker module

src/modules/docker/ContainerActionBar.tsx

@@ -1,9 +1,12 @@
-import { Button, Group } from '@mantine/core';
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+import { Button, Group, TextInput, Title } from '@mantine/core';
+import { closeAllModals, closeModal, openModal } from '@mantine/modals';
 import { showNotification, updateNotification } from '@mantine/notifications';
 import {
   IconCheck,
   IconPlayerPlay,
   IconPlayerStop,
+  IconPlus,
   IconRefresh,
   IconRotateClockwise,
   IconTrash,
@@ -13,6 +16,9 @@ import Dockerode from 'dockerode';
 import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
 import { TFunction } from 'react-i18next';
+import { AddAppShelfItemForm } from '../../components/AppShelf/AddAppShelfItem';
+import { tryMatchService } from '../../tools/addToHomarr';
+import { useConfig } from '../../tools/state';
 
 let t: TFunction<'modules/docker', undefined>;
 
@@ -63,6 +69,8 @@ export interface ContainerActionBarProps {
 export default function ContainerActionBar({ selected, reload }: ContainerActionBarProps) {
   t = useTranslation('modules/docker').t;
   const [isLoading, setisLoading] = useState(false);
+  const { config, setConfig } = useConfig();
+
   return (
     <Group>
       <Button
@@ -145,6 +153,33 @@ export default function ContainerActionBar({ selected, reload }: ContainerAction
       >
         {t('actionBar.remove.title')}
       </Button>
+      <Button
+        leftIcon={<IconPlus />}
+        color="indigo"
+        variant="light"
+        radius="md"
+        disabled={selected.length === 0 || selected.length > 1}
+        onClick={() => {
+          openModal({
+            size: 'xl',
+            modalId: selected.at(0)!.Id,
+            radius: 'md',
+            title: t('actionBar.addService.title'),
+            zIndex: 500,
+            children: (
+              <AddAppShelfItemForm
+                setConfig={setConfig}
+                config={config}
+                setOpened={() => closeModal(selected.at(0)!.Id)}
+                message={t('actionBar.addService.message')}
+                {...tryMatchService(selected.at(0)!)}
+              />
+            ),
+          });
+        }}
+      >
+        {t('actionBar.addToHomarr.title')}
+      </Button>
     </Group>
   );
 }