From a63a48db446949bb70091be7485912e311401dc5 Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Wed, 1 Jul 2026 14:08:43 +0700
Subject: [PATCH] refactor(editor): reposition the view toggle and restyle its
 segments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/layouts/main/main-sidebar.tsx  |  8 +-
 .../components/shared/editor-view-mode.tsx    | 12 +--
 .../features/knowledges/knowledge-header.tsx  | 81 ++++++++++---------
 .../src/pages/settings/settings-prompt.tsx    | 26 +++---
 frontend/src/pages/templates/template.tsx     | 30 ++++---
 5 files changed, 84 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/layouts/main/main-sidebar.tsx b/frontend/src/components/layouts/main/main-sidebar.tsx
index b717337c..7a699047 100644
--- a/frontend/src/components/layouts/main/main-sidebar.tsx
+++ b/frontend/src/components/layouts/main/main-sidebar.tsx
@@ -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" />
diff --git a/frontend/src/components/shared/editor-view-mode.tsx b/frontend/src/components/shared/editor-view-mode.tsx
index aa602bca..e68cdb72 100644
--- a/frontend/src/components/shared/editor-view-mode.tsx
+++ b/frontend/src/components/shared/editor-view-mode.tsx
@@ -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>
diff --git a/frontend/src/features/knowledges/knowledge-header.tsx b/frontend/src/features/knowledges/knowledge-header.tsx
index e3ed9f8e..fa830014 100644
--- a/frontend/src/features/knowledges/knowledge-header.tsx
+++ b/frontend/src/features/knowledges/knowledge-header.tsx
@@ -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)}
diff --git a/frontend/src/pages/settings/settings-prompt.tsx b/frontend/src/pages/settings/settings-prompt.tsx
index 4d44385b..570fab67 100644
--- a/frontend/src/pages/settings/settings-prompt.tsx
+++ b/frontend/src/pages/settings/settings-prompt.tsx
@@ -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>
diff --git a/frontend/src/pages/templates/template.tsx b/frontend/src/pages/templates/template.tsx
index ce2de4f2..cee2a1dd 100644
--- a/frontend/src/pages/templates/template.tsx
+++ b/frontend/src/pages/templates/template.tsx
@@ -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)}