chore: import clean Agent Desk snapshot (6/7)

web/components/content-editor/editor-mode-switch.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { ChevronDownIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { useI18n } from "@/i18n/provider"
+
+import {
+  CONTENT_MODE_OPTIONS,
+  type ContentMode,
+} from "./types"
+
+type EditorModeSwitchProps = {
+  value: ContentMode
+  allowedModes?: ReadonlyArray<ContentMode>
+  disabled?: boolean
+  onChange: (nextMode: ContentMode) => void
+}
+
+export function EditorModeSwitch({
+  value,
+  allowedModes = CONTENT_MODE_OPTIONS,
+  disabled = false,
+  onChange,
+}: EditorModeSwitchProps) {
+  const t = useI18n()
+  const MODE_OPTIONS: Array<{ value: ContentMode; label: string }> = [
+    { value: "markdown", label: t("editor.modeLabelMarkdown") },
+    { value: "html", label: t("editor.modeLabelRichText") },
+  ]
+  const options = MODE_OPTIONS.filter((option) => allowedModes.includes(option.value))
+  const activeLabel = options.find((option) => option.value === value)?.label ?? value
+
+  if (options.length <= 1) {
+    return null
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        render={<Button type="button" variant="outline" size="sm" className="mx-0.5 h-7 min-w-24 justify-between gap-2 bg-background px-2 text-xs font-medium shadow-none" />}
+        disabled={disabled}
+        aria-label={t("editor.modeSwitchLabel")}
+      >
+        <span>{activeLabel}</span>
+        <ChevronDownIcon className="size-3.5 text-muted-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-32">
+        <DropdownMenuRadioGroup
+          value={value}
+          onValueChange={(nextMode) => {
+            if (nextMode !== value) {
+              onChange(nextMode as ContentMode)
+            }
+          }}
+        >
+          {options.map((option) => (
+            <DropdownMenuRadioItem key={option.value} value={option.value} disabled={disabled}>
+              {option.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}