diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx new file mode 100644 index 00000000..14a5c476 --- /dev/null +++ b/src/components/native/Titlebar.tsx @@ -0,0 +1,72 @@ +import { X, Minus, Square } from "@styled-icons/boxicons-regular"; +import styled from "styled-components"; + +import wideSVG from "../../assets/wide.svg"; + +export const TITLEBAR_HEIGHT = "24px"; +export const USE_TITLEBAR = window.isNative && !window.native.getConfig().frame; + +const TitlebarBase = styled.div` + height: ${TITLEBAR_HEIGHT}; + + display: flex; + user-select: none; + align-items: center; + + .title { + flex-grow: 1; + -webkit-app-region: drag; + + font-size: 16px; + font-weight: 600; + margin-left: 4px; + + img { + width: 60px; + } + } + + .actions { + z-index: 100; + display: flex; + align-items: center; + + div { + width: 24px; + height: 24px; + + display: grid; + place-items: center; + transition: 0.2s ease background-color; + + &:hover { + background: var(--primary-background); + } + + &.error:hover { + background: var(--error); + } + } + } +`; + +export function Titlebar() { + return ( + + + + +
+
+ +
+
+ +
+
+ +
+
+ + ); +} diff --git a/src/globals.d.ts b/src/globals.d.ts index b6014534..b8e76fe9 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -7,12 +7,20 @@ type NativeConfig = { declare interface Window { isNative?: boolean; + nativeVersion: string; native: { + min(); + max(); close(); reload(); + relaunch(); getConfig(): NativeConfig; setFrame(frame: boolean); setBuild(build: Build); + + getAutoStart(): Promise; + enableAutoStart(): Promise; + disableAutoStart(): Promise; }; } diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 330015d3..4af34dbd 100644 --- a/src/pages/RevoltApp.tsx +++ b/src/pages/RevoltApp.tsx @@ -10,6 +10,7 @@ import Notifications from "../context/revoltjs/Notifications"; import StateMonitor from "../context/revoltjs/StateMonitor"; import SyncManager from "../context/revoltjs/SyncManager"; +import { TITLEBAR_HEIGHT, USE_TITLEBAR } from "../components/native/Titlebar"; import BottomNavigation from "../components/navigation/BottomNavigation"; import LeftSidebar from "../components/navigation/LeftSidebar"; import RightSidebar from "../components/navigation/RightSidebar"; @@ -42,83 +43,89 @@ export default function App() { path.includes("/settings"); return ( - } - } - rightPanel={ - !inSpecial && inChannel - ? { width: 240, component: } - : undefined - } - bottomNav={{ - component: , - showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left, - height: 50, - }} - docked={isTouchscreenDevice ? Docked.None : Docked.Left}> - - - - - - - - + <> + } + } + rightPanel={ + !inSpecial && inChannel + ? { width: 240, component: } + : undefined + } + bottomNav={{ + component: , + showIf: fixedBottomNav ? ShowIf.Always : ShowIf.Left, + height: 50, + }} + docked={isTouchscreenDevice ? Docked.None : Docked.Left}> + + + + + + + + - - + + - - - + + + - - + + - - - - - - - - - - - - - + + + + + + + + + + + + + + ); } diff --git a/src/pages/app.tsx b/src/pages/app.tsx index 57badde4..f66f6d16 100644 --- a/src/pages/app.tsx +++ b/src/pages/app.tsx @@ -8,6 +8,8 @@ import { CheckAuth } from "../context/revoltjs/CheckAuth"; import Masks from "../components/ui/Masks"; import Preloader from "../components/ui/Preloader"; +import { Titlebar, USE_TITLEBAR } from "../components/native/Titlebar"; + const Login = lazy(() => import("./login/Login")); const RevoltApp = lazy(() => import("./RevoltApp")); @@ -15,6 +17,7 @@ export function App() { return ( + {USE_TITLEBAR && } {/* // @ts-expect-error */} }> diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx index 5cf7efe9..c5911dd4 100644 --- a/src/pages/settings/Settings.tsx +++ b/src/pages/settings/Settings.tsx @@ -210,6 +210,9 @@ export default function Settings() { {GIT_BRANCH === "production" ? "Stable" : "Nightly"}{" "} {APP_VERSION} + {window.isNative && ( + Native: {window.nativeVersion} + )} API: {client.configuration?.revolt ?? "N/A"} diff --git a/src/pages/settings/panes/Native.tsx b/src/pages/settings/panes/Native.tsx index 52c472b0..2d3b3c56 100644 --- a/src/pages/settings/panes/Native.tsx +++ b/src/pages/settings/panes/Native.tsx @@ -1,5 +1,8 @@ +import { useEffect, useState } from "preact/hooks"; + import { SyncOptions } from "../../../redux/reducers/sync"; +import Button from "../../../components/ui/Button"; import Checkbox from "../../../components/ui/Checkbox"; interface Props { @@ -7,5 +10,126 @@ interface Props { } export function Native(props: Props) { - return
; + const [config, setConfig] = useState(window.native.getConfig()); + const [autoStart, setAutoStart] = useState(); + const fetchValue = () => window.native.getAutoStart().then(setAutoStart); + + const [hintReload, setHintReload] = useState(false); + const [hintRelaunch, setHintRelaunch] = useState(false); + const [confirmDev, setConfirmDev] = useState(false); + + useEffect(() => { + fetchValue(); + }, []); + + return ( +
+ { + if (v) { + await window.native.enableAutoStart(); + } else { + await window.native.disableAutoStart(); + } + + setAutoStart(v); + }} + description="Launch Revolt when you log into your computer."> + Start with computer + + { + window.native.setFrame(!frame); + setHintRelaunch(true); + setConfig({ + ...config, + frame: !frame, + }); + }} + description={<>Let Revolt use its own window frame.}> + Custom window frame + + { + const build = nightly ? "nightly" : "stable"; + window.native.setBuild(build); + setHintReload(true); + setConfig({ + ...config, + build, + }); + }} + description={<>Use the beta branch of Revolt.}> + Revolt Nightly + +

+ + +

+

Local Development Mode

+ {config.build === "dev" ? ( +

+ +

+ ) : ( + <> + + This will change the app to the 'dev' branch, + instead loading the app from a local server on + your machine. +
+ + Without a server running,{" "} + + the app will not load! + + + + }> + I understand there's no going back. + +

+ +

+ + )} +
+ ); }