Add settings button to desktop

desktop/src/configure.tsx

@@ -53,10 +53,14 @@ const FormInput: React.FC<{
 }
 
 export const ConfigModal: React.FC<{
-    handleOk: (config: RqbitDesktopConfig) => void,
+    show: boolean,
+    handleStartReconfigure: () => void,
+    handleConfigured: (config: RqbitDesktopConfig) => void,
+    handleCancel?: () => void,
     initialConfig: RqbitDesktopConfig,
-}> = ({ handleOk, initialConfig }) => {
+}> = ({ show, handleStartReconfigure, handleConfigured, handleCancel, initialConfig }) => {
-    const [config, setConfig] = useState(initialConfig);
+    let [config, setConfig] = useState<RqbitDesktopConfig>(initialConfig);
+
     const [error, setError] = useState<any | null>(null);
 
     const handleInputChange = (e: any) => {
@@ -102,8 +106,9 @@ export const ConfigModal: React.FC<{
 
     const handleOkClick = () => {
         setError(null);
+        handleStartReconfigure();
         invokeAPI<{}>("config_change", { config }).then(
-            () => handleOk(config),
+            () => handleConfigured(config),
             (e: ErrorDetails) => {
                 setError({
                     text: "Error saving configuration",
@@ -114,14 +119,14 @@ export const ConfigModal: React.FC<{
     };
 
     return (
-        <Modal show size='xl'>
+        <Modal show={show} size='xl' onHide={handleCancel}>
             <Modal.Header closeButton>
                 <Modal.Title>Configure Rqbit desktop</Modal.Title>
             </Modal.Header>
             <Modal.Body>
                 <ErrorComponent error={error}></ErrorComponent>
                 <Tabs
-                    defaultActiveKey="main"
+                    defaultActiveKey="home"
                     id="rqbit-config"
                     className="mb-3">
 
@@ -282,6 +287,12 @@ export const ConfigModal: React.FC<{
                 </Tabs>
             </Modal.Body>
             <Modal.Footer>
+
+                {!!handleCancel &&
+                    <Button variant="secondary" onClick={handleCancel}>
+                        Cancel
+                    </Button>
+                }
                 <Button variant="secondary" onClick={() => setConfig(initialConfig)}>
                     Reset to defaults
                 </Button>

desktop/src/main.tsx

@@ -4,7 +4,7 @@ import { APIContext, RqbitWebUI } from "./rqbit-webui-src/rqbit-web";
 import { API } from "./api";
 import { invoke } from "@tauri-apps/api";
 import { RqbitDesktopConfig } from "./configuration";
-import { ConfigModal } from "./configure";
+import { RqbitDesktop } from "./rqbit-desktop";
 
 async function get_version(): Promise<string> {
     return invoke<string>("get_version");
@@ -14,18 +14,6 @@ async function get_default_config(): Promise<RqbitDesktopConfig> {
     return invoke<RqbitDesktopConfig>("config_default");
 }
 
-const RqbitDesktop: React.FC<{
-    version: string,
-    defaultConfig: RqbitDesktopConfig,
-}> = ({ version, defaultConfig }) => {
-    let [configured, setConfigured] = useState<boolean>(false);
-
-    if (configured) {
-        return <RqbitWebUI title={`Rqbit Desktop v${version}`}></RqbitWebUI>
-    }
-    return <ConfigModal handleOk={() => setConfigured(true)} initialConfig={defaultConfig}></ConfigModal>;
-}
-
 Promise.all([get_version(), get_default_config()]).then(([version, config]) => {
     ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         <StrictMode>
@@ -34,7 +22,4 @@ Promise.all([get_version(), get_default_config()]).then(([version, config]) => {
             </APIContext.Provider>
         </StrictMode>
     );
-})
+})
-
-
-

desktop/src/rqbit-desktop.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { RqbitWebUI } from "./rqbit-webui-src/rqbit-web";
+import { RqbitDesktopConfig } from "./configuration";
+import { ConfigModal } from "./configure";
+
+
+export const RqbitDesktop: React.FC<{
+    version: string,
+    defaultConfig: RqbitDesktopConfig,
+}> = ({ version, defaultConfig }) => {
+    let [configured, setConfigured] = useState<boolean>(false);
+    let [config, setConfig] = useState<RqbitDesktopConfig>(defaultConfig);
+    let [configurationOpened, setConfigurationOpened] = useState<boolean>(false);
+
+    return <>
+        {configured && <RqbitWebUI title={`Rqbit Desktop v${version}`}></RqbitWebUI>}
+        {configured && <a
+            className="bi bi-sliders2 position-absolute top-0 start-0 p-3 text-primary"
+            onClick={(e) => {
+                e.stopPropagation();
+                setConfigurationOpened(true);
+            }}
+            href="#"
+            aria-label="Settings" />}
+        <ConfigModal
+            show={!configured || configurationOpened}
+            handleStartReconfigure={() => {
+                setConfigured(false);
+            }}
+            handleCancel={() => {
+                setConfigurationOpened(false);
+            }}
+            handleConfigured={(config) => {
+                setConfig(config);
+                setConfigured(true);
+            }}
+            initialConfig={config} />
+    </>
+}