From 76ce85c9bbf5537f5e8c9287a02a8a21aca5a130 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Fri, 10 Apr 2026 19:06:53 +0300 Subject: [PATCH] fix: polish empty states and status page layout - Boards: improved empty state with create button for admins - Status: 2-column grid layout, colored left border by status, better empty state --- src/routes/boards/+page.svelte | 50 ++++++++++++++++++++++------------ src/routes/status/+page.svelte | 27 ++++++++++++++---- 2 files changed, 55 insertions(+), 22 deletions(-) diff --git a/src/routes/boards/+page.svelte b/src/routes/boards/+page.svelte index f8d7565..ec79365 100644 --- a/src/routes/boards/+page.svelte +++ b/src/routes/boards/+page.svelte @@ -31,24 +31,40 @@ {#if data.boards.length === 0} -
- - - - - -

{$t('board.no_boards')}

+
+
+ + + + + +
+

{$t('board.no_boards')}

{#if data.isGuest} -

{$t('board.sign_in_more')}

+

{$t('board.sign_in_more')}

+ {:else if data.user?.role === 'admin'} +

+ Create your first board to organize apps into a custom dashboard. +

+ + + + + + {$t('board.new')} + {/if}
{:else} diff --git a/src/routes/status/+page.svelte b/src/routes/status/+page.svelte index 585ce53..d363de2 100644 --- a/src/routes/status/+page.svelte +++ b/src/routes/status/+page.svelte @@ -42,6 +42,19 @@ } } + function statusBorderColor(status: string): string { + switch (status) { + case 'online': + return 'border-l-green-500'; + case 'offline': + return 'border-l-red-500'; + case 'degraded': + return 'border-l-yellow-500'; + default: + return 'border-l-gray-400'; + } + } + function formatUptime(value: number | null): string { if (value === null) return 'N/A'; return `${value.toFixed(2)}%`; @@ -58,7 +71,7 @@
-
+

Status Page

@@ -101,14 +114,18 @@
-
+
{#if data.apps.length === 0} -
-

No monitored services found

+
+ + + +

No monitored services

+

Add apps with health checking enabled to see their status here

{:else} {#each data.apps as app (app.appId)} -
+