feat(playground): add minimap checkbox component and integrate minimap functionality in code editor

messages/en-US.json

@@ -10,6 +10,9 @@
                 },
                 "ligaturesCheckbox": {
                     "label": "Font Ligatures"
+                },
+                "minimapCheckbox": {
+                    "label": "Open Minimap"
                 }
             }
         }

messages/zh-CN.json

@@ -10,6 +10,9 @@
                 },
                 "ligaturesCheckbox": {
                     "label": "连字"
+                },
+                "minimapCheckbox": {
+                    "label": "打开缩略图"
                 }
             }
         }

src/app/playground/components/code-editor.tsx

@@ -35,7 +35,8 @@ const ADDITIONAL_LANGUAGES = [
 export function CodeEditor() {
   const monacoRef = useRef<Monaco | null>(null);
   const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
-  const { lang, path, theme, value, isLigature } = useCodeEditorStore();
+  const { lang, path, theme, value, isMinimap, isLigature } =
+    useCodeEditorStore();
 
   useEffect(() => {
     if (monacoRef.current && editorRef.current) {
@@ -44,20 +45,22 @@ export function CodeEditor() {
   }, [theme]);
 
   const options = useMemo(
-    () => ({
+    () =>
-      minimap: { enabled: false },
+      ({
-      fontSize: 14,
+        minimap: { enabled: isMinimap, size: "fit" },
-      fontFamily: "Fira Code Variable, monospace",
+        fontSize: 14,
-      tabSize: 4,
+        fontFamily: "Fira Code Variable, monospace",
-      showFoldingControls: "always" as const,
+        tabSize: 4,
-      fontLigatures: isLigature,
+        showFoldingControls: "always",
-      automaticLayout: true,
+        fontLigatures: isLigature,
-      guides: {
+        automaticLayout: true,
-        bracketPairs: true,
+        autoIndent: "full",
-        indentation: true,
+        guides: {
-      },
+          bracketPairs: true,
-    }),
+          indentation: true,
-    [isLigature]
+        },
+      } as editor.IStandaloneEditorConstructionOptions),
+    [isMinimap, isLigature]
   );
 
   const handleEditorMount = async (

src/app/playground/components/minimap-checkbox.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useCodeEditorStore } from "@/store/codeEditorStore";
+
+export default function MinimapCheckbox() {
+  const t = useTranslations("Page.PlaygroundPage.Components.minimapCheckbox");
+  const { setIsMinimap } = useCodeEditorStore();
+
+  return (
+    <div className="flex items-center gap-2">
+      <Checkbox onCheckedChange={setIsMinimap} />
+      <Label>{t("label")}</Label>
+    </div>
+  );
+}

src/app/playground/layout.tsx

@@ -10,6 +10,7 @@ import { ModeSwitcher } from "@/components/mode-switcher";
 import LanguageSwitcher from "@/components/language-switcher";
 import LigaturesCheckbox from "./components/ligatures-checkbox";
 import { PlaygroundSidebar } from "@/app/playground/components/playground-sidebar";
+import MinimapCheckbox from "./components/minimap-checkbox";
 
 export default function PlaygroundLayout({
   children,
@@ -26,6 +27,7 @@ export default function PlaygroundLayout({
               <Separator orientation="vertical" className="mr-2 h-4" />
               <ThemeSelector />
               <LigaturesCheckbox />
+              <MinimapCheckbox />
             </div>
             <div className="ml-auto px-3">
               <LanguageSwitcher />

src/store/codeEditorStore.ts

@@ -5,11 +5,13 @@ interface CodeEditorState {
   path: string;
   theme: string;
   value: string;
+  isMinimap: boolean;
   isLigature: boolean;
   setLang: (lang: string) => void;
   setPath: (path: string) => void;
   setTheme: (theme: string) => void;
   setValue: (value: string) => void;
+  setIsMinimap: (isMinimap: boolean) => void;
   setIsLigature: (isLigature: boolean) => void;
 }
 
@@ -18,10 +20,12 @@ export const useCodeEditorStore = create<CodeEditorState>((set) => ({
   path: "",
   theme: "one-dark-pro",
   value: "",
+  isMinimap: false,
   isLigature: false,
   setLang: (lang) => set({ lang }),
   setPath: (path) => set({ path }),
   setTheme: (theme) => set({ theme }),
   setValue: (value) => set({ value }),
+  setIsMinimap: (isMinimap) => set({ isMinimap }),
   setIsLigature: (isLigature) => set({ isLigature }),
 }));