From 7f894dfca3d7390eae73ea45e9332f1289cd6a05 Mon Sep 17 00:00:00 2001
From: D0m1nos <21263344+D0m1nos@users.noreply.github.com>
Date: Sun, 24 Nov 2024 00:03:40 +0100
Subject: [PATCH] fixes + styling

---
 .../playlist-create/PlaylistCreateBox.tsx     | 19 ++++----
 .../playlist/playlist-item/PlaylistItem.tsx   | 18 +++++---
 .../playlist-item/playlist-item.utils.ts      | 12 +++++
 .../playlist/playlist-list/PlaylistList.tsx   | 45 +++++++++----------
 .../playlist-song-list/PlaylistSongList.tsx   | 35 ++++++++-------
 .../playlist/playlist-view/PlaylistView.tsx   |  2 +-
 .../song/context-menu/SongContextMenu.tsx     | 41 -----------------
 .../song/context-menu/SongContextMenuItem.tsx | 37 ---------------
 8 files changed, 76 insertions(+), 133 deletions(-)
 delete mode 100644 src/renderer/src/components/song/context-menu/SongContextMenu.tsx
 delete mode 100644 src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx

diff --git a/src/renderer/src/components/playlist/playlist-create/PlaylistCreateBox.tsx b/src/renderer/src/components/playlist/playlist-create/PlaylistCreateBox.tsx
index 3b017e65..e69ef446 100644
--- a/src/renderer/src/components/playlist/playlist-create/PlaylistCreateBox.tsx
+++ b/src/renderer/src/components/playlist/playlist-create/PlaylistCreateBox.tsx
@@ -1,5 +1,6 @@
 import { noticeError } from "../playlist.utils";
 import Button from "@renderer/components/button/Button";
+import { Input } from "@renderer/components/input/Input";
 import { addNotice } from "@renderer/components/notice/NoticeContainer";
 import SongImage from "@renderer/components/song/SongImage";
 import Impulse from "@renderer/lib/Impulse";
@@ -39,27 +40,27 @@ const PlaylistCreateBox: Component<PlaylistCreateBoxProps> = (props) => {
   };
 
   return (
-    <div class="mb-6 rounded-xl bg-thick-material">
-      <div class="flex flex-row items-center justify-between p-4">
-        <h3 class="text-xl">Create a new playlist</h3>
-        <Button variant={"ghost"} size={"icon"} onClick={() => props.isOpen(false)}>
-          <XIcon />
+    <div class="my-2 rounded-xl">
+      <div class="flex flex-row items-center justify-between px-4 pb-2 pt-3">
+        <h3 class="text-xl text-text">Create a new playlist</h3>
+        <Button variant={"outlined"} size={"square"} onClick={() => props.isOpen(false)}>
+          <XIcon size={20} />
         </Button>
       </div>
       <div class="m-4 mt-0 flex flex-row">
-        <div class="mr-4 rounded-lg">
+        <div class="mr-4 flex items-center rounded-lg">
           <SongImage
             src={""}
             group={props.group}
             instantLoad={true}
-            class="h-[83px] w-[83px] rounded-lg bg-cover bg-center"
+            class="h-[92px] w-[92px] rounded-lg bg-cover bg-center"
           />
         </div>
         <div class="flex w-full flex-col gap-3">
-          <input
+          <Input
+            variant={"outlined"}
             type="text"
             placeholder="Playlist name"
-            class="text-accent h-9 w-full rounded-lg border-none bg-surface py-[10px] pl-4 font-[inherit] text-base font-normal"
             onInput={(e) => {
               setPlaylistName(e.target.value);
             }}
diff --git a/src/renderer/src/components/playlist/playlist-item/PlaylistItem.tsx b/src/renderer/src/components/playlist/playlist-item/PlaylistItem.tsx
index 1f58266d..69a536c2 100644
--- a/src/renderer/src/components/playlist/playlist-item/PlaylistItem.tsx
+++ b/src/renderer/src/components/playlist/playlist-item/PlaylistItem.tsx
@@ -6,10 +6,10 @@ import {
   setPlaylistActiveScene,
 } from "../playlist.utils";
 import { renamePlaylist } from "../playlist.utils";
-import { getSongImage } from "./playlist-item.utils";
+import { getSongImage, ignoreClickInContextMenu } from "./playlist-item.utils";
 import DropdownList from "@renderer/components/dropdown-list/DropdownList";
+import { Input } from "@renderer/components/input/Input";
 import Popover from "@renderer/components/popover/Popover";
-import { ignoreClickInContextMenu } from "@renderer/components/song/context-menu/SongContextMenu";
 import Impulse from "@renderer/lib/Impulse";
 import draggable from "@renderer/lib/draggable/draggable";
 import { EllipsisVerticalIcon, ListXIcon, PencilLineIcon } from "lucide-solid";
@@ -95,10 +95,10 @@ const PlaylistItem: Component<PlaylistItemProps> = (props) => {
             <div class="flex flex-col justify-center text-base font-medium text-text">
               <Switch fallback={""}>
                 <Match when={editMode() === true}>
-                  <input
-                    class="focus:ring-accent h-10 rounded-full border border-stroke bg-transparent pl-4 pr-4 focus:outline-none focus:ring-2"
+                  <Input
+                    variant={"outlined"}
+                    class="mb-1 max-w-48"
                     type="text"
-                    id="playlist_name"
                     value={props.playlist.name}
                     onInput={(e) => {
                       setPlaylistName(e.target.value);
@@ -110,6 +110,14 @@ const PlaylistItem: Component<PlaylistItemProps> = (props) => {
                         props.reset.pulse();
                       }
                     }}
+                    onKeyDown={(e) => {
+                      if (e.key == "Escape") {
+                        setEditMode(false);
+                      }
+                    }}
+                    onFocusOut={() => {
+                      setEditMode(false);
+                    }}
                   />
                 </Match>
                 <Match when={editMode() === false}>
diff --git a/src/renderer/src/components/playlist/playlist-item/playlist-item.utils.ts b/src/renderer/src/components/playlist/playlist-item/playlist-item.utils.ts
index 9094339f..26d31f8d 100644
--- a/src/renderer/src/components/playlist/playlist-item/playlist-item.utils.ts
+++ b/src/renderer/src/components/playlist/playlist-item/playlist-item.utils.ts
@@ -8,3 +8,15 @@ export function getSongImage(playlist: Playlist) {
     return songs[0].bg;
   }
 }
+
+export function ignoreClickInContextMenu(fn: (evt: MouseEvent) => any): (evt: MouseEvent) => void {
+  return (evt: MouseEvent) => {
+    const t = evt.target;
+
+    if (!(t instanceof HTMLElement)) {
+      return;
+    }
+
+    fn(evt);
+  };
+}
diff --git a/src/renderer/src/components/playlist/playlist-list/PlaylistList.tsx b/src/renderer/src/components/playlist/playlist-list/PlaylistList.tsx
index d105f8c9..5cf5e2f2 100644
--- a/src/renderer/src/components/playlist/playlist-list/PlaylistList.tsx
+++ b/src/renderer/src/components/playlist/playlist-list/PlaylistList.tsx
@@ -3,10 +3,10 @@ import PlaylistCreateBox from "../playlist-create/PlaylistCreateBox";
 import PlaylistItem from "../playlist-item/PlaylistItem";
 import { namespace } from "@renderer/App";
 import Button from "@renderer/components/button/Button";
+import { Input } from "@renderer/components/input/Input";
 import Impulse from "@renderer/lib/Impulse";
 import { PlusIcon, SearchIcon } from "lucide-solid";
 import { Component, createSignal, onCleanup, onMount, Show } from "solid-js";
-import { twMerge } from "tailwind-merge";
 
 const PlaylistList: Component = () => {
   const resetListing = new Impulse();
@@ -21,50 +21,45 @@ const PlaylistList: Component = () => {
 
   return (
     <div class="flex h-full flex-col">
-      <div class="z-1 sticky top-0 mx-5 mt-6 flex flex-col">
-        <div class="mb-6 flex w-full flex-row items-center">
-          <div class="mr-2 h-11 w-full rounded-lg border border-stroke">
-            <input
-              class="focus:ring-accent h-11 w-full rounded-lg bg-transparent pl-3 focus:outline-none focus:ring-2"
+      <div class="z-1 sticky top-0 mx-5 mb-4 mt-1 flex flex-col">
+        <div class="flex w-full flex-row items-center gap-2">
+          <div class="relative flex-1">
+            <Input
+              variant="outlined"
               type="text"
               id="search_input"
               placeholder="Search in your playlists... (WIP)"
             />
             <label
-              class={twMerge(
-                "absolute top-1/2 -translate-x-8 -translate-y-[22px] transform text-xl text-text",
-                showCreateBox() && "-translate-y-[116px]",
-              )}
+              class="absolute right-3.5 top-1/2 -translate-y-1/2 transform text-xl text-subtext"
               for="search_input"
             >
-              <SearchIcon size={20} />
+              <SearchIcon size={20} class="opacity-70" />
             </label>
           </div>
-          <div class="ml-3">
-            <Button
-              onClick={() => {
-                setShowCreateBox(!showCreateBox());
-              }}
-              class="rounded-lg text-xl"
-              variant={showCreateBox() ? "primary" : "ghost"}
-              size={"icon"}
-            >
-              <PlusIcon />
-            </Button>
-          </div>
+          <Button
+            onClick={() => {
+              setShowCreateBox(!showCreateBox());
+            }}
+            class="rounded-lg text-xl"
+            variant={showCreateBox() ? "secondary" : "outlined"}
+            size="square"
+          >
+            <PlusIcon size={20} />
+          </Button>
         </div>
         <Show when={showCreateBox() === true}>
           <PlaylistCreateBox group={group} isOpen={setShowCreateBox} reset={resetListing} />
         </Show>
       </div>
 
-      <div class="flex flex-grow overflow-auto">
+      <div class="flex flex-grow overflow-auto p-5 py-0">
         <InfiniteScroller
           apiKey={"query::playlists"}
           apiInitKey={"query::playlists::init"}
           reset={resetListing}
           fallback={<div>No playlists...</div>}
-          class="mx-5 my-6 flex w-full flex-col gap-4"
+          class="flex w-full flex-col gap-4"
           builder={(s) => <PlaylistItem playlist={s} group={group} reset={resetListing} />}
         />
       </div>
diff --git a/src/renderer/src/components/playlist/playlist-song-list/PlaylistSongList.tsx b/src/renderer/src/components/playlist/playlist-song-list/PlaylistSongList.tsx
index da880926..580a33dc 100644
--- a/src/renderer/src/components/playlist/playlist-song-list/PlaylistSongList.tsx
+++ b/src/renderer/src/components/playlist/playlist-song-list/PlaylistSongList.tsx
@@ -5,8 +5,8 @@ import { namespace } from "@renderer/App";
 import Button from "@renderer/components/button/Button";
 import DropdownList from "@renderer/components/dropdown-list/DropdownList";
 import Impulse from "@renderer/lib/Impulse";
-import { ArrowLeftIcon, DeleteIcon, PencilIcon, Trash2Icon } from "lucide-solid";
-import { Component, createSignal, onCleanup, onMount, Show } from "solid-js";
+import { ArrowLeftIcon, DeleteIcon, PencilIcon, PencilOffIcon, Trash2Icon } from "lucide-solid";
+import { Component, createSignal, Match, onCleanup, onMount, Show, Switch } from "solid-js";
 import { PlaylistSongsQueryPayload, ResourceID, Song } from "src/@types";
 
 type PlaylistSongListProps = {
@@ -43,30 +43,37 @@ const PlaylistSongList: Component<PlaylistSongListProps> = (props) => {
   };
 
   return (
-    <div class="mx-5 my-6">
-      <div class="mb-6 flex w-full flex-row items-center justify-between">
-        <div class="flex flex-row items-center gap-5 text-xl font-medium">
+    <div class="flex h-full flex-col">
+      <div class="sticky top-0 z-10 mx-5 mb-4 mt-1 flex flex-row items-center">
+        <div class="flex w-full flex-row items-center gap-5 font-medium">
           <Button
             variant={"ghost"}
-            size={"icon"}
+            size={"square"}
             onClick={() => setPlaylistActiveScene(PLAYLIST_SCENE_LIST)}
           >
-            <ArrowLeftIcon class="text-overlay" />
+            <ArrowLeftIcon class="text-subtext" size={20} />
           </Button>
           <h3 class="text-xl">{props.playlistName}</h3>
         </div>
         <Button
-          variant={editMode() ? "primary" : "ghost"}
-          size={"icon"}
+          variant={editMode() ? "secondary" : "outlined"}
+          size={"square"}
           class="rounded-lg"
           onClick={() => {
             setEditMode(!editMode());
           }}
         >
-          <PencilIcon class="size-5" />
+          <Switch>
+            <Match when={editMode() === true}>
+              <PencilOffIcon size={20} />
+            </Match>
+            <Match when={editMode() === false}>
+              <PencilIcon size={20} />
+            </Match>
+          </Switch>
         </Button>
       </div>
-      <div class="flex-grow">
+      <div class="h-full flex-grow overflow-y-auto p-5 py-0">
         <InfiniteScroller
           apiKey={"query::playlistSongs"}
           apiData={payload()}
@@ -75,12 +82,10 @@ const PlaylistSongList: Component<PlaylistSongListProps> = (props) => {
           reset={reset}
           fallback={<div>No songs in playlist...</div>}
           builder={(s) => (
-            <div class="flex flex-row">
+            <div class="flex items-stretch">
               <SongItem
                 song={s}
                 group={group}
-                selectable={true}
-                draggable={true}
                 onSelect={createQueue}
                 contextMenu={
                   <PlaylistSongListContextMenuContent song={s} playlistName={props.playlistName} />
@@ -90,7 +95,7 @@ const PlaylistSongList: Component<PlaylistSongListProps> = (props) => {
                 <Show when={editMode() === true}>
                   <Button
                     variant={"ghost"}
-                    size={"icon"}
+                    size={"square"}
                     class="ml-2 rounded-lg"
                     onClick={() => deleteSong(props.playlistName, s)}
                   >
diff --git a/src/renderer/src/components/playlist/playlist-view/PlaylistView.tsx b/src/renderer/src/components/playlist/playlist-view/PlaylistView.tsx
index b4888981..c1bc06bb 100644
--- a/src/renderer/src/components/playlist/playlist-view/PlaylistView.tsx
+++ b/src/renderer/src/components/playlist/playlist-view/PlaylistView.tsx
@@ -10,7 +10,7 @@ import { Component, Match, Switch } from "solid-js";
 
 const PlaylistView: Component = () => {
   return (
-    <div class="h-full overflow-y-auto">
+    <div class="overflow-auto">
       <Switch>
         <Match when={playlistActiveScene() == PLAYLIST_SCENE_LIST}>
           <PlaylistList />
diff --git a/src/renderer/src/components/song/context-menu/SongContextMenu.tsx b/src/renderer/src/components/song/context-menu/SongContextMenu.tsx
deleted file mode 100644
index fc031815..00000000
--- a/src/renderer/src/components/song/context-menu/SongContextMenu.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Component, For, JSX } from "solid-js";
-import { twMerge } from "tailwind-merge";
-
-type SongContextMenuProps = {
-  children: JSX.Element | JSX.Element[];
-  class?: JSX.ButtonHTMLAttributes<HTMLButtonElement>["class"];
-};
-
-const SongContextMenu: Component<SongContextMenuProps> = (props) => {
-  let menu: HTMLDivElement | undefined;
-
-  return (
-    <div
-      class={twMerge(
-        "z-30 flex min-w-48 flex-col gap-1 rounded-xl bg-thick-material p-2 shadow-xl ring-1 ring-inset ring-stroke backdrop-blur-md",
-        props.class,
-      )}
-      ref={menu}
-    >
-      <div class="flex flex-col">
-        <For each={Array.isArray(props.children) ? props.children : [props.children]}>
-          {(child) => child}
-        </For>
-      </div>
-    </div>
-  );
-};
-
-export default SongContextMenu;
-
-export function ignoreClickInContextMenu(fn: (evt: MouseEvent) => any): (evt: MouseEvent) => void {
-  return (evt: MouseEvent) => {
-    const t = evt.target;
-
-    if (!(t instanceof HTMLElement)) {
-      return;
-    }
-
-    fn(evt);
-  };
-}
diff --git a/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx b/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
deleted file mode 100644
index 203b85b4..00000000
--- a/src/renderer/src/components/song/context-menu/SongContextMenuItem.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Component, JSX, onCleanup, splitProps } from "solid-js";
-import { twMerge } from "tailwind-merge";
-
-type SongContextMenuItemProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
-  onClick: (event: MouseEvent) => any;
-};
-
-const SongContextMenuItem: Component<SongContextMenuItemProps> = (props) => {
-  let item: HTMLElement | undefined;
-  const [local, other] = splitProps(props, ["children", "class", "onClick", "disabled"]);
-  const buttonDisabled = local.disabled !== undefined ? local.disabled : false;
-
-  const divAccessor = (div: HTMLElement) => {
-    div.addEventListener("click", local.onClick);
-    item = div;
-  };
-
-  onCleanup(() => {
-    item?.removeEventListener("click", local.onClick);
-  });
-
-  return (
-    <button
-      ref={divAccessor}
-      class={twMerge(
-        "flex w-full max-w-40 flex-row items-center justify-between gap-3 rounded-md py-1.5 pl-2.5 pr-2 text-left align-baseline hover:cursor-pointer hover:bg-surface",
-        local.class,
-        buttonDisabled && "text-overlay hover:cursor-auto hover:bg-transparent",
-      )}
-      {...other}
-    >
-      <div class="flex w-full flex-row items-center justify-between gap-1">{local.children}</div>
-    </button>
-  );
-};
-
-export default SongContextMenuItem;