Merge branch 'manuel-rw-gridstack' into gridstack-wip-meierschlumpf

src/components/Settings/Common/CommonSettings.tsx

@@ -1,4 +1,5 @@
-import { Space, Stack, Text } from '@mantine/core';
+import { ScrollArea, Space, Stack, Text } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
 import { useConfigContext } from '../../../config/provider';
 import ConfigChanger from '../../Config/ConfigChanger';
 import ConfigActions from './Config/ConfigActions';
@@ -7,6 +8,7 @@ import { SearchEngineSelector } from './SearchEngine/SearchEngineSelector';
 
 export default function CommonSettings() {
   const { config } = useConfigContext();
+  const { height, width } = useViewportSize();
 
   if (!config) {
     return (
@@ -15,14 +17,15 @@ export default function CommonSettings() {
       </Text>
     );
   }
-
   return (
-    <Stack mb="md" mr="sm">
-      <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
-      <Space />
-      <LanguageSelect />
-      <ConfigChanger />
-      <ConfigActions />
-    </Stack>
+    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+      <Stack>
+        <SearchEngineSelector searchEngine={config.settings.common.searchEngine} />
+        <Space />
+        <LanguageSelect />
+        <ConfigChanger />
+        <ConfigActions />
+      </Stack>
+    </ScrollArea>
   );
 }

src/components/Settings/Common/Config/ConfigActions.tsx

@@ -35,7 +35,7 @@ export default function ConfigActions() {
         closeModal={createCopyModal.close}
         initialConfigName={config.configProperties.name}
       />
-      <Flex gap="xs" justify="stretch">
+      <Flex gap="xs" mt="xs" justify="stretch">
         <ActionIcon className={classes.actionIcon} onClick={handleDownload} variant="default">
           <IconDownload size={20} />
           <Text size="sm">{t('buttons.download')}</Text>

src/components/Settings/Common/Credits.tsx

@@ -1,48 +1,27 @@
-import { Group, ActionIcon, Anchor, Text } from '@mantine/core';
-import { IconBrandDiscord, IconBrandGithub } from '@tabler/icons';
+import { Group, Anchor, Text } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
 
-import { CURRENT_VERSION } from '../../../../data/constants';
-
 export default function Credits() {
   const { t } = useTranslation('settings/common');
 
   return (
     <Group position="center" mt="xs">
-      <Group spacing={0}>
-        <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
-          <IconBrandGithub size={18} />
-        </ActionIcon>
-        <Text
-          style={{
-            position: 'relative',
-            fontSize: '0.90rem',
-            color: 'gray',
-          }}
+      <Text
+        style={{
+          fontSize: '0.90rem',
+          textAlign: 'center',
+          color: 'gray',
+        }}
+      >
+        {t('credits.madeWithLove')}
+        <Anchor
+          href="https://github.com/ajnart"
+          style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
         >
-          {CURRENT_VERSION}
-        </Text>
-      </Group>
-      <Group spacing={1}>
-        <Text
-          style={{
-            fontSize: '0.90rem',
-            textAlign: 'center',
-            color: 'gray',
-          }}
-        >
-          {t('credits.madeWithLove')}
-          <Anchor
-            href="https://github.com/ajnart"
-            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
-          >
-            ajnart
-          </Anchor>
-        </Text>
-        <ActionIcon<'a'> component="a" href="https://discord.gg/aCsmEV5RgA" size="lg">
-          <IconBrandDiscord size={18} />
-        </ActionIcon>
-      </Group>
+          ajnart
+        </Anchor>{' '}
+        and you !
+      </Text>
     </Group>
   );
 }

src/components/Settings/Common/SearchEngine/SearchEngineSelector.tsx

@@ -50,7 +50,7 @@ export const SearchEngineSelector = ({ searchEngine }: Props) => {
       />
       <Paper p="md" py="sm" mb="md" withBorder>
         <Title order={6} mb={0}>
-          Search engine configuration
+          {t('configurationName')}
         </Title>
 
         <SearchNewTabSwitch defaultValue={searchEngine.properties.openInNewTab} />

src/components/Settings/Customization/CustomizationSettings.tsx

@@ -1,4 +1,6 @@
 import { Button, ScrollArea, Stack } from '@mantine/core';
+import { useViewportSize } from '@mantine/hooks';
+import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../config/provider';
 import { useConfigStore } from '../../../config/store';
 import { LayoutSelector } from './Layout/LayoutSelector';
@@ -14,20 +16,14 @@ import { ShadeSelector } from './Theme/ShadeSelector';
 
 export default function CustomizationSettings() {
   const { config, name: configName } = useConfigContext();
+  const { t } = useTranslation('common');
+  const { height, width } = useViewportSize();
 
   const { updateConfig } = useConfigStore();
 
-  const saveConfiguration = () => {
-    if (!configName || !config) {
-      return;
-    }
-
-    updateConfig(configName, (_) => config, false, true);
-  };
-
   return (
-    <Stack mb="md" mr="sm" mt="xs">
-      <ScrollArea style={{ height: '76vh' }} offsetScrollbars>
+    <ScrollArea style={{ height: height - 100 }} offsetScrollbars>
+      <Stack mt="xs" mb="md" spacing="xs">
         <LayoutSelector defaultLayout={config?.settings.customization.layout} />
         <PageTitleChanger defaultValue={config?.settings.customization.pageTitle} />
         <MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} />
@@ -45,11 +41,7 @@ export default function CustomizationSettings() {
         />
         <ShadeSelector defaultValue={config?.settings.customization.colors.shade} />
         <OpacitySelector defaultValue={config?.settings.customization.appOpacity} />
-      </ScrollArea>
-
-      <Button onClick={saveConfiguration} variant="light">
-        Save Customizations
-      </Button>
-    </Stack>
+      </Stack>
+    </ScrollArea>
   );
 }

src/components/Settings/Customization/Theme/OpacitySelector.tsx

@@ -32,7 +32,7 @@ export function OpacitySelector({ defaultValue }: OpacitySelectorProps) {
   };
 
   return (
-    <Stack spacing="xs">
+    <Stack spacing="xs" mb="md">
       <Text>{t('label')}</Text>
       <Slider
         defaultValue={opacity}

src/components/Settings/SettingsDrawer.tsx

@@ -1,8 +1,9 @@
-import { Drawer, ScrollArea, Tabs, Title } from '@mantine/core';
+import { Drawer, Tabs, Title } from '@mantine/core';
 import { useTranslation } from 'next-i18next';
+import { useConfigContext } from '../../config/provider';
+import { useConfigStore } from '../../config/store';
 
 import CommonSettings from './Common/CommonSettings';
-import Credits from './Common/Credits';
 import CustomizationSettings from './Customization/CustomizationSettings';
 
 function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string }) {
@@ -15,9 +16,7 @@ function SettingsMenu({ newVersionAvailable }: { newVersionAvailable: string })
         <Tabs.Tab value="customization">{t('tabs.customizations')}</Tabs.Tab>
       </Tabs.List>
       <Tabs.Panel data-autofocus value="common">
-        <ScrollArea style={{ height: '78vh' }} offsetScrollbars>
-          <CommonSettings />
-        </ScrollArea>
+        <CommonSettings />
       </Tabs.Panel>
       <Tabs.Panel value="customization">
         <CustomizationSettings />
@@ -37,6 +36,8 @@ export function SettingsDrawer({
   newVersionAvailable,
 }: SettingsDrawerProps & { newVersionAvailable: string }) {
   const { t } = useTranslation('settings/common');
+  const { config, name: configName } = useConfigContext();
+  const { updateConfig } = useConfigStore();
 
   return (
     <Drawer
@@ -45,10 +46,16 @@ export function SettingsDrawer({
       position="right"
       title={<Title order={5}>{t('title')}</Title>}
       opened={opened}
-      onClose={closeDrawer}
+      onClose={() => {
+        closeDrawer();
+        if (!configName || !config) {
+          return;
+        }
+
+        updateConfig(configName, (_) => config, false, true);
+      }}
     >
       <SettingsMenu newVersionAvailable={newVersionAvailable} />
-      <Credits />
     </Drawer>
   );
 }