Fluksio/app
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Home mosaic, multi-select delete, offline banner and loading states

Browse Source 
- Home puts the dashboards beside the flows: two equal-height columns,
  capped and scrollable, most recently worked on first. Each tile is a
  schematic footprint built from the stored widget placements.
- Flows and dashboards can be picked by long press or ctrl-click; the
  create button becomes a trash and one dialog covers the batch.
- The offline banner is drawn on the body so it centres on the viewport,
  and the live socket now releases the offline latch a stray 503 set.
- A boot spinner before React's first commit, a router pending screen for
  code-split pages, and skeletons where an empty list used to flash.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018tULRZJUkZsw7rMJ3h4xvu
This commit is contained in:
stroblme
2026-08-22 12:02:14 +02:00
co-authored by Claude Opus 5
parent 6d84316ce5
commit f17d51c12f
13 changed files with 837 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+31 -1
View File
@@ -17,9 +17,39 @@
} catch (_e) { }
})()
</script>
<!-- The boot spinner, until React's first commit clears `#root`. Styled
here with the literal values of --background / --border / --primary
because the stylesheet carrying those tokens has not necessarily
arrived yet; the theme class above is already on <html>. -->
<style>
#boot {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
}
#boot i {
width: 28px;
height: 28px;
border: 2px solid #e4e4e4;
border-top-color: #4a7189;
border-radius: 9999px;
animation: boot-spin 0.8s linear infinite;
}
html.dark #boot { background: #0a0a0a; }
html.dark #boot i { border-color: #2a2a2a; border-top-color: #7ba3b8; }
@keyframes boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
#boot i { animation-duration: 2.4s; }
}
</style>
</head>
<body>
<div id="root"></div>
<div id="root">
<div id="boot" role="status" aria-label="Loading Fluksio"><i></i></div>
</div>
<script type="module" src="./src/main.tsx"></script>
</body>
</html>