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

feat: add scroll position tracking and dynamic masking to DocumentsTableShell for improved document preview experience; update CreateSearchSpaceDialog styling for consistency

Browse source
This commit is contained in:
Anish Sarkar 2026-03-07 04:20:14 +05:30
parent 72337f326c
commit f5e80b04fa
2 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -345,6 +345,13 @@ export function DocumentsTableShell({
const [viewingDoc, setViewingDoc] = useState<Document | null>(null); const [viewingDoc, setViewingDoc] = useState<Document | null>(null);
const [viewingContent, setViewingContent] = useState<string>(""); const [viewingContent, setViewingContent] = useState<string>("");
const [viewingLoading, setViewingLoading] = useState(false); const [viewingLoading, setViewingLoading] = useState(false);
const [previewScrollPos, setPreviewScrollPos] = useState<"top" | "middle" | "bottom">("top");
const handlePreviewScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
const el = e.currentTarget;
const atTop = el.scrollTop <= 2;
const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= 2;
setPreviewScrollPos(atTop ? "top" : atBottom ? "bottom" : "middle");
}, []);
const [deleteDoc, setDeleteDoc] = useState<Document | null>(null); const [deleteDoc, setDeleteDoc] = useState<Document | null>(null);
const [isDeleting, setIsDeleting] = useState(false); const [isDeleting, setIsDeleting] = useState(false);
@ -752,6 +759,7 @@ export function DocumentsTableShell({
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div <div
onScroll={handlePreviewScroll}
className={[ className={[
"overflow-y-auto flex-1 min-h-0 px-1 md:px-6 select-text", "overflow-y-auto flex-1 min-h-0 px-1 md:px-6 select-text",
"max-md:text-xs", "max-md:text-xs",
@ -762,6 +770,10 @@ export function DocumentsTableShell({
"max-md:[&_td]:text-[11px]! max-md:[&_td]:px-2! max-md:[&_td]:py-1.5!", "max-md:[&_td]:text-[11px]! max-md:[&_td]:px-2! max-md:[&_td]:py-1.5!",
"max-md:[&_th]:text-[11px]! max-md:[&_th]:px-2! max-md:[&_th]:py-1.5!", "max-md:[&_th]:text-[11px]! max-md:[&_th]:px-2! max-md:[&_th]:py-1.5!",
].join(" ")} ].join(" ")}
style={{
maskImage: `linear-gradient(to bottom, ${previewScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${previewScrollPos === "bottom" ? "black" : "transparent"})`,
WebkitMaskImage: `linear-gradient(to bottom, ${previewScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${previewScrollPos === "bottom" ? "black" : "transparent"})`,
}}
> >
{viewingLoading ? ( {viewingLoading ? (
<div className="flex items-center justify-center py-12"> <div className="flex items-center justify-center py-12">

6
surfsense_web/components/layout/ui/dialogs/CreateSearchSpaceDialog.tsx
View file

@ -138,20 +138,20 @@ export function CreateSearchSpaceDialog({ open, onOpenChange }: CreateSearchSpac
)} )}
/> />
<DialogFooter className="flex-row gap-2 pt-2 sm:pt-3"> <DialogFooter className="flex-row justify-end gap-2 pt-2 sm:pt-3">
<Button <Button
type="button" type="button"
variant="secondary" variant="secondary"
onClick={() => handleOpenChange(false)} onClick={() => handleOpenChange(false)}
disabled={isSubmitting} disabled={isSubmitting}
className="flex-1 sm:flex-none sm:w-auto h-8 sm:h-10 text-xs sm:text-sm" className="h-8 sm:h-9 text-xs sm:text-sm"
> >
{tCommon("cancel")} {tCommon("cancel")}
</Button> </Button>
<Button <Button
type="submit" type="submit"
disabled={isSubmitting} disabled={isSubmitting}
className="flex-1 sm:flex-none sm:w-auto h-8 sm:h-10 text-xs sm:text-sm" className="h-8 sm:h-9 text-xs sm:text-sm"
> >
{isSubmitting ? ( {isSubmitting ? (
<> <>