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): stronger modality section visual hierarchy in tool catalog

Browse Source
This commit is contained in:
SnapOtter
2026-06-13 15:00:47 +08:00
parent 22cccd46c4
commit 3db1b3bafd
2 changed files with 140 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/layout/tool-panel.tsx
+16 -7
View File
@@ -54,17 +54,26 @@ export function ToolPanel() {
</div>
<div className="px-3 pb-4 flex-1">
{MODALITIES.filter((m) => m.id !== "file" && groupedByModality.has(m.id)).map(
(modality) => {
(modality, idx, arr) => {
const ModalityIcon = ICON_MAP[modality.icon] as React.ComponentType<{
className?: string;
}>;
const categoryMap = groupedByModality.get(modality.id);
if (!categoryMap) return null;
const isLast = idx === arr.length - 1;
return (
<div key={modality.id} className="mb-5">
<div className="flex items-center gap-1.5 mb-2">
{ModalityIcon && <ModalityIcon className="h-4 w-4 text-foreground/70 shrink-0" />}
<h2 className="text-xs font-bold uppercase text-foreground/70 tracking-wider">
<div key={modality.id} className={isLast ? "" : "mb-2"}>
{idx > 0 && <hr className="border-border mb-4" />}
<div
className="flex items-center gap-2 mt-4 mb-3 pl-2.5 border-l-[3px] rounded-sm"
style={{ borderColor: modality.color }}
>
{ModalityIcon && (
<span className="shrink-0" style={{ color: modality.color }}>
<ModalityIcon className="h-4.5 w-4.5" />
</span>
)}
<h2 className="text-sm font-semibold text-foreground tracking-wide">
{getModalityName(
t,
modality.id,
@@ -73,8 +82,8 @@ export function ToolPanel() {
</h2>
</div>
{CATEGORIES.filter((cat) => categoryMap.has(cat.id)).map((category) => (
<div key={category.id} className="mb-4">
<h3 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-2">
<div key={category.id} className="mb-3">
<h3 className="text-xs font-medium text-muted-foreground tracking-wider mb-1.5 pl-1">
{getCategoryName(t, category.id, category.name)}
</h3>
<div className="space-y-0.5">