feat: Add visual keymap editor to workbench

src/assets/locales/ja.json

@@ -479,5 +479,16 @@
   "Completed! Great job!": "完了です！素晴らしい！",
   "Practice Category": "練習カテゴリー",
   "Are you sure you want to reset your typing statistics? This action cannot be undone.": "統計情報をリセットしてもよろしいですか？この操作は元に戻せません。",
-  "Sentence": "文"
+  "Sentence": "文",
+  "Code Editor": "コードエディタ",
+  "Visual Editor": "ビジュアルエディタ",
+  "Layer": "レイヤー",
+  "Add layer": "レイヤーを追加",
+  "Delete layer": "レイヤーを削除",
+  "No keyboard.json found in this project.": "このプロジェクトに keyboard.json が見つかりません。",
+  "Please generate files first to use the visual editor.": "ビジュアルエディタを使用するには、まずファイルを生成してください。",
+  "Could not parse keyboard.json layout.": "keyboard.json のレイアウトを解析できませんでした。",
+  "Could not parse keymap.c file.": "keymap.c ファイルを解析できませんでした。",
+  "Please use the Code Editor to fix syntax errors.": "コードエディタを使用して構文エラーを修正してください。",
+  "\"{{name}}\" is a custom keycode defined in the source code. It cannot be edited in the Visual Editor.": "\"{{name}}\" はソースコード内で定義されたカスタムキーコードです。ビジュアルエディタでは編集できません。"
 }

src/components/common/customkey/TabKey.tsx

@@ -107,9 +107,9 @@
   }
 
   private createMacroBuffer(): IMacroBuffer {
-    const macroBufferBytes = this.props.macroBufferBytes!;
-    const macroMaxBufferSize = this.props.macroMaxBufferSize!;
-    const macroMaxCount = this.props.macroMaxCount!;
+    const macroBufferBytes = this.props.macroBufferBytes ?? new Uint8Array(0);
+    const macroMaxBufferSize = this.props.macroMaxBufferSize ?? 0;
+    const macroMaxCount = this.props.macroMaxCount ?? 0;
     const macroBuffer: IMacroBuffer = new MacroBuffer(
       macroBufferBytes,
       macroMaxCount,
@@ -128,7 +128,7 @@
     const macroBuffer = this.createMacroBuffer();
     const keymaps = [
       ...KeyCategory.basic(labelLang),
       ...KeyCategory.functions(
         labelLang,
         this.props.customKeycodes
       ),

src/components/workbench/breadboard/Breadboard.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
 import {
   BreadboardActionsType,
   BreadboardStateType,
@@ -47,6 +47,7 @@
 import { useUserPurchaseHook } from './UserPurchaseHook';
 import LayoutPreviewDialog from '../dialogs/LayoutPreviewDialog';
 import KeyboardJsonEditorDialog from '../dialogs/KeyboardJsonEditorDialog';
+import VisualKeymapEditor from '../visualeditor/VisualKeymapEditor';
 
 type OwnProps = {};
 type BreadboardProps = OwnProps &
@@ -362,23 +363,12 @@
                 flexDirection: 'column',
               }}
             >
-              <WorkbenchSourceCodeEditor
+              <EditorWithVisualTab
                 project={props.currentProject}
-                file={
-                  props.currentProject === undefined
-                    ? undefined
-                    : props.selectedFile === undefined
-                      ? undefined
-                      : props.selectedFile.fileType === 'keyboard'
-                        ? props.currentProject.keyboardFiles.find(
-                            (file) => file.id === props.selectedFile!.fileId
-                          )
-                        : props.currentProject.keymapFiles.find(
-                            (file) => file.id === props.selectedFile!.fileId
-                          )
-                }
+                selectedFile={props.selectedFile}
                 onChangeCode={onChangeCode}
-                fontSize={editorFontSize}
+                onUpdateFile={props.updateWorkbenchProjectFile!}
+                editorFontSize={editorFontSize}
                 onFontSizeChange={setEditorFontSize}
               />
             </Paper>
@@ -567,12 +557,153 @@
   );
 }
 
+type EditorWithVisualTabProps = {
+  project: IWorkbenchProject | undefined;
+  selectedFile:
+    | { fileId: string; fileType: IBuildableFirmwareFileType }
+    | undefined;
+  onChangeCode: (file: IWorkbenchProjectFile, code: string) => void;
+  // eslint-disable-next-line no-unused-vars
+  onUpdateFile: (
+    project: IWorkbenchProject,
+    file: IWorkbenchProjectFile,
+    path: string,
+    code: string,
+    refreshCurrentProject: boolean
+  ) => void;
+  editorFontSize: number;
+  onFontSizeChange: (size: number) => void;
+};
+
+function EditorWithVisualTab(props: EditorWithVisualTabProps) {
+  const [editorTab, setEditorTab] = useState(0);
+
+  const file = useMemo(() => {
+    if (props.project === undefined || props.selectedFile === undefined) {
+      return undefined;
+    }
+    return props.selectedFile.fileType === 'keyboard'
+      ? props.project.keyboardFiles.find(
+          (f) => f.id === props.selectedFile!.fileId
+        )
+      : props.project.keymapFiles.find(
+          (f) => f.id === props.selectedFile!.fileId
+        );
+  }, [props.project, props.selectedFile]);
+
+  const isKeymapCFile =
+    props.selectedFile?.fileType === 'keymap' &&
+    file?.path?.endsWith('.c');
+
+  const keyboardJsonCode = useMemo(() => {
+    if (!props.project) return undefined;
+    const kbFile = props.project.keyboardFiles.find(
+      (f) => f.path === 'keyboard.json'
+    );
+    return kbFile?.code;
+  }, [props.project]);
+
+  // Reset to Code Editor tab when file changes or is not a keymap
+  useEffect(() => {
+    if (!isKeymapCFile) {
+      setEditorTab(0);
+    }
+  }, [isKeymapCFile, file?.id]);
+
+  const handleVisualEditorCodeChange = useCallback(
+    (code: string) => {
+      if (file && props.project) {
+        // Update the file with refreshCurrentProject=true so the Redux state
+        // reflects the change immediately (needed for Code Editor tab sync).
+        props.onUpdateFile(props.project, file, file.path, code, true);
+      }
+    },
+    [file, props.project, props.onUpdateFile]
+  );
+
+  return (
+    <>
+      {isKeymapCFile && (
+        <Box
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            borderBottom: 1,
+            borderColor: 'divider',
+          }}
+        >
+          <Tabs
+            value={editorTab}
+            onChange={(_, newValue) => setEditorTab(newValue)}
+            sx={{ minHeight: 32, flexGrow: 1 }}
+          >
+            <Tab
+              label={t('Code Editor')}
+              sx={{ minHeight: 32, py: 0.5, textTransform: 'none' }}
+            />
+            <Tab
+              label={t('Visual Editor')}
+              sx={{ minHeight: 32, py: 0.5, textTransform: 'none' }}
+            />
+          </Tabs>
+          {editorTab === 0 && (
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, pr: 1 }}>
+              <IconButton
+                size="small"
+                onClick={() =>
+                  props.onFontSizeChange(Math.max(8, props.editorFontSize - 2))
+                }
+              >
+                <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                  A-
+                </Typography>
+              </IconButton>
+              <Typography variant="caption" color="text.secondary">
+                {props.editorFontSize}px
+              </Typography>
+              <IconButton
+                size="small"
+                onClick={() =>
+                  props.onFontSizeChange(Math.min(32, props.editorFontSize + 2))
+                }
+              >
+                <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                  A+
+                </Typography>
+              </IconButton>
+            </Box>
+          )}
+        </Box>
+      )}
+      {editorTab === 0 || !isKeymapCFile ? (
+        <WorkbenchSourceCodeEditor
+          project={props.project}
+          file={file}
+          onChangeCode={props.onChangeCode}
+          fontSize={props.editorFontSize}
+          onFontSizeChange={props.onFontSizeChange}
+          showFontSizeControls={!isKeymapCFile}
+        />
+      ) : (
+        file && (
+          <VisualKeymapEditor
+            keymapCode={file.code}
+            keyboardJsonCode={keyboardJsonCode}
+            onChangeCode={handleVisualEditorCodeChange}
+          />
+        )
+      )}
+    </>
+  );
+}
+
 type WorkbenchSourceCodeEditorProps = {
   project: IWorkbenchProject | undefined;
   file: IWorkbenchProjectFile | undefined;
   onChangeCode: (file: IWorkbenchProjectFile, code: string) => void;
   fontSize: number;
   onFontSizeChange: (size: number) => void;
+  showFontSizeControls?: boolean;
 };
 
 function WorkbenchSourceCodeEditor(props: WorkbenchSourceCodeEditorProps) {
@@ -649,42 +780,45 @@
   };
 
   if (props.project !== undefined && props.file !== undefined) {
+    const showControls = props.showFontSizeControls !== false;
     return (
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            padding: '2px 8px',
-            gap: 4,
-            borderBottom: '1px solid #e0e0e0',
-          }}
-        >
-          <IconButton
-            size="small"
-            onClick={() =>
-              props.onFontSizeChange(Math.max(8, props.fontSize - 2))
-            }
-          >
-            <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
-              A-
-            </Typography>
-          </IconButton>
-          <Typography variant="caption" color="text.secondary">
-            {props.fontSize}px
-          </Typography>
-          <IconButton
-            size="small"
-            onClick={() =>
-              props.onFontSizeChange(Math.min(32, props.fontSize + 2))
-            }
+        {showControls && (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'flex-end',
+              alignItems: 'center',
+              padding: '2px 8px',
+              gap: 4,
+              borderBottom: '1px solid #e0e0e0',
+            }}
           >
-            <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
-              A+
+            <IconButton
+              size="small"
+              onClick={() =>
+                props.onFontSizeChange(Math.max(8, props.fontSize - 2))
+              }
+            >
+              <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                A-
+              </Typography>
+            </IconButton>
+            <Typography variant="caption" color="text.secondary">
+              {props.fontSize}px
             </Typography>
-          </IconButton>
-        </div>
+            <IconButton
+              size="small"
+              onClick={() =>
+                props.onFontSizeChange(Math.min(32, props.fontSize + 2))
+              }
+            >
+              <Typography variant="caption" sx={{ fontWeight: 'bold' }}>
+                A+
+              </Typography>
+            </IconButton>
+          </div>
+        )}
         <div style={{ flex: 1 }}>
           <Editor
             language={getLanguage(props.file.path)}

src/components/workbench/visualeditor/LayerSelector.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Box, IconButton, Tab, Tabs, Tooltip } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { t } from 'i18next';
+
+type LayerSelectorProps = {
+  layerCount: number;
+  selectedLayer: number;
+  // eslint-disable-next-line no-unused-vars
+  onSelectLayer: (layer: number) => void;
+  onAddLayer: () => void;
+  onDeleteLayer: () => void;
+};
+
+export default function LayerSelector({
+  layerCount,
+  selectedLayer,
+  onSelectLayer,
+  onAddLayer,
+  onDeleteLayer,
+}: LayerSelectorProps) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        borderBottom: 1,
+        borderColor: 'divider',
+      }}
+    >
+      <Tabs
+        value={selectedLayer}
+        onChange={(_, newValue) => onSelectLayer(newValue)}
+        variant="scrollable"
+        scrollButtons="auto"
+        sx={{ flexGrow: 1, minHeight: 36 }}
+      >
+        {Array.from({ length: layerCount }, (_, i) => (
+          <Tab
+            key={i}
+            label={`${t('Layer')} ${i}`}
+            sx={{ minHeight: 36, py: 0.5, textTransform: 'none' }}
+          />
+        ))}
+      </Tabs>
+      <Tooltip title={t('Add layer')}>
+        <IconButton size="small" onClick={onAddLayer}>
+          <AddIcon fontSize="small" />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title={t('Delete layer')}>
+        <span>
+          <IconButton
+            size="small"
+            onClick={onDeleteLayer}
+            disabled={layerCount <= 1}
+          >
+            <DeleteIcon fontSize="small" />
+          </IconButton>
+        </span>
+      </Tooltip>
+    </Box>
+  );
+}