Refactor view wrappers into a <View> component

Author: martpie

src/components/View/View.module.css

@@ -0,0 +1,27 @@
+.view {
+  height: 100%;
+  max-height: 100%;
+  background-color: var(--background);
+  flex: 1 1 auto;
+  overflow: auto;
+  position: relative;
+}
+
+.centered {
+  display: flex;
+  justify-content: center;
+  scrollbar-gutter: stable;
+}
+
+.hasPadding {
+  padding: 40px;
+}
+
+.viewWithSideNav {
+  display: flex;
+  overflow: hidden;
+}
+
+.viewContent {
+  flex: 1;
+}

src/components/View/View.tsx

@@ -0,0 +1,44 @@
+import cx from 'classnames';
+
+import type SideNav from '../SideNav/SideNav';
+
+import styles from './View.module.css';
+
+type Props = {
+  children: React.ReactNode;
+  sideNav?: React.ReactElement<typeof SideNav>;
+  layout?: 'centered';
+  hasPadding?: boolean;
+  className?: string;
+};
+
+/**
+ * Default View to be used by all route components
+ */
+export default function View(props: Props) {
+  const viewClassNames = cx(styles.view, {
+    [styles.viewWithSideNav]: props.sideNav,
+    [styles.centered]: props.layout === 'centered',
+  });
+
+  const contentClassNames = cx(props.className, {
+    [styles.hasPadding]: props.hasPadding,
+  });
+
+  if (props.sideNav) {
+    return (
+      <div className={viewClassNames}>
+        {props.sideNav}
+        <div className={`${contentClassNames} ${styles.viewContent}`}>
+          {props.children}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cx(viewClassNames, contentClassNames)}>
+      {props.children}
+    </div>
+  );
+}

src/views/Root.module.css

@@ -12,23 +12,3 @@
   flex-direction: column;
   min-height: 0;
 }
-
-.content {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  padding: 0;
-}
-
-.view,
-.columns {
-  height: 100%;
-  max-height: 100%;
-}
-
-.view {
-  background-color: var(--background);
-  flex: 1 1 auto;
-  overflow: auto;
-  position: relative;
-}

src/views/ViewLibrary.module.css

@@ -10,9 +10,8 @@ import config from '../lib/config';
 import database from '../lib/database';
 import useLibraryStore from '../stores/useLibraryStore';
 
+import View from '../components/View/View';
 import type { LoaderData } from '../types/museeks';
-import appStyles from './Root.module.css';
-import styles from './ViewLibrary.module.css';
 
 export default function ViewLibrary() {
   const trackPlayingID = usePlayingTrackID();
@@ -99,11 +98,7 @@ export default function ViewLibrary() {
     isLoading,
   ]);
 
-  return (
-    <div className={`${appStyles.view} ${styles.viewLibrary}`}>
-      {getLibraryComponent}
-    </div>
-  );
+  return <View>{getLibraryComponent}</View>;
 }
 
 export type LibraryLoaderData = LoaderData<typeof ViewLibrary.loader>;

src/views/ViewLibrary.tsx

@@ -1,3 +1,7 @@
+import type {
+  MenuItemOptions,
+  PredefinedMenuItemOptions,
+} from '@tauri-apps/api/menu';
 import { useCallback, useMemo } from 'react';
 import {
   type LoaderFunctionArgs,
@@ -14,17 +18,11 @@ import * as ViewMessage from '../elements/ViewMessage/ViewMessage';
 import database from '../lib/database';
 import PlaylistsAPI from '../stores/PlaylistsAPI';
 
-import type {
-  MenuItemOptions,
-  PredefinedMenuItemOptions,
-} from '@tauri-apps/api/menu';
 import SideNavLink from '../components/SideNavLink/SideNavLink';
+import View from '../components/View/View';
 import useInvalidate from '../hooks/useInvalidate';
 import type { LoaderData } from '../types/museeks';
 
-import appStyles from './Root.module.css';
-import styles from './ViewPlaylists.module.css';
-
 export default function ViewPlaylists() {
   const { playlists } = useLoaderData() as PlaylistsLoaderData;
   const invalidate = useInvalidate();
@@ -121,21 +119,24 @@ export default function ViewPlaylists() {
   }
 
   return (
-    <div className={`${appStyles.view} ${styles.viewPlaylists}`}>
-      <SideNav
-        title="Playlists"
-        actions={
-          <ButtonIcon
-            icon="plus"
-            onClick={createPlaylist}
-            title="New Playlist"
-          />
-        }
-      >
-        {sideNavItems}
-      </SideNav>
-      <div className={styles.playlist}>{playlistContent}</div>
-    </div>
+    <View
+      sideNav={
+        <SideNav
+          title="Playlists"
+          actions={
+            <ButtonIcon
+              icon="plus"
+              onClick={createPlaylist}
+              title="New Playlist"
+            />
+          }
+        >
+          {sideNavItems}
+        </SideNav>
+      }
+    >
+      {playlistContent}
+    </View>
   );
 }
 

src/views/ViewPlaylists.module.css

@@ -1,10 +1,3 @@
-.viewSettings {
-  display: flex;
-  justify-content: center;
-  padding-top: 50px;
-  scrollbar-gutter: stable;
-}
-
 .settings__nav {
   padding: 0 30px;
   width: 150px;

src/views/ViewPlaylists.tsx

@@ -2,18 +2,18 @@ import { getTauriVersion, getVersion } from '@tauri-apps/api/app';
 import { invoke } from '@tauri-apps/api/core';
 import { Navigate, Outlet, useMatch } from 'react-router-dom';
 
+import View from '../components/View/View';
 import * as SettingNav from '../elements/SettingsNav/SettingsNav';
 import config from '../lib/config';
 import type { LoaderData } from '../types/museeks';
 
-import appStyles from './Root.module.css';
 import styles from './ViewSettings.module.css';
 
 export default function ViewSettingsView() {
   const match = useMatch('/settings');
 
   return (
-    <div className={`${appStyles.view} ${styles.viewSettings}`}>
+    <View hasPadding layout="centered">
       <div className={styles.settings__nav}>
         <SettingNav.Wrap vertical>
           <SettingNav.Link to="/settings/library">Library</SettingNav.Link>
@@ -28,7 +28,7 @@ export default function ViewSettingsView() {
       </div>
 
       {match && <Navigate to="/settings/library" />}
-    </div>
+    </View>
   );
 }
 

src/views/ViewSettings.module.css

@@ -1,11 +1,4 @@
-.viewDetails {
-  /* nothing */
-}
-
 .detailsForm {
-  width: 400px;
-  padding: 10px 15px;
-  margin: auto;
   display: flex;
   flex-direction: column;
 }