feat: auto-open transcription panel when navigating from mission-control cards #377
@@ -36,7 +36,7 @@ let { docs, weeklyCount }: Props = $props();
|
|||||||
{#each docs as doc (doc.id)}
|
{#each docs as doc (doc.id)}
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href="/documents/{doc.id}"
|
href="/documents/{doc.id}?task=transcribe"
|
||||||
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
|
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
|
||||||
>
|
>
|
||||||
<span class="font-serif text-sm text-ink">{doc.title}</span>
|
<span class="font-serif text-sm text-ink">{doc.title}</span>
|
||||||
|
|||||||
@@ -56,12 +56,12 @@ describe('SegmentationColumn', () => {
|
|||||||
await expect.element(page.getByText(/diese Woche/)).not.toBeInTheDocument();
|
await expect.element(page.getByText(/diese Woche/)).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('links to /documents/{id}', async () => {
|
it('links to /documents/{id}?task=transcribe', async () => {
|
||||||
const doc = makeDoc({ id: 'abc-123', title: 'Verlinktes Dokument' });
|
const doc = makeDoc({ id: 'abc-123', title: 'Verlinktes Dokument' });
|
||||||
|
|
||||||
render(SegmentationColumn, { props: { docs: [doc], weeklyCount: 0 } });
|
render(SegmentationColumn, { props: { docs: [doc], weeklyCount: 0 } });
|
||||||
|
|
||||||
const link = page.getByRole('link', { name: /Verlinktes Dokument/ });
|
const link = page.getByRole('link', { name: /Verlinktes Dokument/ });
|
||||||
await expect.element(link).toHaveAttribute('href', '/documents/abc-123');
|
await expect.element(link).toHaveAttribute('href', '/documents/abc-123?task=transcribe');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ function blockProgress(doc: TranscriptionQueueItemDTO): number {
|
|||||||
{#each docs as doc (doc.id)}
|
{#each docs as doc (doc.id)}
|
||||||
<li>
|
<li>
|
||||||
<a
|
<a
|
||||||
href="/documents/{doc.id}"
|
href="/documents/{doc.id}?task=transcribe"
|
||||||
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
|
class="flex min-h-[44px] flex-col justify-center rounded px-1 py-2 hover:bg-canvas focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:outline-none"
|
||||||
>
|
>
|
||||||
<span class="font-serif text-sm text-ink">{doc.title}</span>
|
<span class="font-serif text-sm text-ink">{doc.title}</span>
|
||||||
|
|||||||
@@ -74,12 +74,12 @@ describe('TranscriptionColumn', () => {
|
|||||||
expect(dashEl?.textContent?.trim()).toBe('—');
|
expect(dashEl?.textContent?.trim()).toBe('—');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('links to /documents/{id}', async () => {
|
it('links to /documents/{id}?task=transcribe', async () => {
|
||||||
const doc = makeDoc({ id: 'xyz-456', title: 'Transkriptions Dokument' });
|
const doc = makeDoc({ id: 'xyz-456', title: 'Transkriptions Dokument' });
|
||||||
|
|
||||||
render(TranscriptionColumn, { props: { docs: [doc], weeklyCount: 0 } });
|
render(TranscriptionColumn, { props: { docs: [doc], weeklyCount: 0 } });
|
||||||
|
|
||||||
const link = page.getByRole('link', { name: /Transkriptions Dokument/ });
|
const link = page.getByRole('link', { name: /Transkriptions Dokument/ });
|
||||||
await expect.element(link).toHaveAttribute('href', '/documents/xyz-456');
|
await expect.element(link).toHaveAttribute('href', '/documents/xyz-456?task=transcribe');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -362,6 +362,21 @@ onMount(() => {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (page.url.searchParams.get('task') === 'transcribe') {
|
||||||
|
transcribeMode = true;
|
||||||
|
tick()
|
||||||
|
.then(() => {
|
||||||
|
const closeBtn = document.querySelector<HTMLElement>('[data-testid="panel-close"]');
|
||||||
|
closeBtn?.scrollIntoView({
|
||||||
|
behavior: prefersReducedMotion ? 'instant' : 'smooth',
|
||||||
|
block: 'nearest'
|
||||||
|
});
|
||||||
|
closeBtn?.focus({ preventScroll: true });
|
||||||
|
replaceState(page.url.pathname, page.state ?? {});
|
||||||
|
})
|
||||||
|
.catch((e) => console.error('task deep-link failed', e));
|
||||||
|
}
|
||||||
|
|
||||||
scrollToCommentFromQuery(new URL(page.url), {
|
scrollToCommentFromQuery(new URL(page.url), {
|
||||||
transcribeMode,
|
transcribeMode,
|
||||||
setTranscribeMode: (v) => (transcribeMode = v),
|
setTranscribeMode: (v) => (transcribeMode = v),
|
||||||
|
|||||||
Reference in New Issue
Block a user