From 24e645b029db52a77353b0b4e084498f715426fd Mon Sep 17 00:00:00 2001
From: Tagaishi <tagaishi@hotmail.ch>
Date: Thu, 13 Jul 2023 22:43:14 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20DnsHole=20controls=20cosmeti?=
 =?UTF-8?q?c=20changes=20for=20smaller=20footprint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/widgets/dnshole/DnsHoleControls.tsx | 69 ++++++++++++++-----------
 1 file changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/widgets/dnshole/DnsHoleControls.tsx b/src/widgets/dnshole/DnsHoleControls.tsx
index b4d1e1077..751897b30 100644
--- a/src/widgets/dnshole/DnsHoleControls.tsx
+++ b/src/widgets/dnshole/DnsHoleControls.tsx
@@ -1,4 +1,5 @@
-import { Badge, Box, Button, Card, Group, Image, Stack, Text } from '@mantine/core';
+import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid, Space } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
 import { useConfigContext } from '../../config/provider';
@@ -15,8 +16,8 @@ const definition = defineWidget({
   icon: IconDeviceGamepad,
   options: {},
   gridstack: {
-    minWidth: 3,
-    minHeight: 2,
+    minWidth: 2,
+    minHeight: 1,
     maxWidth: 12,
     maxHeight: 12,
   },
@@ -32,6 +33,7 @@ interface DnsHoleControlsWidgetProps {
 function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   const { isInitialLoading, data } = useDnsHoleSummeryQuery();
   const { mutateAsync } = useDnsHoleControlMutation();
+  const { width, ref } = useElementSize();
   const { t } = useTranslation('common');
 
   const { name: configName, config } = useConfigContext();
@@ -41,8 +43,8 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   }
 
   return (
-    <Stack>
-      <Group grow>
+    <Stack justify="space-between" h={"100%"} style={{ gap:"0.25rem", }}>
+      <SimpleGrid ref={ref} cols={ (width > 275)? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem">
         <Button
           onClick={async () => {
             await mutateAsync({
@@ -54,6 +56,9 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           leftIcon={<IconPlayerPlay size={20} />}
           variant="light"
           color="green"
+          style={{
+            height:"2rem",
+          }}
         >
           {t('enableAll')}
         </Button>
@@ -68,41 +73,45 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           leftIcon={<IconPlayerStop size={20} />}
           variant="light"
           color="red"
+          style={{
+            height:"2rem",
+          }}
         >
           {t('disableAll')}
         </Button>
-      </Group>
+      </SimpleGrid>
 
-      {data.status.map((status, index) => {
-        const app = config?.apps.find((x) => x.id === status.appId);
+      <Stack style={{ gap:"0.25rem", }}>
+        {data.status.map((status, index) => {
+          const app = config?.apps.find((x) => x.id === status.appId);
 
-        if (!app) {
-          return null;
-        }
+          if (!app) {
+            return null;
+          }
 
-        return (
-          <Card withBorder key={index} p="xs">
-            <Group position="apart">
+          return (
+            <Card withBorder={true} key={index} p="xs">
               <Group>
                 <Box
-                  sx={(theme) => ({
-                    backgroundColor:
-                      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
-                    textAlign: 'center',
-                    padding: 5,
-                    borderRadius: theme.radius.md,
-                  })}
-                >
-                  <Image src={app.appearance.iconUrl} width={25} height={25} fit="contain" />
+                      sx={(theme) => ({
+                        backgroundColor:
+                          theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2],
+                        textAlign: 'center',
+                        padding: 5,
+                        borderRadius: theme.radius.md,
+                      })}
+                    >
+                      <Image src={app.appearance.iconUrl} width={40} height={40} fit="contain" />
                 </Box>
-                <Text>{app.name}</Text>
+                <Stack style={{ gap: "0rem", }}>
+                  <Text>{app.name}</Text>
+                  <StatusBadge status={status.status} />
+                </Stack>
               </Group>
-
-              <StatusBadge status={status.status} />
-            </Group>
-          </Card>
-        );
-      })}
+            </Card>
+          );
+        })}
+      </Stack>
     </Stack>
   );
 }

From 201afa79db1d1bc6445d5a606a679823511baf7e Mon Sep 17 00:00:00 2001
From: Tagaishi <tagaishi@hotmail.ch>
Date: Mon, 17 Jul 2023 01:21:39 +0200
Subject: [PATCH 2/2] Refactor

---
 src/widgets/dnshole/DnsHoleControls.tsx | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/widgets/dnshole/DnsHoleControls.tsx b/src/widgets/dnshole/DnsHoleControls.tsx
index 751897b30..ee8190acb 100644
--- a/src/widgets/dnshole/DnsHoleControls.tsx
+++ b/src/widgets/dnshole/DnsHoleControls.tsx
@@ -1,4 +1,4 @@
-import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid, Space } from '@mantine/core';
+import { Badge, Box, Button, Card, Group, Image, Stack, Text, SimpleGrid } from '@mantine/core';
 import { useElementSize } from '@mantine/hooks';
 import { useTranslation } from 'next-i18next';
 import { IconDeviceGamepad, IconPlayerPlay, IconPlayerStop } from '@tabler/icons-react';
@@ -43,8 +43,8 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
   }
 
   return (
-    <Stack justify="space-between" h={"100%"} style={{ gap:"0.25rem", }}>
-      <SimpleGrid ref={ref} cols={ (width > 275)? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem">
+    <Stack justify="space-between" h={"100%"} spacing="0.25rem">
+      <SimpleGrid ref={ref} cols={ width > 275? 2 : 1 } verticalSpacing="0.25rem" spacing="0.25rem">
         <Button
           onClick={async () => {
             await mutateAsync({
@@ -56,9 +56,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           leftIcon={<IconPlayerPlay size={20} />}
           variant="light"
           color="green"
-          style={{
-            height:"2rem",
-          }}
+          h="2rem"
         >
           {t('enableAll')}
         </Button>
@@ -73,15 +71,13 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
           leftIcon={<IconPlayerStop size={20} />}
           variant="light"
           color="red"
-          style={{
-            height:"2rem",
-          }}
+          h="2rem"
         >
           {t('disableAll')}
         </Button>
       </SimpleGrid>
 
-      <Stack style={{ gap:"0.25rem", }}>
+      <Stack spacing="0.25rem">
         {data.status.map((status, index) => {
           const app = config?.apps.find((x) => x.id === status.appId);
 
@@ -103,7 +99,7 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
                     >
                       <Image src={app.appearance.iconUrl} width={40} height={40} fit="contain" />
                 </Box>
-                <Stack style={{ gap: "0rem", }}>
+                <Stack spacing="0rem">
                   <Text>{app.name}</Text>
                   <StatusBadge status={status.status} />
                 </Stack>