Add option to hide tab strip

Issue #208
openscopeproject · Oct 8, 2024 · 2ede1b9 · 2ede1b9
1 parent f6a62d9
commit 2ede1b9
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 8 deletions.
diff --git a/src/components/app.tsx b/src/components/app.tsx
@@ -21,7 +21,7 @@ import type { ServerConfig } from "../config";
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Server } from "../components/server";
 import { ClientManager } from "../clientmanager";
-import { ActionIcon, Box, Button, Flex, Stack, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, Box, Button, Flex, Menu, Stack, useMantineColorScheme } from "@mantine/core";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { queryClient } from "queries";
@@ -34,6 +34,7 @@ import * as Icon from "react-bootstrap-icons";
 import { modKeyString } from "trutil";
 import { ColorSchemeToggle, FontSizeToggle, ShowVersion } from "./miscbuttons";
 import { AppSettingsModal } from "./modals/settings";
+import { ToolbarButton } from "./toolbar";
 
 const { appWindow, invoke, makeCreateTorrentView } = await import(/* webpackChunkName: "taurishim" */"taurishim");
 
@@ -112,6 +113,17 @@ export default function TauriApp() {
         config.setServers(servers);
     }, [config]);
 
+    const [showTabStrip, setShowTabStrip] = useState(config.values.app.showTabStrip);
+
+    const toggleTabStrip = useCallback(() => {
+        config.values.app.showTabStrip = !showTabStrip;
+        setShowTabStrip(!showTabStrip);
+    }, [config, showTabStrip]);
+
+    const onCreateTorrent = useCallback(() => {
+        void makeCreateTorrentView();
+    }, []);
+
     return (
         <App>
             <AppSettingsModal
@@ -121,7 +133,9 @@ export default function TauriApp() {
                 <ServerTabs ref={tabsRef}
                     clientManager={clientManager}
                     servers={servers}
-                    setCurrentServer={setCurrentServer} >
+                    setCurrentServer={setCurrentServer}
+                    visible={showTabStrip}
+                >
                     <ShowVersion btn="lg" />
                     <ColorSchemeToggle btn="lg" />
                     <FontSizeToggle />
@@ -136,7 +150,33 @@ export default function TauriApp() {
                 {currentServer !== undefined
                     ? <ServerConfigContext.Provider value={currentServer}>
                         <ClientContext.Provider value={clientManager.getClient(currentServer.name)}>
-                            <Server hostname={clientManager.getHostname(currentServer.name)} tabsRef={tabsRef} />
+                            <Server
+                                hostname={clientManager.getHostname(currentServer.name)}
+                                tabsRef={tabsRef}
+                                toolbarExtra={!showTabStrip && <>
+                                    <ToolbarButton title={`Create torrent (${modKeyString()} + T)`} onClick={onCreateTorrent}>
+                                        <Icon.Stars size="1.5rem" />
+                                    </ToolbarButton>
+                                    <ToolbarButton title="Configure servers" onClick={serverConfigHandlers.open}>
+                                        <Icon.GearFill size="1.5rem" />
+                                    </ToolbarButton>
+                                    {tabsRef.current?.getOpenTabs() !== undefined && tabsRef.current?.getOpenTabs()?.length > 1 &&
+                                        <Menu shadow="md" width="12rem" withinPortal middlewares={{ shift: true, flip: true }}>
+                                            <Menu.Target>
+                                                <ToolbarButton title="Switch server">
+                                                    <Icon.Diagram2 size="1.5rem" />
+                                                </ToolbarButton>
+                                            </Menu.Target>
+
+                                            <Menu.Dropdown>
+                                                {tabsRef.current?.getOpenTabs().map((tab, index) =>
+                                                    <Menu.Item key={index} onClick={() => { tabsRef.current?.switchTab(index); }}>
+                                                        {tab}
+                                                    </Menu.Item>)}
+                                            </Menu.Dropdown>
+                                        </Menu>}
+                                </>}
+                                toggleTabStrip={toggleTabStrip} />
                         </ClientContext.Provider>
                     </ServerConfigContext.Provider>
                     : <Flex justify="center" align="center" w="100%" h="100%">

diff --git a/src/components/server.tsx b/src/components/server.tsx
@@ -105,9 +105,11 @@ function ServerContext(props: ServerContextProps) {
 interface ServerProps {
     hostname: string,
     tabsRef: React.RefObject<ServerTabsRef>,
+    toolbarExtra?: React.ReactNode,
+    toggleTabStrip: () => void,
 }
 
-export function Server({ hostname, tabsRef }: ServerProps) {
+export function Server({ hostname, tabsRef, toolbarExtra, toggleTabStrip }: ServerProps) {
     useAppHotkeys();
 
     const [currentFilters, setCurrentFilters] = useReducer(currentFiltersReducer, [{ id: "", filter: DefaultFilter }]);
@@ -214,9 +216,11 @@ export function Server({ hostname, tabsRef }: ServerProps) {
                     setSearchTerms={setSearchTerms}
                     modals={modals}
                     altSpeedMode={session?.["alt-speed-enabled"] ?? false}
+                    extra={toolbarExtra}
                     toggleFiltersPanel={toggleFiltersPanel}
                     toggleDetailsPanel={toggleDetailsPanel}
                     toggleMainSplit={toggleMainSplit}
+                    toggleTabStrip={toggleTabStrip}
                 />
             </Box>
             <SplitLayout key={`split-${showFiltersPanel ? "1" : "0"}-${showDetailsPanel ? "1" : "0"}-${mainSplit}`}
@@ -250,6 +254,7 @@ export function Server({ hostname, tabsRef }: ServerProps) {
                     selectedTorrents,
                     hostname,
                     torrents: torrents ?? [],
+                    showMisc: Boolean(toolbarExtra),
                 }} />
             </Box>
         </Flex>

diff --git a/src/components/servertabs.tsx b/src/components/servertabs.tsx
@@ -30,6 +30,7 @@ interface ServerTabsProps extends React.PropsWithChildren {
     clientManager: ClientManager,
     servers: ServerConfig[],
     setCurrentServer: React.Dispatch<ServerConfig | undefined>,
+    visible: boolean,
 }
 
 export interface ServerTabsRef {
@@ -178,6 +179,7 @@ export const ServerTabs = React.forwardRef<ServerTabsRef, ServerTabsProps>(funct
                 },
                 tabsList: {
                     flexWrap: "nowrap",
+                    display: props.visible ? undefined : "none",
                 },
             })}
         >

diff --git a/src/components/statusbar.tsx b/src/components/statusbar.tsx
@@ -35,9 +35,10 @@ export interface StatusbarProps {
     filteredTorrents: Torrent[],
     selectedTorrents: Set<number>,
     hostname: string,
+    showMisc: boolean,
 }
 
-export function Statusbar({ session, torrents, filteredTorrents, selectedTorrents, hostname }: StatusbarProps) {
+export function Statusbar({ session, torrents, filteredTorrents, selectedTorrents, hostname, showMisc }: StatusbarProps) {
     const config = useContext(ConfigContext);
     const serverConfig = useContext(ServerConfigContext);
 
@@ -145,7 +146,7 @@ export function Statusbar({ session, torrents, filteredTorrents, selectedTorrent
                 <div style={{ flex: "1 1 23%", order: sectionsMap.Selected }}>
                     {`Selected: ${sizeSelected}, done ${sizeDone}, left ${sizeLeft}`}
                 </div>}
-            {!TAURI &&
+            {(!TAURI || showMisc) &&
                 <div style={{ flexShrink: 0, display: "flex", order: 100 }}>
                     <ShowVersion sz="0.9rem" btn="md" />
                     <ColorSchemeToggle sz="0.9rem" btn="md" />

diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
@@ -41,7 +41,7 @@ interface ToolbarButtonProps extends React.PropsWithChildren<React.ComponentProp
     depressed?: boolean,
 }
 
-const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(function ToolbarButton(
+export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(function ToolbarButton(
     { children, depressed, ...other }: ToolbarButtonProps, ref,
 ) {
     return (
@@ -67,9 +67,11 @@ interface ToolbarProps {
     setSearchTerms: (terms: string[]) => void,
     modals: React.RefObject<ModalCallbacks>,
     altSpeedMode: boolean,
+    extra?: React.ReactNode,
     toggleFiltersPanel: () => void,
     toggleDetailsPanel: () => void,
     toggleMainSplit: () => void,
+    toggleTabStrip: () => void,
 }
 
 function useButtonHandlers(
@@ -211,6 +213,7 @@ function Toolbar(props: ToolbarProps) {
         ["mod + P", props.toggleMainSplit],
         ["mod + O", props.toggleFiltersPanel],
         ["mod + I", props.toggleDetailsPanel],
+        ["mod + [", props.toggleTabStrip],
     ]);
 
     const onSettingsExport = useCallback(() => {
@@ -358,6 +361,11 @@ function Toolbar(props: ToolbarProps) {
                         onClick={props.toggleDetailsPanel} rightSection={<Kbd>{`${modKeyString()} I`}</Kbd>}>
                         Toggle details
                     </Menu.Item>
+                    {props.extra !== undefined &&
+                        <Menu.Item
+                            onClick={props.toggleTabStrip} rightSection={<Kbd>{`${modKeyString()} [`}</Kbd>}>
+                            Toggle tab strip
+                        </Menu.Item>}
                     <Menu.Divider />
                     <Menu.Label>Interface settings</Menu.Label>
                     <Menu.Item onClick={onSettingsExport}>
@@ -374,6 +382,8 @@ function Toolbar(props: ToolbarProps) {
                 onClick={handlers.daemonSettings}>
                 <Icon.Tools size="1.5rem" />
             </ToolbarButton>
+
+            {props.extra}
         </Flex>
     );
 }

diff --git a/src/components/webapp.tsx b/src/components/webapp.tsx
@@ -54,7 +54,7 @@ export default function WebApp() {
         <App>
             <ServerConfigContext.Provider value={serverConfig}>
                 <ClientContext.Provider value={client}>
-                    <Server hostname={client.hostname} tabsRef={tabsRef}/>
+                    <Server hostname={client.hostname} tabsRef={tabsRef} toggleTabStrip={() => { }} />
                 </ClientContext.Provider>
             </ServerConfigContext.Provider>
         </App>

diff --git a/src/config.ts b/src/config.ts
@@ -126,6 +126,7 @@ interface Settings {
             size: [number, number],
             position: [number, number] | undefined,
         },
+        showTabStrip: boolean,
         openTabs: string[],
         lastTab: number,
         deleteAdded: boolean,
@@ -226,6 +227,7 @@ const DefaultSettings: Settings = {
             size: [1024, 800],
             position: undefined,
         },
+        showTabStrip: true,
         openTabs: [],
         lastTab: 0,
         deleteAdded: false,