sass/root-org
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: map shapes, image persistence, grab tool, layer rename/delete, i18n, page metadata

Browse Source
This commit is contained in:
AlacrisDevs
2026-02-08 23:11:09 +02:00
parent 75a2aefadb
commit f2384bceb8
125 changed files with 22605 additions and 3902 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/lib/components/ui/AssigneePicker.svelte
View File

@@ -22,6 +22,8 @@
let { value, members, label, onchange }: Props = $props();
let isOpen = $state(false);
let triggerEl = $state<HTMLButtonElement | null>(null);
let dropdownStyle = $state("");
function getAssignee(id: string | null) {
if (!id) return null;
@@ -30,6 +32,14 @@
const assignee = $derived(getAssignee(value));
function toggle() {
if (!isOpen && triggerEl) {
const rect = triggerEl.getBoundingClientRect();
dropdownStyle = `top: ${rect.bottom + 8}px; left: ${rect.left}px; width: ${rect.width}px;`;
}
isOpen = !isOpen;
}
function select(userId: string | null) {
onchange(userId);
isOpen = false;
@@ -43,66 +53,67 @@
</span>
{/if}
<div class="relative">
<button
type="button"
class="w-full p-3 bg-background text-white rounded-[32px] min-w-[192px]
font-medium font-input text-body
focus:outline-none focus:ring-2 focus:ring-primary
transition-colors text-left flex items-center gap-3"
onclick={() => (isOpen = !isOpen)}
>
{#if assignee}
<Avatar
name={assignee.profiles.full_name ||
assignee.profiles.email}
size="sm"
/>
<span class="truncate">
{assignee.profiles.full_name || assignee.profiles.email}
</span>
{:else}
<Avatar name="?" size="sm" />
<span class="text-white/40">Unassigned</span>
{/if}
</button>
<button
type="button"
bind:this={triggerEl}
class="w-full p-3 bg-background text-white rounded-[32px]
font-medium font-input text-body
focus:outline-none focus:ring-2 focus:ring-primary
transition-colors text-left flex items-center gap-2 overflow-hidden"
onclick={toggle}
>
{#if assignee}
<Avatar
name={assignee.profiles.full_name || assignee.profiles.email}
src={assignee.profiles.avatar_url}
size="sm"
/>
<span class="truncate">
{assignee.profiles.full_name || assignee.profiles.email}
</span>
{:else}
<Avatar name="?" size="sm" />
<span class="text-white/40 truncate">Unassigned</span>
{/if}
</button>
{#if isOpen}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="fixed inset-0 z-40"
onclick={() => (isOpen = false)}
></div>
<div
class="absolute top-full left-0 right-0 mt-2 bg-night border border-light/10 rounded-2xl shadow-xl z-50 max-h-48 overflow-y-auto py-1"
{#if isOpen}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="fixed inset-0 z-[60]"
onclick={() => (isOpen = false)}
></div>
<div
class="fixed z-[70] bg-night border border-light/10 rounded-2xl shadow-xl max-h-48 overflow-y-auto py-1"
style={dropdownStyle}
>
<button
type="button"
class="w-full px-4 py-2.5 text-left text-body-md text-white/60 hover:bg-dark transition-colors flex items-center gap-3"
onclick={() => select(null)}
>
<Avatar name="?" size="sm" />
Unassigned
</button>
{#each members as member}
<button
type="button"
class="w-full px-4 py-2.5 text-left text-body-md text-white/60 hover:bg-dark transition-colors flex items-center gap-3"
onclick={() => select(null)}
class="w-full px-4 py-2.5 text-left text-body-md hover:bg-dark transition-colors flex items-center gap-3
{value === member.user_id ? 'bg-primary/10 text-primary' : 'text-white'}"
onclick={() => select(member.user_id)}
>
<Avatar name="?" size="sm" />
Unassigned
<Avatar
name={member.profiles.full_name ||
member.profiles.email}
src={member.profiles.avatar_url}
size="sm"
/>
<span class="truncate">
{member.profiles.full_name || member.profiles.email}
</span>
</button>
{#each members as member}
<button
type="button"
class="w-full px-4 py-2.5 text-left text-body-md hover:bg-dark transition-colors flex items-center gap-3
{value === member.user_id ? 'bg-primary/10 text-primary' : 'text-white'}"
onclick={() => select(member.user_id)}
>
<Avatar
name={member.profiles.full_name ||
member.profiles.email}
size="sm"
/>
<span class="truncate">
{member.profiles.full_name || member.profiles.email}
</span>
</button>
{/each}
</div>
{/if}
</div>
{/each}
</div>
{/if}
</div>