Tribler · egbertbouman · Mar 21, 2025 · Mar 20, 2025 · Mar 21, 2025 · Mar 21, 2025
diff --git a/src/tribler/ui/src/components/icons.tsx b/src/tribler/ui/src/components/icons.tsx
@@ -1,3 +1,5 @@
+import { cn } from "@/lib/utils"
+
 type IconProps = React.HTMLAttributes<SVGElement>
 
 export const Icons = {
@@ -19,4 +21,13 @@ export const Icons = {
             ></path>
         </svg>
     ),
+    spinner: (props: IconProps) => {
+        var {className, ...otherProps} = props;
+        return (
+            <svg className={cn("animate-spin h-3 w-3 text-black dark:text-white", className)} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...otherProps}>
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+        )
+    },
 }
diff --git a/src/tribler/ui/src/components/swarm-health.tsx b/src/tribler/ui/src/components/swarm-health.tsx
@@ -6,6 +6,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/t
 import { formatTimeRelative } from "@/lib/utils";
 import { triblerService } from "@/services/tribler.service";
 import { isErrorDict } from "@/services/reporting";
+import { Icons } from "./icons";
 
 
 export function SwarmHealth({ torrent }: { torrent: Torrent }) {
@@ -43,10 +44,7 @@ export function SwarmHealth({ torrent }: { torrent: Torrent }) {
                         }}
                     >
                         {checking ?
-                            <svg className="animate-spin h-3 w-3 text-black dark:text-white mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                            </svg>
+                            <Icons.spinner className="mr-2" />
                             :
                             <div className={`w-3 h-3 ${bgColor(torrent)} rounded-full mr-2`} />
                         }

diff --git a/src/tribler/ui/src/components/ui/simple-table.tsx b/src/tribler/ui/src/components/ui/simple-table.tsx
@@ -133,6 +133,7 @@ interface ReactTableProps<T extends object> {
     allowColumnToggle?: string;
     filters?: { id: string, value: string }[];
     maxHeight?: string | number;
+    scrollClassName?: string;
     expandable?: boolean;
     storeSortingState?: string;
     rowId?: (originalRow: T, index: number, parent?: Row<T>) => string,
@@ -156,6 +157,7 @@ function SimpleTable<T extends object>({
     allowColumnToggle,
     filters,
     maxHeight,
+    scrollClassName,
     expandable,
     storeSortingState,
     rowId,
@@ -295,7 +297,7 @@ function SimpleTable<T extends object>({
     return (
         <>
             <div ref={parentRef} className='flex-grow flex'>
-                <Table maxHeight={maxHeight ?? (parentRect?.height ?? 200)}>
+                <Table maxHeight={maxHeight ?? (parentRect?.height ?? 200)} scrollClassName={scrollClassName}>
                     <TableHeader className='z-10'>
                         {table.getHeaderGroups().map((headerGroup) => (
                             <TableRow key={headerGroup.id} className="bg-neutral-100 hover:bg-neutral-100 dark:bg-neutral-900 dark:hover:bg-neutral-900">

diff --git a/src/tribler/ui/src/components/ui/table.tsx b/src/tribler/ui/src/components/ui/table.tsx
@@ -5,13 +5,14 @@ import { ScrollArea } from "./scroll-area"
 
 interface ExtendedTableProps extends React.HTMLAttributes<HTMLTableElement> {
     maxHeight?: string | number;
+    scrollClassName?: string;
 }
 
 const Table = React.forwardRef<
     HTMLTableElement,
     ExtendedTableProps
->(({ className, maxHeight, ...props }, ref) => (
-    <ScrollArea className={cn("relative w-full overflow-auto")} style={{ maxHeight: maxHeight }}>
+>(({ className, scrollClassName, maxHeight, ...props }, ref) => (
+    <ScrollArea className={cn("relative w-full overflow-auto", scrollClassName)} style={{ maxHeight: maxHeight }}>
         <table
             ref={ref}
             className={cn("w-full caption-bottom text-sm", className)}

diff --git a/src/tribler/ui/src/dialogs/SaveAs.tsx b/src/tribler/ui/src/dialogs/SaveAs.tsx
@@ -19,6 +19,7 @@ import { PathInput } from "@/components/path-input";
 import { ChevronDown, ChevronRight, AlertTriangle } from "lucide-react";
 import { FileTreeItem } from "@/models/file.model";
 import { DownloadConfig } from "@/models/downloadconfig.model";
+import { Icons } from "@/components/icons";
 
 
 function startDownloadCallback(response: any, t: TFunction) {
@@ -250,10 +251,7 @@ export default function SaveAs(props: SaveAsProps & JSX.IntrinsicAttributes & Di
                 {error === undefined && files.length === 0 &&
                     <div className="flex justify-center p-5">
                         {t('LoadingTorrent', { method: params.anon_hops !== 0 ? t('anonymously') : t('directly') })}
-                        <svg className="animate-spin -ml-1 mr-3 h-6 w-6 text-black dark:text-white ml-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                        </svg>
+                        <Icons.spinner className="h-6 w-6 mx-3" />
                     </div>
                 }
                 {error !== undefined &&

diff --git a/src/tribler/ui/src/pages/Debug/IPv8/Overlays.tsx b/src/tribler/ui/src/pages/Debug/IPv8/Overlays.tsx
@@ -86,7 +86,7 @@ export default function Overlays() {
                     maxHeight={Math.max((parentRect?.height ?? 50) - 0, 50)}
                 />
             </ResizablePanel>
-            <ResizableHandle className="border-2 border-gray-300 dark:border-gray-600" />
+            <ResizableHandle className={`border-2 border-gray-300 dark:border-gray-600 ${selectedOverlay ? "flex" : "hidden"}`} />
             <ResizablePanel defaultSize={50} className={`${selectedOverlay ? "flex" : "hidden"}`}>
                 <SimpleTable
                     data={selectedOverlay?.peers || []}

diff --git a/src/tribler/ui/src/pages/Downloads/Trackers.tsx b/src/tribler/ui/src/pages/Downloads/Trackers.tsx
@@ -10,6 +10,7 @@ import { Button } from "@/components/ui/button";
 import { triblerService } from "@/services/tribler.service";
 import { isErrorDict } from "@/services/reporting";
 import { useTranslation } from "react-i18next";
+import { Icons } from "@/components/icons";
 
 
 interface TrackerRow extends Tracker {
@@ -77,10 +78,7 @@ export default function Trackers({ download }: { download: Download }) {
     ]
 
     if (download.trackers.length === 0)
-        return <svg className="animate-spin h-3 w-3 text-black dark:text-white ml-4 mt-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                   <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                   <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-               </svg>;
+        return <Icons.spinner className="ml-4 mt-4" />;
 
     return (
         <div>

diff --git a/src/tribler/ui/src/pages/Downloads/index.tsx b/src/tribler/ui/src/pages/Downloads/index.tsx
@@ -258,7 +258,7 @@ export default function Downloads({ statusFilter }: { statusFilter: number[] })
                     </Card>
                 </div>
             </ResizablePanel>
-            <ResizableHandle />
+            <ResizableHandle className={`${selectedDownloads.length == 1 ? "flex" : "hidden"}`} />
             <ResizablePanel defaultSize={25} className={`${selectedDownloads.length == 1 ? "flex" : "hidden"}`}>
                 <DownloadDetails download={selectedDownloads.length > 0 ? selectedDownloads[0] : undefined} />
             </ResizablePanel>

diff --git a/src/tribler/ui/src/pages/Popular/index.tsx b/src/tribler/ui/src/pages/Popular/index.tsx
@@ -106,6 +106,7 @@ export default function Popular() {
                 />
             }
             <SimpleTable
+                scrollClassName="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-57px)]"
                 data={torrents}
                 columns={torrentColumns}
                 storeSortingState="popular-sorting"

diff --git a/src/tribler/ui/src/pages/Search/index.tsx b/src/tribler/ui/src/pages/Search/index.tsx
@@ -152,6 +152,7 @@ export default function Search() {
                 />
             }
             <SimpleTable
+                scrollClassName="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-57px)]"
                 data={torrents}
                 columns={torrentColumns}
                 storeSortingState="search-sorting"