From 048b27a89b57c83411dfababda401f0b9cbd1991 Mon Sep 17 00:00:00 2001
From: Tagaishi <tagaishi@hotmail.ch>
Date: Sat, 5 Aug 2023 23:19:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F=20Link=20out=20of=20trans?=
 =?UTF-8?q?lation=20files?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/en/common.json                 |  3 ++-
 public/locales/en/modules/bookmark.json       |  2 +-
 .../Widgets/Inputs/LocationSelection.tsx      |  4 +++-
 .../Tiles/Widgets/WidgetsEditModal.tsx        | 21 ++++++++++---------
 src/components/InfoCard/InfoCard.tsx          |  8 +++++--
 src/widgets/bookmark/BookmarkWidgetTile.tsx   |  2 +-
 src/widgets/widgets.ts                        |  1 +
 7 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 4b5059ae0..df864b716 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -35,5 +35,6 @@
     "small": "small",
     "medium": "medium",
     "large": "large"
-  }
+  },
+  "seeMore": "See more..."
 }
\ No newline at end of file
diff --git a/public/locales/en/modules/bookmark.json b/public/locales/en/modules/bookmark.json
index a3e694914..183ee3130 100644
--- a/public/locales/en/modules/bookmark.json
+++ b/public/locales/en/modules/bookmark.json
@@ -6,7 +6,7 @@
       "title": "Bookmark settings",
       "name": {
         "label": "Widget Title",
-        "info": "Leave empty to keep the title hidden. <a href=\"https://homarr.dev/docs/widgets/bookmarks/\" target=\"_blank\">See More...</a>"
+        "info": "Leave empty to keep the title hidden."
       },
       "items": {
         "label": "Items"
diff --git a/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx b/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx
index c4ea4eff5..3138af508 100644
--- a/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx
@@ -32,6 +32,7 @@ type LocationSelectionProps = {
   value: any;
   handleChange: (key: string, value: IntegrationOptionsValueType) => void;
   info?: boolean;
+  infoLink?: string;
 };
 
 export const LocationSelection = ({
@@ -40,6 +41,7 @@ export const LocationSelection = ({
   value,
   handleChange,
   info,
+  infoLink,
 }: LocationSelectionProps) => {
   const { t } = useTranslation('widgets/location');
   const [query, setQuery] = useState(value.name ?? '');
@@ -63,7 +65,7 @@ export const LocationSelection = ({
         <Stack spacing="xs">
           <Flex direction="row" justify="space-between" wrap="nowrap">
             <Title order={5}>{t(`modules/${widgetId}:descriptor.settings.${key}.label`)}</Title>
-            {info && <InfoCard content={t(`modules/${widgetId}:descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`modules/${widgetId}:descriptor.settings.${key}.info`)} link={infoLink}/>}
           </Flex>
 
           <Group noWrap align="end">
diff --git a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
index 457c83f59..bc9b2d62b 100644
--- a/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
+++ b/src/components/Dashboard/Tiles/Widgets/WidgetsEditModal.tsx
@@ -15,7 +15,7 @@ import {
   Title,
 } from '@mantine/core';
 import { ContextModalProps } from '@mantine/modals';
-import { IconAlertTriangle, IconPlaylistX, IconPlus, IconInfoCircle } from '@tabler/icons-react';
+import { IconAlertTriangle, IconPlaylistX, IconPlus } from '@tabler/icons-react';
 import { Trans, useTranslation } from 'next-i18next';
 import { FC, useState } from 'react';
 
@@ -136,6 +136,7 @@ const WidgetOptionTypeSwitch: FC<{
 }> = ({ option, widgetId, propName: key, value, handleChange }) => {
   const { t } = useTranslation([`modules/${widgetId}`, 'common']);
   const info = option.info ?? false;
+  const link = option.infoLink ?? undefined;
 
   switch (option.type) {
     case 'switch':
@@ -147,7 +148,7 @@ const WidgetOptionTypeSwitch: FC<{
             onChange={(ev) => handleChange(key, ev.currentTarget.checked)}
             {...option.inputProps}
           />
-          {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+          {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
         </Group>
       );
     case 'text':
@@ -155,7 +156,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <TextInput
             value={value as string}
@@ -169,7 +170,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <MultiSelect
             data={option.data}
@@ -186,7 +187,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <Select
             defaultValue={option.defaultValue}
@@ -203,7 +204,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <NumberInput
             value={value as number}
@@ -217,7 +218,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <Slider
             label={value}
@@ -268,7 +269,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <StaticDraggableList
             value={typedVal}
@@ -297,7 +298,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing={0}>
           <Group align="center" spacing="sm">
             <Text size="0.875rem" weight="500">{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <MultiSelect
             data={value.map((name: any) => ({ value: name, label: name }))}
@@ -322,7 +323,7 @@ const WidgetOptionTypeSwitch: FC<{
         <Stack spacing="xs">
           <Group align="center" spacing="sm">
             <Text>{t(`descriptor.settings.${key}.label`)}</Text>
-            {info && <InfoCard content={t(`descriptor.settings.${key}.info`)}/>}
+            {info && <InfoCard message={t(`descriptor.settings.${key}.info`)} link={link}/>}
           </Group>
           <DraggableList
             items={Array.from(value).map((v: any) => ({
diff --git a/src/components/InfoCard/InfoCard.tsx b/src/components/InfoCard/InfoCard.tsx
index f985d4cd5..fae682d20 100644
--- a/src/components/InfoCard/InfoCard.tsx
+++ b/src/components/InfoCard/InfoCard.tsx
@@ -9,17 +9,21 @@ import { Link, RichTextEditor, RichTextEditorProps } from '@mantine/tiptap';
 import { IconInfoCircle } from '@tabler/icons-react';
 import { useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
+import { useTranslation } from 'next-i18next';
 
 interface InfoCardProps {
   bg?: SystemProp<DefaultMantineColor>;
   cardProp?: Partial<RichTextEditorProps>;
-  content: string;
+  message: string;
+  link?: string;
   hoverProp?: Partial<HoverCardProps>;
   position?: HoverCardProps['position'];
 }
 
-export const InfoCard = ({ bg, cardProp, content, hoverProp, position }: InfoCardProps) => {
+export const InfoCard = ({ bg, cardProp, message, link, hoverProp, position }: InfoCardProps) => {
   const { colorScheme } = useMantineTheme();
+  const { t } = useTranslation('common');
+  const content = link? message + ` <a href=\"${link}\" target=\"_blank\">${t('seeMore')}</a>` : message;
   const editor = useEditor({
     content,
     editable: false,
diff --git a/src/widgets/bookmark/BookmarkWidgetTile.tsx b/src/widgets/bookmark/BookmarkWidgetTile.tsx
index c1fbbaaed..dd04b87ae 100644
--- a/src/widgets/bookmark/BookmarkWidgetTile.tsx
+++ b/src/widgets/bookmark/BookmarkWidgetTile.tsx
@@ -15,7 +15,6 @@ import {
   Title,
   createStyles,
   useMantineTheme,
-  InputProps,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import {
@@ -55,6 +54,7 @@ const definition = defineWidget({
       type: 'text',
       defaultValue: '',
       info: true,
+      infoLink: "https://homarr.dev/docs/widgets/bookmarks/",
     },
     items: {
       type: 'draggable-editable-list',
diff --git a/src/widgets/widgets.ts b/src/widgets/widgets.ts
index ca843c74a..a6b60e0dc 100644
--- a/src/widgets/widgets.ts
+++ b/src/widgets/widgets.ts
@@ -52,6 +52,7 @@ interface DataType {
 
 interface  ICommonWidgetOptions {
   info?: boolean;
+  infoLink?: string;
 };
 
 // will show a multi-select with specified data