♻️ Add ssr for user preferences page, add translations for user preferences page

src/components/Dashboard/Tiles/Widgets/Inputs/LocationSelection.tsx

@@ -17,13 +17,12 @@ import {
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconAlertTriangle, IconClick, IconListSearch } from '@tabler/icons-react';
+import { useTranslation } from 'next-i18next';
 import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { City } from '~/server/api/routers/weather';
 import { api } from '~/utils/api';
 
 import { IntegrationOptionsValueType } from '../WidgetsEditModal';
-import Link from 'next/link';
 
 type LocationSelectionProps = {
   widgetId: string;
@@ -166,16 +165,16 @@ const CitySelectModal = ({ opened, closeModal, query, onCitySelected }: CitySele
         onClose={closeModal}
         zIndex={250}
       >
-      <Center>
-        <Stack align="center">
-          <IconAlertTriangle />
-          <Title order={6}>Nothing found</Title>
-          <Text>Nothing was found, please try again</Text>
-        </Stack>
-      </Center>
+        <Center>
+          <Stack align="center">
+            <IconAlertTriangle />
+            <Title order={6}>Nothing found</Title>
+            <Text>Nothing was found, please try again</Text>
+          </Stack>
+        </Center>
       </Modal>
     );
-  
+
   const formatter = Intl.NumberFormat('en', { notation: 'compact' });
 
   return (
@@ -220,15 +219,20 @@ const CitySelectModal = ({ opened, closeModal, query, onCitySelected }: CitySele
                   <Text style={{ whiteSpace: 'nowrap' }}>{city.country}</Text>
                 </td>
                 <td>
-                  <Anchor target='_blank' href={`https://www.google.com/maps/place/${city.latitude},${city.longitude}`}>
-                  <Text style={{ whiteSpace: 'nowrap' }}>
-                    {city.latitude}, {city.longitude}
-                  </Text>
+                  <Anchor
+                    target="_blank"
+                    href={`https://www.google.com/maps/place/${city.latitude},${city.longitude}`}
+                  >
+                    <Text style={{ whiteSpace: 'nowrap' }}>
+                      {city.latitude}, {city.longitude}
+                    </Text>
                   </Anchor>
                 </td>
                 <td>
                   {city.population ? (
-                    <Text style={{ whiteSpace: 'nowrap' }}>{formatter.format(city.population)}</Text>
+                    <Text style={{ whiteSpace: 'nowrap' }}>
+                      {formatter.format(city.population)}
+                    </Text>
                   ) : (
                     <Text color="dimmed"> {t('modal.table.population.fallback')}</Text>
                   )}

src/components/User/Preferences/AccessibilitySettings.tsx

@@ -1,5 +1,5 @@
 import { Stack, Switch } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { useUserPreferencesFormContext } from '~/pages/user/preferences';
 
 export const AccessibilitySettings = () => {

src/components/User/Preferences/SearchEngineSelector.tsx

@@ -3,22 +3,7 @@ import { useTranslation } from 'next-i18next';
 import { useMemo } from 'react';
 import { useUserPreferencesFormContext } from '~/pages/user/preferences';
 
-const searchEngineOptions = [
-  { label: 'Google', value: 'https://google.com/search?q=%s' },
-  { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=%s' },
-  { label: 'Bing', value: 'https://bing.com/search?q=%s' },
-  { value: 'custom' },
-] as const;
-
-const useSegmentData = () => {
-  const { t } = useTranslation('user/preferences');
-  return searchEngineOptions.map((option) => ({
-    label: option.value === 'custom' ? t('searchEngine.custom') : option.label,
-    value: option.value,
-  }));
-};
-
-export const SearchEngineSelector = () => {
+export const SearchEngineSettings = () => {
   const { t } = useTranslation('user/preferences');
   const form = useUserPreferencesFormContext();
   const segmentData = useSegmentData();
@@ -51,6 +36,7 @@ export const SearchEngineSelector = () => {
             label={t('searchEngine.template.label')}
             description={t('searchEngine.template.description')}
             inputWrapperOrder={['label', 'input', 'description', 'error']}
+            withAsterisk
             {...form.getInputProps('searchTemplate')}
           />
         </Stack>
@@ -58,3 +44,18 @@ export const SearchEngineSelector = () => {
     </Stack>
   );
 };
+
+const searchEngineOptions = [
+  { label: 'Google', value: 'https://google.com/search?q=%s' },
+  { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=%s' },
+  { label: 'Bing', value: 'https://bing.com/search?q=%s' },
+  { value: 'custom' },
+] as const;
+
+const useSegmentData = () => {
+  const { t } = useTranslation('user/preferences');
+  return searchEngineOptions.map((option) => ({
+    label: option.value === 'custom' ? t('searchEngine.custom') : option.label,
+    value: option.value,
+  }));
+};