Merge branch 'dev' of https://github.com/ajnart/homarr into dev

2025-11-13 17:05:47 +01:00 · 2023-01-14 21:15:24 +01:00
parent 0b4dd56bfb 7a03509ae5
commit 682faf4440
22 changed files with 89 additions and 70 deletions
--- a/data/configs/default.json
+++ b/data/configs/default.json
@@ -369,7 +369,7 @@
      },
      "pageTitle": "Homarr v0.11  ⭐️",
      "logoImageUrl": "/imgs/logo/logo.png",
-      "faviconUrl": "/imgs/logo/logo.png",
+      "faviconUrl": "/imgs/favicon/favicon-squared",
      "backgroundImageUrl": "",
      "customCss": "",
      "colors": {
@@ -380,4 +380,4 @@
      "appOpacity": 100
    }
  }
-}
+}
--- a/public/imgs/favicon/favicon-squared.png
+++ b/public/imgs/favicon/favicon-squared.png
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -9,6 +9,7 @@
  "version": "Version",
  "changePosition": "Change position",
  "remove": "Remove",
+  "removeConfirm": "Are you sure that you want to remove {{item}} ?",
  "sections": {
    "settings": "Settings",
    "dangerZone": "Danger zone"
--- a/public/locales/en/modules/dashdot.json
+++ b/public/locales/en/modules/dashdot.json
@@ -19,10 +19,6 @@
      "url": {
        "label": "Dash. URL"
      }
-    },
-    "remove": {
-      "title": "Remove Dash. widget",
-      "confirm": "Are you sure, that you want to remove the Dash. widget?"
    }
  },
  "card": {
--- a/public/locales/en/modules/torrents-status.json
+++ b/public/locales/en/modules/torrents-status.json
@@ -1,9 +1,9 @@
 {
  "descriptor": {
-    "name": "BitTorrent",
+    "name": "Torrent",
    "description": "Displays a list of the torrent which are currently downloading",
    "settings": {
-      "title": "Settings for BitTorrent integration",
+      "title": "Settings for Torrent integration",
      "refreshInterval": {
        "label": "Refresh interval (in seconds)"
      },
@@ -51,4 +51,4 @@
      "title": "Loading..."
    }
  }
-}
+}
--- a/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
+++ b/src/components/Dashboard/Modals/EditAppModal/Tabs/IntegrationTab/Components/IntegrationOptionsRenderer/IntegrationOptionsRenderer.tsx
@@ -52,7 +52,10 @@ export const IntegrationOptionsRenderer = ({ form }: IntegrationOptionsRendererP
            <GenericSecretInput
              onClickUpdateButton={(value) => {
                form.setFieldValue(`integration.properties.${index}.value`, value);
-                form.setFieldValue(`integration.properties.${index}.isDefined`, value !== undefined);
+                form.setFieldValue(
+                  `integration.properties.${index}.isDefined`,
+                  value !== undefined
+                );
              }}
              key={`input-${property}`}
              label={`${property} (potentionally unmapped)`}
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -58,14 +58,6 @@ export const WidgetsEditModal = ({
    });
  };

-  const getMutliselectData = (option: string) => {
-    const currentWidgetDefinition = Widgets[innerProps.widgetId as keyof typeof Widgets];
-    if (!Widgets) return [];
-
-    const options = currentWidgetDefinition.options as any;
-    return options[option]?.data ?? [];
-  };
-
  const handleSave = () => {
    updateConfig(
      configName,
@@ -85,9 +77,9 @@ export const WidgetsEditModal = ({

  return (
    <Stack>
-      {items.map(([key, defaultValue], index) => {
+      {items.map(([key, _], index) => {
        const option = (currentWidgetDefinition as any).options[key] as IWidgetOptionValue;
-        const value = moduleProperties[key] ?? defaultValue;
+        const value = moduleProperties[key] ?? option.defaultValue;

        if (!option) {
          return (
@@ -183,10 +175,10 @@ function WidgetOptionTypeSwitch(
    case 'slider':
      return (
        <Stack spacing="xs">
-          <Text>{t(`descriptor.settings.${key}.label`)}</Text>
          <Slider
            color={primaryColor}
            key={`${option.type}-${index}`}
+            label={value}
            value={value as number}
            min={option.min}
            max={option.max}
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsMenu.tsx
@@ -36,7 +36,7 @@ export const WidgetsMenu = ({ integration, widget }: WidgetsMenuProps) => {
  const handleDeleteClick = () => {
    openContextModalGeneric<WidgetsRemoveModalInnerProps>({
      modal: 'integrationRemove',
-      title: <Title order={4}>{t('descriptor.remove.title')}</Title>,
+      title: <Title order={4}>{t('common:remove')}</Title>,
      innerProps: {
        widgetId: integration,
      },
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsRemoveModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button, Group, Stack, Text } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
-import { useTranslation } from 'next-i18next';
+import { Trans, useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';
 import { useConfigStore } from '../../../../config/store';

@@ -32,7 +32,11 @@ export const WidgetsRemoveModal = ({

  return (
    <Stack>
-      <Text>{t('descriptor.remove.confirm')}</Text>
+      <Trans
+        i18nKey="common:removeConfirm"
+        components={[<Text weight={500} />]}
+        values={{ item: innerProps.widgetId }}
+      />
      <Group position="right">
        <Button onClick={() => context.closeModal(id)} variant="light">
          {t('common:cancel')}
--- a/src/components/Dashboard/Views/EditView.tsx
+++ b/src/components/Dashboard/Views/EditView.tsx
@@ -27,7 +27,12 @@ export const DashboardEditView = () => {
              </Text>
            </Stack>

-            <ActionIcon size="sm">
+            <ActionIcon
+              size="sm"
+              component="a"
+              href="https://homarr.dev/docs/customizations/layout"
+              target="_blank"
+            >
              <IconQuestionMark size={16} />
            </ActionIcon>
          </Group>
--- a/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
+++ b/src/components/Dashboard/Wrappers/Sidebar/Sidebar.tsx
@@ -9,18 +9,18 @@ interface DashboardSidebarProps extends DashboardSidebarInnerProps {
  isGridstackReady: boolean;
 }

-export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => (
-  <Card
-    withBorder
-    w={300}
-    style={{
-      background: 'none',
-      borderStyle: 'dashed',
-    }}
-  >
-    {isGridstackReady && <SidebarInner location={location} />}
-  </Card>
-);
+export const DashboardSidebar = ({ location, isGridstackReady }: DashboardSidebarProps) => {
+  const {
+    cx,
+    classes: { card: cardClass },
+  } = useCardStyles(false);
+
+  return (
+    <Card p={0} m={0} radius="lg" className={cardClass} w={300}>
+      {isGridstackReady && <SidebarInner location={location} />}
+    </Card>
+  );
+};

 interface DashboardSidebarInnerProps {
  location: 'right' | 'left';
@@ -37,17 +37,18 @@ const SidebarInner = ({ location }: DashboardSidebarInnerProps) => {
  } = useCardStyles(false);

  return (
-    <Card withBorder mih="100%" p={0} radius="lg" className={cardClass} ref={refs.wrapper}>
-      <div
-        className="grid-stack grid-stack-sidebar"
-        style={{ transitionDuration: '0s', height: '100%' }}
-        data-sidebar={location}
-        // eslint-disable-next-line react/no-unknown-property
-        gs-min-row={minRow}
-      >
-        <WrapperContent apps={apps} refs={refs} widgets={widgets} />
-      </div>
-    </Card>
+    <div
+      ref={refs.wrapper}
+      className="grid-stack grid-stack-sidebar"
+      style={{
+        transitionDuration: '0s',
+      }}
+      data-sidebar={location}
+      // eslint-disable-next-line react/no-unknown-property
+      gs-min-row={minRow}
+    >
+      <WrapperContent apps={apps} refs={refs} widgets={widgets} />
+    </div>
  );
 };

--- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
+++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
@@ -13,7 +13,7 @@ export const initializeGridstack = (
  items: AppType[],
  widgets: IWidget<string, any>[],
  isEditMode: boolean,
-  wrapperColumnCount: 3 | 6 | 12,
+  wrapperColumnCount: number,
  shapeSize: 'sm' | 'md' | 'lg',
  tilesWithUnknownLocation: TileWithUnknownLocation[],
  events: {
--- a/src/components/Dashboard/Wrappers/gridstack/store.tsx
+++ b/src/components/Dashboard/Wrappers/gridstack/store.tsx
@@ -1,5 +1,6 @@
 import { useMantineTheme } from '@mantine/core';
 import create from 'zustand';
+import { useConfigContext } from '../../../../config/provider';

 export const useGridstackStore = create<GridstackStoreType>((set, get) => ({
  mainAreaWidth: null,
@@ -27,11 +28,16 @@ export const useNamedWrapperColumnCount = (): 'small' | 'medium' | 'large' | nul
 };

 export const useWrapperColumnCount = () => {
+  const { config } = useConfigContext();
+  const numberOfSidebars =
+    (config?.settings.customization.layout.enabledLeftSidebar ? 1 : 0) +
+    (config?.settings.customization.layout.enabledRightSidebar ? 1 : 0);
+
  switch (useNamedWrapperColumnCount()) {
    case 'large':
-      return 12;
+      return 15 - numberOfSidebars * 2;
    case 'medium':
-      return 6;
+      return 9 - numberOfSidebars * 2;
    case 'small':
      return 3;
    default:
--- a/src/components/Settings/Common/Language/LanguageSelect.tsx
+++ b/src/components/Settings/Common/Language/LanguageSelect.tsx
@@ -77,8 +77,14 @@ export default function LanguageSelect() {
        filter={(value, item) => {
          const selectItems = item as unknown as { value: string; language: Language };
          return (
-            selectItems.language.originalName.trim().includes(value.trim()) ||
-            selectItems.language.translatedName.trim().includes(value.trim())
+            selectItems.language.originalName
+              .toLowerCase()
+              .trim()
+              .includes(value.toLowerCase().trim()) ||
+            selectItems.language.translatedName
+              .toLowerCase()
+              .trim()
+              .includes(value.toLowerCase().trim())
          );
        }}
        styles={{
--- a/src/pages/[slug].tsx
+++ b/src/pages/[slug].tsx
@@ -1,3 +1,4 @@
+import { setCookie } from 'cookies-next';
 import fs from 'fs';
 import { GetServerSidePropsContext } from 'next';
 import path from 'path';
@@ -38,6 +39,12 @@ export async function getServerSideProps({
  }

  const config = getFrontendConfig(configName as string);
+  setCookie('config-name', configName, {
+    req,
+    res,
+    maxAge: 60 * 60 * 24 * 30,
+    sameSite: 'strict',
+  });

  return {
    props: {
--- a/src/pages/api/configs/[slug].ts
+++ b/src/pages/api/configs/[slug].ts
@@ -71,7 +71,7 @@ function Put(req: NextApiRequest, res: NextApiResponse) {
  const targetPath = path.join('data/configs', `${slug}.json`);
  fs.writeFileSync(targetPath, JSON.stringify(newConfig, null, 2), 'utf8');

-  Consola.info(`Config '${slug}' has been updated and flushed to '${targetPath}'.`);
+  Consola.debug(`Config '${slug}' has been updated and flushed to '${targetPath}'.`);

  return res.status(200).json({
    message: 'Configuration saved with success',
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -49,8 +49,6 @@ export async function getServerSideProps({

  const translations = await getServerSideTranslations(req, res, dashboardNamespaces, locale);

-  Consola.info(`Decided to use configuration '${configName}'`);
-
  const config = getFrontendConfig(configName as string);

  return {
--- a/src/tools/config/migrateConfig.ts
+++ b/src/tools/config/migrateConfig.ts
@@ -5,7 +5,7 @@ import { AreaType } from '../../types/area';
 import { CategoryType } from '../../types/category';
 import { ConfigType } from '../../types/config';
 import { SearchEngineCommonSettingsType } from '../../types/settings';
-import { IBitTorrent } from '../../widgets/bitTorrent/BitTorrentTile';
+import { ITorrent } from '../../widgets/torrent/TorrentTile';
 import { ICalendarWidget } from '../../widgets/calendar/CalendarTile';
 import { IDashDotTile } from '../../widgets/dashDot/DashDotTile';
 import { IDateWidget } from '../../widgets/date/DateTile';
@@ -194,7 +194,7 @@ const migrateModules = (config: Config): IWidget<string, any>[] => {
              },
            },
            shape: {},
-          } as IBitTorrent;
+          } as ITorrent;
        case 'weather':
          return {
            id: 'weather',
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -3,7 +3,7 @@ import calendar from './calendar/CalendarTile';
 import dashdot from './dashDot/DashDotTile';
 import usenet from './useNet/UseNetTile';
 import weather from './weather/WeatherTile';
-import bitTorrent from './bitTorrent/BitTorrentTile';
+import torrent from './torrent/TorrentTile';
 import torrentNetworkTraffic from './torrentNetworkTraffic/TorrentNetworkTrafficTile';

 export default {
@@ -11,7 +11,7 @@ export default {
  dashdot,
  usenet,
  weather,
-  'torrents-status': bitTorrent,
+  'torrents-status': torrent,
  dlspeed: torrentNetworkTraffic,
  date,
 };
--- a/src/widgets/bitTorrent/BitTorrentQueueItem.tsx
+++ b/src/widgets/bitTorrent/BitTorrentQueueItem.tsx
@@ -4,11 +4,11 @@ import { useElementSize } from '@mantine/hooks';
 import { calculateETA } from '../../tools/calculateEta';
 import { humanFileSize } from '../../tools/humanFileSize';

-interface BitTorrentQueueItemProps {
+interface TorrentQueueItemProps {
  torrent: NormalizedTorrent;
 }

-export const BitTorrrentQueueItem = ({ torrent }: BitTorrentQueueItemProps) => {
+export const BitTorrrentQueueItem = ({ torrent }: TorrentQueueItemProps) => {
  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
  const { width } = useElementSize();

--- a/src/widgets/bitTorrent/BitTorrentTile.tsx
+++ b/src/widgets/bitTorrent/BitTorrentTile.tsx
@@ -23,7 +23,7 @@ import { useGetTorrentData } from '../../hooks/widgets/torrents/useGetTorrentDat
 import { AppIntegrationType } from '../../types/app';
 import { defineWidget } from '../helper';
 import { IWidget } from '../widgets';
-import { BitTorrrentQueueItem } from './BitTorrentQueueItem';
+import { BitTorrrentQueueItem } from './TorrentQueueItem';

 dayjs.extend(duration);
 dayjs.extend(relativeTime);
@@ -56,16 +56,16 @@ const definition = defineWidget({
    maxWidth: 12,
    maxHeight: 14,
  },
-  component: BitTorrentTile,
+  component: TorrentTile,
 });

-export type IBitTorrent = IWidget<typeof definition['id'], typeof definition>;
+export type ITorrent = IWidget<typeof definition['id'], typeof definition>;

-interface BitTorrentTileProps {
-  widget: IBitTorrent;
+interface TorrentTileProps {
+  widget: ITorrent;
 }

-function BitTorrentTile({ widget }: BitTorrentTileProps) {
+function TorrentTile({ widget }: TorrentTileProps) {
  const { t } = useTranslation('modules/torrents-status');
  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
  const { width } = useElementSize();
--- a/src/widgets/widgets.ts
+++ b/src/widgets/widgets.ts
@@ -39,8 +39,8 @@ export type IWidgetOptionValue =

 // Interface for data type
 interface DataType {
-  label: string
-  value: string
+  label: string;
+  value: string;
 }

 // will show a multi-select with specified data