alexei.dolgolyov/notify-bridge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 31 Wiki Activity

feat(redesign): subpage hero header + iconpicker portal + tighter gaps

Browse Source 
Three threads bundled:

- PageHeader.svelte upgraded to a glass-card subpage hero matching
  the dashboard hero language, scaled down. New optional props (all
  backward-compatible — old callers keep working): emphasis (italic
  gradient word appended to title), crumb (uppercase mono kicker),
  count + countLabel (right-side mono meter), pills (status chips
  with tones: mint / sky / orchid / coral / citrus / primary).
- Providers page wired up first as the test surface: pulls live
  online/offline/checking counts from the existing health probe and
  shows a type-count pill. Locale keys added (en + ru) for the new
  copy ('Service / providers' wordmark, longer description).
- IconPicker dropdown was suffering the same backdrop-filter
  containing-block bug as IconGridSelect — repositioned popups
  rendered inside any glass form panel got clipped or floated to
  the bottom of the page. Now portals to <body> via the shared
  $lib/portal action and uses Aurora glass styling end-to-end
  (solid surface, gradient-active cell, glass-strong search input).
- Layout gaps tightened to match the mockup:
    * sidebar→content horizontal gap is now 18px flat (was 50px:
      the 18px shell-gap PLUS another 32px wrapper padding on each
      child of main). Dropped px-4/md:px-8 from the topbar wrapper
      and the per-page content wrapper — main's children sit flush
      at the column boundary.
    * topbar→content vertical gap reduced to 12px (was 16px / pt-4).

Build clean, 0 errors.
This commit is contained in:
Admin
2026-04-25 02:15:34 +03:00
parent 46a4a6ee29
commit 9733e5c122
6 changed files with 378 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/IconPicker.svelte
+152 -22
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { getMdiPath, getAllMdiNames } from '$lib/mdi-lookup.svelte';
import { portal } from '$lib/portal';
let { value = '', onselect } = $props<{
value: string;
@@ -34,7 +35,14 @@
function toggleOpen() {
if (!open && buttonEl) {
const rect = buttonEl.getBoundingClientRect();
dropdownStyle = `position:fixed; z-index:9999; top:${rect.bottom + 4}px; left:${rect.left}px;`;
const popupWidth = 320; // 20rem
const popupHeight = 320;
const spaceBelow = window.innerHeight - rect.bottom;
const top = spaceBelow > popupHeight + 16
? rect.bottom + 4
: Math.max(8, rect.top - popupHeight - 4);
const left = Math.min(rect.left, window.innerWidth - popupWidth - 16);
dropdownStyle = `position:fixed; z-index:9999; top:${top}px; left:${Math.max(8, left)}px;`;
}
open = !open;
if (!open) search = '';
@@ -58,36 +66,158 @@
<div class="inline-block">
<button type="button" bind:this={buttonEl} onclick={toggleOpen}
class="flex items-center justify-center gap-1 px-2 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] hover:bg-[var(--color-muted)] transition-colors">
class="icon-picker-trigger">
{#if value && getMdiPath(value)}
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(value)} /></svg>
{:else}
<span class="text-[var(--color-muted-foreground)] text-xs">Icon</span>
<span class="icon-picker-placeholder">Icon</span>
{/if}
<span class="text-xs text-[var(--color-muted-foreground)]">▼</span>
<span class="icon-picker-caret">▾</span>
</button>
</div>
{#if open}
<div style="position:fixed; top:0; left:0; right:0; bottom:0; z-index:9998;"
role="presentation"
onclick={() => { open = false; search = ''; }}></div>
<!-- Portal popup so it escapes any backdrop-filter / transform ancestor
that would otherwise act as the containing block for position:fixed. -->
<div use:portal class="ip-portal-root">
<div class="ip-backdrop"
role="presentation"
onclick={() => { open = false; search = ''; }}></div>
<div style="{dropdownStyle} width: 20rem; background: var(--color-card); border: 1px solid var(--color-border); border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.3); padding: 0.75rem;"
class="">
<input type="text" bind:value={search} placeholder="Search icons..."
class="w-full px-2 py-1 mb-2 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" />
<div style="display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.25rem; max-height: 14rem; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;">
<button type="button" onclick={() => select('')}
class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] text-xs text-[var(--color-muted-foreground)]"
title="No icon">✕</button>
{#each filtered as iconName}
<button type="button" onclick={() => select(iconName)}
class="flex items-center justify-center aspect-square rounded hover:bg-[var(--color-muted)] {value === iconName ? 'bg-[var(--color-accent)]' : ''}"
title={iconName.replace('mdi', '')}>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(iconName)} /></svg>
</button>
{/each}
<div style={dropdownStyle} class="ip-popup">
<input type="text" bind:value={search} placeholder="Search icons..."
class="ip-search" autocomplete="off" />
<div class="ip-grid">
<button type="button" onclick={() => select('')}
class="ip-cell ip-cell--clear"
title="No icon">✕</button>
{#each filtered as iconName}
<button type="button" onclick={() => select(iconName)}
class="ip-cell {value === iconName ? 'is-active' : ''}"
title={iconName.replace('mdi', '')}>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d={getMdiPath(iconName)} /></svg>
</button>
{/each}
</div>
</div>
</div>
{/if}
<style>
.icon-picker-trigger {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.7rem;
border-radius: 0.625rem;
border: 1px solid var(--color-border);
background: var(--color-input-bg);
color: var(--color-foreground);
font-size: 0.85rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s;
}
.icon-picker-trigger:hover {
background: var(--color-glass-strong);
border-color: var(--color-rule-strong);
}
.icon-picker-placeholder {
color: var(--color-muted-foreground);
font-size: 0.78rem;
}
.icon-picker-caret {
color: var(--color-muted-foreground);
font-size: 0.7rem;
}
/* Portal root — drains the popup out of any backdrop-filter ancestor */
.ip-portal-root {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
}
.ip-backdrop {
position: absolute;
inset: 0;
pointer-events: auto;
}
.ip-popup {
pointer-events: auto;
width: 20rem;
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: 14px;
box-shadow: var(--shadow-card), 0 24px 48px -16px rgba(0, 0, 0, 0.5);
padding: 0.65rem;
position: relative;
}
.ip-popup::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(180deg, var(--color-highlight), transparent 30%);
opacity: 0.4;
}
.ip-search {
width: 100%;
padding: 0.45rem 0.6rem;
margin-bottom: 0.5rem;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-glass-strong);
color: var(--color-foreground);
font-size: 0.82rem;
outline: none;
font-family: inherit;
position: relative;
z-index: 1;
}
.ip-search:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-glow);
}
.ip-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.25rem;
max-height: 14rem;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: thin;
position: relative;
z-index: 1;
}
.ip-cell {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
border-radius: 8px;
border: 1px solid transparent;
background: transparent;
color: var(--color-foreground);
cursor: pointer;
transition: all 0.15s;
}
.ip-cell:hover {
background: var(--color-glass-strong);
border-color: var(--color-border);
}
.ip-cell.is-active {
background: linear-gradient(135deg,
color-mix(in srgb, var(--color-primary) 18%, transparent),
color-mix(in srgb, var(--color-orchid) 18%, transparent));
border-color: var(--color-primary);
color: var(--color-primary);
box-shadow: inset 0 1px 0 var(--color-highlight);
}
.ip-cell--clear {
color: var(--color-muted-foreground);
font-size: 0.75rem;
}
</style>