Merge branch 'master' into file-associations-tauri

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
   "linter": {
     "enabled": true,
     "rules": {
@@ -9,6 +9,9 @@
       },
       "suspicious": {
         "noImplicitAnyLet": "off"
+      },
+      "nursery": {
+        "useComponentExportOnlyModules": "warn"
       }
     }
   },
@@ -25,6 +28,12 @@
   "css": {
     "parser": {
       "cssModules": true
+    },
+    "linter": {
+      "enabled": true
+    },
+    "formatter": {
+      "enabled": true
     }
   },
   "files": {

package.json

@@ -53,7 +53,7 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.9.1",
+    "@biomejs/biome": "1.9.2",
     "@tauri-apps/cli": "2.0.0-rc.12",
     "@types/bun": "^1.1.9",
     "@types/lodash": "^4.17.7",

src/components/GlobalErrorBoundary/GlobalErrorBoundary.tsx

@@ -0,0 +1,43 @@
+/**
+ * Components helpers
+ */
+
+import * as logger from '@tauri-apps/plugin-log';
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import ExternalLink from '../../elements/ExternalLink/ExternalLink';
+import * as ViewMessage from '../../elements/ViewMessage/ViewMessage';
+
+export default function GlobalErrorBoundary() {
+  const error = useRouteError();
+  let errorMessage: string;
+
+  if (isRouteErrorResponse(error)) {
+    errorMessage = error.statusText;
+  } else if (error instanceof Error) {
+    errorMessage = error.message;
+  } else if (typeof error === 'string') {
+    errorMessage = error;
+  } else {
+    errorMessage = 'Unknown error';
+  }
+
+  logger.error(errorMessage);
+
+  return (
+    <ViewMessage.Notice>
+      <p>
+        {/* biome-ignore lint/a11y/useSemanticElements: no <img> for emojis */}
+        <span role="img" aria-label="boom">
+          💥
+        </span>{' '}
+        Something wrong happened: {errorMessage}
+      </p>
+      <ViewMessage.Sub>
+        If it happens again, please{' '}
+        <ExternalLink href="https://github.com/martpie/museeks/issues">
+          report an issue
+        </ExternalLink>
+      </ViewMessage.Sub>
+    </ViewMessage.Notice>
+  );
+}

src/components/TracksList/TracksList.tsx

@@ -25,6 +25,7 @@ import { usePlayerAPI } from '../../stores/usePlayerStore';
 import TrackRow from '../TrackRow/TrackRow';
 import TracksListHeader from '../TracksListHeader/TracksListHeader';
 
+import { useScrollRestoration } from '../../hooks/useScrollRestoration';
 import styles from './TracksList.module.css';
 
 const ROW_HEIGHT = 30;
@@ -87,6 +88,7 @@ export default function TracksList(props: Props) {
   const playerAPI = usePlayerAPI();
   const libraryAPI = useLibraryAPI();
   const highlight = useLibraryStore((state) => state.highlightPlayingTrack);
+  useScrollRestoration(scrollableRef);
 
   // Highlight playing track and scroll to it
   // Super-mega-hacky to use Redux for that

src/hooks/useScrollRestoration.ts

@@ -0,0 +1,48 @@
+import debounce from 'lodash/debounce';
+import { useEffect } from 'react';
+import { useLocation, useNavigation } from 'react-router-dom';
+
+function getScrollPosition(key: string) {
+  const pos = window.sessionStorage.getItem(key);
+  return Number(pos) || 0;
+}
+
+const setScrollPosition = debounce(function setScrollPosition(
+  key: string,
+  pos: number,
+) {
+  window.sessionStorage.setItem(key, pos.toString());
+}, 100);
+
+/**
+ * Given a ref to a scrolling container element, keep track of its scroll
+ * position before navigation and restore it on return (e.g., back/forward nav).
+ *
+ * Inspired by:
+ * https://github.com/remix-run/react-router/pull/10468#issuecomment-1877312374
+ *
+ * Except we want to use location.pathname, and not location.key
+ */
+export function useScrollRestoration(container: React.RefObject<HTMLElement>) {
+  const key = `scroll-position-${useLocation().pathname}`;
+  const { state } = useNavigation();
+  const target = container.current;
+
+  useEffect(() => {
+    function onScroll() {
+      setScrollPosition(key, target?.scrollTop ?? 0);
+    }
+
+    target?.addEventListener('scroll', onScroll);
+
+    return () => {
+      target?.removeEventListener('scroll', onScroll);
+    };
+  }, [target, key]);
+
+  useEffect(() => {
+    if (state === 'idle') {
+      target?.scrollTo(0, getScrollPosition(key));
+    }
+  }, [key, state, target]);
+}

src/stores/SettingsAPI.ts

@@ -174,7 +174,6 @@ async function toggleLibraryAutorefresh(value: boolean): Promise<void> {
 async function checkForLibraryRefresh(): Promise<void> {
   const autorefreshEnabled = await config.getInitial('library_autorefresh');
 
-  console.log('autorefresh', autorefreshEnabled);
   if (autorefreshEnabled) {
     useLibraryStore.getState().api.refresh();
   }

src/types/museeks.ts

@@ -1,5 +1,3 @@
-import type { Track } from '../generated/typings';
-
 /**
  * Player related stuff
  */
@@ -9,19 +7,6 @@ export enum PlayerStatus {
   STOP = 'stop',
 }
 
-/**
- * Editable track fields (via right-click -> edit track)
- */
-export type TrackEditableFields = Pick<
-  Track,
-  'title' | 'artists' | 'album' | 'genres'
->;
-
-export type TrackSearchableFields = Pick<
-  Track,
-  'title' | 'artists' | 'album' | 'genres'
->;
-
 /**
  * Various
  */

src/views/ViewSettingsLibrary.module.css

@@ -6,11 +6,7 @@
   border: solid 1px var(--border-color);
   overflow-x: auto;
   white-space: pre;
-  width: 150%;
-  /* overflow-x: auto;
-  white-space: nowrap; */
-  /* overflow: hidden; */
-  /* white-space: pre; */
+  width: 120%;
 }
 
 .libraryFoldersRemove {

src/views/router.tsx

@@ -1,14 +1,6 @@
-import * as logger from '@tauri-apps/plugin-log';
-import {
-  type LoaderFunctionArgs,
-  createHashRouter,
-  isRouteErrorResponse,
-  useRouteError,
-} from 'react-router-dom';
-
-import ExternalLink from '../elements/ExternalLink/ExternalLink';
-import * as ViewMessage from '../elements/ViewMessage/ViewMessage';
+import { type LoaderFunctionArgs, createHashRouter } from 'react-router-dom';
 
+import GlobalErrorBoundary from '../components/GlobalErrorBoundary/GlobalErrorBoundary';
 import RootView from './Root';
 import ViewLibrary from './ViewLibrary';
 import ViewPlaylistDetails from './ViewPlaylistDetails';
@@ -86,45 +78,6 @@ const router = createHashRouter([
 
 export default router;
 
-/**
- * Components helpers
- */
-
-function GlobalErrorBoundary() {
-  const error = useRouteError();
-  let errorMessage: string;
-
-  if (isRouteErrorResponse(error)) {
-    errorMessage = error.statusText;
-  } else if (error instanceof Error) {
-    errorMessage = error.message;
-  } else if (typeof error === 'string') {
-    errorMessage = error;
-  } else {
-    errorMessage = 'Unknown error';
-  }
-
-  logger.error(errorMessage);
-
-  return (
-    <ViewMessage.Notice>
-      <p>
-        {/* biome-ignore lint/a11y/useSemanticElements: no <img> for emojis */}
-        <span role="img" aria-label="boom">
-          💥
-        </span>{' '}
-        Something wrong happened: {errorMessage}
-      </p>
-      <ViewMessage.Sub>
-        If it happens again, please{' '}
-        <ExternalLink href="https://github.com/martpie/museeks/issues">
-          report an issue
-        </ExternalLink>
-      </ViewMessage.Sub>
-    </ViewMessage.Notice>
-  );
-}
-
 /**
  * Loader Types, to manually type useLoaderData()
  */