move package options to a single page

src/renderer/src/components/PackageItem/index.jsx

@@ -6,8 +6,6 @@ import BarLoader from "react-spinners/BarLoader"
 
 import { MdFolder, MdDelete, MdPlayArrow, MdUpdate, MdOutlineMoreVert, MdSettings, MdInfoOutline } from "react-icons/md"
 
-import PackageOptions from "../PackageOptions"
-
 import "./index.less"
 
 const PackageItem = (props) => {
@@ -15,6 +13,7 @@ const PackageItem = (props) => {
 
     const isLoading = manifest.status === "installing" || manifest.status === "uninstalling" || manifest.status === "loading"
     const isInstalled = manifest.status === "installed"
+    const isInstalling = manifest.status === "installing"
     const isFailed = manifest.status === "error"
 
     const onClickUpdate = () => {
@@ -46,12 +45,15 @@ const PackageItem = (props) => {
     }
 
     const onClickOptions = () => {
-        app.modal.open(PackageOptions, {
-            manifest: manifest,
-            close: () => {
-                app.modal.close()
-            }
-        })
+        app.location.push(`/package/${manifest.id}`)
+    }
+
+    const onClickCancelInstall = () => {
+        ipc.exec("pkg:cancel_install", manifest.id)
+    }
+
+    const onClickRetryInstall = () => {
+        ipc.exec("pkg:retry_install", manifest.id)
     }
 
     function handleUpdate(event, data) {
@@ -148,6 +150,7 @@ const PackageItem = (props) => {
                 {
                     isFailed && <antd.Button
                         type="primary"
+                        onClick={onClickRetryInstall}
                     >
                         Retry
                     </antd.Button>
@@ -174,6 +177,15 @@ const PackageItem = (props) => {
                         />
                     </antd.Dropdown>
                 }
+
+                {
+                    isInstalling && <antd.Button
+                        type="primary"
+                        onClick={onClickCancelInstall}
+                    >
+                        Cancel
+                    </antd.Button>
+                }
             </div>
         </div>
 

src/renderer/src/pages/pkg/index.jsx

@@ -1,6 +1,7 @@
 import React from "react"
 import * as antd from "antd"
-import { Icon } from "components/Icons"
+import { Icons, Icon } from "components/Icons"
+import { useParams } from "react-router-dom"
 
 import "./index.less"
 
@@ -27,8 +28,6 @@ const PKGConfigs = (props) => {
         </p>
     }
 
-    console.log(defaultConfigs, configs)
-
     return Object.keys(defaultConfigs).map((key, index) => {
         const config = defaultConfigs[key]
         const storagedValue = configs[key]
@@ -173,6 +172,24 @@ const PackageOptions = (props) => {
         })
     }
 
+    function handleReinstall() {
+        antd.Modal.confirm({
+            title: "Reinstall",
+            content: "Are you sure you want to reinstall this package? Some data can be lost.",
+            onOk() {
+                const closeModal = props.onClose || props.close
+
+                if (closeModal) {
+                    closeModal()
+                } else {
+                    app.location.push("/")
+                }
+
+                ipc.exec("pkg:install", manifest)
+            },
+        })
+    }
+
     function canApplyChanges() {
         return Object.keys(changes).length > 0
     }
@@ -201,7 +218,7 @@ const PackageOptions = (props) => {
         }
 
         {
-            manifest.patches && <div className="package_options-field">
+            manifest.patches && manifest.patches.length > 0 && <div className="package_options-field">
                 <div className="package_options-field-header">
                     <p>Patches</p>
                 </div>
@@ -281,15 +298,65 @@ const PackageOptions = (props) => {
         </div>
 
         <div className="package_options-actions">
+            <antd.Button
+                onClick={handleReinstall}
+                icon={<Icons.MdReplay />}
+                type="default"
+            >
+                Reinstall
+            </antd.Button>
+
+            <antd.Button
+                disabled
+                icon={<Icons.MdCheck />}
+                type="default"
+            >
+                Verify
+            </antd.Button>
+
             <antd.Button
                 type="primary"
                 onClick={applyChanges}
                 disabled={!canApplyChanges()}
             >
-                Apply
+                Apply Changes
             </antd.Button>
         </div>
     </div>
 }
 
-export default PackageOptions
+const PackageOptionsLoader = (props) => {
+    const { pkg_id } = useParams()
+    const [manifest, setManifest] = React.useState(null)
+
+    React.useEffect(() => {
+        ipc.exec("pkg:get", pkg_id).then((manifest) => {
+            console.log(manifest)
+            setManifest(manifest)
+        })
+    }, [pkg_id])
+
+    if (!manifest) {
+        return <antd.Skeleton active />
+    }
+
+    return <div className="package_options-wrapper">
+        <div className="package_options-wrapper-header">
+            <div className="package_options-wrapper-header-back">
+                <Icons.MdChevronLeft
+                    onClick={() => {
+                        app.location.push("/")
+                    }}
+                />
+                Back
+            </div>
+        </div>
+
+        <PackageOptions
+            manifest={manifest}
+            {...props}
+        />
+    </div>
+}
+
+export default PackageOptionsLoader

src/renderer/src/pages/pkg/index.less

@@ -1,3 +1,37 @@
+.package_options-wrapper {
+    display: flex;
+    flex-direction: column;
+
+    gap: 10px;
+
+    .package_options-wrapper-header {
+        display: flex;
+        flex-direction: row;
+
+        gap: 20px;
+
+        .package_options-wrapper-header-back {
+            display: flex;
+            flex-direction: row;
+
+            align-items: center;
+
+            gap: 10px;
+
+            svg {
+                color: var(--primary-color);
+                border: 1px solid var(--primary-color);
+
+                border-radius: 100%;
+
+                cursor: pointer;
+
+                font-size: 1.5rem;
+            }
+        }
+    }
+}
+
 .package_options {
     display: flex;
     flex-direction: column;
@@ -10,6 +44,8 @@
         display: flex;
         flex-direction: column;
 
+        gap: 10px;
+
         .package_options-field-header {
             display: flex;
             flex-direction: row;
@@ -34,7 +70,10 @@
 
             padding: 10px;
 
-            gap: 5px;
+            gap: 15px;
+
+            background-color: var(--background-color-secondary);
+            border-radius: 12px;
         }
     }
 
@@ -52,6 +91,12 @@
 
         font-size: 0.6rem;
 
+        background-color: var(--background-color-secondary);
+
+        padding: 7px;
+
+        border-radius: 12px;
+
         .package_options-info-item {
             display: flex;
             flex-direction: column;
@@ -105,4 +150,22 @@
             }
         }
     }
+
+    .package_options-actions {
+        display: flex;
+        flex-direction: row;
+
+        gap: 10px;
+
+        // put the last button on the right
+        .ant-btn {
+            &:last-child {
+                margin-left: auto;
+            }
+        }
+
+        .ant-btn-default:not(.disabled) {
+            background-color: var(--background-color-secondary);
+        }
+    }
 }

src/renderer/src/router.jsx

@@ -6,6 +6,7 @@ import GlobalStateContext from "contexts/global"
 
 import PackagesMangerPage from "pages/manager"
 import SettingsPage from "pages/settings"
+import PackageOptionsPage from "pages/pkg"
 
 const NavigationController = (props) => {
     if (!app.location) {
@@ -80,5 +81,6 @@ export const PageRender = () => {
     return <Routes>
         <Route exact path="/" element={<PackagesMangerPage />} />
         <Route exact path="/settings" element={<SettingsPage />} />
+        <Route exact path="/package/:pkg_id" element={<PackageOptionsPage />} />
     </Routes>
 }