feat: discussion sub-tab navigation for annotation threads (#60) #63

Merged
marcel merged 17 commits from feat/60-discussion-panel-tabs into main 2026-03-25 12:38:45 +01:00
2 changed files with 11 additions and 4 deletions
Showing only changes of commit 5ea5590c89 - Show all commits

View File

@@ -75,7 +75,7 @@ let dragStartHeight = 0;
function fullHeight() { function fullHeight() {
const topbar = document.querySelector('[data-topbar]'); const topbar = document.querySelector('[data-topbar]');
return window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0); return window.innerHeight - (topbar?.getBoundingClientRect().bottom ?? 0);
} }
function openTab(tab: Tab) { function openTab(tab: Tab) {

View File

@@ -78,11 +78,14 @@ const LS_KEY_HEIGHT = 'doc-panel-height';
const LS_KEY_TAB = 'doc-panel-tab'; const LS_KEY_TAB = 'doc-panel-tab';
let panelOpen = $state(false); let panelOpen = $state(false);
let panelHeight = $state(0); // set to 80vh on mount let panelHeight = $state(0); // set to full height on mount
let navHeight = $state(0);
let activeTab = $state<Tab>('metadata'); let activeTab = $state<Tab>('metadata');
let localStorageRestored = $state(false); let localStorageRestored = $state(false);
onMount(() => { onMount(() => {
navHeight = document.querySelector('header')?.getBoundingClientRect().height ?? 0;
const savedOpen = localStorage.getItem(LS_KEY_OPEN); const savedOpen = localStorage.getItem(LS_KEY_OPEN);
const savedHeight = localStorage.getItem(LS_KEY_HEIGHT); const savedHeight = localStorage.getItem(LS_KEY_HEIGHT);
const savedTab = localStorage.getItem(LS_KEY_TAB); const savedTab = localStorage.getItem(LS_KEY_TAB);
@@ -91,7 +94,7 @@ onMount(() => {
activeTab = savedTab as Tab; activeTab = savedTab as Tab;
} }
const topbar = document.querySelector('[data-topbar]'); const topbar = document.querySelector('[data-topbar]');
panelHeight = window.innerHeight - (topbar?.getBoundingClientRect().height ?? 0); panelHeight = window.innerHeight - navHeight - (topbar?.getBoundingClientRect().height ?? 0);
if (savedHeight) { if (savedHeight) {
const h = parseInt(savedHeight, 10); const h = parseInt(savedHeight, 10);
if (!isNaN(h) && h >= 80) panelHeight = h; if (!isNaN(h) && h >= 80) panelHeight = h;
@@ -133,7 +136,11 @@ $effect(() => {
<title>{doc.title || doc.originalFilename || 'Dokument'}</title> <title>{doc.title || doc.originalFilename || 'Dokument'}</title>
</svelte:head> </svelte:head>
<div class="fixed inset-0 z-50 flex flex-col overflow-hidden bg-white" data-hydrated> <div
class="fixed right-0 bottom-0 left-0 z-40 flex flex-col overflow-hidden bg-white"
style="top: {navHeight}px"
data-hydrated
>
<DocumentTopBar <DocumentTopBar
doc={doc} doc={doc}
canWrite={data.canWrite ?? false} canWrite={data.canWrite ?? false}