Flat route components + View prefix

src/renderer/hooks/useCurrentViewTracks.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 
 import { TrackModel } from '../../shared/types/museeks';
 import { RootLoaderData } from '../views/Root';
-import { PlaylistLoaderData } from '../views/Playlists/Playlist';
+import { PlaylistLoaderData } from '../views/ViewPlaylistDetails';
 
 import useFilteredTracks from './useFilteredTracks';
 

src/renderer/views/Root.tsx

@@ -22,7 +22,7 @@ import { LoaderData } from './router';
 
 const { db } = window.MuseeksAPI;
 
-export default function RootView() {
+export default function ViewRoot() {
   useEffect(() => {
     AppActions.init();
   }, []);
@@ -79,9 +79,9 @@ export default function RootView() {
   );
 }
 
-export type RootLoaderData = LoaderData<typeof RootView.loader>;
+export type RootLoaderData = LoaderData<typeof ViewRoot.loader>;
 
-RootView.loader = async () => {
+ViewRoot.loader = async () => {
   // this can be slow, think about caching it or something, especially when
   // we revalidate routing
   const tracks = await db.tracks.getAll();

src/renderer/views/Library/Library.tsx → src/renderer/views/ViewLibrary.tsx

@@ -1,20 +1,20 @@
 import { useMemo } from 'react';
 import { Link, useLoaderData, useRouteLoaderData } from 'react-router-dom';
 
-import * as ViewMessage from '../../elements/ViewMessage/ViewMessage';
-import TracksList from '../../components/TracksList/TracksList';
-import appStyles from '../Root.module.css';
-import useFilteredTracks from '../../hooks/useFilteredTracks';
-import useLibraryStore from '../../stores/useLibraryStore';
-import usePlayingTrackID from '../../hooks/usePlayingTrackID';
-import { RootLoaderData } from '../Root';
-import { LoaderData } from '../router';
+import * as ViewMessage from '../elements/ViewMessage/ViewMessage';
+import TracksList from '../components/TracksList/TracksList';
+import useLibraryStore from '../stores/useLibraryStore';
+import usePlayingTrackID from '../hooks/usePlayingTrackID';
+import useFilteredTracks from '../hooks/useFilteredTracks';
 
-import styles from './Library.module.css';
+import { RootLoaderData } from './Root';
+import { LoaderData } from './router';
+import appStyles from './Root.module.css';
+import styles from './ViewLibrary.module.css';
 
 const { db, config } = window.MuseeksAPI;
 
-export default function Library() {
+export default function ViewLibrary() {
   const trackPlayingID = usePlayingTrackID();
   const refreshing = useLibraryStore((state) => state.refreshing);
   const search = useLibraryStore((state) => state.search);
@@ -83,9 +83,9 @@ export default function Library() {
   );
 }
 
-export type LibraryLoaderData = LoaderData<typeof Library.loader>;
+export type LibraryLoaderData = LoaderData<typeof ViewLibrary.loader>;
 
-Library.loader = async () => {
+ViewLibrary.loader = async () => {
   return {
     playlists: await db.playlists.getAll(),
     tracksDensity: await config.get('tracksDensity'),

src/renderer/views/Playlists/Playlist.tsx → src/renderer/views/ViewPlaylistDetails.tsx

@@ -6,17 +6,18 @@ import {
   useParams,
 } from 'react-router-dom';
 
-import TracksList from '../../components/TracksList/TracksList';
-import * as ViewMessage from '../../elements/ViewMessage/ViewMessage';
-import PlaylistsAPI from '../../stores/PlaylistsAPI';
-import { filterTracks } from '../../lib/utils-library';
-import { LoaderData } from '../router';
-import useLibraryStore from '../../stores/useLibraryStore';
-import usePlayingTrackID from '../../hooks/usePlayingTrackID';
+import TracksList from '../components/TracksList/TracksList';
+import * as ViewMessage from '../elements/ViewMessage/ViewMessage';
+import PlaylistsAPI from '../stores/PlaylistsAPI';
+import { filterTracks } from '../lib/utils-library';
+import useLibraryStore from '../stores/useLibraryStore';
+import usePlayingTrackID from '../hooks/usePlayingTrackID';
+
+import { LoaderData } from './router';
 
 const { db, config } = window.MuseeksAPI;
 
-export default function PlaylistView() {
+export default function ViewPlaylistDetails() {
   const { playlists, playlistTracks, tracksDensity } =
     useLoaderData() as PlaylistLoaderData;
   const { playlistID } = useParams();
@@ -96,9 +97,9 @@ export default function PlaylistView() {
   );
 }
 
-export type PlaylistLoaderData = LoaderData<typeof PlaylistView.loader>;
+export type PlaylistLoaderData = LoaderData<typeof ViewPlaylistDetails.loader>;
 
-PlaylistView.loader = async ({ params }: LoaderFunctionArgs) => {
+ViewPlaylistDetails.loader = async ({ params }: LoaderFunctionArgs) => {
   if (typeof params.playlistID !== 'string') {
     throw new Error('Playlist ID is not defined');
   }

src/renderer/views/Playlists/Playlists.tsx → src/renderer/views/ViewPlaylists.tsx

@@ -6,17 +6,17 @@ import {
   useLoaderData,
 } from 'react-router-dom';
 
-import PlaylistsNav from '../../components/PlaylistsNav/PlaylistsNav';
-import * as ViewMessage from '../../elements/ViewMessage/ViewMessage';
-import PlaylistsAPI from '../../stores/PlaylistsAPI';
-import appStyles from '../../views/Root.module.css';
-import { LoaderData } from '../router';
+import PlaylistsNav from '../components/PlaylistsNav/PlaylistsNav';
+import * as ViewMessage from '../elements/ViewMessage/ViewMessage';
+import PlaylistsAPI from '../stores/PlaylistsAPI';
 
-import styles from './Playlists.module.css';
+import { LoaderData } from './router';
+import appStyles from './Root.module.css';
+import styles from './ViewPlaylists.module.css';
 
 const { db } = window.MuseeksAPI;
 
-export default function PlaylistsView() {
+export default function ViewPlaylists() {
   const { playlists } = useLoaderData() as PlaylistsLoaderData;
 
   const createPlaylist = useCallback(async () => {
@@ -48,9 +48,9 @@ export default function PlaylistsView() {
   );
 }
 
-export type PlaylistsLoaderData = LoaderData<typeof PlaylistsView.loader>;
+export type PlaylistsLoaderData = LoaderData<typeof ViewPlaylists.loader>;
 
-PlaylistsView.loader = async ({ params }: LoaderFunctionArgs) => {
+ViewPlaylists.loader = async ({ params }: LoaderFunctionArgs) => {
   const playlists = await db.playlists.getAll();
   const [firstPlaylist] = playlists;
   const { playlistID } = params;

src/renderer/views/Settings/Settings.tsx → src/renderer/views/ViewSettings.tsx

@@ -1,12 +1,12 @@
 import { Outlet, useMatch, Navigate } from 'react-router-dom';
 
-import * as Nav from '../../elements/Nav/Nav';
-import appStyles from '../Root.module.css';
-import { LoaderData } from '../router';
+import * as Nav from '../elements/Nav/Nav';
 
-import styles from './Settings.module.css';
+import { LoaderData } from './router';
+import appStyles from './Root.module.css';
+import styles from './ViewSettings.module.css';
 
-export default function SettingsView() {
+export default function ViewSettingsView() {
   const match = useMatch('/settings');
 
   return (
@@ -29,9 +29,9 @@ export default function SettingsView() {
   );
 }
 
-export type SettingsLoaderData = LoaderData<typeof SettingsView.loader>;
+export type SettingsLoaderData = LoaderData<typeof ViewSettingsView.loader>;
 
-SettingsView.loader = async () => {
+ViewSettingsView.loader = async () => {
   const config = await window.MuseeksAPI.config.getAll();
 
   return {

src/renderer/views/Settings/SettingsAbout.tsx → src/renderer/views/ViewSettingsAbout.tsx

@@ -1,10 +1,10 @@
-import ExternalLink from '../../elements/ExternalLink/ExternalLink';
-import Heart from '../../elements/Heart/Heart';
-import * as Setting from '../../components/Setting/Setting';
-import SettingsAPI from '../../stores/SettingsAPI';
-import Button from '../../elements/Button/Button';
+import ExternalLink from '../elements/ExternalLink/ExternalLink';
+import Heart from '../elements/Heart/Heart';
+import * as Setting from '../components/Setting/Setting';
+import SettingsAPI from '../stores/SettingsAPI';
+import Button from '../elements/Button/Button';
 
-export default function SettingsAbout() {
+export default function ViewSettingsAbout() {
   const version = window.MuseeksAPI.version;
 
   return (

src/renderer/views/Settings/SettingsAudio.tsx → src/renderer/views/ViewSettingsAudio.tsx

@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import { useLoaderData } from 'react-router-dom';
 
-import * as Setting from '../../components/Setting/Setting';
-import AudioOutputSelect from '../../components/AudioOutputSelect/AudioOutputSelect';
-import { usePlayerAPI } from '../../stores/usePlayerStore';
+import * as Setting from '../components/Setting/Setting';
+import AudioOutputSelect from '../components/AudioOutputSelect/AudioOutputSelect';
+import { usePlayerAPI } from '../stores/usePlayerStore';
 
-import { SettingsLoaderData } from './Settings';
+import { SettingsLoaderData } from './ViewSettings';
 
-export default function SettingsAudio() {
+export default function ViewSettingsAudio() {
   const { config } = useLoaderData() as SettingsLoaderData;
   const playerAPI = usePlayerAPI();
 

src/renderer/views/Settings/SettingsLibrary.tsx → src/renderer/views/ViewSettingsLibrary.tsx

@@ -1,14 +1,14 @@
 import { useCallback } from 'react';
 
-import * as Setting from '../../components/Setting/Setting';
-import Button from '../../elements/Button/Button';
-import channels from '../../../shared/lib/ipc-channels';
-import logger from '../../../shared/lib/logger';
-import useLibraryStore, { useLibraryAPI } from '../../stores/useLibraryStore';
+import * as Setting from '../components/Setting/Setting';
+import Button from '../elements/Button/Button';
+import channels from '../../shared/lib/ipc-channels';
+import logger from '../../shared/lib/logger';
+import useLibraryStore, { useLibraryAPI } from '../stores/useLibraryStore';
 
 const { ipcRenderer } = window.ElectronAPI;
 
-export default function SettingsLibrary() {
+export default function ViewSettingsLibrary() {
   const libraryAPI = useLibraryAPI();
   const isLibraryRefreshing = useLibraryStore((state) => state.refreshing);
 

src/renderer/views/Settings/SettingsUI.tsx → src/renderer/views/ViewSettingsUI.tsx

@@ -1,15 +1,15 @@
 import { useCallback, ChangeEventHandler } from 'react';
 import { useLoaderData } from 'react-router-dom';
 
-import SettingsAPI from '../../stores/SettingsAPI';
-import * as Setting from '../../components/Setting/Setting';
-import CheckboxSetting from '../../components/SettingCheckbox/SettingCheckbox';
-import { themes } from '../../../shared/lib/themes';
-import { Config } from '../../../shared/types/museeks';
+import SettingsAPI from '../stores/SettingsAPI';
+import * as Setting from '../components/Setting/Setting';
+import CheckboxSetting from '../components/SettingCheckbox/SettingCheckbox';
+import { themes } from '../../shared/lib/themes';
+import { Config } from '../../shared/types/museeks';
 
-import { SettingsLoaderData } from './Settings';
+import { SettingsLoaderData } from './ViewSettings';
 
-export default function SettingsUI() {
+export default function ViewSettingsUI() {
   const { config } = useLoaderData() as SettingsLoaderData;
 
   const onThemeChange = useCallback<ChangeEventHandler<HTMLSelectElement>>(

src/renderer/views/Details/Details.tsx → src/renderer/views/ViewTrackDetails.tsx

@@ -5,21 +5,21 @@ import {
   useNavigate,
 } from 'react-router-dom';
 
-// import Placeholder from '../../shared/assets/placeholder.png';
-// import * as coverUtils from '../../../shared/lib/utils-cover';
-import { TrackEditableFields } from '../../../shared/types/museeks';
-import appStyles from '../Root.module.css';
-import * as Setting from '../../components/Setting/Setting';
-import Button from '../../elements/Button/Button';
-import { useLibraryAPI } from '../../stores/useLibraryStore';
-import { LoaderData } from '../router';
+// import Placeholder from '../shared/assets/placeholder.png';
+// import * as coverUtils from '../../shared/lib/utils-cover';
+import { TrackEditableFields } from '../../shared/types/museeks';
+import * as Setting from '../components/Setting/Setting';
+import Button from '../elements/Button/Button';
+import { useLibraryAPI } from '../stores/useLibraryStore';
 
-import styles from './Details.module.css';
+import { LoaderData } from './router';
+import appStyles from './Root.module.css';
+import styles from './ViewTrackDetails.module.css';
 
 // We assume no artist or genre has a comma in its name (fingers crossed)
 const DELIMITER = ',';
 
-export default function Details() {
+export default function ViewTrackDetails() {
   const { track } = useLoaderData() as DetailsLoaderData;
 
   const [formData, setFormData] = useState<TrackEditableFields>({
@@ -132,9 +132,9 @@ export default function Details() {
   );
 }
 
-export type DetailsLoaderData = LoaderData<typeof Details.loader>;
+export type DetailsLoaderData = LoaderData<typeof ViewTrackDetails.loader>;
 
-Details.loader = async ({ params }: LoaderFunctionArgs) => {
+ViewTrackDetails.loader = async ({ params }: LoaderFunctionArgs) => {
   const { trackID } = params;
 
   if (trackID == null) {

src/renderer/views/router.tsx

@@ -10,15 +10,15 @@ import ExternalLink from '../elements/ExternalLink/ExternalLink';
 import logger from '../../shared/lib/logger';
 
 import RootView from './Root';
-import LibraryView from './Library/Library';
-import PlaylistsView from './Playlists/Playlists';
-import PlaylistView from './Playlists/Playlist';
-import SettingsView from './Settings/Settings';
-import SettingsLibrary from './Settings/SettingsLibrary';
-import SettingsUI from './Settings/SettingsUI';
-import SettingsAudio from './Settings/SettingsAudio';
-import SettingsAbout from './Settings/SettingsAbout';
-import DetailsView from './Details/Details';
+import ViewLibrary from './ViewLibrary';
+import ViewPlaylists from './ViewPlaylists';
+import ViewPlaylistDetails from './ViewPlaylistDetails';
+import ViewSettings from './ViewSettings';
+import ViewSettingsLibrary from './ViewSettingsLibrary';
+import ViewSettingsUI from './ViewSettingsUI';
+import ViewSettingsAudio from './ViewSettingsAudio';
+import ViewSettingsAbout from './ViewSettingsAbout';
+import ViewTrackDetails from './ViewTrackDetails';
 
 const router = createHashRouter([
   {
@@ -31,54 +31,54 @@ const router = createHashRouter([
       {
         path: 'library',
         id: 'library',
-        element: <LibraryView />,
-        loader: LibraryView.loader,
+        element: <ViewLibrary />,
+        loader: ViewLibrary.loader,
       },
       {
         path: 'playlists',
         id: 'playlists',
-        element: <PlaylistsView />,
-        loader: PlaylistsView.loader,
+        element: <ViewPlaylists />,
+        loader: ViewPlaylists.loader,
         children: [
           {
             path: ':playlistID',
             id: 'playlist-details',
-            element: <PlaylistView />,
-            loader: PlaylistView.loader,
+            element: <ViewPlaylistDetails />,
+            loader: ViewPlaylistDetails.loader,
           },
         ],
       },
       {
         path: 'settings',
         id: 'settings',
-        element: <SettingsView />,
+        element: <ViewSettings />,
         children: [
           {
             path: 'library',
-            element: <SettingsLibrary />,
-            loader: SettingsView.loader,
+            element: <ViewSettingsLibrary />,
+            loader: ViewSettings.loader,
           },
           {
             path: 'interface',
-            element: <SettingsUI />,
-            loader: SettingsView.loader,
+            element: <ViewSettingsUI />,
+            loader: ViewSettings.loader,
           },
           {
             path: 'audio',
-            element: <SettingsAudio />,
-            loader: SettingsView.loader,
+            element: <ViewSettingsAudio />,
+            loader: ViewSettings.loader,
           },
           {
             path: 'about',
-            element: <SettingsAbout />,
-            loader: SettingsView.loader,
+            element: <ViewSettingsAbout />,
+            loader: ViewSettings.loader,
           },
         ],
       },
       {
         path: 'details/:trackID',
-        element: <DetailsView />,
-        loader: DetailsView.loader,
+        element: <ViewTrackDetails />,
+        loader: ViewTrackDetails.loader,
       },
     ],
   },