@isthatuzii/create-nano-app/templates/solid-js/src/template-ui/components/layout/MainWorkspace.jsx

Desktop application scaffolding tool for the Nano Framework

import { createSignal, onMount, For } from "solid-js";
import { 
  X, 
  Plus,
  Eye,
  EyeOff,
  FileText,
  Package
} from "lucide-solid";
import "./MainWorkspace.css";
import { createMainWorkspaceFunctions } from "./MainWorkspace.functions.js";

function MainWorkspace(props) {
  const [state, setState] = createSignal({
    activeTab: 'drak_caterpillar',
    tabs: [
      {
        id: 'drak_caterpillar',
        name: 'drak_caterpillar',
        type: 'EntityClassDefinition',
        modified: false,
        content: {
          name: 'DRAK_Caterpillar',
          type: 'EntityClassDefinition',
          guid: 'dc3b9a60-1d7e-4d49-9346-35bf995f3678',
          path: 'libs/foundry/records/entities/spaceships/drak_caterpillar.xml'
        }
      }
    ]
  });

  const functions = createMainWorkspaceFunctions(
    state,
    setState,
    props
  );

  onMount(() => {
    functions.initialize();
  });

  const TabHeader = ({ tab }) => (
    <div 
      class="tab-header"
      classList={{ active: state().activeTab === tab.id }}
      onClick={() => functions.setActiveTab(tab.id)}
    >
      <div class="tab-content">
        <Package class="icon size-sm tab-icon" />
        <span class="tab-name">{tab.name}</span>
        {tab.modified && <div class="tab-modified-indicator"></div>}
        <button 
          class="tab-close"
          onClick={(e) => {
            e.stopPropagation();
            functions.closeTab(tab.id);
          }}
        >
          <X class="icon size-sm" />
        </button>
      </div>
    </div>
  );

  const TabContent = () => {
    const activeTab = () => state().tabs.find(t => t.id === state().activeTab);
    if (!activeTab()) return <div class="empty-workspace">No tab selected</div>;

    const content = activeTab().content;

    return (
      <div class="tab-content-area">
        <div class="content-header">
          <div class="content-info">
            <div class="content-title">
              <Package class="icon size-md" />
              <span class="title-text">{content.name}</span>
            </div>
            <div class="content-meta">
              <span class="meta-item">Type: <span class="meta-value">{content.type}</span></span>
              <span class="meta-item">GUID: <span class="meta-value">{content.guid}</span></span>
            </div>
          </div>
          <div class="content-controls">
            <button class="control-button" title="View XML">
              <FileText class="icon size-sm" />
              <span>View XML</span>
            </button>
            <button class="control-button" title="View JSON">
              <FileText class="icon size-sm" />
              <span>View JSON</span>
            </button>
          </div>
        </div>

        <div class="content-body">
          <div class="property-section">
            <div class="section-header">
              <span class="section-title">Geometry</span>
              <Eye class="icon size-sm" />
            </div>
            <div class="section-content">
              <div class="property-grid">
                <div class="property-row">
                  <span class="property-label">Bioselection</span>
                  <span class="property-value">False</span>
                </div>
                <div class="property-row">
                  <span class="property-label">Category</span>
                  <span class="property-value">Default.large</span>
                </div>
                <div class="property-row">
                  <span class="property-label">Icon</span>
                  <span class="property-value">Default.large</span>
                </div>
                <div class="property-row">
                  <span class="property-label">Invisible</span>
                  <span class="property-value">False</span>
                </div>
                <div class="property-row">
                  <span class="property-label">LifetimePolicy</span>
                  <span class="property-value">VehicleLifetimePolicy/Template (7394741ef-e3a7-4ecf-8849-cff6f6dc334f)</span>
                </div>
              </div>
            </div>
          </div>

          <div class="property-section">
            <div class="section-header">
              <span class="section-title">Components</span>
              <Eye class="icon size-sm" />
            </div>
            <div class="section-content">
              <div class="component-list">
                <div class="component-item">StaticEntityClassData</div>
                <div class="component-item">Tags</div>
              </div>
            </div>
          </div>

          <div class="property-section">
            <div class="section-header">
              <span class="section-title">StaticEntityClassData</span>
              <Eye class="icon size-sm" />
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div class="main-workspace">
      <div class="workspace-header">
        <div class="tab-bar">
          <For each={state().tabs}>
            {(tab) => <TabHeader tab={tab} />}
          </For>
          <button class="new-tab-button" onClick={functions.addNewTab}>
            <Plus class="icon size-sm" />
          </button>
        </div>
      </div>
      
      <div class="workspace-content">
        <TabContent />
      </div>
    </div>
  );
}

export default MainWorkspace;