mirror of
https://github.com/vxcontrol/pentagi.git
synced 2026-08-28 14:06:36 +00:00
refactor(editor): reposition the view toggle and restyle its segments
Move the "View" row to the bottom of each actions dropdown — directly above Delete when a Delete row exists, otherwise last. Swap the segment icons to SquareMenu (rich editor) and Type (raw source), and give the segmented control a dark-friendly treatment (bg-background track with a bg-card active segment, matching the System/Human prompt tabs) so the active segment reads as raised on dark. Apply the same treatment to the Theme picker in the sidebar for consistency. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Sergey Kozyrenko
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
15d8026180
commit
a63a48db44
@@ -332,24 +332,24 @@ export function MainSidebar() {
|
||||
onValueChange={(value) => setTheme(value as Theme)}
|
||||
value={theme || 'system'}
|
||||
>
|
||||
<TabsList className="h-7 p-0.5">
|
||||
<TabsList className="bg-background h-7 p-0.5">
|
||||
<TabsTrigger
|
||||
aria-label="System theme"
|
||||
className="h-6 px-2"
|
||||
className="data-[state=active]:bg-card h-6 px-2"
|
||||
value="system"
|
||||
>
|
||||
<Monitor className="size-4" />
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
aria-label="Light theme"
|
||||
className="h-6 px-2"
|
||||
className="data-[state=active]:bg-card h-6 px-2"
|
||||
value="light"
|
||||
>
|
||||
<Sun className="size-4" />
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
aria-label="Dark theme"
|
||||
className="h-6 px-2"
|
||||
className="data-[state=active]:bg-card h-6 px-2"
|
||||
value="dark"
|
||||
>
|
||||
<Moon className="size-4" />
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Code, Eye } from 'lucide-react';
|
||||
import { SquareMenu, Type } from 'lucide-react';
|
||||
|
||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
|
||||
@@ -19,21 +19,21 @@ export function EditorViewModeToggle({ className, mode, onModeChange, rawTooltip
|
||||
onValueChange={(value) => onModeChange(value as EditorViewMode)}
|
||||
value={mode}
|
||||
>
|
||||
<TabsList className="h-7 p-0.5">
|
||||
<TabsList className="bg-background h-7 p-0.5">
|
||||
<TabsTrigger
|
||||
aria-label="Rich editor"
|
||||
className="h-6 px-2"
|
||||
className="data-[state=active]:bg-card h-6 px-2"
|
||||
value="rich"
|
||||
>
|
||||
<Eye className="size-4" />
|
||||
<SquareMenu className="size-4" />
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
aria-label="Raw source"
|
||||
className="h-6 px-2"
|
||||
className="data-[state=active]:bg-card h-6 px-2"
|
||||
title={rawTooltip}
|
||||
value="raw"
|
||||
>
|
||||
<Code className="size-4" />
|
||||
<Type className="size-4" />
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
|
||||
@@ -101,6 +101,8 @@ export function KnowledgeHeader({
|
||||
// the cache, and the form picks up the new value separately.
|
||||
const knowledgeName = knowledge?.question ?? null;
|
||||
const canShowActions = !isNew && !!knowledge;
|
||||
const hasAnonymizeRow = isMobile && canAnonymize;
|
||||
const hasNavRow = isMobile && knowledgeNav.total > 0;
|
||||
|
||||
const {
|
||||
handleDropdownCloseAutoFocus,
|
||||
@@ -232,29 +234,27 @@ export function KnowledgeHeader({
|
||||
className="min-w-24"
|
||||
onCloseAutoFocus={handleDropdownCloseAutoFocus}
|
||||
>
|
||||
{isMobile && canAnonymize && (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
disabled={isAnonymizeDisabled}
|
||||
onClick={onAnonymize}
|
||||
>
|
||||
{isAnonymizing ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Anonymizing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<HatGlasses className="size-4" />
|
||||
Anonymize
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
{(canShowActions || onModeChange) && <DropdownMenuSeparator />}
|
||||
</>
|
||||
{hasAnonymizeRow && (
|
||||
<DropdownMenuItem
|
||||
disabled={isAnonymizeDisabled}
|
||||
onClick={onAnonymize}
|
||||
>
|
||||
{isAnonymizing ? (
|
||||
<>
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
Anonymizing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<HatGlasses className="size-4" />
|
||||
Anonymize
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{isMobile && knowledgeNav.total > 0 && (
|
||||
{hasNavRow && (
|
||||
<>
|
||||
{hasAnonymizeRow && <DropdownMenuSeparator />}
|
||||
<DropdownMenuItem
|
||||
className="cursor-default hover:bg-transparent focus:bg-transparent"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
@@ -269,31 +269,38 @@ export function KnowledgeHeader({
|
||||
/>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
{onModeChange ? (
|
||||
<DropdownMenuItem
|
||||
className="gap-4"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
View
|
||||
<EditorViewModeToggle
|
||||
className="-my-1.5 -mr-2 ml-auto"
|
||||
mode={viewMode}
|
||||
onModeChange={onModeChange}
|
||||
rawTooltip="Edit the raw markdown"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
{canShowActions && (
|
||||
<>
|
||||
{onModeChange ? <DropdownMenuSeparator /> : null}
|
||||
{(hasAnonymizeRow || hasNavRow) && <DropdownMenuSeparator />}
|
||||
<DropdownMenuItem onClick={handleRenameStart}>
|
||||
<Pencil className="size-3" />
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
{onModeChange ? (
|
||||
<>
|
||||
{!canShowActions && (hasAnonymizeRow || hasNavRow) && <DropdownMenuSeparator />}
|
||||
<DropdownMenuItem
|
||||
className="gap-4"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
View
|
||||
<EditorViewModeToggle
|
||||
className="-my-1.5 -mr-2 ml-auto"
|
||||
mode={viewMode}
|
||||
onModeChange={onModeChange}
|
||||
rawTooltip="Edit the raw markdown"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
) : null}
|
||||
{canShowActions && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
disabled={isDeleting}
|
||||
onClick={() => setIsDeleteDialogOpen(true)}
|
||||
|
||||
@@ -858,21 +858,8 @@ function SettingsPrompt() {
|
||||
align="end"
|
||||
className="min-w-24"
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className="gap-4"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
View
|
||||
<EditorViewModeToggle
|
||||
className="-my-1.5 -mr-2 ml-auto"
|
||||
mode={viewMode}
|
||||
onModeChange={setViewMode}
|
||||
rawTooltip="Edit the raw prompt template"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
{hasOverride && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={() => setIsDiffDialogOpen(true)}>
|
||||
<FileDiff className="size-4" />
|
||||
Diff
|
||||
@@ -888,8 +875,21 @@ function SettingsPrompt() {
|
||||
)}
|
||||
{isDeleteLoading ? 'Resetting...' : 'Reset'}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
className="gap-4"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
View
|
||||
<EditorViewModeToggle
|
||||
className="-my-1.5 -mr-2 ml-auto"
|
||||
mode={viewMode}
|
||||
onModeChange={setViewMode}
|
||||
rawTooltip="Edit the raw prompt template"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</AppHeaderActions>
|
||||
|
||||
@@ -495,21 +495,8 @@ function Template() {
|
||||
className="min-w-24"
|
||||
onCloseAutoFocus={handleDropdownCloseAutoFocus}
|
||||
>
|
||||
<DropdownMenuItem
|
||||
className="gap-4"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
View
|
||||
<EditorViewModeToggle
|
||||
className="-my-1.5 -mr-2 ml-auto"
|
||||
mode={viewMode}
|
||||
onModeChange={setViewMode}
|
||||
rawTooltip="Edit the raw template"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
{canShowActions && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
{isMobile && templateNav.total > 0 && (
|
||||
<>
|
||||
<DropdownMenuItem
|
||||
@@ -534,6 +521,23 @@ function Template() {
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
</>
|
||||
)}
|
||||
<DropdownMenuItem
|
||||
className="gap-4"
|
||||
onSelect={(event) => event.preventDefault()}
|
||||
>
|
||||
View
|
||||
<EditorViewModeToggle
|
||||
className="-my-1.5 -mr-2 ml-auto"
|
||||
mode={viewMode}
|
||||
onModeChange={setViewMode}
|
||||
rawTooltip="Edit the raw template"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
{canShowActions && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
disabled={isDeleting}
|
||||
onClick={() => setIsDeleteDialogOpen(true)}
|
||||
|
||||
Reference in New Issue
Block a user