Various UI enhancements/fixes (#8307)

Author: egbertbouman

src/tribler/ui/package-lock.json

@@ -42,6 +42,7 @@
     "react-router-dom": "^6.16.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7",
+    "use-keyboard-shortcut": "^1.1.6",
     "zod": "^3.22.4"
   },
   "devDependencies": {

src/tribler/ui/package.json

@@ -14,7 +14,7 @@ import { useEffect, useRef, useState } from "react";
 import toast, { Toaster } from 'react-hot-toast';
 import Cookies from "js-cookie";
 import { DialogDescription } from "@radix-ui/react-dialog";
-import { Ban } from "lucide-react";
+import { Ban, Loader } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { ScrollArea } from "../ui/scroll-area";
 
@@ -84,7 +84,8 @@ export function Header() {
                     }}
                 >
                     <DialogHeader>
-                        <DialogTitle className="flex items-center justify-center mb-3"><Ban className="inline mr-3" />
+                        <DialogTitle className="flex items-center justify-center mb-3">
+                            {online ? <Loader className="inline mr-3 animate-[spin_3s_linear_infinite]" /> : <Ban className="inline mr-3" />}
                             {online
                                 ? "Tribler is shutting down"
                                 : (shutdownLogs.length > 0

src/tribler/ui/src/components/layouts/Header.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { NavLink, Outlet, useLocation } from "react-router-dom";
+import { NavLink, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { Header } from "./Header";
 import { Accordion } from "@radix-ui/react-accordion";
 import { sideMenu } from "@/config/menu";
@@ -15,6 +15,8 @@ import { useTranslation } from "react-i18next";
 export function SideLayout() {
     const { t } = useTranslation();
     const location = useLocation();
+    const navigate = useNavigate();
+    const [history, setHistory] = useState(new Map());
     const [accordionValue, setAccordionValue] = useState(() => {
         return "item-" + sideMenu.findIndex(item => item.items !== undefined ? item.items.filter(subitem => subitem.to !== undefined).map(subitem => subitem.to).includes(location.pathname) : false)
     });
@@ -44,12 +46,19 @@ export function SideLayout() {
                                 {sideMenu.filter((item) => !item.hide || item.hide() !== true).map((item, index) => (
                                     item.items !== undefined ? (
                                         <AccordionItem key={index} value={`item-${index}`} className="border-b-0">
-                                            <AccordionTrigger className={cn(
-                                                buttonVariants({ variant: "ghost" }),
-                                                (item.items.filter(subitem => subitem.to !== undefined).map(subitem => subitem.to))
-                                                    .includes(location.pathname) ? 'bg-accent' : 'hover:bg-accent',
-                                                "justify-between hover:no-underline"
-                                            )}>
+                                            <AccordionTrigger
+                                                className={cn(
+                                                    buttonVariants({ variant: "ghost" }),
+                                                    (item.items.filter(subitem => subitem.to !== undefined).map(subitem => subitem.to))
+                                                        .includes(location.pathname) ? 'bg-accent' : 'hover:bg-accent',
+                                                    "justify-between hover:no-underline"
+                                                )}
+                                                onClick={() => {
+                                                    const target = history.get(item.title) || item.items?.at(0)?.to;
+                                                    if (target) {
+                                                        navigate(target);
+                                                    }
+                                                }}>
                                                 <div className="flex items-center">{item.icon && <item.icon className="mr-2" />} {t(item.title)}</div>
                                             </AccordionTrigger>
                                             <AccordionContent className="pb-2 pl-6">
@@ -59,7 +68,13 @@ export function SideLayout() {
                                                             <NavLink
                                                                 key={subindex}
                                                                 to={submenu.to}
-                                                                onClick={() => setShowNav(false)}
+                                                                onClick={() => {
+                                                                    setShowNav(false);
+                                                                    if (item.title && submenu.to) {
+                                                                        // Keep track of which submenus we navigated to
+                                                                        setHistory(map => new Map(map.set(item.title, submenu.to)));
+                                                                    }
+                                                                }}
                                                                 className={({ isActive }) => cn(
                                                                     buttonVariants({ variant: "ghost" }),
                                                                     isActive ? "bg-accent" : "hover:bg-accent",

src/tribler/ui/src/components/layouts/SideLayout.tsx

@@ -1,4 +1,6 @@
 import { useRef, useState } from "react";
+import { Button } from "./button";
+import { SearchIcon } from "lucide-react";
 
 
 export function Autocomplete({ placeholder, completions, onChange }: { placeholder: string, completions: (filter: string) => Promise<string[]>, onChange: (query: string) => void }) {
@@ -61,10 +63,23 @@ export function Autocomplete({ placeholder, completions, onChange }: { placehold
                             value={inputValue}
                             ref={inputRef}
                         />
+                        <Button
+                            variant="ghost"
+                            className="h-6 py-0 px-0
+                                       hover:outline hover:outline-neutral-500 outline-1 outline-offset-1
+                                       active:outline active:outline-neutral-900 dark:active:outline-neutral-200"
+                            onClick={() => {
+                                const query = (selectedSuggestion > 0) ? suggestions[selectedSuggestion - 1] : inputValue;
+                                handleSuggestionClick(query);
+                                inputRef.current?.blur();
+                            }}
+                        >
+                            <SearchIcon className="h-5" />
+                        </Button>
                     </div>
                 </div>
-                <div className="relative mt-2">
-                    {focus && (
+                {focus && suggestions.length > 0 &&(
+                    <div className="relative mt-2">
                         <div className="max-h-[300px] overflow-y-auto overflow-x-hidden absolute top-0 z-10 w-full rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in">
                             {suggestions.length > 0 && (suggestions.map((suggestion, index) => (
                                 <div className={`p-1 text-foreground h-full overflow-auto  ${(selectedSuggestion === index + 1) ? 'bg-accent' : ''}`} key={index + 'a'}>
@@ -77,10 +92,9 @@ export function Autocomplete({ placeholder, completions, onChange }: { placehold
                                 </div>
                             )))}
                         </div>
-                    )}
-                </div>
+                    </div>
+                )}
             </div>
         </div>
-
     );
 }

src/tribler/ui/src/components/ui/autocomplete.tsx

@@ -10,6 +10,7 @@ import * as SelectPrimitive from "@radix-ui/react-select"
 import type { Table as ReactTable } from '@tanstack/react-table';
 import { useTranslation } from 'react-i18next';
 import { useResizeObserver } from '@/hooks/useResizeObserver';
+import useKeyboardShortcut from 'use-keyboard-shortcut';
 
 
 export function getHeader<T>(name: string, translate: boolean = true, addSorting: boolean = true): ColumnDefTemplate<HeaderContext<T, unknown>> | undefined {
@@ -68,6 +69,7 @@ interface ReactTableProps<T extends object> {
     maxHeight?: string | number;
     expandable?: boolean;
     storeSortingState?: string;
+    rowId?: (originalRow: T, index: number, parent?: Row<T>) => string,
 }
 
 function SimpleTable<T extends object>({
@@ -86,7 +88,8 @@ function SimpleTable<T extends object>({
     filters,
     maxHeight,
     expandable,
-    storeSortingState
+    storeSortingState,
+    rowId
 }: ReactTableProps<T>) {
     const [pagination, setPagination] = useState<PaginationState>({
         pageIndex: pageIndex ?? 0,
@@ -97,6 +100,20 @@ function SimpleTable<T extends object>({
     const [expanded, setExpanded] = useState<ExpandedState>({});
     const [sorting, setSorting] = useState<SortingState>(getStoredSortingState(storeSortingState) || []);
 
+    useKeyboardShortcut(
+        ["Control", "A"],
+        keys => {
+            if (allowMultiSelect) {
+                table.toggleAllRowsSelected(true);
+            }
+        },
+        {
+            overrideSystem: true,
+            ignoreInputFields: true,
+            repeatOnHold: false
+        }
+    );
+
     const table = useReactTable({
         data,
         columns,
@@ -122,6 +139,7 @@ function SimpleTable<T extends object>({
         onExpandedChange: setExpanded,
         onSortingChange: setSorting,
         getSubRows: (row: any) => row?.subRows,
+        getRowId: rowId,
     });
 
     const { t } = useTranslation();

src/tribler/ui/src/components/ui/simple-table.tsx

@@ -16,7 +16,7 @@ interface NavItem {
 }
 
 interface NavItemWithChildren extends NavItem {
-    items?: NavItemWithChildren[]
+    items?: NavItem[]
 }
 
 export const sideMenu: NavItemWithChildren[] = [

src/tribler/ui/src/config/menu.ts

@@ -195,6 +195,7 @@ export default function Downloads({ statusFilter }: { statusFilter: number[] })
                             onSelectedRowsChange={setSelectedDownloads}
                             maxHeight={Math.max((parentRect?.height ?? 50) - 50, 50)}
                             storeSortingState="download-sorting"
+                            rowId={(row) => row.infohash}
                         />
                     </Card>
                 </div>

src/tribler/ui/src/pages/Downloads/index.tsx

@@ -112,6 +112,7 @@ export default function Popular() {
                 data={torrents}
                 columns={torrentColumns}
                 storeSortingState="popular-sorting"
+                rowId={(row) => row.infohash}
             />
         </>
     )

src/tribler/ui/src/pages/Popular/index.tsx

@@ -151,6 +151,7 @@ export default function Search() {
                 data={torrents}
                 columns={torrentColumns}
                 storeSortingState="search-sorting"
+                rowId={(row) => row.infohash}
             />
         </>
     )