apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-17 18:35:19 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: update DocumentsTableShell and DocumentTypeIcon for improved layout and truncation handling

Browse source
This commit is contained in:
Anish Sarkar 2026-02-04 20:30:18 +05:30
parent 5e4dce40bd
commit 1cb578cffb
2 changed files with 21 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon.tsx
View file

@ -1,6 +1,7 @@
"use client"; "use client";
import type React from "react"; import type React from "react";
import { useRef, useState, useEffect } from "react";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons"; import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"; import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@ -15,26 +16,33 @@ export function getDocumentTypeLabel(type: string): string {
.join(" "); .join(" ");
} }
const MAX_LABEL_LENGTH = 28;
export function DocumentTypeChip({ type, className }: { type: string; className?: string }) { export function DocumentTypeChip({ type, className }: { type: string; className?: string }) {
const icon = getDocumentTypeIcon(type, "h-4 w-4"); const icon = getDocumentTypeIcon(type, "h-4 w-4");
const fullLabel = getDocumentTypeLabel(type); const fullLabel = getDocumentTypeLabel(type);
const truncatedLabel = fullLabel.length > MAX_LABEL_LENGTH const textRef = useRef<HTMLSpanElement>(null);
? `${fullLabel.slice(0, MAX_LABEL_LENGTH)}...` const [isTruncated, setIsTruncated] = useState(false);
: fullLabel;
const needsTruncation = fullLabel.length > MAX_LABEL_LENGTH; useEffect(() => {
const checkTruncation = () => {
if (textRef.current) {
setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
}
};
checkTruncation();
window.addEventListener("resize", checkTruncation);
return () => window.removeEventListener("resize", checkTruncation);
}, []);
const chip = ( const chip = (
<span <span
className={`inline-flex items-center gap-1.5 rounded bg-muted/40 px-2 py-1 text-xs text-muted-foreground ${className ?? ""}`} className={`inline-flex items-center gap-1.5 rounded bg-muted/40 px-2 py-1 text-xs text-muted-foreground max-w-full overflow-hidden ${className ?? ""}`}
> >
<span className="opacity-80 flex-shrink-0">{icon}</span> <span className="opacity-80 flex-shrink-0">{icon}</span>
<span className="truncate">{truncatedLabel}</span> <span ref={textRef} className="truncate min-w-0">{fullLabel}</span>
</span> </span>
); );
if (needsTruncation) { if (isTruncated) {
return ( return (
<Tooltip> <Tooltip>
<TooltipTrigger asChild>{chip}</TooltipTrigger> <TooltipTrigger asChild>{chip}</TooltipTrigger>

8
surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
View file

@ -206,7 +206,7 @@ export function DocumentsTableShell({
<Skeleton className="h-3 w-20" /> <Skeleton className="h-3 w-20" />
</TableHead> </TableHead>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableHead className="w-44 border-r border-border/30"> <TableHead className="w-[20%] min-w-[120px] max-w-[200px] border-r border-border/30">
<Skeleton className="h-3 w-14" /> <Skeleton className="h-3 w-14" />
</TableHead> </TableHead>
)} )}
@ -243,7 +243,7 @@ export function DocumentsTableShell({
/> />
</TableCell> </TableCell>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableCell className="w-44 py-2.5 border-r border-border/30"> <TableCell className="w-[20%] min-w-[120px] max-w-[200px] py-2.5 border-r border-border/30 overflow-hidden">
<Skeleton className="h-5 w-24 rounded" /> <Skeleton className="h-5 w-24 rounded" />
</TableCell> </TableCell>
)} )}
@ -352,7 +352,7 @@ export function DocumentsTableShell({
</SortableHeader> </SortableHeader>
</TableHead> </TableHead>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableHead className="w-44 border-r border-border/30"> <TableHead className="w-[20%] min-w-[120px] max-w-[200px] border-r border-border/30">
<SortableHeader <SortableHeader
sortKey="document_type" sortKey="document_type"
currentSortKey={sortKey} currentSortKey={sortKey}
@ -452,7 +452,7 @@ export function DocumentsTableShell({
/> />
</TableCell> </TableCell>
{columnVisibility.document_type && ( {columnVisibility.document_type && (
<TableCell className="w-44 py-2.5 border-r border-border/30"> <TableCell className="w-[20%] min-w-[120px] max-w-[200px] py-2.5 border-r border-border/30 overflow-hidden">
<DocumentTypeChip type={doc.document_type} /> <DocumentTypeChip type={doc.document_type} />
</TableCell> </TableCell>
)} )}