From 40536c79d81e6f5669f131b106e85cc231cfe4d4 Mon Sep 17 00:00:00 2001
From: Raditya Harya <radityaharya02@gmail.com>
Date: Fri, 26 Apr 2024 17:45:15 +0700
Subject: [PATCH] fix command components

---
 src/app/workflow/Builder.tsx              |   2 +-
 src/components/nodes/Library/Playlist.tsx |  97 ++++++++++---------
 src/components/ui/command.tsx             |   2 +-
 src/styles/globals.css                    | 110 ++++++++++++----------
 4 files changed, 116 insertions(+), 95 deletions(-)

diff --git a/src/app/workflow/Builder.tsx b/src/app/workflow/Builder.tsx
index 31f6674..d853f94 100644
--- a/src/app/workflow/Builder.tsx
+++ b/src/app/workflow/Builder.tsx
@@ -190,7 +190,7 @@ function Builder({
             <Sidebar />
           </ResizablePanel>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={90}>
+          <ResizablePanel defaultSize={83}>
             {workflowIsLoading || sessionStore === null ? (
               <Loading />
             ) : (
diff --git a/src/components/nodes/Library/Playlist.tsx b/src/components/nodes/Library/Playlist.tsx
index 11dd55b..db2f950 100644
--- a/src/components/nodes/Library/Playlist.tsx
+++ b/src/components/nodes/Library/Playlist.tsx
@@ -15,6 +15,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@/components/ui/command";
 import {
   Popover,
@@ -76,7 +77,7 @@ const PlaylistItem = ({
 }) => (
   <CommandItem
     key={playlist.playlistId}
-    value={playlist.playlistId}
+    value={`${playlist.name} - ${playlist.playlistId}`}
     onSelect={onSelect}
   >
     <PlaylistItemPrimitive playlist={playlist} />
@@ -145,14 +146,24 @@ const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
             `/api/user/${session.user.providerAccountId}/playlists?q=${search}`,
           );
           const data = await response.json();
-          setUserPlaylistsStore(data as any[]);
+          const newPlaylists = userPlaylists.concat(data);
+          let dedupedPlaylists = newPlaylists.reduce((acc, current) => {
+            const x = acc.find(item => item.playlistId === current.playlistId);
+            if (!x) {
+              return acc.concat([current]);
+            } else {
+              return acc;
+            }
+          }, []);
+          
+          setUserPlaylistsStore(dedupedPlaylists);
         } catch (err) {
           console.error(err);
         }
       }
     };
 
-    const userPlaylists = async () => {
+    const userPlaylistsFetch = async () => {
       try {
         const response = await fetch(
           `/api/user/${session.user.providerAccountId}/playlists`,
@@ -170,7 +181,7 @@ const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
           console.error(err);
         });
       } else {
-        userPlaylists().catch((err) => {
+        userPlaylistsFetch().catch((err) => {
           console.error(err);
         });
       }
@@ -261,46 +272,48 @@ const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
                         />
                         <CommandEmpty>No playlist found.</CommandEmpty>
                         <CommandGroup>
-                          <ScrollArea className="h-[200px] w-full rounded-md">
-                            {userPlaylists.length > 0
-                              ? userPlaylists.map((playlist) => (
-                                  <PlaylistItem
-                                    key={playlist.playlistId}
-                                    playlist={playlist}
-                                    onSelect={() => handleSelect(playlist)}
-                                  />
-                                ))
-                              : Array.from({ length: 3 }).map((_, index) => (
-                                  <CommandItem
-                                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-                                    key={`loading-${index}`}
-                                    value="loading"
-                                    onSelect={() => {
-                                      setSelectedPlaylist({
-                                        playlistId: "loading",
-                                        name: "loading",
-                                        description: "loading",
-                                        image: "",
-                                        owner: "loading",
-                                        total: 0,
-                                      });
-                                      setOpen(false);
-                                    }}
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      <div className="h-8 w-8 animate-pulse rounded-md bg-gray-700"></div>
-                                      <div className="flex animate-pulse flex-col">
-                                        <div className="animate-pulse font-medium text-sm">
-                                          loading...
-                                        </div>
-                                        <div className="animate-pulse text-xs opacity-80">
-                                          loading...
+                          <CommandList>
+                            <ScrollArea className="h-[200px] w-full rounded-md">
+                              {userPlaylists.length > 0
+                                ? userPlaylists.map((playlist) => (
+                                    <PlaylistItem
+                                      key={playlist.playlistId}
+                                      playlist={playlist}
+                                      onSelect={() => handleSelect(playlist)}
+                                    />
+                                  ))
+                                : Array.from({ length: 3 }).map((_, index) => (
+                                    <CommandItem
+                                      // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                                      key={`loading-${index}`}
+                                      value="loading"
+                                      onSelect={() => {
+                                        setSelectedPlaylist({
+                                          playlistId: "loading",
+                                          name: "loading",
+                                          description: "loading",
+                                          image: "",
+                                          owner: "loading",
+                                          total: 0,
+                                        });
+                                        setOpen(false);
+                                      }}
+                                    >
+                                      <div className="flex items-center gap-2">
+                                        <div className="h-8 w-8 animate-pulse rounded-md bg-gray-700"></div>
+                                        <div className="flex animate-pulse flex-col">
+                                          <div className="animate-pulse font-medium text-sm">
+                                            loading...
+                                          </div>
+                                          <div className="animate-pulse text-xs opacity-80">
+                                            loading...
+                                          </div>
                                         </div>
                                       </div>
-                                    </div>
-                                  </CommandItem>
-                                ))}
-                          </ScrollArea>
+                                    </CommandItem>
+                                  ))}
+                            </ScrollArea>
+                          </CommandList>
                         </CommandGroup>
                       </Command>
                     </PopoverContent>
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index f43019b..86fb2da 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
       className
     )}
     {...props}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index c7c9243..7fdf024 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -5,64 +5,47 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
+    --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
+    --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
     --radius: 0.5rem;
   }
-
+ 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
   }
 }
 
@@ -136,3 +119,28 @@
   background-color: var(--background);
   z-index: -1;
 }
+
+html{
+  scrollbar-gutter: stable;
+}
+
+/* Width */
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: var(--background); 
+}
+ 
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--primary); 
+  border-radius: var(--radius);
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-foreground); 
+}
\ No newline at end of file