fixes + styling

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);
             }}

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}>

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);
+  };
+}

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>

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)}
                   >

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 />