Skip to content

Commit

Permalink
rework sidebar
Browse files Browse the repository at this point in the history
  • Loading branch information
@radityaharya
radityaharya committed Apr 26, 2024
1 parent 7245b1b commit edfdb22
Show file tree
Hide file tree
Showing 6 changed files with 90 additions and 77 deletions.
Binary file modified bun.lockb
View file
Binary file not shown.
4 changes: 2 additions & 2 deletions src/app/workflow/Builder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,11 +186,11 @@ function Builder({
<div className="flex h-screen flex-col">
<main className="grid h-screen">
<ResizablePanelGroup direction="horizontal">
<ResizablePanel defaultSize={20} maxSize={50} minSize={20}>
<ResizablePanel defaultSize={17} maxSize={17} minSize={17}>
<Sidebar />
</ResizablePanel>
<ResizableHandle withHandle />
<ResizablePanel defaultSize={80}>
<ResizablePanel defaultSize={90}>
{workflowIsLoading || sessionStore === null ? (
<Loading />
) : (
Expand Down
6 changes: 3 additions & 3 deletions src/app/workflow/Flow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,12 +74,12 @@ export const Nodes = {
description: "Append tracks of sources sequentially",
},
"Filter.dedupeTracks": {
title: "Deduplicate Tracks",
title: "Dedup Tracks",
node: memo(DedupeTracks),
description: "Remove duplicate tracks",
},
"Filter.dedupeArtists": {
title: "Deduplicate Artists",
title: "Dedup Artists",
node: memo(DedupeArtists),
description: "Remove duplicate artists",
},
Expand Down Expand Up @@ -130,7 +130,7 @@ export const Nodes = {
description: "Sort tracks based on given key",
},
"Order.sort-popularity": {
title: "Sort Tracks by Popularity",
title: "By Popularity",
node: memo(SortPopularity),
description: "Sort tracks based on popularity",
},
Expand Down
55 changes: 37 additions & 18 deletions src/app/workflow/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,27 @@ import { useCallback, useMemo } from "react";
import React from "react";
import { Nodes } from "./Flow";

import {
Calculator,
Calendar,
CreditCard,
Settings,
Smile,
User,
} from "lucide-react"

import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
CommandSeparator,
CommandShortcut,
} from "@/components/ui/command"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Separator } from "@/components/ui/separator"
type NodeType = {
title: string;
description: string;
Expand Down Expand Up @@ -54,7 +75,7 @@ function Sidebar() {
onDragOver={onDragOver}
onDrop={onDrop}
>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-6 h-full">
<div className="flex-none px-6 pt-[4rem]">
<div className="flex flex-col justify-between gap-6">
<div className="flex flex-row justify-between"></div>
Expand All @@ -66,38 +87,36 @@ function Sidebar() {
Drag and drop nodes to the canvas to create a workflow
</p>
</div>
<Accordion
type="single"
collapsible
className="px-6"
defaultValue="item-1"
>
<AccordionItems nodesByType={nodesByType} />
</Accordion>
<Command className="pl-6 pr-3">
<CommandInput placeholder="Search..." className="pr-3"/>
<ScrollArea className="w-full h-full">
<CommandList className="pr-3">
<CommandItems nodesByType={nodesByType} />
</CommandList>
</ScrollArea>
</Command>
</div>
</aside>
);
}

function AccordionItems({ nodesByType }: { nodesByType: NodesByType }) {
function CommandItems({ nodesByType }: { nodesByType: NodesByType }) {
return (
<>
{Object.entries(nodesByType).map(
([type, nodes]: [string, NodeType[]], index) => (
<AccordionItem value={`item-${index + 1}`} key={type}>
<AccordionTrigger>{type}</AccordionTrigger>
<AccordionContent className="flex flex-col gap-2">
{nodes.map(({ title, description, nodeType }) => (
<CommandGroup heading={type} key={type}>
{nodes.map(({ title, description, nodeType }) => (
<CommandItem key={nodeType} asChild value={`${title} - ${type} - ${description}`}>
<DragableNode
key={nodeType}
nodeType={nodeType}
title={title}
description={description}
type={type}
/>
))}
</AccordionContent>
</AccordionItem>
</CommandItem>
))}
</CommandGroup>
),
)}
</>
Expand Down
12 changes: 4 additions & 8 deletions src/components/DragableNode.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,22 +58,18 @@ export const DragableNode = ({
return (
<TooltipProvider>
<Tooltip>
<div className="group h-min-content w-full">
<div className="group h-min-content w-full my-2">
<div
className="flex w-full flex-row items-center justify-between gap-2 rounded-md p-2 dark:bg-accent"
className="flex w-full flex-row text-start items-start justify-between gap-2 rounded-md p-2 dark:bg-accent"
onDragStart={onDragStart}
onClick={onClick}
onKeyDown={onClick}
draggable
>
<div className="flex flex-row gap-2">
{/* <span className="text-sm font-medium">{type} :</span> */}
<span className="flex flex-row gap-2 font-medium text-sm">
<TooltipTrigger className="hidden w-0 group-hover:block group-hover:w-min">
<InfoIcon size={12} />
</TooltipTrigger>
<TooltipTrigger className="flex flex-row gap-2 font-medium text-sm text-start">
{title}
</span>
</TooltipTrigger>
</div>
<GripVertical size={16} className="cursor-grab" />
</div>
Expand Down
90 changes: 44 additions & 46 deletions src/components/ui/command.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
"use client";
"use client"

import { type DialogProps } from "@radix-ui/react-dialog";
import { Command as CommandPrimitive } from "cmdk";
import { Search } from "lucide-react";
import * as React from "react";
import * as React from "react"
import { type DialogProps } from "@radix-ui/react-dialog"
import { Command as CommandPrimitive } from "cmdk"
import { Search } from "lucide-react"

import { Dialog, DialogContent } from "src/components/ui/dialog";
import { cn } from "src/lib/utils";
import { cn } from "src/lib/utils"
import { Dialog, DialogContent } from "src/components/ui/dialog"

const Command = React.forwardRef<
React.ElementRef<typeof CommandPrimitive>,
Expand All @@ -16,26 +16,26 @@ const Command = React.forwardRef<
ref={ref}
className={cn(
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
className,
className
)}
{...props}
/>
));
Command.displayName = CommandPrimitive.displayName;
))
Command.displayName = CommandPrimitive.displayName

interface CommandDialogProps extends DialogProps {}

const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
<Dialog {...props}>
<DialogContent className="overflow-hidden p-0 shadow-lg">
<Command className="[&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-item]_svg]:w-5 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group]]:px-2 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground">
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
{children}
</Command>
</DialogContent>
</Dialog>
);
};
)
}

const CommandInput = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Input>,
Expand All @@ -46,28 +46,28 @@ const CommandInput = React.forwardRef<
<CommandPrimitive.Input
ref={ref}
className={cn(
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed placeholder:text-muted-foreground disabled:opacity-50",
className,
"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
/>
</div>
));
))

CommandInput.displayName = CommandPrimitive.Input.displayName;
CommandInput.displayName = CommandPrimitive.Input.displayName

const CommandList = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.List>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
>(({ className, ...props }, ref) => (
<CommandPrimitive.List
ref={ref}
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
className={cn("overflow-x-hidden", className)}
{...props}
/>
));
))

CommandList.displayName = CommandPrimitive.List.displayName;
CommandList.displayName = CommandPrimitive.List.displayName

const CommandEmpty = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Empty>,
Expand All @@ -78,27 +78,25 @@ const CommandEmpty = React.forwardRef<
className="py-6 text-center text-sm"
{...props}
/>
));
))

CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
CommandEmpty.displayName = CommandPrimitive.Empty.displayName

const CommandGroup = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Group>,
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
>(({ className, ...props }, ref) => (
<CommandPrimitive.List>
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs",
className,
)}
{...props}
/>
</CommandPrimitive.List>
));
<CommandPrimitive.Group
ref={ref}
className={cn(
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
className
)}
{...props}
/>
))

CommandGroup.displayName = CommandPrimitive.Group.displayName;
CommandGroup.displayName = CommandPrimitive.Group.displayName

const CommandSeparator = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Separator>,
Expand All @@ -109,8 +107,8 @@ const CommandSeparator = React.forwardRef<
className={cn("-mx-1 h-px bg-border", className)}
{...props}
/>
));
CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
))
CommandSeparator.displayName = CommandPrimitive.Separator.displayName

const CommandItem = React.forwardRef<
React.ElementRef<typeof CommandPrimitive.Item>,
Expand All @@ -119,14 +117,14 @@ 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 data-[disabled=true]:pointer-events-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:opacity-50",
className,
"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",
className
)}
{...props}
/>
));
))

CommandItem.displayName = CommandPrimitive.Item.displayName;
CommandItem.displayName = CommandPrimitive.Item.displayName

const CommandShortcut = ({
className,
Expand All @@ -135,14 +133,14 @@ const CommandShortcut = ({
return (
<span
className={cn(
"ml-auto text-muted-foreground text-xs tracking-widest",
className,
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
);
};
CommandShortcut.displayName = "CommandShortcut";
)
}
CommandShortcut.displayName = "CommandShortcut"

export {
Command,
Expand All @@ -154,4 +152,4 @@ export {
CommandItem,
CommandShortcut,
CommandSeparator,
};
}

0 comments on commit edfdb22

Please sign in to comment.