Skip to content

Commit 07e650c

Browse files
tjbcktjbck
committed
refac
1 parent 753589e commit 07e650c

5 files changed

Lines changed: 348 additions & 169 deletions

File tree

‎src/lib/components/common/Dropdown.svelte‎

Lines changed: 128 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,138 @@
11
<script lang="ts">
2-
import { DropdownMenu } from 'bits-ui';
3-
import { createEventDispatcher, getContext } from 'svelte';
4-
5-
const i18n = getContext('i18n');
6-
72
import { flyAndScale } from '$lib/utils/transitions';
3+
import { tick } from 'svelte';
84
5+
/** Whether the dropdown is open */
96
export let show = false;
7+
8+
/** Side to open on: 'bottom' | 'top' */
109
export let side = 'bottom';
10+
11+
/** Alignment: 'start' | 'end' */
1112
export let align = 'start';
13+
14+
/** Close when clicking outside */
1215
export let closeOnOutsideClick = true;
1316
14-
const dispatch = createEventDispatcher();
17+
/** Called when open/close state changes */
18+
export let onOpenChange: (state: boolean) => void = () => {};
19+
20+
/** CSS classes for the dropdown content container */
21+
export let contentClass = '';
22+
23+
/** Side offset in px */
24+
export let sideOffset = 4;
25+
26+
let triggerEl;
27+
let contentEl;
28+
29+
/** Svelte action: moves the node to document.body */
30+
function portal(node) {
31+
document.body.appendChild(node);
32+
return {
33+
destroy() {
34+
if (node.parentNode) {
35+
node.parentNode.removeChild(node);
36+
}
37+
}
38+
};
39+
}
40+
41+
/** Svelte action: captures the first child element as the trigger reference */
42+
function trigger(node) {
43+
triggerEl = node.firstElementChild || node;
44+
node.addEventListener('click', toggleOpen);
45+
return {
46+
destroy() {
47+
node.removeEventListener('click', toggleOpen);
48+
}
49+
};
50+
}
51+
52+
function positionContent() {
53+
if (!triggerEl || !contentEl) return;
54+
const rect = triggerEl.getBoundingClientRect();
55+
56+
contentEl.style.position = 'fixed';
57+
contentEl.style.zIndex = '9999';
58+
59+
const contentHeight = contentEl.offsetHeight || 0;
60+
const spaceBelow = window.innerHeight - rect.bottom - sideOffset;
61+
const spaceAbove = rect.top - sideOffset;
62+
63+
// Auto-flip: prefer the requested side, but flip if not enough space
64+
let openAbove = side === 'top';
65+
if (side === 'bottom' && spaceBelow < contentHeight && spaceAbove > spaceBelow) {
66+
openAbove = true;
67+
} else if (side === 'top' && spaceAbove < contentHeight && spaceBelow > spaceAbove) {
68+
openAbove = false;
69+
}
70+
71+
if (openAbove) {
72+
contentEl.style.bottom = `${window.innerHeight - rect.top + sideOffset}px`;
73+
contentEl.style.top = 'auto';
74+
} else {
75+
contentEl.style.top = `${rect.bottom + sideOffset}px`;
76+
contentEl.style.bottom = 'auto';
77+
}
78+
79+
if (align === 'end') {
80+
contentEl.style.right = `${window.innerWidth - rect.right}px`;
81+
contentEl.style.left = 'auto';
82+
} else {
83+
contentEl.style.left = `${rect.left}px`;
84+
contentEl.style.right = 'auto';
85+
}
86+
}
87+
88+
async function toggleOpen() {
89+
show = !show;
90+
onOpenChange(show);
91+
if (show) {
92+
await tick();
93+
positionContent();
94+
// Re-check after transition renders real dimensions
95+
setTimeout(positionContent, 50);
96+
}
97+
}
98+
99+
function handleWindowClick(event) {
100+
if (!show || !closeOnOutsideClick) return;
101+
if (triggerEl?.contains(event.target)) return;
102+
if (contentEl?.contains(event.target)) return;
103+
show = false;
104+
onOpenChange(false);
105+
}
106+
107+
function handleKeydown(event) {
108+
if (event.key === 'Escape' && show) {
109+
show = false;
110+
onOpenChange(false);
111+
}
112+
}
113+
114+
/** Close the dropdown programmatically */
115+
export function close() {
116+
show = false;
117+
onOpenChange(false);
118+
}
15119
</script>
16120

17-
<DropdownMenu.Root
18-
bind:open={show}
19-
closeFocus={false}
20-
{closeOnOutsideClick}
21-
onOpenChange={(state) => {
22-
dispatch('change', state);
23-
}}
24-
typeahead={false}
25-
>
26-
<DropdownMenu.Trigger>
27-
<slot />
28-
</DropdownMenu.Trigger>
29-
30-
<slot name="content">
31-
<DropdownMenu.Content
32-
class="w-full max-w-[130px] rounded-lg p-1 border border-gray-900 z-50 bg-gray-850 text-white"
33-
sideOffset={8}
34-
{side}
35-
{align}
36-
transition={flyAndScale}
37-
>
38-
<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm font-medium">
39-
<div class="flex items-center">{$i18n.t('Profile')}</div>
40-
</DropdownMenu.Item>
41-
42-
<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm font-medium">
43-
<div class="flex items-center">{$i18n.t('Profile')}</div>
44-
</DropdownMenu.Item>
45-
46-
<DropdownMenu.Item class="select-none flex items-center px-3 py-2 text-sm font-medium">
47-
<div class="flex items-center">{$i18n.t('Profile')}</div>
48-
</DropdownMenu.Item>
49-
</DropdownMenu.Content>
50-
</slot>
51-
</DropdownMenu.Root>
121+
<svelte:window on:click={handleWindowClick} on:keydown={handleKeydown} on:scroll|capture={positionContent} on:resize={positionContent} />
122+
123+
<!-- svelte-ignore a11y-click-events-have-key-events -->
124+
<!-- svelte-ignore a11y-no-static-element-interactions -->
125+
<span use:trigger style="display: contents;">
126+
<slot />
127+
</span>
128+
129+
{#if show}
130+
<div
131+
use:portal
132+
bind:this={contentEl}
133+
class={contentClass}
134+
transition:flyAndScale
135+
>
136+
<slot name="content" />
137+
</div>
138+
{/if}

‎src/lib/components/common/DropdownSub.svelte‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<script lang="ts">
2+
import { flyAndScale } from '$lib/utils/transitions';
3+
import { tick } from 'svelte';
4+
5+
/** CSS classes for the sub-content container */
6+
export let contentClass = 'select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800';
7+
8+
/** Max width in px, enforced at the component level */
9+
export let maxWidth = 200;
10+
11+
/** Side offset from the trigger in px */
12+
export let sideOffset = 8;
13+
14+
let open = false;
15+
let triggerEl;
16+
let contentEl;
17+
18+
function positionContent() {
19+
if (!triggerEl || !contentEl) return;
20+
const rect = triggerEl.getBoundingClientRect();
21+
22+
contentEl.style.position = 'fixed';
23+
contentEl.style.zIndex = '99999';
24+
25+
// Position to the right of the trigger
26+
const rightSpace = window.innerWidth - rect.right;
27+
const contentWidth = contentEl.offsetWidth || 200;
28+
29+
if (rightSpace >= contentWidth + sideOffset) {
30+
// Open to the right
31+
contentEl.style.left = `${rect.right + sideOffset}px`;
32+
contentEl.style.right = 'auto';
33+
} else {
34+
// Open to the left
35+
contentEl.style.right = `${window.innerWidth - rect.left + sideOffset}px`;
36+
contentEl.style.left = 'auto';
37+
}
38+
39+
// Vertical positioning with robust bounds clamping (shift method)
40+
const contentHeight = contentEl.offsetHeight || 0;
41+
let top = rect.top;
42+
43+
// If it overflows the bottom edge
44+
if (top + contentHeight + 16 > window.innerHeight) {
45+
top = window.innerHeight - contentHeight - 16;
46+
}
47+
48+
// If shifting it up causes it to overflow the top edge, cap it at 16px
49+
if (top < 16) {
50+
top = 16;
51+
}
52+
53+
contentEl.style.top = `${top}px`;
54+
}
55+
56+
async function handleMouseEnter() {
57+
open = true;
58+
await tick();
59+
positionContent();
60+
// Re-position after transition starts rendering real dimensions
61+
setTimeout(positionContent, 50);
62+
}
63+
64+
function handleMouseLeave(event) {
65+
// Don't close if moving to the sub-content
66+
if (contentEl?.contains(event.relatedTarget)) return;
67+
if (triggerEl?.contains(event.relatedTarget)) return;
68+
open = false;
69+
}
70+
71+
function handleContentMouseLeave(event) {
72+
if (triggerEl?.contains(event.relatedTarget)) return;
73+
if (contentEl?.contains(event.relatedTarget)) return;
74+
open = false;
75+
}
76+
77+
function portal(node) {
78+
document.body.appendChild(node);
79+
return {
80+
destroy() {
81+
if (node.parentNode) {
82+
node.parentNode.removeChild(node);
83+
}
84+
}
85+
};
86+
}
87+
</script>
88+
89+
<svelte:window on:scroll|capture={positionContent} on:resize={positionContent} />
90+
91+
<!-- svelte-ignore a11y-no-static-element-interactions -->
92+
<div
93+
bind:this={triggerEl}
94+
class="w-full"
95+
on:mouseenter={handleMouseEnter}
96+
on:mouseleave={handleMouseLeave}
97+
>
98+
<slot name="trigger" />
99+
</div>
100+
101+
{#if open}
102+
<!-- svelte-ignore a11y-no-static-element-interactions -->
103+
<div
104+
use:portal
105+
bind:this={contentEl}
106+
class={contentClass}
107+
style="max-width: {maxWidth}px;"
108+
transition:flyAndScale
109+
on:mouseleave={handleContentMouseLeave}
110+
>
111+
<slot />
112+
</div>
113+
{/if}

‎src/lib/components/layout/Sidebar/ChatItem.svelte‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -553,12 +553,9 @@
553553
onClose={() => {
554554
dispatch('unselect');
555555
}}
556-
on:change={async () => {
556+
onPinChange={async () => {
557557
dispatch('change');
558558
}}
559-
on:tag={(e) => {
560-
dispatch('tag', e.detail);
561-
}}
562559
>
563560
<button
564561
aria-label="Chat Menu"

0 commit comments

Comments
 (0)