✨ Add preferences to preferences page

2026-01-26 09:19:18 +01:00 · 2023-07-30 16:22:45 +02:00
parent 9de710bfd8
commit d100d41ce6
5 changed files with 112 additions and 3 deletions
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
    "dayjs": "^1.11.7",
    "dockerode": "^3.3.2",
    "fily-publish-gridstack": "^0.0.13",
+    "flag-icons": "^6.9.2",
    "framer-motion": "^10.0.0",
    "html-entities": "^2.3.3",
    "i18next": "^22.5.1",
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -34,6 +34,7 @@ import {
  getServiceSidePackageAttributes,
 } from '../tools/server/getPackageVersion';
 import { theme } from '../tools/server/theme/theme';
+import "/node_modules/flag-icons/css/flag-icons.min.css";

 function App(
  this: any,
--- a/src/pages/manage/preferences.tsx
+++ b/src/pages/manage/preferences.tsx
@@ -1,16 +1,84 @@
-import { Title } from '@mantine/core';
+import { Group, Select, Stack, Text, Title } from '@mantine/core';
 import Head from 'next/head';
+import { forwardRef } from 'react';
+import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings';
 import { MainLayout } from '~/components/layout/admin/main-admin.layout';
+import { languages } from '~/tools/language';

 const PreferencesPage = () => {
+  const data = languages.map((language) => ({
+    image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png',
+    label: language.originalName,
+    description: language.translatedName,
+    value: language.shortName,
+    country: language.country,
+  }));
  return (
    <MainLayout>
      <Head>
        <title>Preferences • Homarr</title>
      </Head>
-      <Title>Preferences</Title>
+      <Title mb="xl">Preferences</Title>
+
+      <Stack spacing={5}>
+        <Title order={2} size="lg">
+          Localization
+        </Title>
+
+        <Select
+          label="Language"
+          itemComponent={SelectItem}
+          data={data}
+          searchable
+          maxDropdownHeight={400}
+          filter={(value, item) =>
+            item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
+            item.description.toLowerCase().includes(value.toLowerCase().trim())
+          }
+          withAsterisk
+        />
+
+        <Select
+          label="First day of the week"
+          data={[
+            { value: 'monday', label: 'Monday' },
+            { value: 'sunday', label: 'Sunday' },
+            { value: 'saturday', label: 'Saturday' },
+          ]}
+        />
+
+        <Title order={2} size="lg" mt="lg" mb="md">
+          Accessibility
+        </Title>
+
+        <AccessibilitySettings />
+      </Stack>
    </MainLayout>
  );
 };

+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  image: string;
+  label: string;
+  description: string;
+  country: string;
+}
+
+const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
+  ({ image, label, description, country, ...others }: ItemProps, ref) => (
+    <div ref={ref} {...others}>
+      <Group noWrap>
+        <span className={`fi fi-${country?.toLowerCase()}`}></span>
+
+        <div>
+          <Text size="sm">{label}</Text>
+          <Text size="xs" opacity={0.65}>
+            {description}
+          </Text>
+        </div>
+      </Group>
+    </div>
+  )
+);
+
 export default PreferencesPage;
--- a/src/tools/language.ts
+++ b/src/tools/language.ts
@@ -4,11 +4,18 @@ export class Language {
  translatedName: string;
  emoji: string;

-  constructor(shortName: string, originalName: string, translatedName: string, emoji: string) {
+  /**
+   * The country identified b<y the ISO-3166 alpha 2 code:
+   * https://www.iso.org/obp/ui/#search
+   */
+  country?: string;
+
+  constructor(shortName: string, originalName: string, translatedName: string, emoji: string, country: string) {
    this.shortName = shortName;
    this.originalName = originalName;
    this.translatedName = translatedName;
    this.emoji = emoji;
+    this.country = country;
  }
 }

@@ -18,12 +25,14 @@ export const languages: Language[] = [
    originalName: 'Deutsch',
    translatedName: 'German',
    emoji: '🇩🇪',
+    country: 'DE'
  },
  {
    shortName: 'en',
    originalName: 'English',
    translatedName: 'English',
    emoji: '🇬🇧',
+    country: 'GB'
  },
  // Danish
  {
@@ -31,6 +40,7 @@ export const languages: Language[] = [
    originalName: 'Dansk',
    translatedName: 'Danish',
    emoji: '🇩🇰',
+    country: 'DK'
  },
  // Hebrew
  {
@@ -38,36 +48,42 @@ export const languages: Language[] = [
    originalName: 'עברית',
    translatedName: 'Hebrew',
    emoji: '🇮🇱',
+    country: 'IL'
  },
  {
    shortName: 'es',
    originalName: 'Español',
    translatedName: 'Spanish',
    emoji: '🇪🇸',
+    country: 'ES'
  },
  {
    shortName: 'fr',
    originalName: 'Français',
    translatedName: 'French',
    emoji: '🇫🇷',
+    country: 'FR'
  },
  {
    shortName: 'it',
    originalName: 'Italiano',
    translatedName: 'Italian',
    emoji: '🇮🇹',
+    country: 'IT'
  },
  {
    shortName: 'ja',
    originalName: '日本語',
    translatedName: 'Japanese',
    emoji: '🇯🇵',
+    country: 'JP'
  },
  {
    shortName: 'ko',
    originalName: '한국어',
    translatedName: 'Korean',
    emoji: '🇰🇷',
+    country: 'KR'
  },
  {
    shortName: 'lol',
@@ -81,6 +97,7 @@ export const languages: Language[] = [
    originalName: 'Norsk',
    translatedName: 'Norwegian',
    emoji: '🇳🇴',
+    country: 'NO'
  },
  // Slovak
  {
@@ -88,36 +105,42 @@ export const languages: Language[] = [
    originalName: 'Slovenčina',
    translatedName: 'Slovak',
    emoji: '🇸🇰',
+    country: 'SK'
  },
  {
    shortName: 'nl',
    originalName: 'Nederlands',
    translatedName: 'Dutch',
    emoji: '🇳🇱',
+    country: 'NL'
  },
  {
    shortName: 'pl',
    originalName: 'Polski',
    translatedName: 'Polish',
    emoji: '🇵🇱',
+    country: 'PL'
  },
  {
    shortName: 'pt',
    originalName: 'Português',
    translatedName: 'Portuguese',
    emoji: '🇵🇹',
+    country: 'PT'
  },
  {
    shortName: 'ru',
    originalName: 'Русский',
    translatedName: 'Russian',
    emoji: '🇷🇺',
+    country: 'RU'
  },
  {
    shortName: 'sl',
    originalName: 'Slovenščina',
    translatedName: 'Slovenian',
    emoji: '🇸🇮',
+    country: 'SI'
  },

  {
@@ -125,12 +148,14 @@ export const languages: Language[] = [
    originalName: 'Svenska',
    translatedName: 'Swedish',
    emoji: '🇸🇪',
+    country: 'SE'
  },
  {
    shortName: 'uk',
    originalName: 'Українська',
    translatedName: 'Ukrainian',
    emoji: '🇺🇦',
+    country: 'UA'
  },
  // Vietnamese
  {
@@ -138,30 +163,35 @@ export const languages: Language[] = [
    originalName: 'Tiếng Việt',
    translatedName: 'Vietnamese',
    emoji: '🇻🇳',
+    country: 'VN'
  },
  {
    shortName: 'zh',
    originalName: '中文',
    translatedName: 'Chinese',
    emoji: '🇨🇳',
+    country: 'CN'
  },
  {
    shortName: 'el',
    originalName: 'Ελληνικά',
    translatedName: 'Greek',
    emoji: '🇬🇷',
+    country: 'GR'
  },
  {
    shortName: 'tr',
    originalName: 'Türkçe',
    translatedName: 'Turkish',
    emoji: '🇹🇷',
+    country: 'TR'
  },
  {
    shortName: 'lv',
    originalName: 'Latvian',
    translatedName: 'Latvian',
    emoji: '🇱🇻',
+    country: 'LV'
  },
  // Croatian
  {
@@ -169,6 +199,7 @@ export const languages: Language[] = [
    originalName: 'Hrvatski',
    translatedName: 'Croatian',
    emoji: '🇭🇷',
+    country: 'HR'
  },
 ];

--- a/yarn.lock
+++ b/yarn.lock
@@ -5217,6 +5217,13 @@ __metadata:
  languageName: node
  linkType: hard

+"flag-icons@npm:^6.9.2":
+  version: 6.9.2
+  resolution: "flag-icons@npm:6.9.2"
+  checksum: ba2754c65ae4a943ac7042be9ec039243bd5fc2d6cec59228c46549ccadf20f272b22a1d1e8940a830b86b0d2fda1e53f8dd3866937a40c7d90b8fae789b122d
+  languageName: node
+  linkType: hard
+
 "flat-cache@npm:^3.0.4":
  version: 3.0.4
  resolution: "flat-cache@npm:3.0.4"
@@ -5882,6 +5889,7 @@ __metadata:
    eslint-plugin-unused-imports: ^3.0.0
    eslint-plugin-vitest: ^0.2.0
    fily-publish-gridstack: ^0.0.13
+    flag-icons: ^6.9.2
    framer-motion: ^10.0.0
    happy-dom: ^10.0.0
    html-entities: ^2.3.3