From 5025bfa883780098fb5c2f1396fe9be82a3c9f83 Mon Sep 17 00:00:00 2001 From: Till-JS <101404291+Till-JS@users.noreply.github.com> Date: Sat, 14 Feb 2026 12:46:19 +0100 Subject: [PATCH] fix(clock-bot): optimize widget styling for Element info panel - Use transparent background to adapt to Element theme - Remove min-height and centering (content starts at top) - Reduce font sizes and spacing for compact display - Use semi-transparent backgrounds for theme compatibility - Add flex-wrap for narrow panels Co-Authored-By: Claude Opus 4.5 --- apps/nutriphi/apps/web/src/hooks.server.ts | 27 +++++ .../apps/web/src/lib/stores/auth.svelte.ts | 16 ++- .../src/widget/widget.controller.ts | 98 ++++++++++--------- 3 files changed, 93 insertions(+), 48 deletions(-) create mode 100644 apps/nutriphi/apps/web/src/hooks.server.ts diff --git a/apps/nutriphi/apps/web/src/hooks.server.ts b/apps/nutriphi/apps/web/src/hooks.server.ts new file mode 100644 index 000000000..6d7a5089d --- /dev/null +++ b/apps/nutriphi/apps/web/src/hooks.server.ts @@ -0,0 +1,27 @@ +/** + * Server Hooks for SvelteKit + * - Injects runtime environment variables for client-side use + * - Auth is handled client-side via Mana Core Auth + */ + +import type { Handle } from '@sveltejs/kit'; + +// Get client-side URLs from environment (Docker runtime) +const PUBLIC_MANA_CORE_AUTH_URL_CLIENT = + process.env.PUBLIC_MANA_CORE_AUTH_URL_CLIENT || process.env.PUBLIC_MANA_CORE_AUTH_URL || ''; +const PUBLIC_BACKEND_URL_CLIENT = + process.env.PUBLIC_BACKEND_URL_CLIENT || process.env.PUBLIC_BACKEND_URL || ''; + +export const handle: Handle = async ({ event, resolve }) => { + return resolve(event, { + transformPageChunk: ({ html }) => { + // Inject runtime environment variables into the HTML + // These will be available on window.__PUBLIC_*__ for client-side code + const envScript = ``; + return html.replace('', `${envScript}`); + }, + }); +}; diff --git a/apps/nutriphi/apps/web/src/lib/stores/auth.svelte.ts b/apps/nutriphi/apps/web/src/lib/stores/auth.svelte.ts index 376666fec..81cb3eaa9 100644 --- a/apps/nutriphi/apps/web/src/lib/stores/auth.svelte.ts +++ b/apps/nutriphi/apps/web/src/lib/stores/auth.svelte.ts @@ -6,7 +6,19 @@ import { browser } from '$app/environment'; import { initializeWebAuth } from '@manacore/shared-auth'; import type { UserData } from '@manacore/shared-auth'; -import { PUBLIC_MANA_CORE_AUTH_URL } from '$env/static/public'; + +// Get auth URL dynamically at runtime - fallback for SSR and client +function getAuthUrl(): string { + if (browser && typeof window !== 'undefined') { + // Client-side: use injected window variable (set by hooks.server.ts) + // Falls back to localhost for local development + const injectedUrl = (window as unknown as { __PUBLIC_MANA_CORE_AUTH_URL__?: string }) + .__PUBLIC_MANA_CORE_AUTH_URL__; + return injectedUrl || 'http://localhost:3001'; + } + // Server-side (SSR): use Docker internal URL for container-to-container communication + return process.env.PUBLIC_MANA_CORE_AUTH_URL || 'http://localhost:3001'; +} // Get backend URL dynamically at runtime function getBackendUrl(): string { @@ -26,7 +38,7 @@ function getAuthService() { if (!browser) return null; if (!_authService) { const auth = initializeWebAuth({ - baseUrl: PUBLIC_MANA_CORE_AUTH_URL || 'http://localhost:3001', + baseUrl: getAuthUrl(), backendUrl: getBackendUrl(), }); _authService = auth.authService; diff --git a/services/matrix-clock-bot/src/widget/widget.controller.ts b/services/matrix-clock-bot/src/widget/widget.controller.ts index 61b60b2c6..1c19da639 100644 --- a/services/matrix-clock-bot/src/widget/widget.controller.ts +++ b/services/matrix-clock-bot/src/widget/widget.controller.ts @@ -150,53 +150,47 @@ export class WidgetController { body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; - background: #1a1a2e; + background: transparent; color: #eee; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 16px; + padding: 12px; } .container { width: 100%; - max-width: 320px; text-align: center; } .status-icon { - font-size: 48px; - margin-bottom: 16px; - } - - .time-display { - font-size: 48px; - font-weight: 300; - font-variant-numeric: tabular-nums; + font-size: 32px; margin-bottom: 8px; } + .time-display { + font-size: 36px; + font-weight: 300; + font-variant-numeric: tabular-nums; + margin-bottom: 4px; + } + .time-total { - font-size: 14px; + font-size: 12px; color: #888; - margin-bottom: 16px; + margin-bottom: 12px; } .progress-container { width: 100%; - height: 8px; - background: #333; - border-radius: 4px; + height: 6px; + background: rgba(255,255,255,0.1); + border-radius: 3px; overflow: hidden; - margin-bottom: 8px; + margin-bottom: 6px; } .progress-bar { height: 100%; background: linear-gradient(90deg, #4CAF50, #8BC34A); - border-radius: 4px; + border-radius: 3px; transition: width 0.3s ease; } @@ -205,37 +199,39 @@ export class WidgetController { } .percentage { - font-size: 14px; + font-size: 11px; color: #888; - margin-bottom: 24px; + margin-bottom: 12px; } .label { - font-size: 14px; + font-size: 11px; color: #aaa; - margin-bottom: 24px; - padding: 8px 16px; - background: #252540; - border-radius: 16px; + margin-bottom: 12px; + padding: 4px 10px; + background: rgba(255,255,255,0.05); + border-radius: 12px; display: inline-block; + word-break: break-word; } .controls { display: flex; - gap: 12px; + gap: 8px; justify-content: center; + flex-wrap: wrap; } .btn { - padding: 12px 24px; - font-size: 16px; + padding: 8px 14px; + font-size: 13px; border: none; - border-radius: 8px; + border-radius: 6px; cursor: pointer; transition: all 0.2s ease; - display: flex; + display: inline-flex; align-items: center; - gap: 8px; + gap: 4px; } .btn-primary { @@ -248,12 +244,12 @@ export class WidgetController { } .btn-secondary { - background: #333; + background: rgba(255,255,255,0.1); color: #eee; } .btn-secondary:hover { - background: #444; + background: rgba(255,255,255,0.15); } .btn:disabled { @@ -264,34 +260,44 @@ export class WidgetController { .no-timer { text-align: center; color: #888; + padding: 8px 0; } .no-timer-icon { - font-size: 64px; - margin-bottom: 16px; + font-size: 40px; + margin-bottom: 8px; opacity: 0.5; } .no-timer h2 { - font-size: 18px; + font-size: 14px; font-weight: 500; - margin-bottom: 8px; + margin-bottom: 4px; color: #aaa; } .no-timer p { - font-size: 14px; + font-size: 12px; + } + + .no-timer code { + background: rgba(255,255,255,0.1); + padding: 2px 6px; + border-radius: 4px; + font-size: 11px; } .error { color: #f44336; - padding: 16px; - background: #2a1a1a; - border-radius: 8px; + padding: 12px; + background: rgba(244, 67, 54, 0.1); + border-radius: 6px; + font-size: 12px; } .loading { color: #888; + padding: 20px 0; } .finished {