mirror of
https://github.com/Dictionarry-Hub/profilarr.git
synced 2026-01-24 11:41:03 +01:00
7c07f87d7c
- Create a new page for displaying delay profiles with an empty state when no databases are linked. - Implement server-side loading for delay profiles based on the selected database. - Add a detailed view for editing and deleting delay profiles, including form validation and error handling. - Introduce a form component for creating and editing delay profiles with appropriate fields and validation. - Implement table and card views for displaying delay profiles, allowing users to navigate to detailed views. - Add functionality for creating new delay profiles with validation and error handling.
104 lines
3.4 KiB
Svelte
104 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher, onMount } from 'svelte';
|
|
import { X, User, GitBranch } from 'lucide-svelte';
|
|
|
|
export let open = false;
|
|
|
|
const dispatch = createEventDispatcher<{
|
|
select: 'user' | 'base';
|
|
cancel: void;
|
|
}>();
|
|
|
|
function handleSelect(layer: 'user' | 'base') {
|
|
dispatch('select', layer);
|
|
}
|
|
|
|
function handleCancel() {
|
|
dispatch('cancel');
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key === 'Escape' && open) {
|
|
handleCancel();
|
|
}
|
|
}
|
|
|
|
function handleBackdropClick(e: MouseEvent) {
|
|
if (e.target === e.currentTarget) {
|
|
handleCancel();
|
|
}
|
|
}
|
|
|
|
onMount(() => {
|
|
window.addEventListener('keydown', handleKeydown);
|
|
return () => {
|
|
window.removeEventListener('keydown', handleKeydown);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
{#if open}
|
|
<!-- Backdrop -->
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
|
|
<div
|
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
|
on:click={handleBackdropClick}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
tabindex="-1"
|
|
>
|
|
<!-- Modal -->
|
|
<div
|
|
class="relative w-full max-w-md rounded-lg border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4 dark:border-neutral-800">
|
|
<h2 class="text-lg font-semibold text-neutral-900 dark:text-neutral-50">Where to save?</h2>
|
|
<button
|
|
type="button"
|
|
on:click={handleCancel}
|
|
class="rounded-lg p-1 text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-200"
|
|
>
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="space-y-3 p-6">
|
|
<button
|
|
type="button"
|
|
on:click={() => handleSelect('user')}
|
|
class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
|
|
>
|
|
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
|
|
<User size={20} />
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-neutral-900 dark:text-neutral-100">Personal Override</div>
|
|
<div class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
|
|
Save locally only. Changes won't sync upstream and stay on this machine.
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
on:click={() => handleSelect('base')}
|
|
class="flex w-full items-start gap-4 rounded-lg border border-neutral-200 bg-white p-4 text-left transition-colors hover:border-blue-300 hover:bg-blue-50 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-600 dark:hover:bg-blue-950"
|
|
>
|
|
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-neutral-100 text-neutral-600 dark:bg-neutral-700 dark:text-neutral-300">
|
|
<GitBranch size={20} />
|
|
</div>
|
|
<div>
|
|
<div class="font-medium text-neutral-900 dark:text-neutral-100">Contribute to Database</div>
|
|
<div class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
|
|
Add to base operations. You'll need to commit and push manually.
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|