e4539ed0f0
Replaces bg-white, text-brand-navy, border-brand-sand, text-gray-*, bg-[#2A2A2A], bg-brand-purple/15, hover:bg-brand-sand, etc. across all 35 .svelte files with semantic token utilities (bg-surface, text-ink, border-line, bg-pdf-bg, bg-nav-active, bg-muted, text-accent, bg-primary, ...). Also adds CSS filter: invert(1) in layout.css for De Gruyter <img> icons in dark mode, excluding icons that carry .invert already (to prevent double-inversion). Closes #64 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
91 lines
2.7 KiB
Svelte
91 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import CommentThread from './CommentThread.svelte';
|
|
import { m } from '$lib/paraglide/messages.js';
|
|
|
|
type Props = {
|
|
documentId: string;
|
|
annotationId: string;
|
|
canComment: boolean;
|
|
currentUserId: string | null;
|
|
canAdmin: boolean;
|
|
onClose: () => void;
|
|
onCountChange?: (count: number) => void;
|
|
};
|
|
|
|
let {
|
|
documentId,
|
|
annotationId,
|
|
canComment,
|
|
currentUserId,
|
|
canAdmin,
|
|
onClose,
|
|
onCountChange
|
|
}: Props = $props();
|
|
</script>
|
|
|
|
<!-- Desktop / tablet panel (≥ sm): absolute overlay on the right side -->
|
|
<div
|
|
class="absolute top-0 right-0 z-50 hidden h-full w-80 flex-col border-l border-line bg-surface shadow-2xl sm:flex"
|
|
>
|
|
<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
|
|
<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
|
|
{m.comment_panel_title()}
|
|
</h3>
|
|
<button
|
|
onclick={onClose}
|
|
aria-label={m.comment_panel_close()}
|
|
class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-4">
|
|
<CommentThread
|
|
documentId={documentId}
|
|
annotationId={annotationId}
|
|
canComment={canComment}
|
|
currentUserId={currentUserId}
|
|
canAdmin={canAdmin}
|
|
loadOnMount={true}
|
|
onCountChange={onCountChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile modal (< sm): fixed full-screen with slide-up sheet -->
|
|
<div class="fixed inset-0 z-50 flex flex-col sm:hidden">
|
|
<!-- Semi-transparent backdrop -->
|
|
<div class="flex-1 bg-black/40" onclick={onClose} role="presentation"></div>
|
|
|
|
<!-- Slide-up panel -->
|
|
<div class="flex max-h-[80vh] flex-col rounded-t-2xl bg-surface shadow-2xl">
|
|
<div class="flex shrink-0 items-center justify-between border-b border-line px-4 py-3">
|
|
<h3 class="font-sans text-xs font-bold tracking-widest text-ink uppercase">
|
|
{m.comment_panel_title()}
|
|
</h3>
|
|
<button
|
|
onclick={onClose}
|
|
aria-label={m.comment_panel_close()}
|
|
class="rounded p-1 text-ink-3 transition-colors hover:bg-muted hover:text-ink"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto p-4">
|
|
<CommentThread
|
|
documentId={documentId}
|
|
annotationId={annotationId}
|
|
canComment={canComment}
|
|
currentUserId={currentUserId}
|
|
canAdmin={canAdmin}
|
|
loadOnMount={true}
|
|
onCountChange={onCountChange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|