feat: implement ToggleGroup and Toggle components for improved label selection

- Introduced ToggleGroup and Toggle components to enhance the user interface for selecting multiple labels in the Linear issue creation and update forms.
- Updated ApprovalCard component to utilize the new ToggleGroup for better label management.
- Refactored label rendering to use Badge components for improved styling and user experience across various components.

surfsense_web/components/tool-ui/google-drive/create-file.tsx

@@ -321,6 +321,7 @@ function ApprovalCard({
 									</Select>
 								</div>
 
+							{selectedAccountId && (
 								<div className="space-y-2">
 									<p className="text-xs font-medium text-muted-foreground">
 										Parent Folder
@@ -338,12 +339,13 @@ function ApprovalCard({
 											))}
 										</SelectContent>
 									</Select>
-								{selectedAccountId && availableParentFolders.length === 0 && (
+									{availableParentFolders.length === 0 && (
 										<p className="text-xs text-muted-foreground">
 											No folders found. File will be created at Drive root.
 										</p>
 									)}
 								</div>
+							)}
 							</>
 						)}
 					</div>

surfsense_web/components/tool-ui/linear/create-linear-issue.tsx

@@ -3,6 +3,7 @@
 import { makeAssistantToolUI } from "@assistant-ui/react";
 import { CornerDownLeftIcon, Pen } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Select,
@@ -11,6 +12,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { PlateEditor } from "@/components/editor/plate-editor";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 import { useSetAtom } from "jotai";
@@ -398,28 +400,34 @@ function ApprovalCard({
 												{selectedTeam.labels.length > 0 && (
 													<div className="space-y-2">
 														<p className="text-xs font-medium text-muted-foreground">Labels</p>
-														<div className="flex flex-wrap gap-1.5">
+														<ToggleGroup
+															type="multiple"
+															value={selectedLabelIds}
+															onValueChange={setSelectedLabelIds}
+															className="flex flex-wrap gap-1.5"
+														>
 															{selectedTeam.labels.map((label) => {
 																const isSelected = selectedLabelIds.includes(label.id);
 																return (
-																	<button
+																	<ToggleGroupItem
 																		key={label.id}
-																		type="button"
+																		value={label.id}
-																		onClick={() =>
+																		className="h-auto rounded-full border-0 px-0 py-0 shadow-none hover:bg-transparent data-[state=on]:bg-transparent"
-																			setSelectedLabelIds((prev) =>
+																	>
+																		<Badge
+																			className={`cursor-pointer rounded-full gap-1 border transition-all ${
 																				isSelected
-																					? prev.filter((id) => id !== label.id)
+																					? "font-semibold opacity-100 shadow-sm"
-																					: [...prev, label.id]
+																					: "border-transparent opacity-55 hover:opacity-90"
-																			)
-																		}
-																		className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium transition-opacity ${
-																			isSelected
-																				? "opacity-100 ring-2 ring-foreground/30"
-																				: "opacity-50 hover:opacity-80"
 																			}`}
 																			style={{
-																			backgroundColor: `${label.color}33`,
+																				backgroundColor: isSelected
+																					? `${label.color}70`
+																					: `${label.color}28`,
 																				color: label.color,
+																				borderColor: isSelected
+																					? `${label.color}cc`
+																					: "transparent",
 																			}}
 																		>
 																			<span
@@ -427,10 +435,11 @@ function ApprovalCard({
 																				style={{ backgroundColor: label.color }}
 																			/>
 																			{label.name}
-																	</button>
+																		</Badge>
+																	</ToggleGroupItem>
 																);
 															})}
-														</div>
+														</ToggleGroup>
 													</div>
 												)}
 											</>

surfsense_web/components/tool-ui/linear/update-linear-issue.tsx

@@ -4,6 +4,7 @@ import { makeAssistantToolUI } from "@assistant-ui/react";
 import { useSetAtom } from "jotai";
 import { CornerDownLeftIcon, Pen } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Select,
@@ -12,6 +13,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { PlateEditor } from "@/components/editor/plate-editor";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
@@ -363,15 +365,15 @@ function ApprovalCard({
 											</div>
 											<div className="flex flex-wrap gap-2 text-xs text-muted-foreground">
 												{issue.current_state && (
-													<span
+													<Badge
-														className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+														className="rounded-full border-0"
 														style={{
 															backgroundColor: `${issue.current_state.color}22`,
 															color: issue.current_state.color,
 														}}
 													>
 														{issue.current_state.name}
-													</span>
+													</Badge>
 												)}
 												{issue.current_assignee && <span>{issue.current_assignee.name}</span>}
 												{priorities.find((p) => p.priority === issue.priority) && (
@@ -381,16 +383,16 @@ function ApprovalCard({
 											{issue.current_labels && issue.current_labels.length > 0 && (
 												<div className="flex flex-wrap gap-1">
 													{issue.current_labels.map((label) => (
-														<span
+														<Badge
 															key={label.id}
-															className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+															className="rounded-full border-0 gap-1"
 															style={{
 																backgroundColor: `${label.color}22`,
 																color: label.color,
 															}}
 														>
 															{label.name}
-														</span>
+														</Badge>
 													))}
 												</div>
 											)}
@@ -474,29 +476,36 @@ function ApprovalCard({
 										{team.labels.length > 0 && (
 											<div className="space-y-2">
 												<p className="text-xs font-medium text-muted-foreground">Labels</p>
-												<div className="flex flex-wrap gap-1.5">
+												<ToggleGroup
+													type="multiple"
+													value={editedArgs.labelIds}
+													onValueChange={(value) =>
+														setEditedArgs({ ...editedArgs, labelIds: value })
+													}
+													className="flex flex-wrap gap-1.5"
+												>
 													{team.labels.map((label) => {
 														const isSelected = editedArgs.labelIds.includes(label.id);
 														return (
-															<button
+															<ToggleGroupItem
 																key={label.id}
-																type="button"
+																value={label.id}
-																onClick={() =>
+																className="h-auto rounded-full border-0 px-0 py-0 shadow-none hover:bg-transparent data-[state=on]:bg-transparent"
-																	setEditedArgs({
+															>
-																		...editedArgs,
+																<Badge
-																		labelIds: isSelected
+																	className={`cursor-pointer rounded-full gap-1 border transition-all ${
-																			? editedArgs.labelIds.filter((id) => id !== label.id)
-																			: [...editedArgs.labelIds, label.id],
-																	})
-																}
-																className={`inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium transition-opacity ${
 																		isSelected
-																		? "opacity-100 ring-2 ring-foreground/30"
+																			? "font-semibold opacity-100 shadow-sm"
-																		: "opacity-50 hover:opacity-80"
+																			: "border-transparent opacity-55 hover:opacity-90"
 																	}`}
 																	style={{
-																	backgroundColor: `${label.color}33`,
+																		backgroundColor: isSelected
+																			? `${label.color}70`
+																			: `${label.color}28`,
 																		color: label.color,
+																		borderColor: isSelected
+																			? `${label.color}cc`
+																			: "transparent",
 																	}}
 																>
 																	<span
@@ -504,10 +513,11 @@ function ApprovalCard({
 																		style={{ backgroundColor: label.color }}
 																	/>
 																	{label.name}
-															</button>
+																</Badge>
+															</ToggleGroupItem>
 														);
 													})}
-												</div>
+												</ToggleGroup>
 											</div>
 										)}
 									</>
@@ -564,16 +574,16 @@ function ApprovalCard({
 						{proposedLabelObjects.length > 0 && (
 							<div className="flex flex-wrap gap-1 mt-2">
 								{proposedLabelObjects.map((label) => (
-									<span
+									<Badge
 										key={label.id}
-										className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+										className="rounded-full border-0 gap-1"
 										style={{
 											backgroundColor: `${label.color}33`,
 											color: label.color,
 										}}
 									>
 										{label.name}
-									</span>
+									</Badge>
 								))}
 							</div>
 						)}

surfsense_web/components/tool-ui/notion/create-notion-page.tsx

@@ -298,7 +298,7 @@ function ApprovalCard({
 												<SelectItem value="__none__">None</SelectItem>
 												{availableParentPages.map((page) => (
 													<SelectItem key={page.page_id} value={page.page_id}>
-														📄 {page.title}
+														{page.title}
 													</SelectItem>
 												))}
 											</SelectContent>

surfsense_web/components/ui/toggle-group.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import type { VariantProps } from "class-variance-authority"
+import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }
+>({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants> & {
+    spacing?: number
+  }) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      data-spacing={spacing}
+      style={{ "--gap": spacing } as React.CSSProperties}
+      className={cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size, spacing }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      data-spacing={context.spacing}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

surfsense_web/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import type * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Toggle as TogglePrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }