Add host platform detection and macOS styles

Expose host platform to the UI and apply platform-specific styling. Backend: add CurrentPlatformName() and include "platform" in the JSON sent from NebulaController so the frontend can know the host OS. Frontend: detectHostPlatform() initializes state.platform, applyPlatform() sets a platform-* body class, and applyState() applies it. CSS: add .platform-macos rules to adjust title padding and hide window controls on macOS. Also fix FilePathToUrl to avoid producing an extra slash when the encoded path already starts with '/'.
This commit is contained in:
2026-05-22 10:55:16 +12:00
parent ce92b3841f
commit b7596674ab
4 changed files with 38 additions and 1 deletions
+8
View File
@@ -89,6 +89,10 @@ button:disabled {
background: var(--bg);
}
.platform-macos .title-row {
padding: 0 12px 0 78px;
}
/* ── Tabs ───────────────────────────────────────────────────── */
.tabs {
@@ -257,6 +261,10 @@ button:disabled {
color: white;
}
.platform-macos .window-controls {
display: none;
}
/* ── Toolbar ────────────────────────────────────────────────── */
.toolbar {
+16
View File
@@ -28,9 +28,24 @@ const state = {
canGoBack: false,
canGoForward: false,
favicon: '',
platform: detectHostPlatform(),
tabs: []
};
function detectHostPlatform() {
const platform = `${navigator.userAgentData?.platform || ''} ${navigator.platform || ''} ${navigator.userAgent || ''}`.toLowerCase();
if (platform.includes('mac')) return 'macos';
if (platform.includes('win')) return 'windows';
if (platform.includes('linux')) return 'linux';
return 'unknown';
}
function applyPlatform(platform) {
const normalized = ['macos', 'windows', 'linux'].includes(platform) ? platform : 'unknown';
document.body.classList.remove('platform-macos', 'platform-windows', 'platform-linux', 'platform-unknown');
document.body.classList.add(`platform-${normalized}`);
}
function hexToRgb(hex) {
if (!hex || typeof hex !== 'string') return null;
let normalized = hex.trim().replace(/^#/, '');
@@ -191,6 +206,7 @@ function renderTabs() {
function applyState(nextState) {
Object.assign(state, nextState || {});
applyPlatform(state.platform);
const title = state.title || 'New Tab';
const url = state.url || '';