Renamer and other fixes, allow renaming from unrecognized util and fi…

…le search (#982)

* Fix logout from error boundary

* Allow renaming from unrecognized util and file search

* Make monaco-editor work without internet

* Remove old css classes

* Stop default login backdrop from loading if not required

package.json

@@ -30,6 +30,7 @@
     "format-thousands": "^2.0.0",
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
+    "monaco-editor": "^0.50.0",
     "pretty-bytes": "^6.1.1",
     "react": "^18.3.1",
     "react-animate-height": "^3.2.3",
@@ -95,7 +96,8 @@
     "tailwindcss": "^3.4.3",
     "tailwindcss-text-fill-stroke": "2.0.0-beta.1",
     "typescript": "5.4.5",
-    "vite": "^5.2.11"
+    "vite": "^5.2.11",
+    "vite-plugin-webpackchunkname": "^1.0.3"
   },
   "scripts": {
     "eslint": "eslint --cache --format=node_modules/eslint-formatter-pretty src",

src/components/ErrorBoundary.tsx

@@ -16,7 +16,7 @@ type RouteError = {
   error: Error;
 };
 
-const ErrorBoundary = ({ error }: { error?: Error }) => {
+const ErrorBoundary = ({ error, resetError }: { error?: Error, resetError?: () => void }) => {
   const dispatch = useDispatch();
   const routeError = useRouteError() as RouteError;
   const navigate = useNavigate();
@@ -28,6 +28,7 @@ const ErrorBoundary = ({ error }: { error?: Error }) => {
 
   const handleLogout = useEventCallback(() => {
     dispatch({ type: Events.AUTH_LOGOUT });
+    if (resetError) resetError();
   });
 
   const handleWebUiUpdate = useEventCallback((channel: 'Stable' | 'Dev') => {

src/components/Utilities/Renamer/RenamerEditor.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Editor } from '@monaco-editor/react';
+
+// To import custom monaco config
+import '@/core/monaco';
+
+type Props = {
+  defaultLanguage: string;
+  value: string;
+  onChange: (value: string) => void;
+};
+
+const RenamerEditor = ({ defaultLanguage, onChange, value }: Props) => (
+  <Editor
+    defaultLanguage={defaultLanguage}
+    value={value}
+    onChange={onChange}
+    theme="vs-dark"
+  />
+);
+
+export default RenamerEditor;

src/components/Utilities/Renamer/RenamerScript.tsx

@@ -1,12 +1,17 @@
-import React from 'react';
-import { Editor } from '@monaco-editor/react';
+import React, { Suspense, lazy } from 'react';
+import { mdiLoading } from '@mdi/js';
+import { Icon } from '@mdi/react';
 import { findKey } from 'lodash';
 
 import useEventCallback from '@/hooks/useEventCallback';
 
 import type { RenamerConfigSettingsType, RenamerSettingsType } from '@/core/react-query/renamer/types';
 import type { Updater } from 'use-immer';
 
+const RenamerEditor = lazy(
+  () => import('@/components/Utilities/Renamer/RenamerEditor'),
+);
+
 type Props = {
   newConfig: Record<string, RenamerConfigSettingsType>;
   setNewConfig: Updater<Record<string, RenamerConfigSettingsType>>;
@@ -35,12 +40,19 @@ const RenamerScript = ({ newConfig, setNewConfig, settingsModel }: Props) => {
   }
 
   return (
-    <Editor
-      defaultLanguage={settingsModel[settingName].Language?.toLowerCase() ?? 'plaintext'}
-      value={newConfig[settingName].Value as string}
-      onChange={updateScript}
-      theme="vs-dark"
-    />
+    <Suspense
+      fallback={
+        <div className="flex grow items-center justify-center text-panel-text-primary">
+          <Icon path={mdiLoading} spin size={3} />
+        </div>
+      }
+    >
+      <RenamerEditor
+        defaultLanguage={settingsModel[settingName].Language?.toLowerCase() ?? 'plaintext'}
+        value={newConfig[settingName].Value as string}
+        onChange={updateScript}
+      />
+    </Suspense>
   );
 };
 

src/core/monaco.ts

@@ -0,0 +1,26 @@
+/* eslint-disable new-cap */
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+// import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+// import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+import 'monaco-editor/esm/vs/basic-languages/lua/lua.contribution';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
+
+// eslint-disable-next-line no-restricted-globals
+self.MonacoEnvironment = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  getWorker(_, label) {
+    // if (label === 'json') {
+    //   return new jsonWorker();
+    // }
+    // if (label === 'typescript' || label === 'javascript') {
+    //   return new tsWorker();
+    // }
+    return new editorWorker();
+  },
+};
+
+loader.config({ monaco });

src/css/modals.css

@@ -1,20 +1,3 @@
-.profile-modal {
-  width: 42rem;
-}
-
-.profile-modal-image {
-  background-image: url('/images/OnePiece.png');
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  width: 22rem;
-}
-
-.profile-modal-image-alpha {
-  color: theme('colors.panel-background');
-  background-color: theme('colors.panel-background-transparent');
-}
-
 .modal-transition-left {
   transition: transform 300ms ease-in-out;
   transform: translateX(-30rem);

src/pages/SentryErrorBoundaryWrapper.tsx

@@ -18,7 +18,9 @@ const SentryErrorBoundaryWrapper = () => {
   }, [versionQuery.data]);
 
   return (
-    <Sentry.ErrorBoundary fallback={({ error }) => <ErrorBoundary error={error as Error} />}>
+    <Sentry.ErrorBoundary
+      fallback={({ error, resetError }) => <ErrorBoundary error={error as Error} resetError={resetError} />}
+    >
       <Outlet />
     </Sentry.ErrorBoundary>
   );

src/pages/login/LoginPage.tsx

@@ -40,7 +40,7 @@ function LoginPage() {
   const [rememberUser, setRememberUser] = useState(false);
   const [pollingInterval, setPollingInterval] = useState(500);
   const [{ imageUrl, seriesId, seriesName }, setLoginImage] = useState(() => ({
-    imageUrl: 'default',
+    imageUrl: '',
     seriesName: '',
     seriesId: 0,
   }));
@@ -56,6 +56,7 @@ function LoginPage() {
   };
 
   useEffect(() => {
+    if (imageMetadataQuery.isPending) return;
     if (!imageMetadataQuery.isSuccess || !imageMetadataQuery.data.Type) {
       setLoginImage({ imageUrl: 'default', seriesName: 'One Piece', seriesId: 0 });
       return;
@@ -66,7 +67,7 @@ function LoginPage() {
       seriesName: Series?.Name ?? '',
       seriesId: Series?.ID ?? 0,
     });
-  }, [imageMetadataQuery.isSuccess, imageMetadataQuery.data]);
+  }, [imageMetadataQuery.isSuccess, imageMetadataQuery.isPending, imageMetadataQuery.data]);
 
   useEffect(() => {
     if (!serverStatusQuery.data) setPollingInterval(500);

src/pages/utilities/FileSearch.tsx

@@ -1,11 +1,13 @@
 import React, { useMemo, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Link, useNavigate } from 'react-router-dom';
 import {
   mdiChevronLeft,
   mdiChevronRight,
   mdiCloseCircleOutline,
   mdiDatabaseSearchOutline,
   mdiDatabaseSyncOutline,
+  mdiFileDocumentEditOutline,
   mdiLoading,
   mdiMagnify,
   mdiMinusCircleOutline,
@@ -38,6 +40,7 @@ import {
 import { useFileQuery, useFilesInfiniteQuery } from '@/core/react-query/file/queries';
 import { invalidateQueries } from '@/core/react-query/queryClient';
 import { useSeriesQuery } from '@/core/react-query/series/queries';
+import { addFiles } from '@/core/slices/utilities/renamer';
 import { FileSortCriteriaEnum } from '@/core/types/api/file';
 import useEventCallback from '@/hooks/useEventCallback';
 import useFlattenListResult from '@/hooks/useFlattenListResult';
@@ -58,6 +61,9 @@ const Menu = (
     setSelectedRows,
   } = props;
 
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
   const [showConfirmModal, setShowConfirmModal] = useState(false);
 
   const { mutate: deleteFiles } = useDeleteFilesMutation();
@@ -121,6 +127,11 @@ const Menu = (
     if (failedFiles) toast.error(`Rescan failed for ${failedFiles} files!`);
   });
 
+  const handleRename = useEventCallback(() => {
+    dispatch(addFiles(selectedRows));
+    navigate('/webui/utilities/renamer');
+  });
+
   return (
     <div className="box-border flex grow items-center rounded-lg border border-panel-border bg-panel-background-alt px-4 py-3">
       <div className={cx('grow gap-x-4', selectedRows.length === 0 ? 'flex' : 'hidden')}>
@@ -136,6 +147,7 @@ const Menu = (
       <div className={cx('grow gap-x-4', selectedRows.length !== 0 ? 'flex' : 'hidden')}>
         <MenuButton onClick={rescanFiles} icon={mdiDatabaseSearchOutline} name="Rescan" />
         <MenuButton onClick={rehashFiles} icon={mdiDatabaseSyncOutline} name="Rehash" />
+        <MenuButton onClick={handleRename} icon={mdiFileDocumentEditOutline} name="Rename" />
         <MenuButton onClick={showDeleteConfirmation} icon={mdiMinusCircleOutline} name="Delete" highlight />
         <MenuButton
           onClick={() => setSelectedRows([])}