@imksh/create 1.0.30 → 1.0.31

package/templates/layers/electron/typescript/src/components/ui/TitleBar.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useState } from "react";
+import { Minus, Square, X, Maximize2, Minimize2 } from "lucide-react";
+import { useUiStore } from "../../store/useUiStore";
+import appConfig from "../../config/appConfig";
+
+type Platform = "darwin" | "win32" | "linux" | "web";
+
+/**
+ * TitleBar — custom frameless window title bar for Electron.
+ *
+ * Renders a draggable title bar with:
+ *  - App icon + name centered
+ *  - Window controls (minimize / maximize / close) per platform:
+ *    · macOS: right side (native traffic lights hidden via frame: false)
+ *    · Windows/Linux: right side (Windows style)
+ *
+ * Only renders when running inside Electron (window.electronAPI present).
+ */
+const TitleBar: React.FC = () => {
+  const { windowMaximized, setWindowMaximized, minimizeWindow, maximizeWindow, closeWindow } =
+    useUiStore();
+  const [platform, setPlatform] = useState<Platform>("win32");
+
+  const isElectron = Boolean(window.electronAPI);
+  if (!isElectron) return null;
+
+  useEffect(() => {
+    window.electronAPI.getPlatform().then((p) => setPlatform(p as Platform));
+    window.electronAPI.isMaximized().then(setWindowMaximized);
+    window.electronAPI.onMaximizeChange((isMax) => setWindowMaximized(isMax));
+
+    return () => {
+      window.electronAPI.removeAllListeners("window:maximized-change");
+    };
+  }, []);
+
+  const isMac = platform === "darwin";
+
+  const windowControls = (
+    <div className={`flex items-center gap-1.5 ${isMac ? "mr-3" : "ml-auto"}`}>
+      {/* Minimize */}
+      <button
+        id="titlebar-minimize"
+        onClick={minimizeWindow}
+        className="w-7 h-7 flex items-center justify-center rounded-full
+                   text-base-content/50 hover:bg-warning/20 hover:text-warning
+                   transition-all duration-150 group"
+        title="Minimize"
+      >
+        <Minus size={12} className="group-hover:scale-110 transition-transform" />
+      </button>
+
+      {/* Maximize / Restore */}
+      <button
+        id="titlebar-maximize"
+        onClick={maximizeWindow}
+        className="w-7 h-7 flex items-center justify-center rounded-full
+                   text-base-content/50 hover:bg-success/20 hover:text-success
+                   transition-all duration-150 group"
+        title={windowMaximized ? "Restore" : "Maximize"}
+      >
+        {windowMaximized ? (
+          <Minimize2 size={11} className="group-hover:scale-110 transition-transform" />
+        ) : (
+          <Maximize2 size={11} className="group-hover:scale-110 transition-transform" />
+        )}
+      </button>
+
+      {/* Close */}
+      <button
+        id="titlebar-close"
+        onClick={closeWindow}
+        className="w-7 h-7 flex items-center justify-center rounded-full
+                   text-base-content/50 hover:bg-error/20 hover:text-error
+                   transition-all duration-150 group"
+        title="Close"
+      >
+        <X size={12} className="group-hover:scale-110 transition-transform" />
+      </button>
+    </div>
+  );
+
+  return (
+    <div
+      id="electron-titlebar"
+      className="h-10 shrink-0 flex items-center px-3
+                 bg-base-200 border-b border-base-300
+                 select-none"
+      style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
+    >
+      {isMac && (
+        <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}>
+          {windowControls}
+        </div>
+      )}
+
+      {/* App name — centered */}
+      <div className="flex items-center gap-2 mx-auto">
+        {appConfig.app.logo ? (
+          <img src={appConfig.app.logo} alt="" className="w-4 h-4 rounded" />
+        ) : (
+          <div className="w-4 h-4 rounded bg-primary flex items-center justify-center text-primary-content text-[8px] font-bold">
+            {appConfig.app.name.charAt(0)}
+          </div>
+        )}
+        <span className="text-xs font-semibold text-base-content/70">
+          {appConfig.app.name}
+        </span>
+      </div>
+
+      {!isMac && (
+        <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}>
+          {windowControls}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TitleBar;

package/templates/layers/electron/typescript/src/config/appConfig.ts

@@ -0,0 +1,52 @@
+const appConfig = {
+  app: {
+    name: "Electron App",
+    logo: "./logo.png",
+    shortName: "App",
+    description: "An Electron application built with @imksh/create",
+    version: "1.0.0",
+    author: "imksh",
+  },
+
+  api: {
+    baseURL: import.meta.env.VITE_API_URL as string,
+    timeout: 30000,
+  },
+
+  routes: {
+    home: "/",
+    login: "/login",
+    profile: "/profile",
+  },
+
+  pagination: {
+    pageSize: 10,
+  },
+
+  github: {
+    repository: "",
+  },
+
+  social: {
+    website: "",
+    linkedin: "",
+    github: "",
+    twitter: "",
+  },
+
+  features: {
+    darkMode: true,
+    notifications: true,
+    sidebar: true,
+    electron: true,
+    customTitleBar: true,
+  },
+
+  electron: {
+    tray: true,
+    autoUpdater: false,
+  },
+} as const;
+
+export type AppConfig = typeof appConfig;
+export default appConfig;

package/templates/layers/electron/typescript/src/hooks/useElectron.ts

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+
+type Platform = "darwin" | "win32" | "linux" | "web";
+
+interface UseElectronReturn {
+  isElectron: boolean;
+  minimize: () => void;
+  maximize: () => void;
+  close: () => void;
+  isMaximized: () => Promise<boolean>;
+  getVersion: () => Promise<string>;
+  getPlatform: () => Promise<Platform>;
+  openExternal: (url: string) => Promise<void>;
+  onMaximizeChange: (cb: (isMax: boolean) => void) => void;
+  onMenuAction: (cb: (data: { label: string }) => void) => void;
+  removeAllListeners: (channel: string) => void;
+}
+
+/**
+ * useElectron — safely access window.electronAPI in the renderer.
+ *
+ * Returns typed wrappers for all IPC calls. Every method is a no-op
+ * (or returns a resolved promise) when running outside of Electron.
+ */
+export function useElectron(): UseElectronReturn {
+  const isElectron = typeof window !== "undefined" && Boolean(window.electronAPI);
+
+  return {
+    isElectron,
+    minimize:           () => window.electronAPI?.minimize(),
+    maximize:           () => window.electronAPI?.maximize(),
+    close:              () => window.electronAPI?.close(),
+    isMaximized:        () => window.electronAPI?.isMaximized() ?? Promise.resolve(false),
+    getVersion:         () => window.electronAPI?.getVersion() ?? Promise.resolve("web"),
+    getPlatform:        () => (window.electronAPI?.getPlatform() ?? Promise.resolve("web")) as Promise<Platform>,
+    openExternal:       (url) => window.electronAPI?.openExternal(url) ?? Promise.resolve(),
+    onMaximizeChange:   (cb) => window.electronAPI?.onMaximizeChange(cb),
+    onMenuAction:       (cb) => window.electronAPI?.onMenuAction(cb),
+    removeAllListeners: (channel) => window.electronAPI?.removeAllListeners(channel),
+  };
+}
+
+type ElectronEvent = "maximize" | "menu";
+
+/**
+ * useElectronEvent — subscribe to an Electron IPC event in a React component.
+ * Automatically cleans up the listener on unmount.
+ */
+export function useElectronEvent(
+  event: ElectronEvent,
+  callback: (value: boolean | { label: string }) => void,
+): void {
+  const electron = useElectron();
+
+  useEffect(() => {
+    if (!electron.isElectron) return;
+
+    if (event === "maximize") {
+      electron.onMaximizeChange(callback as (v: boolean) => void);
+      return () => electron.removeAllListeners("window:maximized-change");
+    }
+
+    if (event === "menu") {
+      electron.onMenuAction(callback as (d: { label: string }) => void);
+      return () => electron.removeAllListeners("menu:preferences");
+    }
+  }, [event, electron.isElectron]);
+}

package/templates/layers/electron/typescript/src/main.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { HashRouter } from "react-router-dom";
+import App from "./App.js";
+import "./index.css";
+
+// HashRouter is required for Electron because the renderer is served via
+// the file:// protocol in production, which breaks BrowserRouter's history API.
+// Hash-based URLs (#/path) work correctly in both dev and packaged builds.
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <HashRouter>
+      <App />
+    </HashRouter>
+  </React.StrictMode>,
+);

package/templates/layers/electron/typescript/src/store/useUiStore.ts

@@ -0,0 +1,97 @@
+import { create } from "zustand";
+
+interface UiState {
+  // Sidebar
+  open: boolean;
+  collapsed: boolean;
+  isMobileMenuOpened: boolean;
+
+  // Modal
+  isModalOpen: boolean;
+
+  // Header
+  headerTitle: string;
+  headerActions: React.ReactNode | null;
+  breadcrumbs: React.ReactNode | null;
+  layoutClass: string;
+
+  // Theme
+  theme: string;
+
+  // Electron window
+  windowMaximized: boolean;
+
+  // Actions
+  setLayoutClass: (layoutClass: string) => void;
+  setHeaderTitle: (title: string) => void;
+  setHeaderActions: (actions: React.ReactNode | null) => void;
+  setBreadcrumbs: (breadcrumbs: React.ReactNode | null) => void;
+  toggleCollapsed: () => void;
+  setMobileMenuOpened: (open: boolean) => void;
+  toggleMobileMenuOpened: () => void;
+  toggleSidebar: () => void;
+  openSidebar: () => void;
+  close: () => void;
+  setModalOpen: (open: boolean) => void;
+  setTheme: (theme: string) => void;
+  toggleTheme: () => void;
+
+  // Electron window controls
+  setWindowMaximized: (value: boolean) => void;
+  minimizeWindow: () => void;
+  maximizeWindow: () => void;
+  closeWindow: () => void;
+}
+
+const useUiStore = create<UiState>((set, get) => ({
+  open: false,
+  isModalOpen: false,
+  collapsed: false,
+  isMobileMenuOpened: false,
+  headerTitle: "Dashboard",
+  headerActions: null,
+  breadcrumbs: null,
+  layoutClass: "",
+
+  // ── Layout helpers ──────────────────────────────────────────────────────────
+  setLayoutClass: (layoutClass) => set({ layoutClass }),
+  setHeaderTitle: (title) => set({ headerTitle: title }),
+  setHeaderActions: (actions) => set({ headerActions: actions }),
+  setBreadcrumbs: (breadcrumbs) => set({ breadcrumbs }),
+
+  // ── Sidebar ─────────────────────────────────────────────────────────────────
+  toggleCollapsed: () => set((state) => ({ collapsed: !state.collapsed })),
+  setMobileMenuOpened: (open) => set({ isMobileMenuOpened: open }),
+  toggleMobileMenuOpened: () =>
+    set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened })),
+  toggleSidebar: () => set((state) => ({ open: !state.open })),
+  openSidebar: () => set({ open: true }),
+  close: () => set({ open: false }),
+
+  // ── Modal ───────────────────────────────────────────────────────────────────
+  setModalOpen: (open) => set({ isModalOpen: open }),
+
+  // ── Theme ───────────────────────────────────────────────────────────────────
+  theme: localStorage.getItem("theme") || "light",
+  setTheme: (theme) => {
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+    set({ theme });
+  },
+  toggleTheme: () => {
+    const nextTheme = get().theme === "light" ? "dark" : "light";
+    document.documentElement.setAttribute("data-theme", nextTheme);
+    localStorage.setItem("theme", nextTheme);
+    set({ theme: nextTheme });
+  },
+
+  // ── Electron window state ───────────────────────────────────────────────────
+  windowMaximized: false,
+  setWindowMaximized: (value) => set({ windowMaximized: value }),
+  minimizeWindow: () => window.electronAPI?.minimize(),
+  maximizeWindow: () => window.electronAPI?.maximize(),
+  closeWindow:    () => window.electronAPI?.close(),
+}));
+
+export { useUiStore };
+export type { UiState };

package/templates/layers/electron/typescript/src/vite-env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+import type { ElectronAPI } from '../electron/preload';
+
+/**
+ * Augment the Window interface to include the Electron context bridge API.
+ * This gives full type safety when accessing window.electronAPI in the renderer.
+ */
+declare global {
+  interface Window {
+    electronAPI: ElectronAPI;
+  }
+}

package/templates/layers/electron/typescript/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "electron"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/layers/electron/typescript/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/layers/electron/typescript/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import electron from 'vite-plugin-electron';
+import renderer from 'vite-plugin-electron-renderer';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    electron([
+      {
+        // Main process entry
+        entry: 'electron/main.ts',
+      },
+      {
+        // Preload script — reload renderer on change
+        entry: 'electron/preload.ts',
+        onstart(options) {
+          options.reload();
+        },
+      },
+    ]),
+    renderer(),
+  ],
+  // Critical: ensures built assets resolve correctly via file:// in production
+  base: './',
+});

package/templates/layers/next/javascript/src/components/common/Breadcrumbs.jsx

@@ -1,25 +1,63 @@
 "use client";
 import React from "react";
 import Link from "next/link";
-import { ChevronRight } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { ArrowLeft, ChevronRight } from "lucide-react";
 
 export const Breadcrumbs = ({ items }) => {
+  const router = useRouter();
   return (
     <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
+      <button
+        className="btn btn-primary btn-soft btn-square btn-sm mr-1 hidden md:flex"
+        onClick={() => router.back()}
+      >
+        <ArrowLeft size={18} />
+      </button>
       {items.map((item, idx) => {
         const isLast = idx === items.length - 1;
         return (
           <React.Fragment key={idx}>
             {item.path && !isLast ? (
-              <Link href={item.path} className="hover:text-primary transition-colors">
+              <Link
+                href={item.path}
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
                 {item.label}
               </Link>
-            ) : (
-              <span className={isLast ? "text-base font-black text-base-content tracking-tight" : ""}>
+            ) : item.onClick && !isLast ? (
+              <button
+                type="button"
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
                 {item.label}
-              </span>
+              </button>
+            ) : (
+              <div className="flex flex-col">
+                <span
+                  className={
+                    isLast
+                      ? "text-lg md:text-xl font-bold leading-tight text-base-content tracking-tight truncate max-w-[200px] md:max-w-none"
+                      : ""
+                  }
+                >
+                  {item.label}
+                </span>
+                {item.subtitle && (
+                  <span className="text-xs text-base-content/60 font-normal truncate">
+                    {item.subtitle}
+                  </span>
+                )}
+              </div>
+            )}
+            {!isLast && (
+              <ChevronRight
+                size={14}
+                className="text-base-content/30 shrink-0 hidden sm:block"
+              />
             )}
-            {!isLast && <ChevronRight size={14} className="text-base-content/30 shrink-0" />}
           </React.Fragment>
         );
       })}

package/templates/layers/next/javascript/src/components/common/Loading.jsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import LottieAnimation from "./LottieIcon";
 import loader from "../../assets/animations/loading.json";

package/templates/layers/next/javascript/src/components/common/LottieIcon.jsx

@@ -1,3 +1,4 @@
+"use client";
 import { memo, useEffect, useRef } from "react";
 import { useInView } from "framer-motion";
 import lottie from "lottie-web";