External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): show icon + text labels on modality filter tabs

Browse Source
This commit is contained in:
SnapOtter
2026-06-13 15:39:32 +08:00
parent cc06c802c1
commit 888d243a65
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/layout/tool-panel.tsx
+9 -8
View File
@@ -66,37 +66,38 @@ export function ToolPanel() {
return ( return (
<div className="w-72 border-r border-border bg-background overflow-y-auto flex flex-col shrink-0"> <div className="w-72 border-r border-border bg-background overflow-y-auto flex flex-col shrink-0">
<div className="p-3 sticky top-0 bg-background z-10"> <div className="p-3 sticky top-0 bg-background z-10">
{/* Modality filter tabs -- icon-only, docs+files merged */} {/* Modality filter tabs -- icons + text, docs+files merged */}
<div className="flex items-center gap-1 mb-2"> <div className="flex flex-wrap gap-1 mb-2">
<button <button
type="button" type="button"
onClick={() => setSelectedModality("all")} onClick={() => setSelectedModality("all")}
title="All tools"
className={cn( className={cn(
"p-1.5 rounded-md transition-colors", "flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors",
selectedModality === "all" selectedModality === "all"
? "bg-primary/10 text-primary" ? "bg-primary/10 text-primary"
: "text-muted-foreground hover:text-foreground hover:bg-muted", : "text-muted-foreground hover:text-foreground hover:bg-muted",
)} )}
> >
<LayoutGrid className="h-4 w-4" /> <LayoutGrid className="h-3.5 w-3.5" />
<span>All</span>
</button> </button>
{TAB_MODALITIES.map((m) => { {TAB_MODALITIES.map((m) => {
const Icon = ICON_MAP[m.icon] as React.ComponentType<{ className?: string }>; const Icon = ICON_MAP[m.icon] as React.ComponentType<{ className?: string }>;
const isActive = selectedModality === m.id; const isActive = selectedModality === m.id;
const label = m.id === "document" ? "Docs" : m.name;
return ( return (
<button <button
key={m.id} key={m.id}
type="button" type="button"
onClick={() => setSelectedModality(m.id as ModalityFilter)} onClick={() => setSelectedModality(m.id as ModalityFilter)}
title={m.id === "document" ? "Documents & Files" : m.name}
className={cn( className={cn(
"p-1.5 rounded-md transition-colors", "flex items-center gap-1 px-2 py-1 rounded-md text-xs font-medium transition-colors",
!isActive && "text-muted-foreground hover:text-foreground hover:bg-muted", !isActive && "text-muted-foreground hover:text-foreground hover:bg-muted",
)} )}
style={isActive ? { backgroundColor: `${m.color}20`, color: m.color } : undefined} style={isActive ? { backgroundColor: `${m.color}20`, color: m.color } : undefined}
> >
{Icon && <Icon className="h-4 w-4" />} {Icon && <Icon className="h-3.5 w-3.5" />}
<span>{label}</span>
</button> </button>
); );
})} })}