making code pretty

app/client/web/.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

app/client/web/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+"trailingComma": "es5",
+"tabWidth": 2,
+"semi": false,
+"singleQuote": true
+}

app/client/web/package-lock.json

@@ -36,6 +36,7 @@
         "eslint": "9.x",
         "eslint-plugin-react": "^7.35.0",
         "globals": "^15.9.0",
+        "prettier": "3.3.3",
         "typescript-eslint": "^8.0.0"
       }
     },
@@ -5506,6 +5507,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+      "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.7.0",
       "license": "MIT",

app/client/web/package.json

@@ -8,6 +8,7 @@
     "test": "jest",
     "test:watch": "yarn test --watch",
     "lint": "eslint .",
+    "format": "prettier --write src",
     "lint:fix": "yarn lint --fix",
     "type-check": "tsc --project tsconfig.json --pretty --noEmit",
     "prepare": "husky install",
@@ -42,6 +43,7 @@
     "eslint": "9.x",
     "eslint-plugin-react": "^7.35.0",
     "globals": "^15.9.0",
+    "prettier": "3.3.3",
     "typescript-eslint": "^8.0.0"
   }
 }

app/client/web/src/App.css

@@ -40,4 +40,3 @@
 button {
   font-size: calc(10px + 2vmin);
 }
-

app/client/web/src/App.module.css

@@ -6,9 +6,9 @@
   }
 }
 
-  &:focus-within {
+&:focus-within {
-    border-color: red;
+  border-color: red;
-  }
+}
 
 /* Use `&:focus-visible` when you want focus ring to be visible
    only when user navigates with keyboard, for example by pressing Tab key */

app/client/web/src/App.tsx

@@ -1,40 +1,73 @@
-
 import React from 'react'
 import { Root } from './root/Root'
 import { Access } from './access/Access'
 import { Session } from './session/Session'
-import { useColorScheme } from '@mantine/hooks';
+import { useColorScheme } from '@mantine/hooks'
 import { createTheme, MantineProvider, virtualColor } from '@mantine/core'
 import './App.css'
-import '@mantine/core/styles.css';
+import '@mantine/core/styles.css'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 
 const theme = createTheme({
   primaryColor: 'databag-green',
   primaryShade: { light: 6, dark: 7 },
   colors: {
-    'databag-green': ['#eef6f2', '#cce5d9', '#aad4bf', '#88c3a6', '#66b28c', '#4d9973', '#3c7759', '#2b5540', '#1a3326', '#09110d'],
+    'databag-green': [
-    'dark-surface': ['#000000', '#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999'],
+      '#eef6f2',
-    'light-surface': ['#ffffff', '#eeeeee', '#dddddd', '#cccccc', '#bbbbbb', '#aaaaaa', '#999999', '#888888', '#777777', '#666666'],
+      '#cce5d9',
+      '#aad4bf',
+      '#88c3a6',
+      '#66b28c',
+      '#4d9973',
+      '#3c7759',
+      '#2b5540',
+      '#1a3326',
+      '#09110d',
+    ],
+    'dark-surface': [
+      '#000000',
+      '#111111',
+      '#222222',
+      '#333333',
+      '#444444',
+      '#555555',
+      '#666666',
+      '#777777',
+      '#888888',
+      '#999999',
+    ],
+    'light-surface': [
+      '#ffffff',
+      '#eeeeee',
+      '#dddddd',
+      '#cccccc',
+      '#bbbbbb',
+      '#aaaaaa',
+      '#999999',
+      '#888888',
+      '#777777',
+      '#666666',
+    ],
     surface: virtualColor({
       name: 'surface',
       dark: 'dark-surface',
       light: 'light-surface',
     }),
-
   },
-});
+})
 
 const router = createBrowserRouter([
   { path: '/', element: <Root /> },
   { path: 'access', element: <Access /> },
   { path: 'session', element: <Session /> },
-]);
+])
 
-export function App () {
+export function App() {
   const selectedScheme = localStorage.getItem('scheme')
-  const defaultScheme = useColorScheme('light', { getInitialValueInEffect: false });
+  const defaultScheme = useColorScheme('light', {
-  const scheme = selectedScheme ? selectedScheme : defaultScheme;
+    getInitialValueInEffect: false,
+  })
+  const scheme = selectedScheme ? selectedScheme : defaultScheme
 
   return (
     <MantineProvider forceColorScheme={scheme} theme={theme}>

app/client/web/src/SessionStore.ts

@@ -1,9 +1,8 @@
 import { WebStore } from 'databag-client-sdk'
 
 export class SessionStore implements WebStore {
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public async getValue (key: string): Promise<any> {
+  public async getValue(key: string): Promise<any> {
     console.log('web store get: ', key)
     const value = localStorage.getItem(key)
     if (!value) {
@@ -13,15 +12,15 @@ export class SessionStore implements WebStore {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  public async setValue (key: string, value: any): Promise<void> {
+  public async setValue(key: string, value: any): Promise<void> {
     localStorage.setItem(key, JSON.stringify(value))
   }
 
-  public async clearValue (key: string): Promise<void> {
+  public async clearValue(key: string): Promise<void> {
     localStorage.removeItem(key)
   }
 
-  public async clearAll (): Promise<void> {
+  public async clearAll(): Promise<void> {
     localStorage.clear()
   }
 }

app/client/web/src/access/Access.tsx

@@ -1,3 +1,9 @@
-export function Access () {
+import React from 'react'
-  return <div><span>Access</span></div>
+
+export function Access() {
+  return (
+    <div>
+      <span>Access</span>
+    </div>
+  )
 }

app/client/web/src/constants/Strings.ts

@@ -101,7 +101,8 @@ export const en = {
   create: 'Create',
   createAccount: 'Create Account',
   accountLogin: 'Account Login',
-  toCreate: 'Accounts are created through a link generated from the admin dashboard.',
+  toCreate:
+    'Accounts are created through a link generated from the admin dashboard.',
   admin: 'Admin',
   loginError: 'Login Error',
   loginMessage: 'Please confirm your username and password.',
@@ -310,10 +311,12 @@ export const fr = {
   create: 'Créer',
   createAccount: 'Créer un Compte',
   accountLogin: 'Connexion au Compte',
-  toCreate: "Les comptes sont créés via un lien généré depuis le tableau de bord d'administration.",
+  toCreate:
+    "Les comptes sont créés via un lien généré depuis le tableau de bord d'administration.",
   admin: 'Administrateur',
   loginError: 'Erreur de connexion',
-  loginMessage: "Veuillez confirmer votre nom d'utilisateur et votre mot de passe.",
+  loginMessage:
+    "Veuillez confirmer votre nom d'utilisateur et votre mot de passe.",
   createError: 'Erreur de création de compte',
   createMessage: 'Veuillez vérifier auprès de votre administrateur.',
   adminError: "Erreur d'Accès",
@@ -409,12 +412,13 @@ export const fr = {
   mfaDisabled: 'vérification temporairement désactivée',
   mfaConfirm: 'Confirmer',
 
-  enableMultifactor: 'Activer l\'authentification multifacteur',
+  enableMultifactor: "Activer l'authentification multifacteur",
-  disableMultifactor: 'Désactiver l\'authentification multifacteur',
+  disableMultifactor: "Désactiver l'authentification multifacteur",
 
   disable: 'Désactiver',
-  confirmDisable: 'Désactivation de l\'authentification multi-facteurs',
+  confirmDisable: "Désactivation de l'authentification multi-facteurs",
-  disablePrompt: 'Êtes-vous sûr de vouloir désactiver l\'authentification multi-facteurs',
+  disablePrompt:
+    "Êtes-vous sûr de vouloir désactiver l'authentification multi-facteurs",
 }
 
 export const sp = {
@@ -520,7 +524,8 @@ export const sp = {
   create: 'Crear',
   createAccount: 'Crear cuenta',
   accountLogin: 'Inicio de sesión en la cuenta',
-  toCreate: 'Las cuentas se crean a través de un enlace generado desde el panel de administración.',
+  toCreate:
+    'Las cuentas se crean a través de un enlace generado desde el panel de administración.',
   admin: 'Administrador',
   loginError: 'Error de inicio de sesión',
   loginMessage: 'Por favor, confirme su nombre de usuario y contraseña.',
@@ -623,7 +628,8 @@ export const sp = {
 
   disable: 'Desactivar',
   confirmDisable: 'Desactivación de la autenticación de dos factores',
-  disablePrompt: '¿Estás seguro de que quieres desactivar la autenticación de dos factores?',
+  disablePrompt:
+    '¿Estás seguro de que quieres desactivar la autenticación de dos factores?',
 }
 
 export const pt = {
@@ -729,7 +735,8 @@ export const pt = {
   create: 'Criar',
   createAccount: 'Criar uma conta',
   accountLogin: 'Login da conta',
-  toCreate: 'As contas são criadas através de um link gerado no painel de administração.',
+  toCreate:
+    'As contas são criadas através de um link gerado no painel de administração.',
   admin: 'Administrador',
   loginError: 'Erro de login',
   loginMessage: 'Por favor, confirme seu nome de usuário e senha.',
@@ -832,7 +839,8 @@ export const pt = {
 
   disable: 'Desativar',
   confirmDisable: 'Desativando Autenticação de Dois Fatores',
-  disablePrompt: 'Tem certeza de que deseja desativar a autenticação de dois fatores?',
+  disablePrompt:
+    'Tem certeza de que deseja desativar a autenticação de dois fatores?',
 }
 
 export const de = {
@@ -938,7 +946,8 @@ export const de = {
   create: 'Erstellen',
   createAccount: 'Konto erstellen',
   accountLogin: 'Kontoanmeldung',
-  toCreate: 'Konten werden über einen Link erstellt, der im Administrations-Dashboard generiert wird.',
+  toCreate:
+    'Konten werden über einen Link erstellt, der im Administrations-Dashboard generiert wird.',
   admin: 'Administrator',
   loginError: 'Anmeldefehler',
   loginMessage: 'Bitte bestätigen Sie Ihren Benutzernamen und Ihr Passwort.',
@@ -1030,7 +1039,8 @@ export const de = {
   sealedMessage: 'Gesicherte Nachricht',
 
   mfaTitle: 'Zwei-Faktor-Authentifizierung',
-  mfaSteps: 'Speichern Sie das Geheimnis und bestätigen Sie den Bestätigungscode',
+  mfaSteps:
+    'Speichern Sie das Geheimnis und bestätigen Sie den Bestätigungscode',
   mfaEnter: 'Geben Sie Ihren Bestätigungs-Code ein',
   mfaError: 'Verifizierungscodefehler',
   mfaDisabled: 'Verifizierung vorübergehend deaktiviert',
@@ -1041,7 +1051,8 @@ export const de = {
 
   disable: 'Deaktivieren',
   confirmDisable: 'Deaktivierung der Zwei-Faktor-Authentifizierung',
-  disablePrompt: 'Sind Sie sicher, dass Sie die Zwei-Faktor-Authentifizierung deaktivieren möchten?',
+  disablePrompt:
+    'Sind Sie sicher, dass Sie die Zwei-Faktor-Authentifizierung deaktivieren möchten?',
 }
 
 export const ru = {
@@ -1147,7 +1158,8 @@ export const ru = {
   create: 'Создать',
   createAccount: 'Создать аккаунт',
   accountLogin: 'Вход в аккаунт',
-  toCreate: 'Учетные записи создаются через ссылку, сгенерированную в панели администратора.',
+  toCreate:
+    'Учетные записи создаются через ссылку, сгенерированную в панели администратора.',
   admin: 'Администратор',
   loginError: 'Ошибка входа',
   loginMessage: 'Пожалуйста, подтвердите свое имя пользователя и пароль.',
@@ -1250,5 +1262,6 @@ export const ru = {
 
   disable: 'Отключить',
   confirmDisable: 'Отключение двухфакторной аутентификации',
-  disablePrompt: 'Вы уверены, что хотите отключить двухфакторную аутентификацию?',
+  disablePrompt:
+    'Вы уверены, что хотите отключить двухфакторную аутентификацию?',
 }

app/client/web/src/context/AppContext.tsx

@@ -3,7 +3,7 @@ import { useAppContext } from './useAppContext.hook'
 
 export const AppContext = createContext({})
 
-export function AppContextProvider ({ children }: { children: ReactNode }) {
+export function AppContextProvider({ children }: { children: ReactNode }) {
   const { state, actions } = useAppContext()
   return (
     <AppContext.Provider value={{ state, actions }}>

app/client/web/src/context/ContextType.ts

@@ -1,6 +1,6 @@
 export interface ContextType {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  state: any,
+  state: any
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   actions: any
 }

app/client/web/src/context/SettingsContext.tsx

@@ -3,7 +3,7 @@ import { useSettingsContext } from './useSettingsContext.hook'
 
 export const SettingsContext = createContext({})
 
-export function SettingsContextProvider ({ children }: { children: ReactNode }) {
+export function SettingsContextProvider({ children }: { children: ReactNode }) {
   const { state, actions } = useSettingsContext()
   return (
     <SettingsContext.Provider value={{ state, actions }}>

app/client/web/src/context/useAppContext.hook.ts

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'
 import { DatabagSDK, Session } from 'databag-client-sdk'
 import { SessionStore } from '../SessionStore'
 
-export function useAppContext () {
+export function useAppContext() {
   const [state, setState] = useState({})
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -34,14 +34,20 @@ export function useAppContext () {
         appName: 'databag',
       }
       console.log('-----> SDK LOGIN')
-      const login = await sdk.login('asdf', 'asdf', 'balzack.coredb.org', true, null, params)
+      const login = await sdk.login(
+        'asdf',
+        'asdf',
+        'balzack.coredb.org',
+        true,
+        null,
+        params
+      )
       console.log(login)
       updateState({ sdk, session: login })
     }
   }
 
-  const actions = {
+  const actions = {}
-  }
 
   return { state, actions }
 }

app/client/web/src/context/useSettingsContext.hook.ts

@@ -2,15 +2,25 @@ import { useEffect, useState } from 'react'
 import { LightTheme, DarkTheme } from '../constants/Colors'
 import { en, fr, sp, pt, de, ru } from '../constants/Strings'
 
-export function useSettingsContext () {
+export function useSettingsContext() {
   const [state, setState] = useState({
     display: null,
-    themes: [{ value: 'dark', label: 'Dark' }, { value: 'light', label: 'Light' }],
+    themes: [
+      { value: 'dark', label: 'Dark' },
+      { value: 'light', label: 'Light' },
+    ],
     theme: null,
     scheme: null,
     colors: {},
     menuStyle: {},
-    languages: [{ value: 'en', label: 'English' }, { value: 'fr', label: 'Français' }, { value: 'sp', label: 'Español' }, { value: 'pt', label: 'Português' }, { value: 'de', label: 'Deutsch' }, { value: 'ru', label: 'Русский' }],
+    languages: [
+      { value: 'en', label: 'English' },
+      { value: 'fr', label: 'Français' },
+      { value: 'sp', label: 'Español' },
+      { value: 'pt', label: 'Português' },
+      { value: 'de', label: 'Deutsch' },
+      { value: 'ru', label: 'Русский' },
+    ],
     language: null,
     strings: en,
     dateFormat: 'mm/dd',
@@ -31,11 +41,23 @@ export function useSettingsContext () {
 
   const handleResize = () => {
     if (window.innerWidth < SMALL_MEDIUM) {
-      updateState({ display: 'small', width: window.innerWidth, height: window.innerHeight })
+      updateState({
+        display: 'small',
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
     } else if (window.innerWidth < MEDIUM_LARGE) {
-      updateState({ display: 'medium', width: window.innerWidth, height: window.innerHeight })
+      updateState({
+        display: 'medium',
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
     } else {
-      updateState({ display: 'large', width: window.innerWidth, height: window.innerHeight })
+      updateState({
+        display: 'large',
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
     }
   }
 
@@ -47,27 +69,35 @@ export function useSettingsContext () {
     const filtered = new Map()
     const devices = await navigator.mediaDevices.enumerateDevices()
 
-    devices.filter(item => item.kind === type + 'input').forEach(item => {
+    devices
-      if (item) {
+      .filter((item) => item.kind === type + 'input')
-        const label = item.label ? item.label : state.strings.integrated
+      .forEach((item) => {
-        const entry = filtered.get(item.groupId)
+        if (item) {
-        if (entry) {
+          const label = item.label ? item.label : state.strings.integrated
-          if (item.label && label.length < entry.label.length) {
+          const entry = filtered.get(item.groupId)
-            filtered.set(item.groupId, { value: item.deviceId, label })
+          if (entry) {
+            if (item.label && label.length < entry.label.length) {
+              filtered.set(item.groupId, {
+                value: item.deviceId,
+                label,
+              })
+            }
+          } else {
+            filtered.set(item.groupId, {
+              value: item.deviceId,
+              label,
+            })
           }
-        } else {
-          filtered.set(item.groupId, { value: item.deviceId, label })
         }
-      }
+      })
-    })
     return Array.from(filtered.values())
   }
 
   useEffect(() => {
-    getDevices('audio').then(audio => {
+    getDevices('audio').then((audio) => {
       updateState({ audioInputs: audio })
     })
-    getDevices('video').then(video => {
+    getDevices('video').then((video) => {
       updateState({ videoInputs: video })
     })
   }, [state.strings])
@@ -82,14 +112,49 @@ export function useSettingsContext () {
 
     const scheme = localStorage.getItem('color_scheme')
     if (scheme === 'dark') {
-      updateState({ theme: scheme, scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
+      updateState({
+        theme: scheme,
+        scheme: 'dark',
+        colors: DarkTheme,
+        menuStyle: {
+          backgroundColor: DarkTheme.modalArea,
+          color: DarkTheme.mainText,
+        },
+      })
     } else if (scheme === 'light') {
-      updateState({ theme: scheme, scheme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
+      updateState({
+        theme: scheme,
+        scheme: 'light',
+        colors: LightTheme,
+        menuStyle: {
+          backgroundColor: LightTheme.modalArea,
+          color: LightTheme.mainText,
+        },
+      })
     } else {
-      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      if (
-        updateState({ theme: null, scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
+        window.matchMedia &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+      ) {
+        updateState({
+          theme: null,
+          scheme: 'dark',
+          colors: DarkTheme,
+          menuStyle: {
+            backgroundColor: DarkTheme.modalArea,
+            color: DarkTheme.mainText,
+          },
+        })
       } else {
-        updateState({ theme: null, scheme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
+        updateState({
+          theme: null,
+          scheme: 'light',
+          colors: LightTheme,
+          menuStyle: {
+            backgroundColor: LightTheme.modalArea,
+            color: LightTheme.mainText,
+          },
+        })
       }
     }
 
@@ -109,31 +174,115 @@ export function useSettingsContext () {
 
     const language = localStorage.getItem('language')
     if (language && language.startsWith('fr')) {
-      updateState({ language: 'fr', strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
+      updateState({
+        language: 'fr',
+        strings: fr,
+        themes: [
+          { value: 'dark', label: fr.dark },
+          { value: 'light', label: fr.light },
+        ],
+      })
     } else if (language && language.startsWith('sp')) {
-      updateState({ language: 'sp', strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
+      updateState({
+        language: 'sp',
+        strings: sp,
+        themes: [
+          { value: 'dark', label: sp.dark },
+          { value: 'light', label: sp.light },
+        ],
+      })
     } else if (language && language.startsWith('en')) {
-      updateState({ language: 'en', strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
+      updateState({
+        language: 'en',
+        strings: en,
+        themes: [
+          { value: 'dark', label: en.dark },
+          { value: 'light', label: en.light },
+        ],
+      })
     } else if (language && language.startsWith('pt')) {
-      updateState({ language: 'pt', strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
+      updateState({
+        language: 'pt',
+        strings: pt,
+        themes: [
+          { value: 'dark', label: pt.dark },
+          { value: 'light', label: pt.light },
+        ],
+      })
     } else if (language && language.startsWith('de')) {
-      updateState({ language: 'de', strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
+      updateState({
+        language: 'de',
+        strings: de,
+        themes: [
+          { value: 'dark', label: de.dark },
+          { value: 'light', label: de.light },
+        ],
+      })
     } else if (language && language.startsWith('ru')) {
-      updateState({ language: 'ru', strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
+      updateState({
+        language: 'ru',
+        strings: ru,
+        themes: [
+          { value: 'dark', label: ru.dark },
+          { value: 'light', label: ru.light },
+        ],
+      })
     } else {
       const browser = navigator.language
       if (browser && browser.startsWith('fr')) {
-        updateState({ language: null, strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
+        updateState({
+          language: null,
+          strings: fr,
+          themes: [
+            { value: 'dark', label: fr.dark },
+            { value: 'light', label: fr.light },
+          ],
+        })
       } else if (browser && browser.startsWith('sp')) {
-        updateState({ language: null, strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
+        updateState({
+          language: null,
+          strings: sp,
+          themes: [
+            { value: 'dark', label: sp.dark },
+            { value: 'light', label: sp.light },
+          ],
+        })
       } else if (browser && browser.startsWith('pt')) {
-        updateState({ language: null, strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
+        updateState({
+          language: null,
+          strings: pt,
+          themes: [
+            { value: 'dark', label: pt.dark },
+            { value: 'light', label: pt.light },
+          ],
+        })
       } else if (browser && browser.startsWith('de')) {
-        updateState({ language: null, strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
+        updateState({
+          language: null,
+          strings: de,
+          themes: [
+            { value: 'dark', label: de.dark },
+            { value: 'light', label: de.light },
+          ],
+        })
       } else if (browser && browser.startsWith('ru')) {
-        updateState({ language: null, strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
+        updateState({
+          language: null,
+          strings: ru,
+          themes: [
+            { value: 'dark', label: ru.dark },
+            { value: 'light', label: ru.light },
+          ],
+        })
       } else {
-        updateState({ language: null, strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
+        updateState({
+          language: null,
+          strings: en,
+          themes: [
+            { value: 'dark', label: en.dark },
+            { value: 'light', label: en.light },
+          ],
+        })
       }
     }
 
@@ -145,59 +294,178 @@ export function useSettingsContext () {
       window.removeEventListener('resize', handleResize)
       window.removeEventListener('orientationchange', handleResize)
     }
-  }, []);
+  }, [])
 
   const actions = {
     setTheme: (theme: string) => {
       if (theme === 'dark') {
         localStorage.setItem('color_scheme', 'dark')
-        updateState({ theme: 'dark', scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
+        updateState({
+          theme: 'dark',
+          scheme: 'dark',
+          colors: DarkTheme,
+          menuStyle: {
+            backgroundColor: DarkTheme.modalArea,
+            color: DarkTheme.mainText,
+          },
+        })
       } else if (theme === 'light') {
         localStorage.setItem('color_scheme', 'light')
-        updateState({ theme: 'light', scheme: 'light', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
+        updateState({
+          theme: 'light',
+          scheme: 'light',
+          colors: LightTheme,
+          menuStyle: {
+            backgroundColor: LightTheme.modalArea,
+            color: LightTheme.mainText,
+          },
+        })
       } else {
         localStorage.removeItem('color_scheme')
-        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        if (
-          updateState({ theme: null, scheme: 'dark', colors: DarkTheme, menuStyle: { backgroundColor: DarkTheme.modalArea, color: DarkTheme.mainText } })
+          window.matchMedia &&
+          window.matchMedia('(prefers-color-scheme: dark)').matches
+        ) {
+          updateState({
+            theme: null,
+            scheme: 'dark',
+            colors: DarkTheme,
+            menuStyle: {
+              backgroundColor: DarkTheme.modalArea,
+              color: DarkTheme.mainText,
+            },
+          })
         } else {
-          updateState({ theme: null, scheme: 'ligth', colors: LightTheme, menuStyle: { backgroundColor: LightTheme.modalArea, color: LightTheme.mainText } })
+          updateState({
+            theme: null,
+            scheme: 'ligth',
+            colors: LightTheme,
+            menuStyle: {
+              backgroundColor: LightTheme.modalArea,
+              color: LightTheme.mainText,
+            },
+          })
         }
       }
     },
     setLanguage: (code: string) => {
       if (code && code.startsWith('fr')) {
         localStorage.setItem('language', 'fr')
-        updateState({ language: 'fr', strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
+        updateState({
+          language: 'fr',
+          strings: fr,
+          themes: [
+            { value: 'dark', label: fr.dark },
+            { value: 'light', label: fr.light },
+          ],
+        })
       } else if (code && code.startsWith('sp')) {
         localStorage.setItem('language', 'sp')
-        updateState({ language: 'sp', strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
+        updateState({
+          language: 'sp',
+          strings: sp,
+          themes: [
+            { value: 'dark', label: sp.dark },
+            { value: 'light', label: sp.light },
+          ],
+        })
       } else if (code && code.startsWith('en')) {
         localStorage.setItem('language', 'en')
-        updateState({ language: 'en', strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
+        updateState({
+          language: 'en',
+          strings: en,
+          themes: [
+            { value: 'dark', label: en.dark },
+            { value: 'light', label: en.light },
+          ],
+        })
       } else if (code && code.startsWith('pt')) {
         localStorage.setItem('language', 'pt')
-        updateState({ language: 'pt', strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
+        updateState({
+          language: 'pt',
+          strings: pt,
+          themes: [
+            { value: 'dark', label: pt.dark },
+            { value: 'light', label: pt.light },
+          ],
+        })
       } else if (code && code.startsWith('de')) {
         localStorage.setItem('language', 'de')
-        updateState({ language: 'de', strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
+        updateState({
+          language: 'de',
+          strings: de,
+          themes: [
+            { value: 'dark', label: de.dark },
+            { value: 'light', label: de.light },
+          ],
+        })
       } else if (code && code.startsWith('ru')) {
         localStorage.setItem('language', 'ru')
-        updateState({ language: 'ru', strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
+        updateState({
+          language: 'ru',
+          strings: ru,
+          themes: [
+            { value: 'dark', label: ru.dark },
+            { value: 'light', label: ru.light },
+          ],
+        })
       } else {
         localStorage.removeItem('language')
         const browser = navigator.language
         if (browser && browser.startsWith('fr')) {
-          updateState({ language: null, strings: fr, themes: [{ value: 'dark', label: fr.dark }, { value: 'light', label: fr.light }] })
+          updateState({
+            language: null,
+            strings: fr,
+            themes: [
+              { value: 'dark', label: fr.dark },
+              { value: 'light', label: fr.light },
+            ],
+          })
         } else if (browser && browser.startsWith('sp')) {
-          updateState({ language: null, strings: sp, themes: [{ value: 'dark', label: sp.dark }, { value: 'light', label: sp.light }] })
+          updateState({
+            language: null,
+            strings: sp,
+            themes: [
+              { value: 'dark', label: sp.dark },
+              { value: 'light', label: sp.light },
+            ],
+          })
         } else if (browser && browser.startsWith('pt')) {
-          updateState({ language: null, strings: pt, themes: [{ value: 'dark', label: pt.dark }, { value: 'light', label: pt.light }] })
+          updateState({
+            language: null,
+            strings: pt,
+            themes: [
+              { value: 'dark', label: pt.dark },
+              { value: 'light', label: pt.light },
+            ],
+          })
         } else if (browser && browser.startsWith('de')) {
-          updateState({ language: null, strings: de, themes: [{ value: 'dark', label: de.dark }, { value: 'light', label: de.light }] })
+          updateState({
+            language: null,
+            strings: de,
+            themes: [
+              { value: 'dark', label: de.dark },
+              { value: 'light', label: de.light },
+            ],
+          })
         } else if (browser && browser.startsWith('ru')) {
-          updateState({ language: null, strings: ru, themes: [{ value: 'dark', label: ru.dark }, { value: 'light', label: ru.light }] })
+          updateState({
+            language: null,
+            strings: ru,
+            themes: [
+              { value: 'dark', label: ru.dark },
+              { value: 'light', label: ru.light },
+            ],
+          })
         } else {
-          updateState({ language: null, strings: en, themes: [{ value: 'dark', label: en.dark }, { value: 'light', label: en.light }] })
+          updateState({
+            language: null,
+            strings: en,
+            themes: [
+              { value: 'dark', label: en.dark },
+              { value: 'light', label: en.light },
+            ],
+          })
         }
       }
     },

app/client/web/src/main.tsx

@@ -19,5 +19,5 @@ root.render(
         <App />
       </StrictMode>
     </AppContextProvider>
-  </SettingsContextProvider>,
+  </SettingsContextProvider>
 )

app/client/web/src/root/Root.module.css

@@ -4,9 +4,9 @@
   }
 }
 
-  &:focus-within {
+&:focus-within {
-    border-color: red;
+  border-color: red;
-  }
+}
 
 /* Use `&:focus-visible` when you want focus ring to be visible
    only when user navigates with keyboard, for example by pressing Tab key */

app/client/web/src/root/Root.tsx

@@ -1,27 +1,33 @@
-import React, { useContext } from 'react'
+import React from 'react'
-import { SettingsContext } from '../context/SettingsContext'
-import { ContextType } from '../context/ContextType'
 import { TextInput, Button } from '@mantine/core'
-import { useMantineTheme } from '@mantine/core';
+import { useMantineTheme } from '@mantine/core'
 
-export function Root () {
+export function Root() {
-  const theme = useMantineTheme();
+  const theme = useMantineTheme()
-  const settings = useContext(SettingsContext);
 
   const press = () => {
-    console.log("PRESSED");
+    console.log('PRESSED')
   }
 
-  return <div><span>ROOT</span>
+  return (
-    <Button
+    <div>
-      variant="danger"
+      <span>ROOT</span>
-      onClick={press}>Download</Button>
+      <Button variant="danger" onClick={press}>
-    <TextInput
+        Download
-      color="lime.4"
+      </Button>
-      label="Input label"
+      <TextInput
-      description="Input description"
+        color="lime.4"
-      placeholder="Input placeholder"
+        label="Input label"
-    />
+        description="Input description"
-    <div style={{ width: 100, height: 100, backgroundColor: theme.colors.surface[8], }} />
+        placeholder="Input placeholder"
+      />
+      <div
+        style={{
+          width: 100,
+          height: 100,
+          backgroundColor: theme.colors.surface[8],
+        }}
+      />
     </div>
+  )
 }

app/client/web/src/session/Session.tsx

@@ -1,3 +1,9 @@
-export function Session () {
+import React from 'react'
-  return <div><span>Session</span></div>
+
+export function Session() {
+  return (
+    <div>
+      <span>Session</span>
+    </div>
+  )
 }

app/client/web/yarn.lock

@@ -2658,6 +2658,7 @@ __metadata:
     globals: ^15.9.0
     husky: 8.0.1
     jest: 29.1.1
+    prettier: 3.3.3
     react: 18.3.1
     react-dom: 18.2.0
     react-router-dom: ^6.26.0
@@ -5769,6 +5770,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:3.3.3":
+  version: 3.3.3
+  resolution: "prettier@npm:3.3.3"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: bc8604354805acfdde6106852d14b045bb20827ad76a5ffc2455b71a8257f94de93f17f14e463fe844808d2ccc87248364a5691488a3304f1031326e62d9276e
+  languageName: node
+  linkType: hard
+
 "pretty-format@npm:^27.0.2":
   version: 27.5.1
   resolution: "pretty-format@npm:27.5.1"