🎉 Add buttons to export/import menus

Author: yar2000T

locales/en/translation.json

@@ -225,6 +225,10 @@
     "empty-collection-note": "Edit the tags above or add a completely new menu to this collection with the button below.",
     "create-menu-button": "New menu",
     "duplicate-menu": "Duplicate menu",
+    "export-menu": "Export menu",
+    "import-menu": "Import menu",
+    "import-menu-error-title": "Failed to import menu",
+    "import-menu-error-message": "The selected file could not be imported. It does not contain a valid Kando exported menu.",
     "delete-menu": "Delete menu",
     "add-menu-item-hint": "Drag this item to add it to the menu above!",
     "add-menu-items": "Add Menu Items",

src/common/settings-schemata/exported-menu-v1.ts

@@ -0,0 +1,31 @@
+//////////////////////////////////////////////////////////////////////////////////////////
+//   _  _ ____ _  _ ___  ____                                                           //
+//   |_/  |__| |\ | |  \ |  |    This file belongs to Kando, the cross-platform         //
+//   | \_ |  | | \| |__/ |__|    pie menu. Read more on github.com/kando-menu/kando     //
+//                                                                                      //
+//////////////////////////////////////////////////////////////////////////////////////////
+
+// SPDX-FileCopyrightText: yar2000T <github.com/yar2000T>
+// SPDX-License-Identifier: MIT
+
+import * as z from 'zod';
+import { version } from './../../../package.json';
+
+import { MENU_ITEM_SCHEMA_V1 } from './menu-settings-v1';
+
+/**
+ * This type describes the schema of an exported menu. This is used when exporting and
+ * importing menus via the settings dialog.
+ */
+export const EXPORTED_MENU_SCHEMA_V1 = z.object({
+  /**
+   * The last version of Kando. This is used to determine whether the file needs to be
+   * migrated to a newer version.
+   */
+  version: z.string().default(version),
+
+  /** The actual menu. */
+  menu: MENU_ITEM_SCHEMA_V1,
+});
+
+export type ExportedMenuV1 = z.infer<typeof EXPORTED_MENU_SCHEMA_V1>;

src/common/settings-schemata/index.ts

@@ -20,6 +20,9 @@ export type {
 } from './menu-settings-v1';
 export { MENU_SETTINGS_SCHEMA_V1 as MENU_SETTINGS_SCHEMA } from './menu-settings-v1';
 
+export type { ExportedMenuV1 as ExportedMenu } from './exported-menu-v1';
+export { EXPORTED_MENU_SCHEMA_V1 as EXPORTED_MENU_SCHEMA } from './exported-menu-v1';
+
 import type { AchievementStatsV1 as AchievementStats } from './achievement-stats-v1';
 export type { AchievementStatsV1 as AchievementStats } from './achievement-stats-v1';
 export { ACHIEVEMENT_STATS_SCHEMA_V1 as ACHIEVEMENT_STATS_SCHEMA } from './achievement-stats-v1';

src/main/app.ts

@@ -10,6 +10,7 @@
 
 import os from 'node:os';
 import fs from 'fs';
+import fsExtra from 'fs-extra';
 import mime from 'mime-types';
 import path from 'path';
 import json5 from 'json5';
@@ -41,6 +42,11 @@ import {
   tryLoadGeneralSettingsFile,
   tryLoadMenuSettingsFile,
 } from './settings';
+import { MENU_SCHEMA_V1 } from '../common/settings-schemata/menu-settings-v1';
+import {
+  EXPORTED_MENU_SCHEMA_V1,
+  ExportedMenuV1,
+} from '../common/settings-schemata/exported-menu-v1';
 import { Notification } from './utils/notification';
 import { UpdateChecker } from './utils/update-checker';
 import { AchievementTracker } from './achievements/achievement-tracker';
@@ -817,6 +823,114 @@ export class KandoApp {
       );
     });
 
+    // Export a single menu to a JSON file. If no filePath is provided, show a save dialog.
+    ipcMain.handle(
+      'settings-window.export-menu',
+      async (event, menuIndex: number, filePath?: string) => {
+        const settings = this.menuSettings.get();
+
+        if (menuIndex < 0 || menuIndex >= settings.menus.length) {
+          console.error('Failed to export menu: Invalid menu index.');
+          return false;
+        }
+
+        // We only export the root menu item (so exported files stay compact and
+        // don't include local UI flags like centered/anchored/hoverMode). This
+        // also makes future extensions easier.
+        const menu = settings.menus[menuIndex];
+        const menuData: ExportedMenuV1 = {
+          version: settings.version,
+          menu: menu.root as MenuItem,
+        };
+
+        try {
+          let targetPath = filePath;
+          if (!targetPath) {
+            const result = await dialog.showSaveDialog(this.settingsWindow, {
+              defaultPath: `${menu.root.name}.json`,
+              filters: [{ name: 'JSON', extensions: ['json'] }],
+            });
+
+            if (result.canceled || !result.filePath) {
+              return false;
+            }
+
+            targetPath = result.filePath;
+          }
+
+          fs.writeFileSync(targetPath, JSON.stringify(menuData, null, 2), 'utf-8');
+          return true;
+        } catch (error) {
+          console.error('Failed to export menu:', error);
+          await dialog.showMessageBox(this.settingsWindow, {
+            type: 'error',
+            title: i18next.t('settings.export-menu-error-title', 'Failed to export menu'),
+            message: 'Failed to export menu.',
+            detail: error instanceof Error ? error.message : String(error),
+          });
+          return false;
+        }
+      }
+    );
+
+    // Import a menu from a JSON file
+    ipcMain.handle('settings-window.import-menu', async (event, filePath: string) => {
+      try {
+        const content = fsExtra.readJsonSync(filePath, 'utf-8');
+
+        // Validate the exported file format first (version + root menu item)
+        const exported = EXPORTED_MENU_SCHEMA_V1.parse(content, { reportInput: true });
+
+        // Convert the exported root into a full MENU object so defaults (like
+        // centered/anchored/hoverMode and shortcut fields) are applied.
+        const validatedMenu = MENU_SCHEMA_V1.parse(
+          { root: exported.menu },
+          { reportInput: true }
+        );
+
+        // Add the menu to the settings
+        const settings = this.menuSettings.get();
+        const newMenus = [...settings.menus, validatedMenu];
+
+        // Update the settings
+        this.menuSettings.set({ menus: newMenus as Partial<MenuSettings>['menus'] });
+
+        return true;
+      } catch (error) {
+        console.error('Error importing menu:', error);
+
+        let detail = error instanceof Error ? error.message : String(error);
+
+        // If this is a schema/validation error, try to extract useful messages.
+        if (
+          error &&
+          (
+            error as unknown as {
+              issues?: { path?: (string | number)[]; message: string }[];
+            }
+          ).issues
+        ) {
+          const issues = (
+            error as unknown as {
+              issues: { path?: (string | number)[]; message: string }[];
+            }
+          ).issues;
+          detail = issues
+            .map((issue) => `${issue.path?.join('.') || '<root>'}: ${issue.message}`)
+            .join('\n');
+        }
+
+        await dialog.showMessageBox(this.settingsWindow, {
+          type: 'error',
+          title: i18next.t('settings.import-menu-error-title'),
+          message: i18next.t('settings.import-menu-error-message'),
+          detail,
+        });
+
+        return false;
+      }
+    });
+
     // Allow the renderer to retrieve the i18next locales.
     ipcMain.handle('common.get-locales', () => {
       return {

src/settings-renderer/components/menu-list/MenuList.tsx

@@ -12,17 +12,20 @@ import React from 'react';
 import i18next from 'i18next';
 import classNames from 'classnames/bind';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { TbPlus, TbCopy, TbTrash } from 'react-icons/tb';
+import { TbPlus, TbCopy, TbTrash, TbDownload, TbUpload } from 'react-icons/tb';
 
 import * as classes from './MenuList.module.scss';
 const cx = classNames.bind(classes);
 
 import { useAppState, useMenuSettings, useMappedMenuProperties } from '../../state';
+import { WindowWithAPIs } from '../../settings-window-api';
 
 import { Scrollbox, ThemedIcon, Swirl, Note, Button } from '../common';
 import CollectionDetails from './CollectionDetails';
 import { ensureUniqueKeys } from '../../utils';
 
+declare const window: WindowWithAPIs;
+
 /** For rendering the menus, a list of these objects is created. */
 type RenderedMenu = {
   /** A unique key for react. */
@@ -73,6 +76,31 @@ export default function MenuList() {
   const moveMenu = useMenuSettings((state) => state.moveMenu);
   const moveMenuItem = useMenuSettings((state) => state.moveMenuItem);
 
+  // Handle menu export
+  const handleExportMenu = async () => {
+    if (selectedMenu < 0 || selectedMenu >= menus.length) {
+      return;
+    }
+
+    // Let the main process show the save dialog and perform the export.
+    await window.settingsAPI.exportMenu(selectedMenu);
+  };
+
+  // Handle menu import
+  const handleImportMenu = async () => {
+    const result = await window.settingsAPI.openFilePicker({
+      filters: [{ name: 'JSON', extensions: ['json'] }],
+    });
+
+    if (result) {
+      const success = await window.settingsAPI.importMenu(result);
+      if (!success) {
+        // Import failed; the main process already showed a descriptive error dialog.
+        console.error('Import failed for file:', result);
+      }
+    }
+  };
+
   // This is set by the search bar in the collection details.
   const [filterTerm, setFilterTerm] = React.useState('');
 
@@ -323,6 +351,22 @@ export default function MenuList() {
               duplicateMenu(selectedMenu);
             }}
           />
+          <Button
+            isGrouped
+            icon={<TbUpload />}
+            size="large"
+            tooltip={i18next.t('settings.export-menu')}
+            variant="floating"
+            onClick={handleExportMenu}
+          />
+          <Button
+            isGrouped
+            icon={<TbDownload />}
+            size="large"
+            tooltip={i18next.t('settings.import-menu')}
+            variant="floating"
+            onClick={handleImportMenu}
+          />
           <Button
             isGrouped
             icon={<TbTrash />}

src/settings-renderer/settings-window-api.ts

@@ -186,6 +186,22 @@ export const SETTINGS_WINDOW_API = {
   restoreMenuSettings: () => {
     ipcRenderer.send('settings-window.restore-menu-settings');
   },
+
+  /**
+   * This will export a single menu to a JSON file. The native save dialog will be shown
+   * if no file path is given.
+   */
+  exportMenu: (menuIndex: number, filePath?: string): Promise<boolean> => {
+    return ipcRenderer.invoke('settings-window.export-menu', menuIndex, filePath);
+  },
+
+  /**
+   * This will import a menu from a JSON file. The handler will show an error dialog on
+   * failure.
+   */
+  importMenu: (filePath: string): Promise<boolean> => {
+    return ipcRenderer.invoke('settings-window.import-menu', filePath);
+  },
 };
 
 /**