156 lines
7.4 KiB
HTML
156 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thursday, 30 July 2026 — Roject</title>
|
|
<link rel="stylesheet" href="../../../../_assets_/styles.css">
|
|
<link rel="stylesheet" href="../../../../_assets_/nav.css">
|
|
</head>
|
|
<body>
|
|
<div class="page">
|
|
|
|
<header>
|
|
<p class="date">Thursday, 30 July 2026</p>
|
|
<h1>Session History</h1>
|
|
<p class="subtitle">Local filesystem access, remote projects proxy, file tree custom elements + icons, project-list-default tab UI.</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2>What we built</h2>
|
|
|
|
<div class="card">
|
|
<h3>project-list-default — tab UI and folder rows</h3>
|
|
<p>
|
|
The navigation in <code>project-list-default</code> now uses proper custom elements:
|
|
<code><pld-tabs></code> and <code><pld-tab></code> (previously
|
|
<code><div class="pld-tabs"></code> / <code><button class="pld-tab"></code>).
|
|
The tabs are centred in the nav bar via
|
|
<code>position: absolute; left: 50%; transform: translateX(-50%)</code>
|
|
without interfering with the logo.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
The <em>This PC</em> tab row was rewritten to use the same style as online project rows:
|
|
<code>pld-name</code> class, Barlow 5em weight, and a seeded hue via
|
|
<code>hueFromId(folder)</code> so each local folder gets a deterministic colour.
|
|
The subtitle / path line was removed for visual consistency.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Local Filesystem Access — completed</h3>
|
|
<p>
|
|
The Electron app can now open any host directory as an editor workspace.
|
|
The <em>This PC</em> tab lets the user browse and select a local folder;
|
|
clicking opens the editor with a <code>localRoot</code> URL param.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
<code>Editor.ts</code> gained a <code>localRoot</code> field and private
|
|
<code>_readUrl</code> / <code>_writeUrl</code> helpers that branch on
|
|
<code>localRoot</code> → <code>remoteProject</code> → <code>projectId</code>.
|
|
<code>editor-shell.ts</code> reads the <code>localRoot</code> URL param and sets it
|
|
on the <code>Editor</code> singleton. <code>file-tree-panel.ts</code> branches on
|
|
<code>localRoot</code> for all tree, read, write, rename, and delete operations,
|
|
routing through the <code>/api/local/</code> routes (Node.js <code>fs</code>).
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
Root cause of the prior <code>/api/files//tree 404</code> error: <code>projectId</code>
|
|
was <code>''</code> when only <code>localRoot</code> was set, producing a double slash
|
|
in the URL. Fixed by the three-branch URL helper.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Remote Projects in Electron — proxy approach</h3>
|
|
<p>
|
|
Online projects from <code>roject.rokojori.com</code> are now accessible in the
|
|
Electron app via a server-side reverse proxy. <code>source/server/routes/remoteProxy.ts</code>
|
|
is a catch-all router mounted at <code>/api/remote</code>: it strips the prefix,
|
|
prepends <code>/api</code>, and forwards the request to
|
|
<code>roject.rokojori.com</code> over HTTPS.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
Authentication is automatic: the Electron <code>onBeforeSendHeaders</code> interceptor
|
|
already injects <code>Authorization: Bearer <token></code> into every
|
|
<code>localhost:3000</code> request, so the proxy receives the header and forwards it
|
|
upstream with no new IPC channel needed.
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
<code>project-list-default</code> gained an <code>_isRemoteOnline</code> flag and a
|
|
<code>_projectUrl()</code> helper that routes all API calls to <code>/api/remote/projects</code>
|
|
when the Online tab is active. Row clicks open the editor with a <code>remoteProject</code>
|
|
URL param; <code>Editor.ts</code> / <code>editor-shell.ts</code> read and apply it
|
|
the same way as <code>localRoot</code>.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>file-tree-panel — custom elements, icons, closed-by-default dirs</h3>
|
|
<p>
|
|
All structural HTML in the file tree was converted to hyphenated custom elements:
|
|
<code><ftp-header></code>, <code><ftp-tree></code>, <code><ftp-list></code>,
|
|
<code><ftp-dir></code>, <code><ftp-dir-label></code>,
|
|
<code><ftp-file></code>, <code><ftp-inline-create></code>,
|
|
<code><ftp-inline-label></code>, <code><ftp-type-error></code>,
|
|
<code><ftp-empty></code>, <code><ftp-up></code>.
|
|
CSS selectors, DOM queries, and <code>closest()</code> calls updated throughout
|
|
(e.g. <code>el.closest('ftp-dir')</code> instead of <code>el.closest('li')</code>).
|
|
</p>
|
|
<p style="margin-top:0.75rem">
|
|
Directories now start <strong>closed</strong>. A CSS triangle indicator (border trick,
|
|
no character) on <code>ftp-dir-label::before</code> points right when closed and
|
|
rotates 90° on <code>.open</code>. Directories are sorted before files in
|
|
<code>renderNodes</code>. Files and directories get SVG icons via
|
|
<code><img src="/icons/..."></code>; the same icons appear in
|
|
<code>tab-container</code> header tabs. SVG sources live in <code>source/icons/</code>
|
|
and are copied to <code>build/app/icons/</code> by <code>scripts/copy-pages.js</code>.
|
|
</p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Key decisions</h2>
|
|
|
|
<div class="card">
|
|
<p>
|
|
<strong>Server-side proxy over dual-window approach for remote projects.</strong>
|
|
Option A (opening a second BrowserWindow pointed at the live site) would have
|
|
introduced version skew risk when the local Electron build diverges from the server.
|
|
Option B (proxy at <code>/api/remote/**</code>) keeps a single frontend, single
|
|
server, and lets <code>onBeforeSendHeaders</code> handle auth automatically.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<p>
|
|
<strong>Three-branch URL helper instead of hardcoded paths.</strong>
|
|
<code>_readUrl</code> / <code>_writeUrl</code> check <code>localRoot</code> first,
|
|
then <code>remoteProject</code>, then fall back to <code>projectId</code>. This keeps
|
|
all routing in one place and prevents the double-slash <code>/api/files//tree</code>
|
|
error that occurred when <code>projectId</code> was empty.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<p>
|
|
<strong>Hyphenated custom element names for all structural markup.</strong>
|
|
No <code><div class="name"></code> pattern anywhere in the file tree or
|
|
project list. CSS uses the element tag as the root selector, keeping selectors
|
|
short and scoped without class name collisions.
|
|
</p>
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<footer>
|
|
Roject — session history
|
|
</footer>
|
|
|
|
</div>
|
|
<script>var NAV_ROOT = '../../../../';</script>
|
|
<script src="../../../../_assets_/nav-data.js"></script>
|
|
<script src="../../../../_assets_/nav.js"></script>
|
|
</body>
|
|
</html>
|