Skip to content

Commit

Permalink
fix command components
Browse files Browse the repository at this point in the history
  • Loading branch information
@radityaharya
radityaharya committed Apr 26, 2024
1 parent edfdb22 commit 40536c7
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 95 deletions.
2 changes: 1 addition & 1 deletion src/app/workflow/Builder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@ function Builder({
<Sidebar />
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={90}>
<ResizablePanel defaultSize={83}>
{workflowIsLoading || sessionStore === null ? (
<Loading />
) : (
Expand Down
97 changes: 55 additions & 42 deletions src/components/nodes/Library/Playlist.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import {
Popover,
Expand Down Expand Up @@ -76,7 +77,7 @@ const PlaylistItem = ({
}) => (
<CommandItem
key={playlist.playlistId}
value={playlist.playlistId}
value={`${playlist.name} - ${playlist.playlistId}`}
onSelect={onSelect}
>
<PlaylistItemPrimitive playlist={playlist} />
Expand Down Expand Up @@ -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`,
Expand All @@ -170,7 +181,7 @@ const PlaylistComponent: React.FC<PlaylistProps> = ({ id, data }) => {
console.error(err);
});
} else {
userPlaylists().catch((err) => {
userPlaylistsFetch().catch((err) => {
console.error(err);
});
}
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/command.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
110 changes: 59 additions & 51 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
}

Expand Down Expand Up @@ -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);
}

0 comments on commit 40536c7

Please sign in to comment.