fix: polish compact workspace controls

frontend-web/src/pages/ChatsPage.tsx

@@ -15,6 +15,10 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { ImportConversationsDialog } from "@/components/workspace/thread-share-dialogs";
+import {
+  LayoutModeSwitcher,
+  ThemeSwitcher,
+} from "@/components/workspace/appearance-controls";
 import {
   WorkspaceBody,
   WorkspaceContainer,
@@ -40,7 +44,11 @@ import { cn } from "@/lib/utils";
 
 const PAGE_SIZE = 20;
 
-export default function ChatsPage() {
+export default function ChatsPage({
+  compactChrome = false,
+}: {
+  compactChrome?: boolean;
+}) {
   const pathOfThread = usePathOfThread();
   const { t } = useI18n();
   const { toggle: togglePin } = useToggleThreadPin();
@@ -171,7 +179,16 @@ export default function ChatsPage() {
 
   return (
     <WorkspaceContainer>
-      <WorkspaceHeader></WorkspaceHeader>
+      <WorkspaceHeader
+        rightActions={
+          compactChrome ? (
+            <div className="flex items-center gap-1">
+              <ThemeSwitcher tone="content" />
+              <LayoutModeSwitcher tone="content" />
+            </div>
+          ) : null
+        }
+      />
       <WorkspaceBody>
         <div className="flex size-full flex-col">
           <header className="flex shrink-0 flex-col items-center gap-3 pt-8">