diff --git a/.github/workflows/build-validation.yml b/.github/workflows/build-validation.yml deleted file mode 100644 index c9ae82a..0000000 --- a/.github/workflows/build-validation.yml +++ /dev/null @@ -1,32 +0,0 @@ -name: Test Build Frontend - -on: - push: - branches: - - "*" - -jobs: - build: - runs-on: ubuntu-latest - container: - image: oven/bun - - steps: - - name: Checkout Repository - uses: actions/checkout@v4 - - - name: Install Rustup and Cargo - run: | - apt update - apt install curl -y - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y - . "/root/.cargo/env" - - - name: bun install - run: | - bun install - - - name: bun run tauri build - run: | - NO_STRIP=true bun run tauri build - echo "winning ranks" diff --git a/.prettierrc b/.prettierrc index 794bbbd..5189c3a 100644 --- a/.prettierrc +++ b/.prettierrc @@ -5,7 +5,7 @@ "endOfLine": "lf", "htmlWhitespaceSensitivity": "css", "jsxBracketSameLine": false, - "jsxSingleQuote": true, + "jsxSingleQuote": false, "printWidth": 120, "proseWrap": "preserve", "quoteProps": "consistent", diff --git a/bun.lockb b/bun.lockb index 3b9fabc..f4ba319 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 52feba7..6c2f6f7 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@emotion/server": "^11.11.0", "@emotion/styled": "^11.13.0", "@mui/icons-material": "^5.16.6", + "@mui/lab": "^5.0.0-alpha.173", "@mui/material": "^5.16.6", "@tauri-apps/api": "^1.6.0", "jotai": "^2.9.1", diff --git a/src/components/Generic/FloatingDialog.tsx b/src/components/Generic/FloatingDialog.tsx index e0bf96a..4274dad 100644 --- a/src/components/Generic/FloatingDialog.tsx +++ b/src/components/Generic/FloatingDialog.tsx @@ -12,9 +12,8 @@ interface FloatingDialog { openButton: ReactNode; openState: boolean; setMaximisedState: (state: boolean) => void; - sx?: any; title: string; - toggleOpen: () => void; + sx?: any; } export const FloatingDialog: FC = ({ @@ -26,9 +25,8 @@ export const FloatingDialog: FC = ({ openButton, openState, setMaximisedState, - sx, title, - toggleOpen, + sx, }) => { const { settings } = useSettings(); @@ -36,18 +34,17 @@ export const FloatingDialog: FC = ({ <> {openButton} - + = ({ transform: "translate(-50%, -50%)", transition: "all ease-in-out", transitionDuration: settings.display.transition_duration + "ms", - width: maximisedState - ? "100vw" - : settings.display.window_width + "px", + width: maximisedState ? "100vw" : settings.display.window_width + "px", }} > { const router = useRouter(); @@ -46,8 +47,9 @@ export const HeaderBar = () => { router.push("/testing"); }} > - + + diff --git a/src/components/HeaderBar/Settings/Settings.tsx b/src/components/HeaderBar/Settings/Settings.tsx index d6c0f0e..088235c 100644 --- a/src/components/HeaderBar/Settings/Settings.tsx +++ b/src/components/HeaderBar/Settings/Settings.tsx @@ -1,20 +1,119 @@ -// import { IconButton, Typography, useTheme } from "@mui/material"; -// import { FloatingDialog } from "../../Generic/FloatingDialog"; -// import { SettingsCell, SettingsOutlined } from "@mui/icons-material"; +import { SettingsOutlined } from "@mui/icons-material"; +import { LoadingButton } from "@mui/lab"; +import { Box, Button, IconButton, Typography, useTheme } from "@mui/material"; +import { useAtom } from "jotai"; +import { useEffect, useState } from "react"; +import { useSettings } from "../../../contexts/SettingsContext"; +import { settingsAtom } from "../../../lib/store/jotai/settings"; +import { FloatingDialog } from "../../Generic/FloatingDialog"; -// export const Settings = () => { -// // contexts -// const theme = useTheme(); -// const { settings, updateSettingsLocal } = useSettings(); +export const Settings = () => { + // contexts + const theme = useTheme(); + const { settings, updateSettings, resetSettings } = useSettings(); -// return ( -// Settings} -// openButton={ -// -// -// -// } -// /> -// ); -// }; + // atoms + const [stagedSettings, setStagedSettings] = useAtom(settingsAtom); + + // states + const [settingsOpenState, setSettingsOpenState] = useState(false); + const [settingsMaximisedState, setSettingsMaximisedState] = useState(false); + const [subTabValue, setSubTabValue] = useState("display"); + const [applyLoading, setApplyLoading] = useState(false); + const [saveLoading, setSaveLoading] = useState(false); + + const toggleSettings = () => { + // reset the settings maximised state + setSettingsMaximisedState(false); + setSettingsOpenState((prevState) => !prevState); + }; + + const closeSettings = () => { + setSettingsOpenState(false); + }; + + // logic for switching tabs + const subTabChangeEvent = (newTabValue: string) => { + setSubTabValue(newTabValue); + }; + + const applyClickEvent = () => { + setApplyLoading(true); + + updateSettings(stagedSettings); + + setApplyLoading(false); + }; + + const saveClickEvent = () => { + setSaveLoading(true); + + updateSettings(stagedSettings); + + setSaveLoading(false); + closeSettings(); + }; + + useEffect(() => { + setStagedSettings(settings); + }, [setStagedSettings, settings]); + + return ( + Settings} + bottomBar={ + + + + + Apply + + + Save + + + } + close={closeSettings} + maximisedState={settingsMaximisedState} + openButton={ + + + + } + openState={settingsOpenState} + setMaximisedState={setSettingsMaximisedState} + title="Settings" + /> + ); +}; diff --git a/src/components/HeaderBar/WindowButtons.tsx b/src/components/HeaderBar/WindowButtons.tsx index 835f8d1..a79f08a 100644 --- a/src/components/HeaderBar/WindowButtons.tsx +++ b/src/components/HeaderBar/WindowButtons.tsx @@ -1,11 +1,16 @@ import { Close, CloseFullscreen, Minimize } from "@mui/icons-material"; -import { Box, Button, ButtonGroup, Stack, useTheme } from "@mui/material"; +import { Box, Button, ButtonGroup, IconButton, Stack, useTheme } from "@mui/material"; import { WebviewWindow } from "@tauri-apps/api/window"; import { useEffect, useState } from "react"; +import { useSettings } from "../../contexts/SettingsContext"; +import { exit } from "@tauri-apps/api/process"; export const WindowButtons = () => { + // contexts const userTheme = useTheme(); + const { settings } = useSettings(); + // states const [appWindow, setAppWindow] = useState(); // explanation: @@ -27,8 +32,8 @@ export const WindowButtons = () => { appWindow?.toggleMaximize(); }; - const close = () => { - appWindow?.close(); + const close = async () => { + await exit(1); }; useEffect(() => { @@ -37,10 +42,14 @@ export const WindowButtons = () => { return ( - - - - - - + + )} + + + ); diff --git a/src/lib/settings.ts b/src/lib/settings.ts index 271d618..d286767 100644 --- a/src/lib/settings.ts +++ b/src/lib/settings.ts @@ -12,6 +12,10 @@ export const defaultSettings = { font_family: "monospace" as string, font_scaling: 100, }, + window: { + minimize_button: false as boolean, + maximize_button: false as boolean, + }, }; export type SettingsType = typeof defaultSettings; diff --git a/src/lib/store/jotai/settings.ts b/src/lib/store/jotai/settings.ts new file mode 100644 index 0000000..50fd9b1 --- /dev/null +++ b/src/lib/store/jotai/settings.ts @@ -0,0 +1,4 @@ +import { atom } from "jotai"; +import { defaultSettings } from "../../settings"; + +export const settingsAtom = atom(defaultSettings); diff --git a/src/pages/testing.tsx b/src/pages/testing.tsx index f8f9c24..298a0c6 100644 --- a/src/pages/testing.tsx +++ b/src/pages/testing.tsx @@ -29,24 +29,7 @@ export default function Testing() { > reset settings - +