From 1895c5e2d46618fca474b811eb934cddbbd89c24 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Sat, 25 Apr 2026 01:46:16 +0300 Subject: [PATCH] fix(redesign): brand snap, event sentences, palette glass, full width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../src/lib/components/SearchPalette.svelte | 124 ++++++++++++------ frontend/src/routes/+layout.svelte | 65 ++++----- frontend/src/routes/+page.svelte | 71 +++++----- 3 files changed, 151 insertions(+), 109 deletions(-) diff --git a/frontend/src/lib/components/SearchPalette.svelte b/frontend/src/lib/components/SearchPalette.svelte index cf6f348..5670c6d 100644 --- a/frontend/src/lib/components/SearchPalette.svelte +++ b/frontend/src/lib/components/SearchPalette.svelte @@ -271,129 +271,175 @@ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9998; - background: rgba(0, 0, 0, 0.5); - backdrop-filter: blur(4px); + background: rgba(0, 0, 0, 0.55); + backdrop-filter: blur(8px) saturate(120%); + -webkit-backdrop-filter: blur(8px) saturate(120%); } .sp-container { position: fixed; - top: 20vh; + top: 18vh; left: 50%; transform: translateX(-50%); z-index: 9999; - width: min(500px, 90vw); - background: var(--color-card); - border: 1px solid var(--color-border); - border-radius: 0.75rem; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); + width: min(640px, 92vw); + background: color-mix(in srgb, var(--color-background) 92%, transparent); + backdrop-filter: blur(28px) saturate(160%); + -webkit-backdrop-filter: blur(28px) saturate(160%); + border: 1px solid var(--color-rule-strong); + border-radius: 18px; + box-shadow: var(--shadow-card), 0 30px 80px -20px rgba(0, 0, 0, 0.6); overflow: hidden; } + .sp-container::after { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + pointer-events: none; + background: linear-gradient(180deg, var(--color-highlight), transparent 30%); + opacity: 0.4; + } .sp-input-row { display: flex; align-items: center; - gap: 0.5rem; - padding: 0.75rem 1rem; + gap: 0.65rem; + padding: 0.95rem 1.15rem; border-bottom: 1px solid var(--color-border); color: var(--color-muted-foreground); + position: relative; + z-index: 1; } .sp-input { flex: 1; border: none; outline: none; background: transparent; - font-size: 0.9rem; + font-size: 0.95rem; color: var(--color-foreground); + font-family: var(--font-sans); + letter-spacing: -0.005em; } + .sp-input::placeholder { color: var(--color-muted-foreground); } .sp-kbd { - font-size: 0.6rem; + font-size: 0.62rem; font-family: var(--font-mono); - padding: 0.15rem 0.35rem; - border-radius: 0.25rem; - background: var(--color-muted); - color: var(--color-muted-foreground); + padding: 0.2rem 0.45rem; + border-radius: 6px; + background: var(--color-glass-strong); + color: var(--color-foreground); border: 1px solid var(--color-border); } .sp-results { - max-height: 50vh; + max-height: 52vh; overflow-y: auto; scrollbar-width: thin; - padding: 0.25rem; + padding: 0.35rem; + position: relative; + z-index: 1; } .sp-empty { display: flex; align-items: center; justify-content: center; - gap: 0.5rem; - padding: 2rem; + gap: 0.55rem; + padding: 2.5rem 2rem; color: var(--color-muted-foreground); font-size: 0.85rem; } .sp-group-header { display: flex; align-items: center; - gap: 0.375rem; - padding: 0.375rem 0.75rem; - font-size: 0.65rem; + gap: 0.45rem; + padding: 0.6rem 0.85rem 0.35rem; + font-size: 0.6rem; font-weight: 600; text-transform: uppercase; - letter-spacing: 0.04em; + letter-spacing: 0.16em; color: var(--color-muted-foreground); font-family: var(--font-mono); - margin-top: 0.25rem; + } + .sp-group-header::after { + content: ''; + flex: 1; + height: 1px; + background: var(--color-border); + margin-left: 0.35rem; } .sp-item { display: flex; align-items: center; - gap: 0.5rem; + gap: 0.65rem; width: 100%; - padding: 0.5rem 0.75rem; - border-radius: 0.375rem; - border: none; + padding: 0.55rem 0.85rem; + border-radius: 10px; + border: 1px solid transparent; background: transparent; color: var(--color-foreground); - font-size: 0.85rem; + font-size: 0.88rem; cursor: pointer; text-align: left; - transition: background 0.1s; + transition: background 0.12s, border-color 0.12s; + font-family: var(--font-sans); } .sp-item:hover, .sp-item.sp-active { - background: var(--color-muted); + background: var(--color-glass-strong); + border-color: var(--color-border); + } + .sp-item.sp-active { + background: linear-gradient(135deg, + color-mix(in srgb, var(--color-primary) 14%, transparent), + color-mix(in srgb, var(--color-orchid) 14%, transparent)); + border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); + box-shadow: inset 0 1px 0 var(--color-highlight); } .sp-item-icon { flex-shrink: 0; color: var(--color-muted-foreground); + width: 28px; height: 28px; + display: grid; place-items: center; + border-radius: 8px; + background: var(--color-glass-strong); + border: 1px solid var(--color-border); } .sp-item.sp-active .sp-item-icon { color: var(--color-primary); + background: var(--color-glass-elev); } .sp-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + font-weight: 500; } .sp-item-detail { font-size: 0.7rem; font-family: var(--font-mono); color: var(--color-muted-foreground); - padding: 0.1rem 0.35rem; + padding: 0.12rem 0.5rem; border-radius: 9999px; - background: var(--color-muted); + background: var(--color-glass-strong); + border: 1px solid var(--color-border); white-space: nowrap; } .sp-footer { display: flex; gap: 1rem; - padding: 0.5rem 1rem; + padding: 0.6rem 1.15rem; border-top: 1px solid var(--color-border); font-size: 0.65rem; color: var(--color-muted-foreground); + position: relative; + z-index: 1; + background: var(--color-glass-strong); } .sp-footer kbd { font-family: var(--font-mono); - padding: 0.05rem 0.25rem; - border-radius: 0.2rem; - background: var(--color-muted); + padding: 0.1rem 0.35rem; + border-radius: 5px; + background: var(--color-glass); border: 1px solid var(--color-border); - font-size: 0.6rem; + font-size: 0.62rem; + color: var(--color-foreground); } diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 506cb6a..284a760 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -367,16 +367,16 @@
{#if !collapsed} -
+
-
-

+
+

{#if globalProviderFilter.provider} - + {/if} - Notify Bridge + Notify Bridge

-

{t('app.tagline')}

+

v0.5.2

{:else} @@ -607,7 +607,7 @@ style="padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));"> -
+
{#key page.url.pathname} -
+
{@render children()}
{/key} @@ -717,41 +717,29 @@ border-bottom: 1px solid var(--color-border); } - /* Brand mark — italic Newsreader serif */ - .brand-mark { - font-family: var(--font-display); - font-weight: 400; - font-size: 1.15rem; - letter-spacing: -0.02em; - color: var(--color-foreground); - margin: 0; - line-height: 1; - display: flex; - align-items: baseline; - gap: 0.3rem; - } - .brand-mark__notify { + /* Brand — snapped to Aurora mockup: bold sans wordmark + mono version */ + .brand-text { line-height: 1.1; min-width: 0; } + .brand-name { font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem; - } - .brand-mark em { - font-style: italic; - background: linear-gradient(135deg, var(--color-orchid), var(--color-primary)); - -webkit-background-clip: text; - background-clip: text; - color: transparent; + letter-spacing: -0.01em; + color: var(--color-foreground); + margin: 0; + display: flex; + align-items: center; + gap: 0.35rem; + white-space: nowrap; } .brand-mark__icon { - margin-right: 2px; - align-self: center; + display: inline-flex; + align-items: center; } - .brand-tag { - font-size: 0.62rem; + .brand-version { + font-size: 0.65rem; color: var(--color-muted-foreground); - margin-top: 3px; - letter-spacing: 0.13em; - text-transform: uppercase; + margin: 3px 0 0; + letter-spacing: 0.02em; font-weight: 500; } .brand-orb { @@ -898,7 +886,7 @@ } /* Section labels above each nav group */ - :global(.nav-section-label) { + .nav-section-label { display: flex; align-items: center; gap: 0.55rem; @@ -908,8 +896,9 @@ text-transform: uppercase; color: var(--color-muted-foreground); padding: 0.85rem 0.85rem 0.4rem; + font-family: var(--font-mono); } - :global(.nav-section-label::after) { + .nav-section-label::after { content: ''; flex: 1; height: 1px; diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte index f3e5ede..b7d7ee2 100644 --- a/frontend/src/routes/+page.svelte +++ b/frontend/src/routes/+page.svelte @@ -453,7 +453,7 @@ {@render statCards()} -
+
@@ -532,20 +532,22 @@
-
- {event.collection_name} - {t(eventLabels[event.event_type] || event.event_type)} +
+ {#if event.provider_name}{event.provider_name}{/if} + {t(eventLabels[event.event_type] || event.event_type)} {#if event.assets_count > 0} - {event.assets_count} {event.assets_count === 1 ? t('dashboard.asset') : t('dashboard.assets')} + {event.assets_count} {event.assets_count === 1 ? t('dashboard.asset') : t('dashboard.assets')} + {/if} + {#if event.collection_name} + · + «{event.collection_name}» {/if}
- {#if event.provider_name || event.tracker_name} + {#if event.tracker_name}
- {#if event.tracker_name} - {event.tracker_name} - → - {/if} + {event.tracker_name} {#if event.provider_name} + → {event.provider_name} {/if}
@@ -565,7 +567,9 @@ {/if} - + + {#if !globalProviderFilter.id}
@@ -614,6 +618,7 @@
{/if}
+ {/if}
@@ -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;