feat: custom background image url (#18)

#17

package.json

@@ -77,9 +77,9 @@
     "@storybook/blocks": "^8.5.0",
     "@storybook/react": "^8.5.0",
     "@storybook/test": "^8.5.0",
-    "@types/chrome": "^0.0.270",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/chrome": "^0.0.299",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
     "@types/react-transition-group": "^4.4.12",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
@@ -93,7 +93,7 @@
     "jest-fetch-mock": "^3.0.3",
     "lint-staged": "^15.4.1",
     "prettier": "^3.4.2",
-    "react-test-renderer": "^18.3.1",
+    "react-test-renderer": "^19.0.0",
     "semantic-release": "^24.2.1",
     "semantic-release-chrome": "^3.2.0",
     "semver": "^7.6.3",
@@ -107,8 +107,8 @@
     "classnames": "^2.5.1",
     "crypto-js": "^4.2.0",
     "eslint": "^8.57.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-redux": "^9.2.0",
     "react-transition-group": "^4.4.5",
     "redux": "^5.0.1"

src/_locales/en/messages.json

@@ -111,7 +111,7 @@
     "message": "Image"
   },
   "i18nCustomImage": {
-    "message": "Background Custom Image"
+    "message": "Custom Image URL"
   },
   "i18nFontFamily": {
     "message": "Font"

src/components/Settings/SettingsBackgroundImageURL/SettingsBackgroundImageURL.scss

@@ -0,0 +1,32 @@
+@import '../../../theme/defaults.scss';
+
+.settings-backgroundImageURL {
+  display: flex;
+  flex-direction: row;
+
+  & > *:first-child {
+    flex: 0 1 100%;
+  }
+  button {
+    flex: 0 0 auto;
+    appearance: none;
+    cursor: pointer;
+    background: none;
+    border: none;
+    margin: 0;
+    margin-left: 0.5rem;
+    padding: 0 1rem;
+    border-radius: 4px;
+    transition: all 200ms;
+
+    &:hover {
+      fill: $theme-color-primary;
+      background: $theme-color-surface-container;
+    }
+
+    &:active {
+      fill: $theme-color-on-primary;
+      background: $theme-color-primary;
+    }
+  }
+}

src/components/Settings/SettingsBackgroundImageURL/SettingsBackgroundImageURL.tsx

@@ -0,0 +1,26 @@
+import './SettingsBackgroundImageURL.scss';
+import { useState } from 'react';
+import lang from '../../../services/lang';
+import { TextInput } from '../../UI/TextInput/TextInput';
+
+type Props = {
+  value?: string;
+  onChange: (url: string) => void;
+};
+export const SettingsBackgroundImageURL = ({ value = '', onChange }: Props) => {
+  const [val, setVal] = useState(value);
+  return (
+    <div className="settings-backgroundImageURL">
+      <TextInput
+        placeholder={lang.t('i18nCustomImage')}
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+      />
+      <button onClick={() => onChange(val)}>
+        <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+          <path d="M378-246 154-470l43-43 181 181 384-384 43 43-427 427Z" />
+        </svg>
+      </button>
+    </div>
+  );
+};

src/components/Settings/SettingsPanelBackground/SettingsPanelBackground.tsx

@@ -1,9 +1,10 @@
 import { colors, gradientAngles, gradients, images, patterns } from '../../../config';
 import lang from '../../../services/lang';
-import { ColorPicker } from '../../ColorPicker/ColorPicker';
+import { ColorPicker } from '../../UI/ColorPicker/ColorPicker';
 import { SettingsState, useSettingsSlice } from '../../../store/slices/settingsSlice';
 import { SettingsSection } from '../SettingsSection/SettingsSection';
 import { SettingsPanel } from '../SettingsPanel/SettingsPanel';
+import { SettingsBackgroundImageURL } from '../SettingsBackgroundImageURL/SettingsBackgroundImageURL';
 
 export const SettingsPanelBackground = () => {
   const { state, setSettingsOption } = useSettingsSlice();
@@ -15,11 +16,11 @@ export const SettingsPanelBackground = () => {
         backgroundPriority: priority,
         [prop]: value,
       });
-
   const setBackgroundColor = setOptionWithPriority('color', 'backgroundColor');
   const setBackgroundGradient = setOptionWithPriority('gradient', 'backgroundGradient');
   const setBackgroundPattern = setOptionWithPriority('pattern', 'backgroundPattern');
   const setBackgroundImage = setOptionWithPriority('image', 'backgroundImage');
+  const setBackgroundImageUrl = setOptionWithPriority('url', 'backgroundImageUrl');
 
   return (
     <SettingsPanel>
@@ -104,7 +105,7 @@ export const SettingsPanelBackground = () => {
       </SettingsSection>
 
       {/* Image */}
-      <SettingsSection title={lang.t('i18nBackgroundPattern')} gridColumns={4}>
+      <SettingsSection title={lang.t('i18nBackgroundImage')} gridColumns={4}>
         {images.map((image) => (
           <div
             key={image}
@@ -116,6 +117,10 @@ export const SettingsPanelBackground = () => {
           />
         ))}
       </SettingsSection>
+      <SettingsBackgroundImageURL
+        value={state.backgroundImageUrl}
+        onChange={(url) => setBackgroundImageUrl(url)}
+      />
     </SettingsPanel>
   );
 };

src/components/Settings/SettingsPanelClock/SettingsPanelClock.tsx

@@ -1,6 +1,6 @@
 import { useSettingsSlice } from '../../../store/slices/settingsSlice';
 import { SettingsPanel } from '../SettingsPanel/SettingsPanel';
-import SwitchOption from '../SwitchOption/SwitchOption';
+import SwitchOption from '../../UI/SwitchOption/SwitchOption';
 import lang from '../../../services/lang';
 
 export const SettingsPanelClock = () => {

src/components/Settings/SettingsPanelDock/SettingsPanelDock.tsx

@@ -2,7 +2,7 @@ import lang from '../../../services/lang';
 import { dock } from '../../../config';
 import { DockURL } from '../../../config/dock';
 import { useDockSettingsSlice } from '../../../store/slices/dockSlice';
-import SwitchOption from '../SwitchOption/SwitchOption';
+import SwitchOption from '../../UI/SwitchOption/SwitchOption';
 import { SettingsPanel } from '../SettingsPanel/SettingsPanel';
 
 export const SettingsPanelDock = () => {