From 1afa7a1a5db5f2ae03ed8a8bbd849f7bd1585a42 Mon Sep 17 00:00:00 2001
From: ngc2207 <cfngc3109@gmail.com>
Date: Tue, 17 Dec 2024 18:42:50 +0800
Subject: [PATCH] feat(playground): add minimap checkbox component and
 integrate minimap functionality in code editor

---
 messages/en-US.json                           |  3 ++
 messages/zh-CN.json                           |  3 ++
 src/app/playground/components/code-editor.tsx | 33 ++++++++++---------
 .../components/minimap-checkbox.tsx           | 18 ++++++++++
 src/app/playground/layout.tsx                 |  2 ++
 src/store/codeEditorStore.ts                  |  4 +++
 6 files changed, 48 insertions(+), 15 deletions(-)
 create mode 100644 src/app/playground/components/minimap-checkbox.tsx

diff --git a/messages/en-US.json b/messages/en-US.json
index 40cd89e..aefa718 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -10,6 +10,9 @@
                 },
                 "ligaturesCheckbox": {
                     "label": "Font Ligatures"
+                },
+                "minimapCheckbox": {
+                    "label": "Open Minimap"
                 }
             }
         }
diff --git a/messages/zh-CN.json b/messages/zh-CN.json
index ed0d00e..7b5da3d 100644
--- a/messages/zh-CN.json
+++ b/messages/zh-CN.json
@@ -10,6 +10,9 @@
                 },
                 "ligaturesCheckbox": {
                     "label": "连字"
+                },
+                "minimapCheckbox": {
+                    "label": "打开缩略图"
                 }
             }
         }
diff --git a/src/app/playground/components/code-editor.tsx b/src/app/playground/components/code-editor.tsx
index 4bf03f3..fe98e03 100644
--- a/src/app/playground/components/code-editor.tsx
+++ b/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,
-      fontFamily: "Fira Code Variable, monospace",
-      tabSize: 4,
-      showFoldingControls: "always" as const,
-      fontLigatures: isLigature,
-      automaticLayout: true,
-      guides: {
-        bracketPairs: true,
-        indentation: true,
-      },
-    }),
-    [isLigature]
+    () =>
+      ({
+        minimap: { enabled: isMinimap, size: "fit" },
+        fontSize: 14,
+        fontFamily: "Fira Code Variable, monospace",
+        tabSize: 4,
+        showFoldingControls: "always",
+        fontLigatures: isLigature,
+        automaticLayout: true,
+        autoIndent: "full",
+        guides: {
+          bracketPairs: true,
+          indentation: true,
+        },
+      } as editor.IStandaloneEditorConstructionOptions),
+    [isMinimap, isLigature]
   );
 
   const handleEditorMount = async (
diff --git a/src/app/playground/components/minimap-checkbox.tsx b/src/app/playground/components/minimap-checkbox.tsx
new file mode 100644
index 0000000..3efb56b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/playground/layout.tsx b/src/app/playground/layout.tsx
index 42500d3..f569be4 100644
--- a/src/app/playground/layout.tsx
+++ b/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 />
diff --git a/src/store/codeEditorStore.ts b/src/store/codeEditorStore.ts
index eec0b54..13ab4b0 100644
--- a/src/store/codeEditorStore.ts
+++ b/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 }),
 }));