github/deer-flow
1
0
Fork 0
mirror of https://github.com/bytedance/deer-flow.git synced 2026-06-09 17:12:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): restructure Memory settings toolbar into two rows (#3433)

Browse Source 
The search input, filter tabs, and four action buttons were crammed into
a single horizontal row, which squeezed the search box into an unusable
sliver and truncated the "Summaries" filter tab to "Summarie".

Split the toolbar into two rows: search + filter tabs on the first,
actions on the second. The search input now keeps a usable min width,
filter tabs use whitespace-nowrap so they never truncate, and the
destructive "Clear all memory" button is pushed to the far right
(ml-auto) to separate it from the constructive actions.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
DanielWalnut 2026-06-08 19:17:14 +08:00 committed by GitHub
parent 799bef6d9d
commit 1651d1f1f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/workspace/settings/memory-settings-page.tsx
View File

@ -555,13 +555,14 @@ export function MemorySettingsPage() {
</div>
) : null}
<div className="flex min-w-0 flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
<div className="flex min-w-0 flex-1 flex-col gap-3 sm:flex-row sm:items-center">
<div className="flex flex-col gap-3">
{/* Row 1: search + filter tabs */}
<div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center">
<Input
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder={searchPlaceholder}
className="sm:max-w-xs"
className="min-w-0 flex-1 sm:max-w-md"
/>
<ToggleGroup
type="single"
@ -570,16 +571,25 @@ export function MemorySettingsPage() {
if (value) setFilter(value as MemoryViewFilter);
}}
variant="outline"
className="shrink-0 self-start sm:ml-auto sm:self-auto"
>
<ToggleGroupItem value="all">{filterAll}</ToggleGroupItem>
<ToggleGroupItem value="facts">{filterFacts}</ToggleGroupItem>
<ToggleGroupItem value="summaries">
<ToggleGroupItem value="all" className="whitespace-nowrap">
{filterAll}
</ToggleGroupItem>
<ToggleGroupItem value="facts" className="whitespace-nowrap">
{filterFacts}
</ToggleGroupItem>
<ToggleGroupItem
value="summaries"
className="whitespace-nowrap"
>
{filterSummaries}
</ToggleGroupItem>
</ToggleGroup>
</div>
<div className="flex min-w-0 flex-wrap gap-2 xl:justify-end">
{/* Row 2: actions — constructive group on the left, destructive separated to the right */}
<div className="flex flex-wrap items-center gap-2">
<input
ref={fileInputRef}
type="file"
@ -609,6 +619,7 @@ export function MemorySettingsPage() {
</Button>
<Button
variant="destructive"
className="ml-auto"
onClick={() => setClearDialogOpen(true)}
disabled={clearMemory.isPending}
>