Merge branch 'feature/add-basic-authentication' of https://github.com/ajnart/homarr into feature/add-basic-authentication

src/components/Settings/Common/CommonSettings.tsx

@@ -3,7 +3,6 @@ import { useViewportSize } from '@mantine/hooks';
 
 import { useConfigContext } from '../../../config/provider';
 import ConfigChanger from '../../Config/ConfigChanger';
-import { CacheButtons } from './CacheButtons';
 import ConfigActions from './Config/ConfigActions';
 import LanguageSelect from './Language/LanguageSelect';
 import { SearchEngineSelector } from './SearchEngine/SearchEngineSelector';

src/modules/Docker/DockerModule.tsx

@@ -42,7 +42,7 @@ export default function DockerMenuButton(props: any) {
         padding="xl"
         position="right"
         size="100%"
-        title={<ContainerActionBar selected={selection} reload={reload} />}
+        title={<ContainerActionBar isLoading selected={selection} reload={reload} />}
         transitionProps={{
           transition: 'pop',
         }}

src/pages/_app.tsx

@@ -1,7 +1,10 @@
 import { ColorScheme as MantineColorScheme, MantineProvider, MantineTheme } from '@mantine/core';
 import { ModalsProvider } from '@mantine/modals';
 import { Notifications } from '@mantine/notifications';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import Consola from 'consola';
 import { getCookie, setCookie } from 'cookies-next';
 import 'flag-icons/css/flag-icons.min.css';
@@ -16,6 +19,7 @@ import 'video.js/dist/video-js.css';
 import { env } from '~/env.js';
 import { ColorSchemeProvider } from '~/hooks/use-colorscheme';
 import { modals } from '~/modals/modals';
+import { queryClient } from '~/tools/server/configurations/tanstack/queryClient.tool';
 import { ConfigType } from '~/types/config';
 import { api } from '~/utils/api';
 import { colorSchemeParser } from '~/validations/user';
@@ -65,6 +69,10 @@ function App(
 
   const { setInitialPackageAttributes } = usePackageAttributesStore();
 
+  const asyncStoragePersister = createAsyncStoragePersister({
+    storage: AsyncStorage,
+  });
+
   useEffect(() => {
     setInitialPackageAttributes(props.pageProps.packageAttributes);
   }, []);
@@ -75,44 +83,49 @@ function App(
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </Head>
       <SessionProvider session={pageProps.session}>
-        <ColorSchemeProvider {...pageProps}>
-          {(colorScheme) => (
-            <ColorTheme.Provider value={colorTheme}>
-              <MantineProvider
-                theme={{
-                  ...theme,
-                  components: {
-                    Checkbox: {
-                      styles: {
-                        input: { cursor: 'pointer' },
-                        label: { cursor: 'pointer' },
+        <PersistQueryClientProvider
+          client={queryClient}
+          persistOptions={{ persister: asyncStoragePersister }}
+        >
+          <ColorSchemeProvider {...pageProps}>
+            {(colorScheme) => (
+              <ColorTheme.Provider value={colorTheme}>
+                <MantineProvider
+                  theme={{
+                    ...theme,
+                    components: {
+                      Checkbox: {
+                        styles: {
+                          input: { cursor: 'pointer' },
+                          label: { cursor: 'pointer' },
+                        },
+                      },
+                      Switch: {
+                        styles: {
+                          input: { cursor: 'pointer' },
+                          label: { cursor: 'pointer' },
+                        },
                       },
                     },
-                    Switch: {
-                      styles: {
-                        input: { cursor: 'pointer' },
-                        label: { cursor: 'pointer' },
-                      },
-                    },
-                  },
-                  primaryColor,
-                  primaryShade,
-                  colorScheme,
-                }}
-                withGlobalStyles
-                withNormalizeCSS
-              >
-                <ConfigProvider {...props.pageProps}>
-                  <Notifications limit={4} position="bottom-left" />
-                  <ModalsProvider modals={modals}>
-                    <Component {...pageProps} />
-                  </ModalsProvider>
-                </ConfigProvider>
-              </MantineProvider>
-            </ColorTheme.Provider>
-          )}
-        </ColorSchemeProvider>
-        <ReactQueryDevtools initialIsOpen={false} />
+                    primaryColor,
+                    primaryShade,
+                    colorScheme,
+                  }}
+                  withGlobalStyles
+                  withNormalizeCSS
+                >
+                  <ConfigProvider {...props.pageProps}>
+                    <Notifications limit={4} position="bottom-left" />
+                    <ModalsProvider modals={modals}>
+                      <Component {...pageProps} />
+                    </ModalsProvider>
+                  </ConfigProvider>
+                </MantineProvider>
+              </ColorTheme.Provider>
+            )}
+          </ColorSchemeProvider>
+          <ReactQueryDevtools initialIsOpen={false} />
+        </PersistQueryClientProvider>
       </SessionProvider>
     </>
   );

src/pages/manage/boards/index.tsx

@@ -22,12 +22,6 @@ import { api } from '~/utils/api';
 
 const BoardsPage = () => {
   const { data } = api.config.all.useQuery();
-  const context = api.useContext();
-  const { mutateAsync: deletionMutationAsync } = api.config.delete.useMutation({
-    onSettled: () => {
-      void context.config.all.invalidate();
-    },
-  });
 
   const [deletingDashboards, { append, filter }] = useListState<string>([]);
 

src/pages/user/preferences.tsx

@@ -93,6 +93,7 @@ const SettingsComponent = ({
 
           <Select
             label={t('localization.firstDayOfWeek.label')}
+            //TODO: Make it use the configured value
             data={[
               { value: 'monday', label: 'Monday' },
               { value: 'sunday', label: 'Sunday' },