{locale === 'de' ? 'Suchmodus' : 'Søkemodus'}
{searchModeOptions(locale).map(o => {
const active = o.value === value;
return (
);
})}
{rerankEnabled && (
<>
{locale === 'de' ? 'Gründlichkeit' : 'Grundighet'}
)}
{strings.support_popover_title || 'Kontakt support'}
{strings.support_popover_body || 'Spørsmål eller problemer? Ring oss eller send e-post.'}
📞
{strings.support_phone_label || 'Telefon'}
{strings.support_phone_display || '469 06 444'}
{strings.support_email_label || 'E-post'}
support@reliableai.no
{supportOpen && (
)}
Powered by
{expanded ? (
<>
Meny
) : (
)}
{expanded && projectsAvailable && projectsSlot}
{expanded && onGuide && (
{project.name}
· {items ? items.length : 0}…
)}
{!loading && items && items.length === 0 && (
{strings.projects_empty}
)}
{!loading && grouped.map(group => (
{group.items.map(it => {
const cobj = corpusById(it.corpus_id);
// KOFA/KLFU paragraphs (avsnitt) have no standalone detail view —
// the panel shows the parent case. Their saved `case_id` is the
// paragraph pid, which the kofa-kind /api/detail can't resolve (it
// keys on case-id), so select by `parent_case_id` instead —
// mirroring how a paragraph hit in the search results opens its
// case (onSelect(hit.case_id)). Only kofa-kind corpora resolve
// detail by case-id; pid-resolved corpora (Lovdata, EU, Høyesterett,
// …) must keep using `case_id` (the pid) even when a parent exists.
const detailId = (it.item_kind === 'paragraph' && it.parent_case_id && cobj && cobj.kind === 'kofa')
? it.parent_case_id
: it.case_id;
const key = `${it.corpus_id}-${detailId}`;
const active = selectedKey === key;
const onClick = () => onSelect(detailId, { _corpus_source: it.corpus_id, case_id: detailId, title: it.case_title });
const onTrash = (e) => { e.stopPropagation(); onRemoveItem(it.id); };
return it.item_kind === 'paragraph'
?
: ;
})}
{cobj && cobj.mark && }
{pills.length > 0 && (
{it.case_title || it.case_id}
{(cobj && cobj.label) || it.corpus_id}
{pills.map((p, i) => (
{p.label}:
{p.value}
))}
)}
{(verdictBadges.length > 0 || flagBadges.length > 0) && (
{verdictBadges.map((b, i) => (
{b.label && {b.label}:}
{b.display}
))}
{flagBadges.map((label, i) => (
{label}
))}
)}
{cobj && cobj.mark && }
{text && (
{it.case_title || it.case_id}
{(cobj && cobj.label) || it.corpus_id}{it.parent_case_id ? ` · ${it.parent_case_id}` : ''}
{text})}
{strings.projects_empty}
)}
{items.map(p => {
const active = p.id === currentId;
const isRenaming = renamingId === p.id;
const isMenuOpen = menuOpenId === p.id;
const isConfirmingDelete = confirmDeleteId === p.id;
if (isRenaming) {
return (
setRenameDraft(e.target.value.slice(0, 120))}
onBlur={() => submitRename(p.id)}
onKeyDown={e => {
if (e.key === 'Enter') { e.preventDefault(); submitRename(p.id); }
else if (e.key === 'Escape') { e.preventDefault(); setRenamingId(null); setRenameDraft(''); }
}}
style={{ display: 'block', width: '100%', padding: '6px 8px', fontSize: 12.5, borderRadius: 'var(--r-sm)', border: '1px solid var(--accent)', background: 'var(--surface)', color: 'var(--text)', outline: 'none', marginBottom: 2, boxSizing: 'border-box' }}/>
);
}
return (
{creating ? (
setDraftName(e.target.value.slice(0, 120))}
onBlur={submitCreate}
onKeyDown={e => {
if (e.key === 'Enter') { e.preventDefault(); submitCreate(); }
else if (e.key === 'Escape') { e.preventDefault(); setCreating(false); setDraftName(''); }
}}
style={{ display: 'block', width: '100%', padding: '6px 8px', fontSize: 12.5, borderRadius: 'var(--r-sm)', border: '1px solid var(--accent)', background: 'var(--surface)', color: 'var(--text)', outline: 'none', marginTop: 4, boxSizing: 'border-box' }}/>
) : (
)}
{ setMenuOpenId(prev => prev === p.id ? null : prev); }}>
{isMenuOpen && !isConfirmingDelete && (
)}
{isConfirmingDelete && (
);
})}
{strings.projects_delete_confirm}
)}
∗
,
no: ,
dk: ,
de: ,
eu: ,
klfu: ![Kongekronen]({asset("/static/images/dk-crown.svg")}){kind=small}
,
};
return marks[kind] || marks.all;
};
// ──────────────────────────────────────────────────────────────────────────
// Source tabs
// ──────────────────────────────────────────────────────────────────────────
function SourceTabs({ corpora, active, onSelect, totals }) {
// Horizontally scrollable strip of source-cards. The scroller keeps each
// card uniform width (140px) so 7 home corpora fit on a 1100-wide layout
// and additional corpora overflow into a horizontal scroll instead of
// wrapping. Edge fades hint at off-screen content.
const scrollRef = useRef(null);
const [edge, setEdge] = useState({ left: false, right: false });
const recalcEdges = () => {
const el = scrollRef.current;
if (!el) return;
const max = el.scrollWidth - el.clientWidth;
setEdge({ left: el.scrollLeft > 4, right: el.scrollLeft < max - 4 });
};
useEffect(() => {
recalcEdges();
const el = scrollRef.current;
if (!el) return;
el.addEventListener('scroll', recalcEdges, { passive: true });
window.addEventListener('resize', recalcEdges);
return () => {
el.removeEventListener('scroll', recalcEdges);
window.removeEventListener('resize', recalcEdges);
};
}, [corpora.length]);
const scrollBy = (delta) => {
const el = scrollRef.current;
if (!el) return;
el.scrollTo({ left: el.scrollLeft + delta, behavior: 'smooth' });
};
// When the active tab changes, ensure it's visible in the scroller.
useEffect(() => {
const el = scrollRef.current;
if (!el) return;
const node = el.querySelector(`[data-corpus-id="${active}"]`);
if (!node) return;
const elBox = el.getBoundingClientRect();
const nodeBox = node.getBoundingClientRect();
if (nodeBox.left < elBox.left + 24 || nodeBox.right > elBox.right - 24) {
node.scrollIntoView({ behavior: 'smooth', inline: 'nearest', block: 'nearest' });
}
}, [active]);
return (
{edge.left && (
)}
{edge.right && (
)}
);
}
// ──────────────────────────────────────────────────────────────────────────
// Result crossfade wrapper — fades content on view mode change
// ──────────────────────────────────────────────────────────────────────────
function ResultFade({ viewMode, render }) {
const [displayedMode, setDisplayedMode] = useState(viewMode);
const [phase, setPhase] = useState('visible');
useEffect(() => {
if (viewMode === displayedMode) { setPhase('visible'); return; }
setPhase('fading-out');
const t = setTimeout(() => {
setDisplayedMode(viewMode);
// Use rAF to ensure the DOM updates with new content at opacity 0
// before we start the fade-in transition
requestAnimationFrame(() => {
requestAnimationFrame(() => setPhase('visible'));
});
}, 180);
return () => clearTimeout(t);
}, [viewMode, displayedMode]);
return (
{corpora.map(c => {
const isActive = active === c.id;
const total = totals[c.id];
return (
);
})}
{render(displayedMode)}
);
}
// ──────────────────────────────────────────────────────────────────────────
// View mode toggle — slides between paragraph and table views
// ──────────────────────────────────────────────────────────────────────────
function ViewModeToggle({ mode, onChange, strings, corpus }) {
// PR C: N-segment toggle driven by corpus.view_modes when present. Lovdata
// and Retsinfo ship a 3-segment array (Ledd / Paragraf / Dokument); KOFA /
// KLFU and other corpora fall through to the existing 2-way Avsnitt / Sak.
//
// Icon mapping:
// 3-way (Lovdata-kind): Ledd → list · Paragraf → § symbol · Dokument → boxed-bars
// 2-way (KOFA-kind): Avsnitt → list · Sak → table grid
const cornerIcon = (i, n) => {
if (n === 3) {
if (i === 0) return 'list';
if (i === 1) return 'paragraph';
return 'document';
}
return i === 0 ? 'list' : 'table';
};
let tabs;
if (Array.isArray(corpus?.view_modes) && corpus.view_modes.length > 0) {
tabs = corpus.view_modes.map((vm, i, arr) => ({
id: vm.value,
label: vm.label,
icon: cornerIcon(i, arr.length),
}));
} else {
const paragraphLabel = strings.paragraph_tab || 'Avsnitt';
const caseLabel = strings.case_tab || 'Sak';
tabs = [
{ id: 'paragraph', label: paragraphLabel, icon: 'list' },
{ id: 'case', label: caseLabel, icon: 'table' },
];
}
let activeIdx = tabs.findIndex(t => t.id === mode);
if (activeIdx < 0) activeIdx = 0;
// Fixed per-segment width so all toggle buttons are equal regardless of
// label length. 120 px comfortably fits the widest label we expose today
// ("Dokument" / "Paragraf" + icon + gap). Pill positioning uses the same
// px value so it aligns exactly with the active button — the previous
// % math drifted because the container's 3 px padding wasn't subtracted
// from the percentage base.
const SEGMENT_PX = 120;
const PAD_PX = 3;
return (
{/* Sliding background pill. Animate `transform` instead of `left`:
`transform` composites on the GPU and avoids the layout/paint
cycle that `left` triggers on every frame — the earlier `left`
version stuttered visibly on the Ledd→§ transition because the
same frame swapped the (much heavier) result-list DOM. */}
{tabs.map(t => {
const a = mode === t.id;
return (
);
})}
{popOpen && onSetSearchMode && (
{
if (m && m !== searchMode) onSetSearchMode(m);
setPopOpen(false);
}}
/>
)}
{!query && (
{placeholder}
{focused && (
Tab ↹
)}
)}