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.
2026-04-29 19:06:24 +02:00 · 2026-03-20 17:32:05 +05:30 · 2026-03-20 17:32:05 +05:30 · 23c23c7528
commit 23c23c7528
parent 15857ecfd6
6 changed files with 236 additions and 85 deletions
--- a/surfsense_web/components/tool-ui/google-drive/create-file.tsx
+++ b/surfsense_web/components/tool-ui/google-drive/create-file.tsx
@ -321,29 +321,31 @@ function ApprovalCard({
 									</Select>
 								</div>

-							<div className="space-y-2">
-								<p className="text-xs font-medium text-muted-foreground">
-									Parent Folder
-								</p>
-								<Select value={parentFolderId} onValueChange={setParentFolderId}>
-									<SelectTrigger className="w-full">
-										<SelectValue placeholder="Drive Root" />
-									</SelectTrigger>
-									<SelectContent>
-										<SelectItem value="__root__">Drive Root</SelectItem>
-										{availableParentFolders.map((folder) => (
-											<SelectItem key={folder.folder_id} value={folder.folder_id}>
-												{folder.name}
-											</SelectItem>
-										))}
-									</SelectContent>
-								</Select>
-								{selectedAccountId && availableParentFolders.length === 0 && (
-									<p className="text-xs text-muted-foreground">
-										No folders found. File will be created at Drive root.
+							{selectedAccountId && (
+								<div className="space-y-2">
+									<p className="text-xs font-medium text-muted-foreground">
+										Parent Folder
 									</p>
-								)}
-							</div>
+									<Select value={parentFolderId} onValueChange={setParentFolderId}>
+										<SelectTrigger className="w-full">
+											<SelectValue placeholder="Drive Root" />
+										</SelectTrigger>
+										<SelectContent>
+											<SelectItem value="__root__">Drive Root</SelectItem>
+											{availableParentFolders.map((folder) => (
+												<SelectItem key={folder.folder_id} value={folder.folder_id}>
+													{folder.name}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+									{availableParentFolders.length === 0 && (
+										<p className="text-xs text-muted-foreground">
+											No folders found. File will be created at Drive root.
+										</p>
+									)}
+								</div>
+							)}
 							</>
 						)}
 					</div>
--- a/surfsense_web/components/tool-ui/linear/create-linear-issue.tsx
+++ b/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,39 +400,46 @@ 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"
-																		onClick={() =>
-																			setSelectedLabelIds((prev) =>
-																				isSelected
-																					? prev.filter((id) => id !== label.id)
-																					: [...prev, 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"
-																				: "opacity-50 hover:opacity-80"
-																		}`}
-																		style={{
-																			backgroundColor: `${label.color}33`,
-																			color: label.color,
-																		}}
+																		value={label.id}
+																		className="h-auto rounded-full border-0 px-0 py-0 shadow-none hover:bg-transparent data-[state=on]:bg-transparent"
 																	>
-																		<span
-																			className="size-1.5 rounded-full"
-																			style={{ backgroundColor: label.color }}
-																		/>
-																		{label.name}
-																	</button>
+																		<Badge
+																			className={`cursor-pointer rounded-full gap-1 border transition-all ${
+																				isSelected
+																					? "font-semibold opacity-100 shadow-sm"
+																					: "border-transparent opacity-55 hover:opacity-90"
+																			}`}
+																			style={{
+																				backgroundColor: isSelected
+																					? `${label.color}70`
+																					: `${label.color}28`,
+																				color: label.color,
+																				borderColor: isSelected
+																					? `${label.color}cc`
+																					: "transparent",
+																			}}
+																		>
+																			<span
+																				className="size-1.5 rounded-full"
+																				style={{ backgroundColor: label.color }}
+																			/>
+																			{label.name}
+																		</Badge>
+																	</ToggleGroupItem>
 																);
 															})}
-														</div>
+														</ToggleGroup>
 													</div>
 												)}
 											</>
--- a/surfsense_web/components/tool-ui/linear/update-linear-issue.tsx
+++ b/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
-														className="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium"
+													<Badge
+														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,40 +476,48 @@ 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"
-																onClick={() =>
-																	setEditedArgs({
-																		...editedArgs,
-																		labelIds: isSelected
-																			? 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"
-																		: "opacity-50 hover:opacity-80"
-																}`}
-																style={{
-																	backgroundColor: `${label.color}33`,
-																	color: label.color,
-																}}
+																value={label.id}
+																className="h-auto rounded-full border-0 px-0 py-0 shadow-none hover:bg-transparent data-[state=on]:bg-transparent"
 															>
-																<span
-																	className="size-1.5 rounded-full"
-																	style={{ backgroundColor: label.color }}
-																/>
-																{label.name}
-															</button>
+																<Badge
+																	className={`cursor-pointer rounded-full gap-1 border transition-all ${
+																		isSelected
+																			? "font-semibold opacity-100 shadow-sm"
+																			: "border-transparent opacity-55 hover:opacity-90"
+																	}`}
+																	style={{
+																		backgroundColor: isSelected
+																			? `${label.color}70`
+																			: `${label.color}28`,
+																		color: label.color,
+																		borderColor: isSelected
+																			? `${label.color}cc`
+																			: "transparent",
+																	}}
+																>
+																	<span
+																		className="size-1.5 rounded-full"
+																		style={{ backgroundColor: label.color }}
+																	/>
+																	{label.name}
+																</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>
 						)}
--- a/surfsense_web/components/tool-ui/notion/create-notion-page.tsx
+++ b/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>
--- a/surfsense_web/components/ui/toggle-group.tsx
+++ b/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 }
--- a/surfsense_web/components/ui/toggle.tsx
+++ b/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 }