Enhance alias filtering functionality in IP routes

- Added a new function to apply alias changes dynamically based on user selection, improving the responsiveness of the alias filter.
- Updated the alias selection logic to ensure consistency with URL parameters, enhancing user experience when navigating between different aliases.
- Refactored the alias filter component to include a class for better z-index management, ensuring proper display layering in the UI.
This commit is contained in:
Denozordec
2026-03-30 23:01:40 +07:00
parent 309750fd25
commit aaacb80f9a
2 changed files with 22 additions and 4 deletions
@@ -36,7 +36,7 @@
<Select.Trigger class="mt-1 w-[220px]">
{selectedLabel}
</Select.Trigger>
<Select.Content>
<Select.Content class="z-[1200]">
<Select.Item value="all">{allLabel}</Select.Item>
{#each availableAliases as alias (alias)}
<Select.Item value={alias}>{alias}</Select.Item>
+21 -3
View File
@@ -349,6 +349,20 @@
});
}
async function applyAliasIfChanged(nextAlias: string) {
const currentAlias = parseAliasFilter(page.url.searchParams.get('aliases'));
if (nextAlias === currentAlias) return;
const q = new URLSearchParams(page.url.searchParams);
if (nextAlias === 'all') q.delete('aliases');
else q.set('aliases', nextAlias);
const qs = q.toString();
await goto(`${page.url.pathname}${qs ? `?${qs}` : ''}`, {
replaceState: true,
noScroll: true,
keepFocus: true
});
}
let queryKey = $derived(page.url.searchParams.toString());
$effect(() => {
queryKey;
@@ -361,6 +375,12 @@
void load();
});
$effect(() => {
if (typeof window === 'undefined') return;
const nextAlias = aliasFilter;
void applyAliasIfChanged(nextAlias);
});
let staleSeconds = $derived.by(() =>
lastSuccessAtMs == null ? null : Math.max(0, Math.floor((nowMs - lastSuccessAtMs) / 1000))
);
@@ -427,11 +447,9 @@
max="300"
class="mt-1 h-9 w-28 rounded-md border bg-background px-2 text-sm"
bind:value={refreshInput}
onchange={() => void applyControls()}
/>
</label>
<Button variant="outline" size="sm" onclick={() => void applyControls()} disabled={loading}>
Apply
</Button>
</div>
{#if partial}