Significant tiptap updates
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { type Component, type JSX, createSignal, createEffect, Show, lazy, Suspense, onMount } from "solid-js";
|
||||
import { type Component, type JSX, createSignal, createEffect, Show, lazy, Suspense, onMount, onCleanup } from "solid-js";
|
||||
import { Sidebar, BottomNav, ContextSwitcher } from "./Navigation";
|
||||
import { store, setStore, activeTaskId, setActiveTaskId } from "@/store";
|
||||
import { PanelLeftOpen, PanelLeftClose } from "lucide-solid";
|
||||
@@ -30,6 +30,16 @@ export const Layout: Component<LayoutProps> = (props) => {
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
const handleOpenNote = (e: Event) => {
|
||||
const detail = (e as CustomEvent).detail;
|
||||
if (detail && detail.noteId) {
|
||||
setStore('isNotepadMode', true);
|
||||
setSelectedNoteId(detail.noteId);
|
||||
}
|
||||
};
|
||||
window.addEventListener('open-note', handleOpenNote);
|
||||
onCleanup(() => window.removeEventListener('open-note', handleOpenNote));
|
||||
|
||||
// Preload heavy components in background when idle
|
||||
const idleCallback = (window as any).requestIdleCallback || ((cb: any) => setTimeout(cb, 2000));
|
||||
idleCallback(() => {
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import { type Component, createSignal, For, createEffect } from "solid-js";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface MentionItem {
|
||||
id: string;
|
||||
label: string;
|
||||
sublabel?: string;
|
||||
type: 'user' | 'note';
|
||||
}
|
||||
|
||||
interface MentionListProps {
|
||||
items: MentionItem[];
|
||||
command: (item: MentionItem) => void;
|
||||
ref: (handlers: { onKeyDown: (e: KeyboardEvent) => boolean }) => void;
|
||||
}
|
||||
|
||||
export const MentionList: Component<MentionListProps> = (props) => {
|
||||
const [selectedIndex, setSelectedIndex] = createSignal(0);
|
||||
|
||||
createEffect(() => {
|
||||
props.items;
|
||||
setSelectedIndex(0);
|
||||
});
|
||||
|
||||
const selectItem = (index: number) => {
|
||||
const item = props.items[index];
|
||||
if (item) {
|
||||
props.command(item);
|
||||
}
|
||||
};
|
||||
|
||||
props.ref({
|
||||
onKeyDown: (e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowUp") {
|
||||
setSelectedIndex((prev) => (prev + props.items.length - 1) % props.items.length);
|
||||
return true;
|
||||
}
|
||||
if (e.key === "ArrowDown") {
|
||||
setSelectedIndex((prev) => (prev + 1) % props.items.length);
|
||||
return true;
|
||||
}
|
||||
if (e.key === "Enter") {
|
||||
selectItem(selectedIndex());
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="z-[200] w-64 bg-popover border border-border rounded-lg shadow-xl overflow-hidden p-1 bg-background pointer-events-auto">
|
||||
<div class="max-h-[300px] overflow-y-auto scrollbar-thin scrollbar-thumb-muted-foreground/20 overscroll-contain">
|
||||
<For each={props.items}>
|
||||
{(item, index) => (
|
||||
<button
|
||||
class={cn(
|
||||
"flex flex-col w-full px-2 py-1.5 text-left rounded-md transition-colors outline-none",
|
||||
index() === selectedIndex() ? "bg-accent text-accent-foreground" : "hover:bg-muted"
|
||||
)}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
selectItem(index());
|
||||
}}
|
||||
onMouseEnter={() => setSelectedIndex(index())}
|
||||
>
|
||||
<span class="text-sm font-medium leading-none">{item.label}</span>
|
||||
{item.sublabel && (
|
||||
<span class="text-[0.6875rem] text-muted-foreground truncate mt-1">{item.sublabel}</span>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</For>
|
||||
{props.items.length === 0 && (
|
||||
<div class="p-2 text-xs text-muted-foreground text-center">No results found</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -4,7 +4,10 @@ import {
|
||||
List, ListTodo, Type,
|
||||
Code, Quote,
|
||||
Image as ImageIcon, Minus,
|
||||
Bold, Italic, Underline
|
||||
Bold, Italic, Underline,
|
||||
Grid3X3, Highlighter,
|
||||
AlignLeft, AlignCenter, AlignRight,
|
||||
Trash2
|
||||
} from "lucide-solid";
|
||||
import { cn, convertImageToWebpFile } from "@/lib/utils";
|
||||
import { activeTaskId, uploadTaskAttachment } from "@/store";
|
||||
@@ -170,6 +173,56 @@ export const getSuggestionItems = ({ query }: { query: string }): CommandItem[]
|
||||
editor.chain().focus().deleteRange(range).setHorizontalRule().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Table",
|
||||
description: "Insert a 3x3 table.",
|
||||
aliases: ["grid", "table"],
|
||||
icon: Grid3X3,
|
||||
command: ({ editor, range }: { editor: any, range: any }) => {
|
||||
editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Highlight",
|
||||
description: "Highlight selected text.",
|
||||
aliases: ["mark"],
|
||||
icon: Highlighter,
|
||||
command: ({ editor, range }: { editor: any, range: any }) => {
|
||||
editor.chain().focus().deleteRange(range).toggleHighlight().run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Align Left",
|
||||
description: "Align text to the left.",
|
||||
icon: AlignLeft,
|
||||
command: ({ editor, range }: { editor: any, range: any }) => {
|
||||
editor.chain().focus().deleteRange(range).setTextAlign("left").run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Align Center",
|
||||
description: "Align text to the center.",
|
||||
icon: AlignCenter,
|
||||
command: ({ editor, range }: { editor: any, range: any }) => {
|
||||
editor.chain().focus().deleteRange(range).setTextAlign("center").run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Align Right",
|
||||
description: "Align text to the right.",
|
||||
icon: AlignRight,
|
||||
command: ({ editor, range }: { editor: any, range: any }) => {
|
||||
editor.chain().focus().deleteRange(range).setTextAlign("right").run();
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "Delete Table",
|
||||
description: "Delete the entire table.",
|
||||
icon: Trash2,
|
||||
command: ({ editor, range }: { editor: any, range: any }) => {
|
||||
editor.chain().focus().deleteRange(range).deleteTable().run();
|
||||
},
|
||||
},
|
||||
].filter(item => {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
return item.title.toLowerCase().startsWith(lowerQuery) ||
|
||||
|
||||
@@ -48,6 +48,21 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
|
||||
}
|
||||
});
|
||||
|
||||
const [trackedMentions, setTrackedMentions] = createSignal<Set<string>>(new Set());
|
||||
|
||||
createEffect(() => {
|
||||
if (props.isOpen && props.task.content) {
|
||||
const html = props.task.content;
|
||||
const mentionRegex = /data-type="mention"[^>]*data-id="([^"]+)"/g;
|
||||
let match;
|
||||
const initial = new Set<string>();
|
||||
while ((match = mentionRegex.exec(html)) !== null) {
|
||||
initial.add(match[1]);
|
||||
}
|
||||
setTrackedMentions(initial);
|
||||
}
|
||||
});
|
||||
|
||||
let debounceTimer: number | undefined;
|
||||
let pendingContent: string | null = null;
|
||||
|
||||
@@ -57,6 +72,39 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
|
||||
debounceTimer = setTimeout(() => {
|
||||
if (pendingContent !== null) {
|
||||
updateTask(props.task.id, { content: pendingContent });
|
||||
|
||||
// Sync mentions deletion
|
||||
const mentionRegex = /data-type="mention"[^>]*data-id="([^"]+)"/g;
|
||||
let match;
|
||||
const currentMentions = new Set<string>();
|
||||
while ((match = mentionRegex.exec(pendingContent)) !== null) {
|
||||
currentMentions.add(match[1].toLowerCase());
|
||||
}
|
||||
|
||||
const currentTags = props.task.tags || [];
|
||||
let tagsChanged = false;
|
||||
const newTags = currentTags.filter(t => {
|
||||
const tagLower = t.toLowerCase();
|
||||
const isTracked = [...trackedMentions()].some(tm => tm.toLowerCase() === tagLower);
|
||||
if (isTracked && !currentMentions.has(tagLower)) {
|
||||
tagsChanged = true;
|
||||
// Also remove from tracked
|
||||
setTrackedMentions(prev => {
|
||||
const next = new Set(prev);
|
||||
for (let p of next) {
|
||||
if (p.toLowerCase() === tagLower) next.delete(p);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
return false; // remove from tags
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
if (tagsChanged) {
|
||||
updateTags(newTags);
|
||||
}
|
||||
|
||||
pendingContent = null;
|
||||
}
|
||||
}, 1000);
|
||||
@@ -353,6 +401,19 @@ export const TaskDetail: Component<TaskDetailProps> = (props) => {
|
||||
content={props.task.content}
|
||||
onUpdate={updateTaskContent}
|
||||
onEditorReady={setEditorInstance}
|
||||
onNoteOpen={(noteId) => {
|
||||
props.onClose();
|
||||
window.dispatchEvent(new CustomEvent('open-note', { detail: { noteId } }));
|
||||
}}
|
||||
onUserMention={(name) => {
|
||||
const tagName = '@' + name;
|
||||
setTrackedMentions(prev => new Set([...prev, tagName]));
|
||||
const currentTags = props.task.tags || [];
|
||||
if (!currentTags.some(t => t.toLowerCase() === tagName.toLowerCase())) {
|
||||
updateTags([...currentTags, tagName]);
|
||||
toast.success(`Added tag ${tagName} to share task.`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Suspense>
|
||||
|
||||
|
||||
@@ -6,28 +6,47 @@ import TaskList from "@tiptap/extension-task-list";
|
||||
import { CustomTaskItem } from "./CustomTaskItem";
|
||||
import Image from "@tiptap/extension-image";
|
||||
import Underline from "@tiptap/extension-underline";
|
||||
import { X } from "lucide-solid";
|
||||
import { X, Trash2, ArrowUpToLine, ArrowDownToLine, ArrowLeftToLine, ArrowRightToLine } from "lucide-solid";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { store } from "@/store";
|
||||
|
||||
import { SlashCommands } from "@/lib/slash-command";
|
||||
import { suggestion } from "@/lib/slash-renderer";
|
||||
import { MobileIndent } from "@/lib/mobile-indent";
|
||||
|
||||
// New Extensions
|
||||
import { Link } from "@tiptap/extension-link";
|
||||
import { Highlight } from "@tiptap/extension-highlight";
|
||||
import { TextAlign } from "@tiptap/extension-text-align";
|
||||
import { Table } from "@tiptap/extension-table";
|
||||
import { TableRow } from "@tiptap/extension-table-row";
|
||||
import { TableCell } from "@tiptap/extension-table-cell";
|
||||
import { TableHeader } from "@tiptap/extension-table-header";
|
||||
import { Typography } from "@tiptap/extension-typography";
|
||||
import { Dropcursor } from "@tiptap/extension-dropcursor";
|
||||
import { BubbleMenu } from "@tiptap/extension-bubble-menu";
|
||||
import { Mention } from "@tiptap/extension-mention";
|
||||
import { userSuggestion, noteSuggestion } from "@/lib/mention-suggestion";
|
||||
|
||||
interface TaskEditorProps {
|
||||
content?: string;
|
||||
onUpdate: (html: string) => void;
|
||||
onEditorReady?: (editor: any) => void;
|
||||
editable?: boolean;
|
||||
onUserMention?: (userName: string) => void;
|
||||
onNoteOpen?: (noteId: string) => void;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
export const TaskEditor: Component<TaskEditorProps> = (props) => {
|
||||
let editorRef: HTMLDivElement | undefined;
|
||||
let tableMenuRef: HTMLDivElement | undefined;
|
||||
const [fullscreenImage, setFullscreenImage] = createSignal<string | null>(null);
|
||||
const [zoomScale, setZoomScale] = createSignal(1);
|
||||
const [zoomOffset, setZoomOffset] = createSignal({ x: 0, y: 0 });
|
||||
const [isDragging, setIsDragging] = createSignal(false);
|
||||
const [dragStart, setDragStart] = createSignal({ x: 0, y: 0 });
|
||||
const [previewNote, setPreviewNote] = createSignal<{ noteId: string, x: number, y: number } | null>(null);
|
||||
|
||||
const resetZoom = () => {
|
||||
setZoomScale(1);
|
||||
@@ -73,6 +92,81 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
|
||||
}),
|
||||
Underline.configure({}),
|
||||
MobileIndent.configure({}),
|
||||
Link.configure({
|
||||
autolink: true,
|
||||
openOnClick: false,
|
||||
HTMLAttributes: {
|
||||
class: "text-primary underline underline-offset-4 cursor-pointer hover:text-primary/80 transition-colors",
|
||||
},
|
||||
}),
|
||||
Highlight.configure({
|
||||
multicolor: true,
|
||||
}),
|
||||
TextAlign.configure({
|
||||
types: ["heading", "paragraph"],
|
||||
}),
|
||||
Table.configure({
|
||||
resizable: true,
|
||||
allowTableNodeSelection: true,
|
||||
}),
|
||||
TableRow,
|
||||
TableHeader,
|
||||
TableCell,
|
||||
Typography.configure({
|
||||
openDoubleQuote: false,
|
||||
closeDoubleQuote: false,
|
||||
openSingleQuote: false,
|
||||
closeSingleQuote: false,
|
||||
}),
|
||||
Mention.configure({
|
||||
HTMLAttributes: {
|
||||
class: "mention bg-primary/10 text-primary font-medium py-0.5 px-1 rounded-md border border-primary/20",
|
||||
},
|
||||
suggestion: {
|
||||
...userSuggestion,
|
||||
command: ({ editor, range, props: mentionProps }: any) => {
|
||||
editor
|
||||
.chain()
|
||||
.focus()
|
||||
.insertContentAt(range, [
|
||||
{
|
||||
type: "mention",
|
||||
attrs: mentionProps,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: " ",
|
||||
},
|
||||
])
|
||||
.run();
|
||||
|
||||
if (mentionProps.label) {
|
||||
props.onUserMention?.(mentionProps.label);
|
||||
}
|
||||
}
|
||||
},
|
||||
}),
|
||||
Mention.extend({
|
||||
name: "noteMention",
|
||||
}).configure({
|
||||
suggestion: {
|
||||
...noteSuggestion,
|
||||
char: "#",
|
||||
},
|
||||
HTMLAttributes: {
|
||||
class: "note-mention bg-muted text-muted-foreground font-medium py-0.5 px-1 rounded-md border border-border italic cursor-pointer hover:bg-muted/80",
|
||||
},
|
||||
}),
|
||||
BubbleMenu.configure({
|
||||
element: tableMenuRef!,
|
||||
shouldShow: ({ editor }) => editor.isActive("table"),
|
||||
// @ts-ignore - Solid-tiptap types might be outdated
|
||||
tippyOptions: { placement: "bottom", duration: 100 },
|
||||
}),
|
||||
Dropcursor.configure({
|
||||
color: "var(--primary)",
|
||||
width: 2,
|
||||
}),
|
||||
],
|
||||
// Use untrack so the editor doesn't re-initialize when props.content changes
|
||||
content: untrack(() => props.content) || "",
|
||||
@@ -88,6 +182,14 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
|
||||
"prose-p:my-1 prose-headings:my-2 prose-ul:my-1 prose-ol:my-1",
|
||||
"prose-pre:bg-muted prose-pre:rounded-lg prose-pre:p-4",
|
||||
"prose-img:rounded-lg prose-img:border prose-img:border-border prose-img:cursor-zoom-in",
|
||||
// New Extension styles
|
||||
"prose-a:text-primary prose-a:underline prose-a:underline-offset-4",
|
||||
"prose-blockquote:border-l-4 prose-blockquote:border-primary prose-blockquote:pl-4 prose-blockquote:italic",
|
||||
"[&_table]:border-collapse [&_table]:w-full [&_table]:my-4",
|
||||
"[&_th]:border [&_th]:border-border [&_th]:bg-muted/50 [&_th]:p-2 [&_th]:text-left [&_th]:font-bold",
|
||||
"[&_td]:border [&_td]:border-border [&_td]:p-2 [&_td]:align-top",
|
||||
"[&_mark]:bg-primary/20 dark:[&_mark]:bg-primary/40 [&_mark]:text-foreground dark:[&_mark]:text-primary-foreground [&_mark]:px-0.5 [&_mark]:rounded-sm",
|
||||
"[&_.mention]:mx-0.5 [&_.note-mention]:mx-0.5",
|
||||
// Custom Task List Styling
|
||||
"[&_ul[data-type='taskList']]:list-none [&_ul[data-type='taskList']]:p-0",
|
||||
"[&_li[data-type='taskItem']]:flex [&_li[data-type='taskItem']]:items-start",
|
||||
@@ -118,6 +220,32 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
|
||||
}
|
||||
});
|
||||
|
||||
// Handle note mention clicks
|
||||
createEffect(() => {
|
||||
const e = editor();
|
||||
if (!e) return;
|
||||
|
||||
const handleClick = (event: MouseEvent) => {
|
||||
const target = event.target as HTMLElement;
|
||||
if (target.classList.contains('note-mention')) {
|
||||
const noteId = target.getAttribute('data-id');
|
||||
if (noteId) {
|
||||
const rect = target.getBoundingClientRect();
|
||||
setPreviewNote({ noteId, x: rect.left, y: rect.bottom + window.scrollY });
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Close preview if clicking elsewhere
|
||||
setPreviewNote(null);
|
||||
};
|
||||
|
||||
const element = e.view.dom;
|
||||
if (element) {
|
||||
element.addEventListener('click', handleClick);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle full screen images as before
|
||||
return (
|
||||
<div class="relative w-full h-full flex flex-col">
|
||||
<div
|
||||
@@ -146,6 +274,65 @@ export const TaskEditor: Component<TaskEditorProps> = (props) => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Table Bubble Menu */}
|
||||
<div
|
||||
ref={tableMenuRef}
|
||||
class="z-[9999] flex p-0.5 bg-background border border-border shadow-md rounded-md gap-0.5 invisible data-[state=visible]:visible"
|
||||
>
|
||||
<button type="button" class="p-1 px-1.5 hover:bg-muted rounded text-xs flex flex-col items-center justify-center opacity-80 hover:opacity-100 transition-opacity whitespace-nowrap text-muted-foreground hover:text-foreground" onClick={() => editor()?.chain().focus().addRowBefore().run()} title="Add Row Above"><ArrowUpToLine size={14} /> +Row</button>
|
||||
<button type="button" class="p-1 px-1.5 hover:bg-muted rounded text-xs flex flex-col items-center justify-center opacity-80 hover:opacity-100 transition-opacity whitespace-nowrap text-muted-foreground hover:text-foreground" onClick={() => editor()?.chain().focus().addRowAfter().run()} title="Add Row Below"><ArrowDownToLine size={14} /> +Row</button>
|
||||
<button type="button" class="p-1 px-1.5 hover:bg-muted rounded text-xs flex flex-col items-center justify-center opacity-60 hover:opacity-100 transition-opacity whitespace-nowrap text-muted-foreground hover:text-foreground" onClick={() => editor()?.chain().focus().deleteRow().run()} title="Delete Row"><Trash2 size={14} /> -Row</button>
|
||||
<div class="w-px bg-border my-1 mx-0.5 shrink-0" />
|
||||
<button type="button" class="p-1 px-1.5 hover:bg-muted rounded text-xs flex flex-col items-center justify-center opacity-80 hover:opacity-100 transition-opacity whitespace-nowrap text-muted-foreground hover:text-foreground" onClick={() => editor()?.chain().focus().addColumnBefore().run()} title="Add Col Left"><ArrowLeftToLine size={14} /> +Col</button>
|
||||
<button type="button" class="p-1 px-1.5 hover:bg-muted rounded text-xs flex flex-col items-center justify-center opacity-80 hover:opacity-100 transition-opacity whitespace-nowrap text-muted-foreground hover:text-foreground" onClick={() => editor()?.chain().focus().addColumnAfter().run()} title="Add Col Right"><ArrowRightToLine size={14} /> +Col</button>
|
||||
<button type="button" class="p-1 px-1.5 hover:bg-muted rounded text-xs flex flex-col items-center justify-center opacity-60 hover:opacity-100 transition-opacity whitespace-nowrap text-muted-foreground hover:text-foreground" onClick={() => editor()?.chain().focus().deleteColumn().run()} title="Delete Col"><Trash2 size={14} /> -Col</button>
|
||||
</div>
|
||||
|
||||
{/* Note Preview Popover */}
|
||||
<Show when={previewNote() && store.notes.find(n => n.id === previewNote()!.noteId)}>
|
||||
{(note) => {
|
||||
const pos = previewNote()!;
|
||||
return (
|
||||
<div
|
||||
class="fixed z-[250] max-w-[280px] w-full bg-popover border border-border shadow-xl rounded-lg p-3 animate-in fade-in zoom-in-95 duration-200 pointer-events-auto"
|
||||
style={{ left: `${Math.min(pos.x, window.innerWidth - 300)}px`, top: `${pos.y + 4}px` }}
|
||||
onMouseDown={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h4 class="font-bold text-sm mb-1 truncate text-foreground">{note().title}</h4>
|
||||
<p class="text-xs text-muted-foreground line-clamp-3 mb-3 break-words whitespace-pre-wrap">
|
||||
{note().content?.replace(/<[^>]*>?/gm, '') || "Empty note"}
|
||||
</p>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs px-2.5 py-1.5 rounded bg-muted hover:bg-muted/80 text-foreground font-medium transition-colors"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setPreviewNote(null);
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-xs px-2.5 py-1.5 rounded bg-primary hover:bg-primary/90 text-primary-foreground font-medium transition-colors shadow-sm"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
if (props.onNoteOpen) {
|
||||
props.onNoteOpen(note().id);
|
||||
}
|
||||
setPreviewNote(null);
|
||||
}}
|
||||
>
|
||||
Open Note
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Show>
|
||||
|
||||
<Show when={fullscreenImage()}>
|
||||
<div
|
||||
class="fixed inset-0 z-[9999] p-4 bg-background/90 backdrop-blur-sm flex items-center justify-center animate-in fade-in duration-200 overflow-hidden"
|
||||
|
||||
Reference in New Issue
Block a user