@isthatuzii/create-nano-app/templates/solid-js/src/App.jsx

Desktop application scaffolding tool for the Nano Framework

import { createSignal, onMount } from "solid-js";
import "./App.css";
import { createAppFunctions } from "./App.functions.js";
import api from "./api/api.js";

function App() {
  const [appState, setAppState] = createSignal({
    status: "Ready",
    version: "v0.1.0",
    greetName: "",
    greetMessage: "",
    isLoading: false
  });

  const functions = createAppFunctions(
    appState,
    setAppState,
    {},
    api
  );

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

  const handleGreet = async () => {
    if (!appState().greetName.trim()) return;
    
    setAppState(prev => ({ ...prev, isLoading: true }));
    
    try {
      const response = await api.system.greet(appState().greetName);
      setAppState(prev => ({ 
        ...prev, 
        greetMessage: response.data,
        isLoading: false 
      }));
    } catch (error) {
      console.error("Failed to greet:", error);
      setAppState(prev => ({ 
        ...prev, 
        greetMessage: "Failed to connect to server",
        isLoading: false 
      }));
    }
  };

  const handleInputChange = (e) => {
    setAppState(prev => ({ ...prev, greetName: e.target.value }));
  };

  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      handleGreet();
    }
  };

  return (
    <div class="app">
      <div class="main-content">
        {/* Logo Section */}
        <div class="logo-section">
          <div class="logo-container">
            <div class="rust-logo">
              {/* Rust logo will be added here */}
              <div class="logo-placeholder rust">Rust</div>
            </div>
            <div class="plus-symbol">+</div>
            <div class="nano-logo">
              {/* Nano logo will be added here */}
              <div class="logo-placeholder nano">Nano</div>
            </div>
          </div>
          <h1 class="app-title">Nano Framework</h1>
          <p class="app-subtitle">Rust + SolidJS Desktop Application</p>
        </div>

        {/* Greet Section */}
        <div class="greet-section">
          <div class="greet-container">
            <label for="greet-input" class="greet-label">
              Enter your name:
            </label>
            <div class="input-group">
              <input
                id="greet-input"
                type="text"
                class="greet-input"
                placeholder="Your name here..."
                value={appState().greetName}
                onInput={handleInputChange}
                onKeyPress={handleKeyPress}
                disabled={appState().isLoading}
              />
              <button
                class="greet-button"
                onClick={handleGreet}
                disabled={appState().isLoading || !appState().greetName.trim()}
              >
                {appState().isLoading ? "..." : "Greet"}
              </button>
            </div>
            {appState().greetMessage && (
              <div class="greet-response">
                {appState().greetMessage}
              </div>
            )}
          </div>
        </div>
      </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">Default UI</span>
        </div>
      </div>
    </div>
  );
}

export default App;