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 (
<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">
{/* Modality filter tabs -- icon-only, docs+files merged */}
<div className="flex items-center gap-1 mb-2">
{/* Modality filter tabs -- icons + text, docs+files merged */}
<div className="flex flex-wrap gap-1 mb-2">
<button
type="button"
onClick={() => setSelectedModality("all")}
title="All tools"
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"
? "bg-primary/10 text-primary"
: "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>
{TAB_MODALITIES.map((m) => {
const Icon = ICON_MAP[m.icon] as React.ComponentType<{ className?: string }>;
const isActive = selectedModality === m.id;
const label = m.id === "document" ? "Docs" : m.name;
return (
<button
key={m.id}
type="button"
onClick={() => setSelectedModality(m.id as ModalityFilter)}
title={m.id === "document" ? "Documents & Files" : m.name}
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",
)}
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>
);
})}