@isthatuzii/create-nano-app/templates/solid-js/src/template-ui/TemplateApp.jsx

Desktop application scaffolding tool for the Nano Framework

import { createSignal, onMount } from "solid-js";
import "./TemplateApp.css";

// Layout Components
import TopMenuBar from "./components/layout/TopMenuBar.jsx";
import IconToolbar from "./components/layout/IconToolbar.jsx";
import DataBrowser from "./components/layout/DataBrowser.jsx";
import MainWorkspace from "./components/layout/MainWorkspace.jsx";
import PropertiesPanel from "./components/layout/PropertiesPanel.jsx";

function TemplateApp() {
  const [appState, setAppState] = createSignal({
    status: "Ready",
    version: "v0.1.0",
    selectedTool: 'open',
    selectedItem: null,
    activeTab: null
  });

  let propertiesPanelRef;
  let mainWorkspaceRef;

  const handleMenuSelect = (menuId) => {
    console.log("Menu selected:", menuId);
  };

  const handleToolSelect = (toolId) => {
    setAppState(prev => ({
      ...prev,
      selectedTool: toolId
    }));
    console.log("Tool selected:", toolId);
  };

  const handleItemSelect = (item) => {
    setAppState(prev => ({
      ...prev,
      selectedItem: item
    }));

    // Update properties panel
    if (propertiesPanelRef && propertiesPanelRef.functions) {
      propertiesPanelRef.functions.handleItemSelection(item);
    }

    // Open tab in main workspace if it's an entity
    if (mainWorkspaceRef && mainWorkspaceRef.functions && item.type === 'EntityClassDefinition') {
      mainWorkspaceRef.functions.openTab(item);
    }

    console.log("Item selected:", item);
  };

  const handleTabChange = (tabId) => {
    setAppState(prev => ({
      ...prev,
      activeTab: tabId
    }));
    console.log("Tab changed:", tabId);
  };

  return (
    <div class="blender-app">
      {/* Top Menu Bar */}
      <TopMenuBar onMenuSelect={handleMenuSelect} />
      
      {/* Main Layout */}
      <div class="app-layout">
        {/* Left Icon Toolbar */}
        <IconToolbar 
          onToolSelect={handleToolSelect}
        />
        
        {/* Left Data Browser */}
        <DataBrowser 
          onItemSelect={handleItemSelect}
        />
        
        {/* Main Workspace */}
        <MainWorkspace 
          ref={mainWorkspaceRef}
          onTabChange={handleTabChange}
          selectedItem={appState().selectedItem}
        />
        
        {/* Right Properties Panel */}
        <PropertiesPanel 
          ref={propertiesPanelRef}
          selectedItem={appState().selectedItem}
        />
      </div>
      
      {/* Status Bar */}
      <div class="status-bar">
        <div class="status-left">
          <span class="status-item">{appState().status}</span>
          <span class="status-separator">|</span>
          <span class="status-item">Nano Framework {appState().version}</span>
        </div>
        
        <div class="status-right">
          <span class="status-item">Tool: {appState().selectedTool}</span>
          {appState().selectedItem && (
            <>
              <span class="status-separator">|</span>
              <span class="status-item">Selected: {appState().selectedItem.name}</span>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default TemplateApp;