mirror of
https://github.com/hanzo-templates/desktop-tauri.git
synced 2026-10-30 20:43:14 +00:00
zeekayandHanzo Dev
4621347ad4
DEFECT: hanzo-templates shipped 71 templates and not one of them built a native application. Every "make me a desktop app" request dead-ended in the browser, and the one repo that looked like it might help (`mobile`) was completely empty — no commits, no files. There was no answer to "how do I ship a .dmg / .msi / .deb from this platform". REASON for the shape: - Tauri v2 by default. A Rust core against the OS webview produces single-digit MB installers; Electron is reserved for the cases where Chromium itself is the requirement (see desktop-recorder's desktopCapturer). - ONE seam, `src/native.ts`. A native window cannot be iframed, so the gallery preview has to be a real build of the same UI, not a screenshot and not a dead link. `bridge()` resolves a command through the Rust core (or the Electron main process) when it is running natively and through the fallbacks in `src/web.ts` when it is a browser tab. No call site branches; the two shells implement the same contract, which is why app.tsx and shell.tsx are identical across both. - Frameless everywhere. `decorations: false` / `frame: false` means the titlebar in shell.tsx IS the chrome, so the traffic lights do real work through the same bridge rather than importing a shell-specific API. - @hanzo/base for the backend and the a.hanzo.ai analytics/chat runtime in index.html, so a fork starts with persistence and telemetry already wired. - Release fans out to per-OS runners. Desktop bundles must be produced on the target OS (codesign, .dmg/.msi/.deb tooling); this one workflow is the documented exception to the shared build fleet. Upstream and license are recorded in every README. MIT/Apache-2.0/BSD only: these are meant to be forked and commercialised. Co-authored-by: Hanzo Dev <[email protected]>
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { isNative, winctl } from "./native";
|
|
|
|
/**
|
|
* The window chrome every Hanzo desktop template renders inside: a draggable
|
|
* titlebar, an optional sidebar, a status bar.
|
|
*
|
|
* The browser preview renders the same markup plus one honest ribbon: a native
|
|
* app cannot be iframed, so the preview says what it is and links the real
|
|
* installers rather than pretending to be the shipped binary.
|
|
*/
|
|
export function Win(p: {
|
|
title: string;
|
|
sub?: string;
|
|
actions?: ReactNode;
|
|
side?: ReactNode;
|
|
status?: ReactNode;
|
|
wide?: boolean;
|
|
flush?: boolean;
|
|
releases: string;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="win">
|
|
<header className="titlebar" data-tauri-drag-region>
|
|
<div className="lights">
|
|
<i onClick={() => winctl("close")} />
|
|
<i onClick={() => winctl("minimize")} />
|
|
<i onClick={() => winctl("toggleMaximize")} />
|
|
</div>
|
|
<h1>{p.title}</h1>
|
|
{p.sub && <span className="sub">{p.sub}</span>}
|
|
<span className="grow" data-tauri-drag-region />
|
|
{!isNative && (
|
|
<span className="ribbon">
|
|
web preview —{" "}
|
|
<a href={p.releases} target="_blank" rel="noreferrer">
|
|
download for macOS / Windows / Linux
|
|
</a>
|
|
</span>
|
|
)}
|
|
{p.actions && <span className="act">{p.actions}</span>}
|
|
</header>
|
|
<div className={"body" + (p.side ? (p.wide ? " wide" : "") : " solo")}>
|
|
{p.side && <aside className="sidebar">{p.side}</aside>}
|
|
<main className={"main" + (p.flush ? " flush" : "")}>{p.children}</main>
|
|
</div>
|
|
<footer className="statusbar">
|
|
<b>{isNative ? "native" : "web"}</b>
|
|
{p.status}
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/** Sidebar nav row — one shape for every template's navigation. */
|
|
export function NavItem(p: {
|
|
on: boolean;
|
|
onClick: () => void;
|
|
children: ReactNode;
|
|
tail?: ReactNode;
|
|
dot?: boolean;
|
|
}) {
|
|
return (
|
|
<button aria-current={p.on} onClick={p.onClick}>
|
|
{p.dot && <span className="dot" />}
|
|
{p.children}
|
|
{p.tail !== undefined && <span className="tail">{p.tail}</span>}
|
|
</button>
|
|
);
|
|
}
|