+ {
+ ctx.authorizedServices?.drive &&
+ }
+
{
ctx.updateAvailable &&
}
+ icon={
}
onClick={app.applyUpdate}
>
Update now
@@ -28,12 +36,13 @@ const Header = (props) => {
}
+ icon={
}
+ onClick={() => app.location.push("/settings")}
/>
}
+ icon={
}
onClick={() => ipc.send("open-runtime-path")}
/>
diff --git a/src/renderer/src/layout/index.jsx b/src/renderer/src/layout/index.jsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/renderer/src/pages/settings/index.jsx b/src/renderer/src/pages/settings/index.jsx
index c559f3e..78023d3 100644
--- a/src/renderer/src/pages/settings/index.jsx
+++ b/src/renderer/src/pages/settings/index.jsx
@@ -1,15 +1,178 @@
import React from "react"
+import * as antd from "antd"
+import { Icons, Icon } from "components/Icons"
+
+import "./index.less"
const settingsList = [
{
id: "drive_auth",
name: "Google Drive Authorize",
description: "Authorize your Google Drive account to be used for bundles installation.",
+ icon: "SiGoogledrive",
+ type: "button",
+ value: async () => {
+ return api.settings.get("drive_auth")
+ },
+ render: (props) => {
+ return
{
+ if (!props.value) {
+ message.info("Authorizing...")
+ return ipc.exec("drive:authorize")
+ }
+
+ return api.settings.delete("drive_auth")
+ }}
+ >
+ {
+ props.value ? "Deauthorize" : "Authorize"
+ }
+
+ }
+ },
+ {
+ id: "check_update",
+ name: "Check for updates",
+ description: "Check for updates to the app.",
+ icon: "MdUpdate",
+ type: "button",
+ props: {
+ children: "Check",
+ onClick: () => {
+ message.info("Checking for updates...")
+ app.checkUpdates()
+ }
+ }
}
]
-const Settings = () => {
+const SettingTypeToComponent = {
+ switch: antd.Switch,
+ button: antd.Button,
+}
+const SettingItem = (props) => {
+ const {
+ id,
+ name,
+ description,
+ type,
+ icon,
+ props: _props,
+ render,
+ } = props.setting
+
+ const [loading, setLoading] = React.useState(false)
+ const [value, setValue] = React.useState(null)
+
+ React.useEffect(() => {
+ if (typeof props.setting.value === "function") {
+ setLoading(true)
+
+ props.setting.value().then((value) => {
+ setValue(value)
+ setLoading(false)
+ })
+ } else {
+ setLoading(false)
+ }
+ }, [props.setting.value])
+
+ let componentProps = {
+ value: value,
+ ..._props,
+ }
+
+ async function handleChange(value) {
+ console.log(`Setting [${id}] set to >`, value)
+ setValue(value)
+ api.settings.set(id, value)
+ }
+
+ switch (type) {
+ case "switch": {
+ componentProps.defaultChecked = defaultProps.defaultChecked ?? false
+ componentProps.onChange = (e) => {
+ handleChange(e)
+ }
+ break
+ }
+ }
+
+ const Component = SettingTypeToComponent[type.toLowerCase()]
+ const Render = () => {
+ if (typeof render === "function") {
+ return render(componentProps)
+ }
+
+ return React.createElement(Component, componentProps)
+ }
+
+ return
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+ {
+ loading &&
+ }
+ {
+ !loading &&
+ }
+
+
+}
+
+const Settings = () => {
+ return
+
+
+ {
+ app.location.push("/")
+ }}
+ />
+ Back
+
+
+
+
+
Settings
+
+
+
+
+ {
+ settingsList.map((setting, index) => {
+ return
+ })
+ }
+
+
+
+
+
+
}
export default Settings
\ No newline at end of file
diff --git a/src/renderer/src/pages/settings/index.less b/src/renderer/src/pages/settings/index.less
new file mode 100644
index 0000000..2d1f8a1
--- /dev/null
+++ b/src/renderer/src/pages/settings/index.less
@@ -0,0 +1,100 @@
+@import "style/vars.less";
+
+.app_settings {
+ display: flex;
+ flex-direction: column;
+
+ gap: 10px;
+
+ .app_settings-header {
+ display: flex;
+ flex-direction: column;
+
+ gap: 20px;
+
+ .app_settings-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;
+ }
+ }
+
+ .app_settings-header-title {
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+
+ gap: 10px;
+
+ font-size: 1.5rem;
+ }
+ }
+
+ .app_settings-list {
+ display: flex;
+ flex-direction: column;
+
+ background-color: var(--background-color-secondary);
+
+ border-radius: 12px;
+
+ .app_settings-list-item {
+ display: flex;
+ flex-direction: row;
+
+ align-items: center;
+
+ &:nth-child(odd) {
+ background-color: mix(#fff, @var-background-color-secondary, 5%);
+ }
+
+ border-radius: 12px;
+
+ padding: 10px;
+
+ .app_settings-list-item-info {
+ display: flex;
+ flex-direction: column;
+
+ gap: 10px;
+
+ width: 100%;
+
+ .app_settings-list-item-label {
+ display: flex;
+ flex-direction: row;
+
+ gap: 6px;
+ }
+
+ .app_settings-list-item-description {
+ display: inline-flex;
+ flex-direction: row;
+
+ font-size: 0.7rem;
+ }
+ }
+
+ .app_settings-list-item-component {
+ display: flex;
+ flex-direction: column;
+
+ justify-content: flex-end;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/renderer/src/router.jsx b/src/renderer/src/router.jsx
index 00e82a9..0f9b141 100644
--- a/src/renderer/src/router.jsx
+++ b/src/renderer/src/router.jsx
@@ -1,9 +1,63 @@
import React from "react"
import BarLoader from "react-spinners/BarLoader"
+import { BrowserRouter, Route, Routes, useNavigate } from "react-router-dom"
import GlobalStateContext from "contexts/global"
-import InstallationsManager from "pages/manager"
+import PackagesMangerPage from "pages/manager"
+import SettingsPage from "pages/settings"
+
+const NavigationController = (props) => {
+ if (!app.location) {
+ app.location = Object()
+ }
+
+ const navigate = useNavigate()
+
+ async function setLocation(to, state = {}) {
+ // clean double slashes
+ to = to.replace(/\/{2,}/g, "/")
+
+ // if state is a number, it's a delay
+ if (typeof state !== "object") {
+ state = {}
+ }
+
+ app.location.last = window.location
+
+ return navigate(to, {
+ state
+ })
+ }
+
+ async function backLocation() {
+ app.location.last = window.location
+
+ if (transitionDuration >= 100) {
+ await new Promise((resolve) => setTimeout(resolve, transitionDuration))
+ }
+
+ return window.history.back()
+ }
+
+ React.useEffect(() => {
+ app.location = {
+ last: window.location,
+ push: setLocation,
+ back: backLocation,
+ }
+ }, [])
+
+ return props.children
+}
+
+export const InternalRouter = (props) => {
+ return
+
+ {props.children}
+
+
+}
export const PageRender = () => {
const globalState = React.useContext(GlobalStateContext)
@@ -23,5 +77,8 @@ export const PageRender = () => {
}
\ No newline at end of file
diff --git a/src/renderer/src/style/index.less b/src/renderer/src/style/index.less
index 7bac6b2..5f5b0cc 100644
--- a/src/renderer/src/style/index.less
+++ b/src/renderer/src/style/index.less
@@ -1,11 +1,7 @@
@import "style/reset.css";
@import "style/fix.less";
-@var-text-color: #fff;
-@var-background-color-primary: #424549;
-@var-background-color-secondary: #1e2124;
-@var-primary-color: #36d7b7; //#F3B61F;
-@var-border-color: #a1a2a2;
+@import "style/vars.less";
:root {
--background-color-primary: @var-background-color-primary;
diff --git a/src/renderer/src/style/vars.less b/src/renderer/src/style/vars.less
new file mode 100644
index 0000000..7392455
--- /dev/null
+++ b/src/renderer/src/style/vars.less
@@ -0,0 +1,5 @@
+@var-text-color: #fff;
+@var-background-color-primary: #424549;
+@var-background-color-secondary: #1e2124;
+@var-primary-color: #36d7b7; //#F3B61F;
+@var-border-color: #a1a2a2;
\ No newline at end of file