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";
import type React from "react";
import { useRef, useState, useEffect } from "react";
import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@ -15,26 +16,33 @@ export function getDocumentTypeLabel(type: string): string {
.join(" ");
}
const MAX_LABEL_LENGTH = 28;
export function DocumentTypeChip({ type, className }: { type: string; className?: string }) {
const icon = getDocumentTypeIcon(type, "h-4 w-4");
const fullLabel = getDocumentTypeLabel(type);
const truncatedLabel = fullLabel.length > MAX_LABEL_LENGTH
? `${fullLabel.slice(0, MAX_LABEL_LENGTH)}...`
: fullLabel;
const needsTruncation = fullLabel.length > MAX_LABEL_LENGTH;
const textRef = useRef<HTMLSpanElement>(null);
const [isTruncated, setIsTruncated] = useState(false);
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 = (
<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="truncate">{truncatedLabel}</span>
<span ref={textRef} className="truncate min-w-0">{fullLabel}</span>
</span>
);
if (needsTruncation) {
if (isTruncated) {
return (
<Tooltip>
<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" />
</TableHead>
{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" />
</TableHead>
)}
@ -243,7 +243,7 @@ export function DocumentsTableShell({
/>
</TableCell>
{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" />
</TableCell>
)}
@ -352,7 +352,7 @@ export function DocumentsTableShell({
</SortableHeader>
</TableHead>
{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
sortKey="document_type"
currentSortKey={sortKey}
@ -452,7 +452,7 @@ export function DocumentsTableShell({
/>
</TableCell>
{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} />
</TableCell>
)}