feat(renderer): setup React, Vite, Tailwind CSS and Zustand state management

2026-08-02 18:10:18 +05:30 · 2026-06-03 23:23:59 +05:30
parent 88e9a5290d
commit 7a396f64a6
11 changed files with 2152 additions and 40 deletions
@@ -0,0 +1,47 @@
+import React from 'react';
+import { AppHeader } from './components/layout/AppHeader';
+import { TabBar } from './components/layout/TabBar';
+import { Toolbar } from './components/layout/Toolbar';
+import { Breadcrumb } from './components/layout/Breadcrumb';
+import { Sidebar } from './components/sidebar/Sidebar';
+import { EditorPane } from './components/editor/EditorPane';
+import { PreviewPane } from './components/preview/PreviewPane';
+import { StatusBar } from './components/layout/StatusBar';
+import { CommandPalette } from './components/modals/CommandPalette';
+import { ExportDialog } from './components/modals/ExportDialog';
+import { SettingsDialog } from './components/modals/SettingsDialog';
+import { useAppStore } from './stores/appStore';
+
+function App() {
+  const { sidebarVisible, previewVisible, activeTabId } = useAppStore();
+
+  return (
+    <div className="flex flex-col h-screen bg-background text-foreground overflow-hidden">
+      <AppHeader />
+      <TabBar />
+      <Toolbar />
+      <Breadcrumb />
+
+      <main className="flex flex-1 overflow-hidden">
+        {sidebarVisible && <Sidebar />}
+
+        <div className="flex flex-1 overflow-hidden">
+          <EditorPane className={previewVisible ? 'flex-1' : 'flex-1'} />
+          {previewVisible && (
+            <>
+              <div className="w-px bg-border cursor-col-resize hover:bg-brand transition-colors" />
+              <PreviewPane className="flex-1" />
+            </>
+          )}
+        </div>
+      </main>
+
+      <StatusBar />
+      <CommandPalette />
+      <ExportDialog />
+      <SettingsDialog />
+    </div>
+  );
+}
+
+export default App;
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self';">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MarkdownConverter</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body class="font-sans antialiased">
+  <div id="root"></div>
+  <script type="module" src="./main.tsx"></script>
+</body>
+</html>
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './styles/globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
@@ -0,0 +1,82 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 11 79% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 0 0% 96%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 11 79% 51%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 30 14% 4%;
+    --foreground: 0 0% 98%;
+    --card: 30 14% 6%;
+    --card-foreground: 0 0% 98%;
+    --popover: 30 14% 6%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 11 79% 51%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 30 6% 15%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 30 6% 15%;
+    --muted-foreground: 0 0% 63%;
+    --accent: 30 6% 15%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62% 30%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 30 6% 15%;
+    --input: 30 6% 15%;
+    --ring: 11 79% 51%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* CodeMirror integration */
+.cm-editor {
+  @apply h-full;
+}
+.cm-editor .cm-scroller {
+  @apply font-mono text-sm;
+}
@@ -0,0 +1,90 @@
+export interface ElectronAPI {
+  // App info
+  getAppVersion: () => Promise<string>;
+
+  // File operations
+  openFile: () => Promise<{ canceled: boolean; filePaths: string[] }>;
+  saveFile: (data: { path: string; content: string }) => Promise<void>;
+  readFile: (path: string) => Promise<string>;
+  setCurrentFile: (path: string | null) => void;
+
+  // Export
+  exportDocument: (format: string, options?: Record<string, any>) => Promise<void>;
+
+  // Theme
+  getTheme: () => void;
+  onThemeChanged: (callback: (theme: string) => void) => () => void;
+
+  // File events
+  onFileOpened: (callback: (data: { path: string; content: string }) => void) => () => void;
+  onFileNew: (callback: () => void) => () => void;
+  onFileSave: (callback: () => void) => () => void;
+
+  // Conversion status
+  onConversionStatus: (callback: (message: string) => void) => () => void;
+  onConversionComplete: (callback: (data: { format: string; outputPath: string }) => void) => () => void;
+
+  // Dialogs
+  showExportDialog: (format: string) => void;
+  showBatchDialog: () => void;
+  showUniversalConverterDialog: () => void;
+  showTableGenerator: () => void;
+  showPdfEditorDialog: () => void;
+  showHeaderFooterDialog: () => void;
+  showFieldPickerDialog: () => void;
+
+  // Settings
+  getSettings: (key: string) => Promise<any>;
+  setSettings: (key: string, value: any) => Promise<void>;
+
+  // Plugin settings
+  getPluginSetting: (key: string) => Promise<any>;
+  setPluginSetting: (key: string, value: any) => Promise<void>;
+
+  // Sidebar
+  toggleSidebar: () => void;
+  toggleBottomPanel: () => void;
+
+  // Print
+  doPrint: (options?: any) => void;
+
+  // PDF
+  openPdfViewer: (filePath: string) => void;
+  processPdfOperation: (data: any) => void;
+
+  // Images
+  selectFolder: () => Promise<string | null>;
+  savePastedImage: (data: { base64: string; ext: string }) => Promise<{ relativePath: string } | null>;
+
+  // Templates
+  loadTemplate: (file: string) => Promise<string>;
+  getSnippets: () => Promise<any[]>;
+  saveSnippet: (snippet: any) => Promise<void>;
+  deleteSnippet: (id: string) => Promise<void>;
+
+  // Git
+  gitStatus: () => Promise<any>;
+  gitDiff: (file: string) => Promise<any>;
+  gitStage: (files: string[]) => Promise<void>;
+  gitCommit: (message: string) => Promise<void>;
+  gitLog: () => Promise<any[]>;
+
+  // Directory
+  listDirectory: (dir: string) => Promise<any[] | null>;
+  openFilePath: (path: string) => void;
+
+  // Custom CSS
+  selectCustomCSS: () => Promise<string | null>;
+  loadCustomCSS: () => void;
+  clearCustomCSS: () => void;
+
+  // Generic invoke/on
+  invoke: (channel: string, data?: any) => Promise<any>;
+  on: (channel: string, callback: (...args: any[]) => void) => () => void;
+}
+
+declare global {
+  interface Window {
+    electronAPI: ElectronAPI;
+  }
+}