diff --git a/src/components/Generic/Initialization.tsx b/src/components/Generic/Initialization.tsx index 2af6cd9..8773362 100644 --- a/src/components/Generic/Initialization.tsx +++ b/src/components/Generic/Initialization.tsx @@ -1,8 +1,11 @@ -import { useEffect } from "react"; -import Paths from "../../lib/path"; import { createDir, exists } from "@tauri-apps/api/fs"; +import { useEffect } from "react"; +import { useSettings } from "../../contexts/SettingsContext"; +import Paths from "../../lib/path"; export const Initialization = () => { + const { settings } = useSettings(); + useEffect(() => { const initializePaths = async () => { try { @@ -17,8 +20,14 @@ export const Initialization = () => { if (!configDirectoryExists) await createDir(Paths.getPath("configDirectory")); }; + const fullscreen = async () => { + const { appWindow } = await import("@tauri-apps/api/window"); + await appWindow.setFullscreen(true); + }; + initializePaths().then(() => createDirectories()); - }); + if (settings.window.start_fullscreen) fullscreen(); + }, []); return null; }; diff --git a/src/components/HeaderBar/HeaderBar.tsx b/src/components/HeaderBar/HeaderBar.tsx index 041310f..1a37de1 100644 --- a/src/components/HeaderBar/HeaderBar.tsx +++ b/src/components/HeaderBar/HeaderBar.tsx @@ -51,13 +51,6 @@ export const HeaderBar = () => { flexDirection: "row", }} > - { - router.push("/testing"); - }} - > - - diff --git a/src/components/HeaderBar/Settings/Settings.tsx b/src/components/HeaderBar/Settings/Settings.tsx index 5639e1d..e951842 100644 --- a/src/components/HeaderBar/Settings/Settings.tsx +++ b/src/components/HeaderBar/Settings/Settings.tsx @@ -1,20 +1,23 @@ -import { SettingsOutlined } from "@mui/icons-material"; +import { BugReportOutlined, SettingsOutlined } from "@mui/icons-material"; import { LoadingButton, TabContext, TabList, TabPanel } from "@mui/lab"; -import { Box, Button, IconButton, Tab, useTheme } from "@mui/material"; +import { Box, Button, IconButton, Tab, Tooltip, useTheme } from "@mui/material"; import { useAtom } from "jotai"; +import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { useSettings } from "../../../contexts/SettingsContext"; -import { settingsAtom } from "../../../lib/store/jotai/settings"; +import { stagedSettingsAtom } from "../../../lib/store/jotai/settings"; import { FloatingDialog } from "../../Generic/FloatingDialog"; -import { SettingsTabDisplay } from "./SettingsTabDisplay"; +import { SettingsTabDisplay } from "./SettingsTabs/SettingsTabDisplay"; +import { SettingsTabWindow } from "./SettingsTabs/SettingsTabWindow"; export const Settings = () => { // contexts const theme = useTheme(); - const { settings, updateSettings, resetSettings } = useSettings(); + const { settings, updateSettings } = useSettings(); + const router = useRouter(); // atoms - const [stagedSettings, setStagedSettings] = useAtom(settingsAtom); + const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom); // states const [settingsOpenState, setSettingsOpenState] = useState(false); @@ -61,10 +64,23 @@ export const Settings = () => { return ( + { + router.push("/testing"); + }} + sx={{ + mr: 1, + }} + > + + + + } body={ { label="Display" value="display" /> + { > + + + @@ -151,12 +177,14 @@ export const Settings = () => { close={closeSettings} maximisedState={settingsMaximisedState} openButton={ - - - + + + + + } openState={settingsOpenState} setMaximisedState={setSettingsMaximisedState} diff --git a/src/components/HeaderBar/Settings/SettingsTabDisplay.tsx b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabDisplay.tsx similarity index 96% rename from src/components/HeaderBar/Settings/SettingsTabDisplay.tsx rename to src/components/HeaderBar/Settings/SettingsTabs/SettingsTabDisplay.tsx index aedbf7a..52b9a2c 100644 --- a/src/components/HeaderBar/Settings/SettingsTabDisplay.tsx +++ b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabDisplay.tsx @@ -1,9 +1,9 @@ import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material"; import { useAtom } from "jotai"; import { FC } from "react"; -import { settingsAtom } from "../../../lib/store/jotai/settings"; -import { SettingsCategoryTitle } from "./SettingsCategoryTitle"; -import { SettingsItem } from "./SettingsItem"; +import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings"; +import { SettingsCategoryTitle } from "../SettingsCategoryTitle"; +import { SettingsItem } from "../SettingsItem"; interface SettingsTabDisplayProps { sx?: any; @@ -11,7 +11,7 @@ interface SettingsTabDisplayProps { export const SettingsTabDisplay: FC = ({ sx }) => { // atoms - const [stagedSettings, setStagedSettings] = useAtom(settingsAtom); + const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom); const handleSettingsDisplayValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => { const newSettings = { @@ -26,7 +26,7 @@ export const SettingsTabDisplay: FC = ({ sx }) => { return ( - + diff --git a/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx new file mode 100644 index 0000000..e136272 --- /dev/null +++ b/src/components/HeaderBar/Settings/SettingsTabs/SettingsTabWindow.tsx @@ -0,0 +1,81 @@ +import { Box, Chip, InputAdornment, MenuItem, Slider, Switch, TextField, Typography } from "@mui/material"; +import { useAtom } from "jotai"; +import { FC } from "react"; +import { stagedSettingsAtom } from "../../../../lib/store/jotai/settings"; +import { SettingsCategoryTitle } from "../SettingsCategoryTitle"; +import { SettingsItem } from "../SettingsItem"; + +interface SettingsTabWindowProps { + sx?: any; +} + +export const SettingsTabWindow: FC = ({ sx }) => { + // atoms + const [stagedSettings, setStagedSettings] = useAtom(stagedSettingsAtom); + + const handleSettingsWindowValueChange = (settingKey: string, settingValue: boolean | number | string | number[]) => { + const newSettings = { + ...stagedSettings, + window: { + ...stagedSettings.window, + [settingKey]: settingValue, + }, + }; + setStagedSettings(newSettings); + }; + + return ( + + + + Fullscreen on startup + + } + settingsInput={ + { + handleSettingsWindowValueChange(e.target.name, e.target.checked); + }} + /> + } + /> + + + Minimize button + + } + settingsInput={ + { + handleSettingsWindowValueChange(e.target.name, e.target.checked); + }} + /> + } + /> + + Maximize button + + } + settingsInput={ + { + handleSettingsWindowValueChange(e.target.name, e.target.checked); + }} + /> + } + /> + + ); +}; diff --git a/src/contexts/LoadingContext.tsx b/src/contexts/LoadingContext.tsx deleted file mode 100644 index e69de29..0000000 diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx index 4f9ab20..a08d906 100644 --- a/src/contexts/ThemeContext.tsx +++ b/src/contexts/ThemeContext.tsx @@ -1,7 +1,8 @@ // TODO: add settings functionality, refer to whensapp project -import { FC, ReactNode } from "react"; import { createTheme, ThemeProvider } from "@mui/material/styles"; +import { FC, ReactNode } from "react"; +import { useSettings } from "./SettingsContext"; interface UserThemeProviderProps { children: ReactNode; @@ -62,31 +63,33 @@ export const userPalette = { }; export const UserThemeProvider: FC = ({ children }) => { + const { settings } = useSettings(); + // font family settings // TODO: figure out how to bundle fonts in tauri let fontFamily = "GoogleSans"; - // switch (settings.display.font_family) { - // case "sans_serif": - // fontFamily = "GoogleSans, sans-serif"; - // break; - // case "monospace": - // fontFamily = "JetBrainsMono, monospace"; - // break; - // case "comic_sans": - // fontFamily = "ComicSans, sans-serif"; - // break; - // case "system_font": - // fontFamily = "system-ui"; - // break; - // } + switch (settings.display.font_family) { + case "sans_serif": + fontFamily = "GoogleSans, sans-serif"; + break; + case "monospace": + fontFamily = "JetBrainsMono, monospace"; + break; + case "comic_sans": + fontFamily = "ComicSans, sans-serif"; + break; + case "system_font": + fontFamily = "system-ui"; + break; + } // font scaling settings - // const fontSize = (settings.display.font_scaling / 100) * 14; + const fontSize = (settings.display.font_scaling / 100) * 14; const userTheme = createTheme({ typography: { fontFamily: fontFamily, - // fontSize: fontSize, + fontSize: fontSize, }, palette: { mode: "dark", @@ -94,17 +97,17 @@ export const UserThemeProvider: FC = ({ children }) => { }, transitions: { duration: { - // shortest: settings.display.transition_duration, - // shorter: settings.display.transition_duration, - // short: settings.display.transition_duration, - // // most basic recommended timing - // standard: settings.display.transition_duration, - // // this is to be used in complex animations - // complex: settings.display.transition_duration, - // // recommended when something is entering screen - // enteringScreen: settings.display.transition_duration, - // // recommended when something is leaving screen - // leavingScreen: settings.display.transition_duration, + shortest: settings.display.transition_duration, + shorter: settings.display.transition_duration, + short: settings.display.transition_duration, + // most basic recommended timing + standard: settings.display.transition_duration, + // this is to be used in complex animations + complex: settings.display.transition_duration, + // recommended when something is entering screen + enteringScreen: settings.display.transition_duration, + // recommended when something is leaving screen + leavingScreen: settings.display.transition_duration, }, }, components: { diff --git a/src/lib/settings.ts b/src/lib/settings.ts index 0d14f8f..cec6f39 100644 --- a/src/lib/settings.ts +++ b/src/lib/settings.ts @@ -4,18 +4,19 @@ import { readTomlFile, writeTomlFile } from "./utils/toml"; export const defaultSettings = { display: { - dark_mode: true as boolean, accent_color: "#8ab4f8" as string, - transition_duration: 200 as number, - radius: 8 as number, - window_height: 60 as number, - window_width: 400 as number, + dark_mode: true as boolean, font_family: "monospace" as string, font_scaling: 100, + radius: 8 as number, + transition_duration: 200 as number, + window_height: 80 as number, + window_width: 400 as number, }, window: { - minimize_button: false as boolean, maximize_button: false as boolean, + minimize_button: false as boolean, + start_fullscreen: false as boolean, // TODO: this should be true on prod }, }; diff --git a/src/lib/store/jotai/settings.ts b/src/lib/store/jotai/settings.ts index 50fd9b1..a2d82b1 100644 --- a/src/lib/store/jotai/settings.ts +++ b/src/lib/store/jotai/settings.ts @@ -1,4 +1,4 @@ import { atom } from "jotai"; import { defaultSettings } from "../../settings"; -export const settingsAtom = atom(defaultSettings); +export const stagedSettingsAtom = atom(defaultSettings);