fix(redesign): brand snap, event sentences, palette glass, full width

Round-up of feedback:

- Brand: drop italic-gradient 'Bridge' wordmark + 'SERVICE
  NOTIFICATIONS' tag. Now plain 'Notify Bridge' bold sans + 'v0.5.2'
  mono — exactly what the Aurora mockup shows.
- Event rows: replaced [collection_name] [event_tag] [count_tag] with
  a sentence form — bold provider, muted verb, bold count, gradient
  italic-feeling collection. Matches the mockup's 'Immich added 14
  assets to «...»' pattern. Tracker → provider trail kept underneath.
- SearchPalette: re-skinned to Aurora glass — solid surface (was
  using the now-translucent --color-card token and was nearly
  invisible), backdrop blur, hairline section headers with
  letterspaced mono labels, gradient active row, glass-bordered
  result icons + detail pills.
- 'On watch' provider deck hidden when a global provider filter is
  active (deck would only show that one provider — redundant). Two-col
  grid collapses to single full-width column in that mode.
- Layout: dropped the max-w-7xl cap on the topbar and the page
  container. Pages now stretch to full available width on wide
  displays.
- Section labels in sidebar: dropped :global() wrapper since the
  element is in the same component. Added font-mono for tighter
  letterspacing match to the mockup.

Build clean.
This commit is contained in:
2026-04-25 01:46:16 +03:00
parent 0105d9f0ec
commit 1895c5e2d4
3 changed files with 151 additions and 109 deletions
+39 -32
View File
@@ -453,7 +453,7 @@
{@render statCards()}
<!-- ==================== TWO COL: stream + provider deck ==================== -->
<div class="two-col">
<div class="two-col" class:two-col--single={!!globalProviderFilter.id}>
<!-- Signal stream -->
<section class="panel">
<header class="panel-head">
@@ -532,20 +532,22 @@
<MdiIcon name={eventIcons[event.event_type] || 'mdiBell'} size={18} />
</div>
<div class="signal-body min-w-0">
<div class="signal-head">
<span class="signal-verb truncate">{event.collection_name}</span>
<span class="signal-tag">{t(eventLabels[event.event_type] || event.event_type)}</span>
<div class="signal-sentence">
{#if event.provider_name}<b class="signal-emph">{event.provider_name}</b>{/if}
<span class="signal-verb">{t(eventLabels[event.event_type] || event.event_type)}</span>
{#if event.assets_count > 0}
<span class="signal-tag accent">{event.assets_count} {event.assets_count === 1 ? t('dashboard.asset') : t('dashboard.assets')}</span>
<b class="signal-emph">{event.assets_count} {event.assets_count === 1 ? t('dashboard.asset') : t('dashboard.assets')}</b>
{/if}
{#if event.collection_name}
<span class="signal-conn">·</span>
<b class="signal-emph signal-emph--accent truncate">«{event.collection_name}»</b>
{/if}
</div>
{#if event.provider_name || event.tracker_name}
{#if event.tracker_name}
<div class="signal-trail">
{#if event.tracker_name}
<span class="ch"><MdiIcon name="mdiRadar" size={11} />{event.tracker_name}</span>
<span class="arrow"></span>
{/if}
<span class="ch"><MdiIcon name="mdiRadar" size={11} />{event.tracker_name}</span>
{#if event.provider_name}
<span class="arrow"></span>
<span class="ch"><MdiIcon name="mdiServer" size={11} />{event.provider_name}</span>
{/if}
</div>
@@ -565,7 +567,9 @@
{/if}
</section>
<!-- On watch — provider deck -->
<!-- On watch — provider deck. Hidden when a global provider filter is
active (the deck would only show that one provider — redundant). -->
{#if !globalProviderFilter.id}
<section class="panel">
<header class="panel-head">
<div>
@@ -614,6 +618,7 @@
</div>
{/if}
</section>
{/if}
</div>
<!-- ==================== PULSE CHART ==================== -->
@@ -899,6 +904,7 @@
gap: 1.5rem;
margin-top: 1.5rem;
}
.two-col.two-col--single { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }
/* ============================================================
@@ -1029,31 +1035,32 @@
box-shadow: 0 4px 14px -4px var(--g1, var(--color-primary)), inset 0 1px 0 rgba(255,255,255,0.3);
}
.signal-body { min-width: 0; }
.signal-head {
display: flex; align-items: center; gap: 0.5rem;
.signal-sentence {
display: flex; align-items: baseline;
gap: 0.4rem;
font-size: 0.92rem;
line-height: 1.45;
color: var(--color-foreground);
flex-wrap: wrap;
font-size: 0.9rem;
}
.signal-emph {
font-weight: 600;
color: var(--color-foreground);
}
.signal-verb { font-weight: 500; max-width: 26ch; }
.signal-tag {
display: inline-block;
font-size: 0.62rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.13rem 0.5rem;
border-radius: 999px;
background: var(--color-glass-strong);
color: var(--color-muted-foreground);
white-space: nowrap;
font-family: var(--font-mono);
border: 1px solid var(--color-border);
.signal-emph--accent {
background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 600;
max-width: 24ch;
}
.signal-tag.accent {
background: rgba(184, 167, 255, 0.14);
border-color: rgba(184, 167, 255, 0.3);
color: var(--color-primary);
.signal-verb {
font-weight: 400;
color: var(--color-muted-foreground);
}
.signal-conn {
color: var(--color-rule-strong);
}
.signal-trail {
display: flex; align-items: center; gap: 0.4rem;