Merge pull request #216 from beNative/codex/add-button-to-open-executable-folder

Align About modal actions horizontally

Author: beNative

components/AboutModal.tsx

@@ -1,5 +1,6 @@
-import React, { useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import Modal from './Modal';
+import Button from './Button';
 
 const appIconUrl = new URL('../assets/icon.svg', import.meta.url).href;
 
@@ -9,6 +10,16 @@ interface AboutModalProps {
 
 const AboutModal: React.FC<AboutModalProps> = ({ onClose }) => {
   const githubLinkRef = useRef<HTMLAnchorElement>(null);
+  const handleOpenExecutableFolder = useCallback(async () => {
+    try {
+      const result = await window.electronAPI?.openExecutableFolder?.();
+      if (result && !result.success && result.error) {
+        console.error('Failed to open executable folder:', result.error);
+      }
+    } catch (error) {
+      console.error('Failed to open executable folder:', error);
+    }
+  }, []);
 
   return (
     <Modal title="About DocForge" onClose={onClose} initialFocusRef={githubLinkRef}>
@@ -22,15 +33,27 @@ const AboutModal: React.FC<AboutModalProps> = ({ onClose }) => {
             <p className="text-sm text-text-secondary">© 2025 Tim Sinaeve. All rights reserved.</p>
           </div>
         </div>
-        <a
-          ref={githubLinkRef}
-          href="https://github.com/beNative/docforge"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="inline-flex items-center justify-center px-3 py-1.5 text-xs font-semibold rounded-md border border-transparent bg-primary text-primary-text hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background transition-colors duration-150"
-        >
-          View source on GitHub
-        </a>
+        <div className="flex flex-col items-center space-y-2">
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            <a
+              ref={githubLinkRef}
+              href="https://github.com/beNative/docforge"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center justify-center px-3 py-1.5 text-xs font-semibold rounded-md border border-transparent bg-primary text-primary-text hover:bg-primary-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background transition-colors duration-150"
+            >
+              View source on GitHub
+            </a>
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={handleOpenExecutableFolder}
+              className="text-xs"
+            >
+              Open installation folder
+            </Button>
+          </div>
+        </div>
       </div>
     </Modal>
   );

electron/main.ts

@@ -1,5 +1,5 @@
 // Fix: This file was previously a placeholder. This is the full implementation for the Electron main process.
-import { app, BrowserWindow, ipcMain, dialog, clipboard } from 'electron';
+import { app, BrowserWindow, ipcMain, dialog, clipboard, shell } from 'electron';
 // Fix: Import 'platform' from 'process' for type-safe access to the current OS identifier.
 import { platform } from 'process';
 import path from 'path';
@@ -656,6 +656,21 @@ ipcMain.handle('app:get-version', () => app.getVersion());
 // Fix: Error on line 145 is resolved by importing 'platform' from 'process'.
 ipcMain.handle('app:get-platform', () => platform);
 ipcMain.handle('app:get-log-path', () => log.transports.file.getFile().path);
+ipcMain.handle('app:open-executable-folder', async () => {
+    const execDir = path.dirname(process.execPath);
+    try {
+        const error = await shell.openPath(execDir);
+        if (error) {
+            console.error('Failed to open executable folder:', error);
+            return { success: false, error };
+        }
+        return { success: true, path: execDir };
+    } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        console.error('Failed to open executable folder:', error);
+        return { success: false, error: message };
+    }
+});
 
 ipcMain.on('updater:set-allow-prerelease', (_, allow: boolean) => {
     autoUpdater.allowPrerelease = allow;

electron/preload.ts

@@ -60,6 +60,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   getAppVersion: () => ipcRenderer.invoke('app:get-version'),
   getPlatform: () => ipcRenderer.invoke('app:get-platform'),
   getLogPath: () => ipcRenderer.invoke('app:get-log-path'),
+  openExecutableFolder: () => ipcRenderer.invoke('app:open-executable-folder'),
   renderPlantUML: (diagram: string, format: 'svg' = 'svg') => ipcRenderer.invoke('plantuml:render-svg', diagram, format),
   updaterSetAllowPrerelease: (allow: boolean) => ipcRenderer.send('updater:set-allow-prerelease', allow),
   updaterSetAutoCheckEnabled: (enabled: boolean) => ipcRenderer.send('updater:set-auto-check-enabled', enabled),

types.ts

@@ -36,6 +36,7 @@ declare global {
       getAppVersion: () => Promise<string>;
       getPlatform: () => Promise<string>;
       getLogPath: () => Promise<string>;
+      openExecutableFolder: () => Promise<{ success: boolean; path?: string; error?: string }>;
       renderPlantUML: (
         diagram: string,
         format?: 'svg'