Upgrade to Mantine 7

TODO

@@ -0,0 +1,16 @@
+# Tasks related to upgrade to Mantine 7
+
+- high: fix faces dashboard
+- medium: fix logout to redirect to login page
+- medium: fix public user list and public photos for authenticated user
+- medium: highlight sidebar menu when children menu page is active
+- medium: remove the use of useMediaquery
+- medium: photolist action menu styling, move actions to the right
+- low: fix photo list dropdown filter click area
+- low: rework mobile top menu for usability (upload, search, etc.)
+- low: fix warnings (in console) related to defaultProps (photo list view, etc.)
+
+- optional: refactor site search with combobox
+- optional: migrate from Emotion to css modules (performance improvement)
+- optional: refactor tree with latest mantine tree (and remove existing one)
+- optional: move color theme switch to top menu for convenience

eslint.config.mjs

@@ -1,3 +1,4 @@
+import { fixupConfigRules } from "@eslint/compat";
 import { FlatCompat } from "@eslint/eslintrc";
 import js from "@eslint/js";
 import prettier from "eslint-plugin-prettier";
@@ -15,9 +16,9 @@ const compat = new FlatCompat({
 
 export default [
   {
-    ignores: ["**/.eslintrc.js", "**/prettier.config.js", "**/proxy.js", "node_modules/*"],
+    ignores: ["**/eslint.config.mjs", "**/prettier.config.cjs", "**/proxy.js", "node_modules/*"],
   },
-  ...compat.extends("airbnb", "airbnb-typescript", "airbnb/hooks", "prettier"),
+  ...fixupConfigRules(compat.extends("airbnb", "airbnb-typescript", "airbnb/hooks", "prettier")),
   {
     plugins: {
       prettier,
@@ -35,12 +36,14 @@ export default [
 
       parserOptions: {
         project: "./tsconfig.eslint.json",
-        tsconfigRootDir: "/home/niaz/librephotos/librephotos-frontend",
+        tsconfigRootDir: __dirname,
       },
     },
 
     rules: {
       "import/prefer-default-export": "off",
+      "import/no-named-as-default": "off",
+      "import/no-named-as-default-member": "off",
       "import/no-cycle": "off",
       "react/jsx-props-no-spreading": "off",
       "react-hooks/exhaustive-deps": "off",

package.json

@@ -22,7 +22,7 @@
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
       "yarn prettier --config ./prettier.config.cjs --write",
-      "yarn eslint --cache --quiet -c ./.eslint.config.mjs"
+      "yarn eslint --cache --quiet -c ./eslint.config.mjs"
     ],
     "*.{json,css,scss,md}": [
       "yarn prettier --config ./prettier.config.cjs  --write"
@@ -34,14 +34,22 @@
     "not op_mini all"
   ],
   "dependencies": {
+    "@dnd-kit/core": "6.1.0",
+    "@dnd-kit/sortable": "8.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
-    "@mantine/core": "6.0.22",
-    "@mantine/dates": "6.0.22",
-    "@mantine/form": "6.0.22",
-    "@mantine/hooks": "6.0.22",
-    "@mantine/notifications": "6.0.22",
-    "@mantine/tiptap": "6.0.22",
-    "@reduxjs/toolkit": "2.2.6",
+    "@emotion/serialize": "^1.1.4",
+    "@emotion/utils": "^1.2.1",
+    "@mantine/core": "^7.12.2",
+    "@mantine/dates": "^7.12.2",
+    "@mantine/emotion": "^7.12.2",
+    "@mantine/form": "^7.12.2",
+    "@mantine/hooks": "^7.12.2",
+    "@mantine/notifications": "^7.12.2",
+    "@mantine/tiptap": "^7.12.2",
+    "@popperjs/core": "2.11.8",
+    "@reduxjs/toolkit": "1.9.7",
     "@tabler/icons-react": "^3.0.0",
     "@tiptap/core": "^2.3.2",
     "@tiptap/extension-document": "^2.3.2",
@@ -109,6 +117,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.24.8",
+    "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.7.0",
     "@trivago/prettier-plugin-sort-imports": "4.3.0",

src/App.tsx

@@ -1,19 +1,16 @@
-import type { ColorScheme } from "@mantine/core";
-import { AppShell, ColorSchemeProvider, MantineProvider } from "@mantine/core";
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import { MantineEmotionProvider } from "@mantine/emotion";
 import { Notifications } from "@mantine/notifications";
-import React, { useCallback, useMemo, useState } from "react";
-import { Cookies, CookiesProvider } from "react-cookie";
-import { Route, Routes, useLocation } from "react-router-dom";
+import React from "react";
+import { Route, Routes } from "react-router-dom";
 
 import "./App.css";
-import { FooterMenu } from "./components/menubars/Footer";
-import { SideMenuNarrow } from "./components/menubars/SideMenuNarrow";
-import { TopMenu } from "./components/menubars/TopMenu";
-import { TopMenuPublic } from "./components/menubars/TopMenuPublic";
 import { CountStats } from "./components/statistics";
 import { Login } from "./containers/login";
 import "./i18n";
-import { ProtectedRoutes } from "./layouts/PrivateRoute";
+import { AppShellProtected } from "./layouts/AppShellProtected";
+import { AppShellPublicWithHeader } from "./layouts/AppShellPublicWithHeader";
+import { AppShellPublicWithoutHeader } from "./layouts/AppShellPublicWithoutHeader";
 import { SearchView } from "./layouts/SearchView";
 import { AlbumAuto } from "./layouts/albums/AlbumAuto";
 import { AlbumAutoGalleryView } from "./layouts/albums/AlbumAutoGalleryView";
@@ -47,113 +44,67 @@ import { Profile } from "./layouts/settings/Profile";
 import { Settings } from "./layouts/settings/Settings";
 import { SharedByMe } from "./layouts/sharing/SharedByMe";
 import { SharedWithMe } from "./layouts/sharing/SharedWithMe";
-import { selectIsAuthenticated } from "./store/auth/authSelectors";
-import { useAppSelector } from "./store/store";
-
-const noMenubarPaths = ["/signup", "/login"];
 
 export function App() {
-  const cookies = useMemo(() => new Cookies(), []);
-  const showSidebar = useAppSelector(store => store.ui.showSidebar);
-  const isAuth = useAppSelector(selectIsAuthenticated);
-  const [colorScheme, setColorScheme] = useState<ColorScheme>(
-    cookies.get("mantine-color-scheme") ? cookies.get("mantine-color-scheme") : "light"
-  );
-
-  const toggleColorScheme = useCallback(
-    value => {
-      const nextColorScheme = value || (colorScheme === "dark" ? "light" : "dark");
-      cookies.set("mantine-color-scheme", nextColorScheme, { maxAge: 60 * 60 * 24 * 356 });
-      setColorScheme(nextColorScheme);
-    },
-    [colorScheme, cookies]
-  );
-
-  const { pathname } = useLocation();
-
-  const showMenubar = !!(pathname && !noMenubarPaths.includes(pathname));
-
-  const getNavBar = (isMenubarVisible: boolean, isSidebarVisible: boolean, isAuthenticated: boolean) => {
-    if (isMenubarVisible && isSidebarVisible && isAuthenticated) {
-      return <SideMenuNarrow />;
-    }
-    return <div />;
-  };
-
-  const getHeader = (isMenubarVisible: boolean) => {
-    if (!isMenubarVisible) {
-      return <div />;
-    }
-    return isAuth ? <TopMenu /> : <TopMenuPublic />;
-  };
-
-  const getFooter = (isAuthenticated: boolean) => (isAuthenticated ? <FooterMenu /> : <div />);
-
   return (
-    <CookiesProvider>
-      <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-        <MantineProvider theme={{ colorScheme }} withGlobalStyles withNormalizeCSS>
+    <>
+      <ColorSchemeScript defaultColorScheme="auto" />
+      <MantineProvider defaultColorScheme="auto">
+        <MantineEmotionProvider>
           <Notifications autoClose={3000} zIndex={1001} />
-          <AppShell
-            fixed
-            padding={0}
-            navbar={getNavBar(showMenubar, showSidebar, isAuth)}
-            header={getHeader(showMenubar)}
-            footer={getFooter(isAuth)}
-            styles={theme => ({
-              main: {
-                backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[0],
-              },
-            })}
-          >
-            <Routes>
+          <Routes>
+            <Route element={<AppShellPublicWithoutHeader />}>
               <Route path="login" element={<Login />} />
               <Route path="signup" element={<SignupPage />} />
+            </Route>
+
+            <Route element={<AppShellPublicWithHeader />}>
               <Route path="public/:username" element={<UserPublicPage />} />
               <Route path="users" element={<PublicUserList />} />
               <Route path="user/:username" element={<UserPublicPage />} />
-              <Route element={<ProtectedRoutes />}>
-                <Route index element={<TimestampPhotos />} />
-                <Route path="things" element={<AlbumThing />} />
-                <Route path="recent" element={<RecentlyAddedPhotos />} />
-                <Route path="favorites" element={<FavoritePhotos />} />
-                <Route path="photos" element={<OnlyPhotos />} />
-                <Route path="videos" element={<OnlyVideos />} />
-                <Route path="deleted" element={<DeletedPhotos />} />
-                <Route path="hidden" element={<HiddenPhotos />} />
-                <Route path="notimestamp" element={<NoTimestampPhotosView />} />
-                <Route path="useralbums" element={<AlbumUser />} />
-                <Route path="places" element={<AlbumPlace />} />
-                <Route path="people" element={<AlbumPeople />} />
-                <Route path="events" element={<AlbumAuto />} />
-                <Route path="statistics" element={<Statistics />} />
-                <Route path="settings" element={<Settings />} />
-                <Route path="profile" element={<Profile />} />
-                <Route path="library" element={<Library />} />
-                <Route path="faces" element={<FaceDashboard />} />
-                <Route path="search/:query" element={<SearchView />} />
-                <Route path="person/:albumID" element={<AlbumPersonGallery />} />
-                <Route path="place/:albumID" element={<AlbumPlaceGallery />} />
-                <Route path="thing/:albumID" element={<AlbumThingGallery />} />
-                <Route path="event/:albumID" element={<AlbumAutoGalleryView />} />
-                <Route path="explorer" element={<Explorer />} />
-                <Route path="albumviewer" element={<AlbumViewer />} />
-                <Route path="useralbum/:albumID" element={<AlbumUserGallery />} />
-                <Route path="shared/tome/:which" element={<SharedWithMe />} />
-                <Route path="shared/fromme/:which" element={<SharedByMe />} />
-                <Route path="admin" element={<AdminPage />} />
-                <Route path="map" element={<PhotoMap />} />
-                <Route path="placetree" element={<LocationTree />} />
-                <Route path="wordclouds" element={<WordClouds />} />
-                <Route path="timeline" element={<Timeline />} />
-                <Route path="socialgraph" element={<Graph />} />
-                <Route path="facescatter" element={<FaceScatter />} />
-                <Route path="countstats" element={<CountStats />} />
-              </Route>
-            </Routes>
-          </AppShell>
-        </MantineProvider>
-      </ColorSchemeProvider>
-    </CookiesProvider>
+            </Route>
+
+            <Route element={<AppShellProtected />}>
+              <Route index element={<TimestampPhotos />} />
+              <Route path="things" element={<AlbumThing />} />
+              <Route path="recent" element={<RecentlyAddedPhotos />} />
+              <Route path="favorites" element={<FavoritePhotos />} />
+              <Route path="photos" element={<OnlyPhotos />} />
+              <Route path="videos" element={<OnlyVideos />} />
+              <Route path="deleted" element={<DeletedPhotos />} />
+              <Route path="hidden" element={<HiddenPhotos />} />
+              <Route path="notimestamp" element={<NoTimestampPhotosView />} />
+              <Route path="useralbums" element={<AlbumUser />} />
+              <Route path="places" element={<AlbumPlace />} />
+              <Route path="people" element={<AlbumPeople />} />
+              <Route path="events" element={<AlbumAuto />} />
+              <Route path="statistics" element={<Statistics />} />
+              <Route path="settings" element={<Settings />} />
+              <Route path="profile" element={<Profile />} />
+              <Route path="library" element={<Library />} />
+              <Route path="faces" element={<FaceDashboard />} />
+              <Route path="search/:query" element={<SearchView />} />
+              <Route path="person/:albumID" element={<AlbumPersonGallery />} />
+              <Route path="place/:albumID" element={<AlbumPlaceGallery />} />
+              <Route path="thing/:albumID" element={<AlbumThingGallery />} />
+              <Route path="event/:albumID" element={<AlbumAutoGalleryView />} />
+              <Route path="explorer" element={<Explorer />} />
+              <Route path="albumviewer" element={<AlbumViewer />} />
+              <Route path="useralbum/:albumID" element={<AlbumUserGallery />} />
+              <Route path="shared/tome/:which" element={<SharedWithMe />} />
+              <Route path="shared/fromme/:which" element={<SharedByMe />} />
+              <Route path="admin" element={<AdminPage />} />
+              <Route path="map" element={<PhotoMap />} />
+              <Route path="placetree" element={<LocationTree />} />
+              <Route path="wordclouds" element={<WordClouds />} />
+              <Route path="timeline" element={<Timeline />} />
+              <Route path="socialgraph" element={<Graph />} />
+              <Route path="facescatter" element={<FaceScatter />} />
+              <Route path="countstats" element={<CountStats />} />
+            </Route>
+          </Routes>
+        </MantineEmotionProvider>
+      </MantineProvider>
+    </>
   );
 }

src/api_client/api.ts

@@ -264,6 +264,7 @@ export const api = createApi({
 
 export const {
   useFetchUserListQuery,
+  useFetchUserSelfDetailsQuery,
   useFetchPredefinedRulesQuery,
   useFetchIncompleteFacesQuery,
   useLoginMutation,

src/components/CustomSearch.tsx

@@ -1,5 +1,6 @@
-import { Autocomplete, Avatar, Group, Text, createStyles } from "@mantine/core";
-import type { AutocompleteItem } from "@mantine/core";
+import { Autocomplete, Avatar, Group, Text } from "@mantine/core";
+// import type { AutocompleteItem } from "@mantine/core";
+import { createStyles } from "@mantine/emotion";
 import { useInterval, useViewportSize } from "@mantine/hooks";
 import {
   IconAlbum as Album,
@@ -65,7 +66,7 @@ const SearchSuggestionItem = forwardRef<HTMLDivElement, SearchSuggestion>(
   ({ icon = <Search />, value, ...rest }: SearchSuggestion, ref) => (
     /* eslint-disable react/jsx-props-no-spreading */
     <div ref={ref} {...rest}>
-      <Group noWrap>
+      <Group wrap="nowrap">
         {cloneElement(icon as React.ReactElement, { size: 20 })}
         <Text>{value}</Text>
       </Group>
@@ -89,7 +90,7 @@ export function CustomSearch() {
   const { width } = useViewportSize();
   const dispatch = useAppDispatch();
   const [value, setValue] = useState("");
-  const [searchSuggestions, setSearchSuggestions] = useState<Array<AutocompleteItem>>([]);
+  const [searchSuggestions, setSearchSuggestions] = useState<Array<any>>([]);
   const [searchPlaceholder, setSearchPlaceholder] = useState("");
   const searchBarWidth = width - width / 2.2;
   const { data: searchExamples } = useSearchExamplesQuery();
@@ -138,7 +139,8 @@ export function CustomSearch() {
     [placeAlbums, searchExamples, thingAlbums, userAlbums, people]
   );
 
-  function search(item: AutocompleteItem) {
+  // TODO: replace any with custom autocomplete item type
+  function search(item: any) {
     switch (item.type) {
       case undefined:
       case SuggestionType.EXAMPLE:
@@ -180,7 +182,7 @@ export function CustomSearch() {
     <Autocomplete
       width={searchBarWidth}
       data={searchSuggestions}
-      icon={<Search size={14} className={classes.icon} />}
+      leftSection={<Search size={14} className={classes.icon} />}
       placeholder={searchPlaceholder}
       itemComponent={SearchSuggestionItem}
       limit={10}