PlaylistsNav -> SideNav (1/x)

package.json

@@ -60,6 +60,7 @@
     "@types/lodash": "^4.17.7",
     "@types/react": "^18.3.4",
     "@types/react-dom": "^18.3.0",
+    "@types/react-fontawesome": "^1.6.8",
     "@types/semver": "^7.5.8",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",

src/components/PlaylistsNav/PlaylistsNav.module.css → src/components/SideNav/SideNav.module.css

@@ -1,4 +1,4 @@
-.playlistsNav {
+.sideNav {
   display: flex;
   flex-flow: column;
   width: 200px;
@@ -9,43 +9,18 @@
   position: relative;
 }
 
-.playlistsNav__header {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.actions {
+.sideNav__actions {
   align-items: stretch;
 }
 
-.action {
-  background: transparent;
-  border: none;
-  color: var(--text);
-  width: 33px;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  text-align: center;
-
-  :global .fa {
-    margin-right: 0;
-  }
-
-  &:hover {
-    background: rgba(0 0 0 0.05);
-  }
-}
-
-.playlistsNav__title {
-  padding: 0 12px;
-  margin: 10px 0;
+.sideNav__title {
+  margin: 10px 12px;
   font-size: 11px;
   font-weight: bold;
   flex: 1;
 }
 
-.playlistsNav__body {
+.sideNav__body {
   flex: 1 1 auto;
   overflow: auto;
 }

src/components/PlaylistsNav/PlaylistsNav.tsx → src/components/SideNav/SideNav.tsx

@@ -1,21 +1,24 @@
 import { Menu, MenuItem, PredefinedMenuItem } from '@tauri-apps/api/menu';
 import type React from 'react';
 import { useCallback, useState } from 'react';
-import Icon from 'react-fontawesome';
 
 import type { Playlist } from '../../generated/typings';
 import database from '../../lib/database';
 import { logAndNotifyError } from '../../lib/utils';
 import PlaylistsAPI from '../../stores/PlaylistsAPI';
-import PlaylistsNavLink from '../PlaylistsNavLink/PlaylistsNavLink';
 
-import styles from './PlaylistsNav.module.css';
+import ButtonIcon from '../../elements/ButtonIcon/ButtonIcon';
+import Flexbox from '../../elements/Flexbox/Flexbox';
+import SideNavLink from '../SideNavLink/SideNavLink';
+import styles from './SideNav.module.css';
 
 type Props = {
+  title: string;
   playlists: Playlist[];
 };
 
-export default function PlaylistsNav(props: Props) {
+// TODO: finish making this component playlist agnostic
+export default function SideNav(props: Props) {
   const [renamed, setRenamed] = useState<string | null>(null);
 
   const showContextMenu = useCallback(
@@ -65,7 +68,7 @@ export default function PlaylistsNav(props: Props) {
     await PlaylistsAPI.create('New playlist', [], false);
   }, []);
 
-  const rename = useCallback(async (playlistID: string, name: string) => {
+  const onRename = useCallback(async (playlistID: string, name: string) => {
     await PlaylistsAPI.rename(playlistID, name);
   }, []);
 
@@ -77,7 +80,7 @@ export default function PlaylistsNav(props: Props) {
         case 'Enter': {
           // Enter
           if (renamed && e.currentTarget) {
-            await rename(renamed, e.currentTarget.value);
+            await onRename(renamed, e.currentTarget.value);
             setRenamed(null);
           }
           break;
@@ -92,18 +95,18 @@ export default function PlaylistsNav(props: Props) {
         }
       }
     },
-    [rename, renamed],
+    [onRename, renamed],
   );
 
   const blur = useCallback(
     async (e: React.FocusEvent<HTMLInputElement>) => {
       if (renamed) {
-        await rename(renamed, e.currentTarget.value);
+        await onRename(renamed, e.currentTarget.value);
       }
 
       setRenamed(null);
     },
-    [rename, renamed],
+    [onRename, renamed],
   );
 
   const focus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
@@ -129,36 +132,32 @@ export default function PlaylistsNav(props: Props) {
       );
     } else {
       navItemContent = (
-        <PlaylistsNavLink
+        <SideNavLink
           className={styles.item__link}
           playlistID={elem._id}
           onContextMenu={showContextMenu}
         >
           {elem.name}
-        </PlaylistsNavLink>
+        </SideNavLink>
       );
     }
 
-    return <div key={`playlist-${elem._id}`}>{navItemContent}</div>;
+    return <div key={elem._id}>{navItemContent}</div>;
   });
 
   return (
-    <div className={styles.playlistsNav}>
-      <div className={styles.playlistsNav__header}>
-        <h4 className={styles.playlistsNav__title}>Playlists</h4>
-        <div className={styles.actions}>
-          <button
-            type="button"
-            className={styles.action}
+    <div className={styles.sideNav}>
+      <Flexbox gap={8} align="center">
+        <h4 className={styles.sideNav__title}>{props.title}</h4>
+        <div className={styles.sideNav__actions}>
+          <ButtonIcon
+            icon="plus"
             onClick={createPlaylist}
-            title="New playlist"
-            data-museeks-action
-          >
-            <Icon name="plus" />
-          </button>
+            title="New Playlist"
+          />
         </div>
-      </div>
-      <div className={styles.playlistsNav__body}>{nav}</div>
+      </Flexbox>
+      <div className={styles.sideNav__body}>{nav}</div>
     </div>
   );
 }

src/components/PlaylistsNavLink/PlaylistsNavLink.tsx → src/components/SideNavLink/SideNavLink.tsx

@@ -3,7 +3,7 @@ import { NavLink } from 'react-router-dom';
 
 import PlaylistsAPI from '../../stores/PlaylistsAPI';
 
-import styles from './PlaylistsNavLink.module.css';
+import styles from './SideNavLink.module.css';
 
 type Props = {
   children: React.ReactNode;
@@ -12,7 +12,7 @@ type Props = {
   onContextMenu: (e: React.MouseEvent, playlistID: string) => void;
 };
 
-export default function PlaylistsNavLink(props: Props) {
+export default function SideNavLink(props: Props) {
   return (
     <NavLink
       className={({ isActive }) =>

src/elements/ButtonIcon/ButtonIcon.module.css

@@ -0,0 +1,7 @@
+.buttonIcon  {
+  background: transparent;
+  border: none;
+  color: var(--text);
+  aspect-ratio: 1 / 1;
+  text-align: center;
+}

src/elements/ButtonIcon/ButtonIcon.tsx

@@ -0,0 +1,24 @@
+import type React from 'react';
+import Icon from 'react-fontawesome';
+
+import styles from './ButtonIcon.module.css';
+
+type Props = {
+  onClick: React.MouseEventHandler<HTMLButtonElement>;
+  icon: string;
+  title?: string;
+};
+
+export default function ButtonIcon(props: Props) {
+  return (
+    <button
+      type="button"
+      className={styles.buttonIcon}
+      onClick={props.onClick}
+      title={props.title}
+      data-museeks-action
+    >
+      <Icon name={props.icon} />
+    </button>
+  );
+}

src/elements/Flexbox/Flexbox.tsx

@@ -6,6 +6,7 @@ type Props = {
   gap?: 4 | 8 | 16;
   children: React.ReactNode;
   direction?: 'vertical' | 'horizontal';
+  align?: 'center';
 };
 
 export default function Flexbox(props: Props) {
@@ -14,7 +15,13 @@ export default function Flexbox(props: Props) {
   });
 
   return (
-    <div className={classNames} style={{ gap: props.gap ?? 0 }}>
+    <div
+      className={classNames}
+      style={{
+        gap: props.gap ?? 0,
+        alignItems: props.align,
+      }}
+    >
       {props.children}
     </div>
   );

src/views/ViewPlaylists.tsx

@@ -6,7 +6,7 @@ import {
   useLoaderData,
 } from 'react-router-dom';
 
-import PlaylistsNav from '../components/PlaylistsNav/PlaylistsNav';
+import SideNav from '../components/SideNav/SideNav';
 import * as ViewMessage from '../elements/ViewMessage/ViewMessage';
 import database from '../lib/database';
 import PlaylistsAPI from '../stores/PlaylistsAPI';
@@ -46,7 +46,7 @@ export default function ViewPlaylists() {
 
   return (
     <div className={`${appStyles.view} ${styles.viewPlaylists}`}>
-      <PlaylistsNav playlists={playlists} />
+      <SideNav title="Playlists" playlists={playlists} />
       <div className={styles.playlist}>{playlistContent}</div>
     </div>
   );