From 38e925d2428a277368d898ec74d804d18bbad9ba Mon Sep 17 00:00:00 2001 From: Undyingwraith Date: Thu, 9 May 2024 17:06:44 +0200 Subject: [PATCH] Add Theme toggle --- .../core/src/components/atoms/ThemeToggle.tsx | 13 +++++++ .../components/molecules/ConnectionStatus.tsx | 16 ++++---- .../core/src/components/organisms/AppBar.tsx | 39 ++++++++++--------- .../core/src/components/pages/AppContext.tsx | 10 ++--- packages/desktop/src/preload/index.ts | 20 +++++----- 5 files changed, 58 insertions(+), 40 deletions(-) create mode 100644 packages/core/src/components/atoms/ThemeToggle.tsx diff --git a/packages/core/src/components/atoms/ThemeToggle.tsx b/packages/core/src/components/atoms/ThemeToggle.tsx new file mode 100644 index 0000000..6c67ac9 --- /dev/null +++ b/packages/core/src/components/atoms/ThemeToggle.tsx @@ -0,0 +1,13 @@ +import DarkModeIcon from '@mui/icons-material/DarkMode'; +import LightModeIcon from '@mui/icons-material/LightMode'; +import { IconButton } from '@mui/material'; +import { ReadonlySignal, useComputed } from '@preact/signals-react'; +import React from 'react'; + +export function ThemeToggle(props: { toggle: () => void; isDark: ReadonlySignal; }) { + const icon = useComputed(() => props.isDark.value ? : ); + + return + {icon} + ; +} diff --git a/packages/core/src/components/molecules/ConnectionStatus.tsx b/packages/core/src/components/molecules/ConnectionStatus.tsx index c32a74b..088fe60 100644 --- a/packages/core/src/components/molecules/ConnectionStatus.tsx +++ b/packages/core/src/components/molecules/ConnectionStatus.tsx @@ -3,24 +3,26 @@ import { useComputed, useSignal, useSignalEffect } from "@preact/signals-react"; import { Button } from "@mui/material"; import { IIpfsService } from "../../service"; -export function ConnectionStatus(props: { ipfs: IIpfsService }) { - const peers = useSignal([]) +export function ConnectionStatus(props: { ipfs: IIpfsService; }) { + const peers = useSignal([]); useSignalEffect(() => { - const i = setInterval(() => { + const updatePeers = () => { props.ipfs.peers() .then(r => { peers.value = r; }) .catch(console.error); - }, 5000); + }; + const i = setInterval(updatePeers, 5000); + updatePeers(); return () => { clearInterval(i); - } + }; }); return useComputed(() => ( - + )); -} \ No newline at end of file +} diff --git a/packages/core/src/components/organisms/AppBar.tsx b/packages/core/src/components/organisms/AppBar.tsx index 94c2806..9d45c1f 100644 --- a/packages/core/src/components/organisms/AppBar.tsx +++ b/packages/core/src/components/organisms/AppBar.tsx @@ -5,31 +5,34 @@ import { LanguageSelector } from "../molecules/LanguageSelector"; import { IIpfsService, IProfile } from "../../service"; import { Signal, useComputed } from '@preact/signals-react'; import { useTranslation } from "react-i18next"; +import { ThemeToggle } from '../atoms/ThemeToggle'; export function AppBar(props: { shutdownProfile: () => void; ipfs: Signal; profile: Signal; + darkMode: Signal; }) { - const { shutdownProfile } = props; + const { shutdownProfile, ipfs, profile, darkMode } = props; const [_t] = useTranslation(); - return useComputed(() => { - const ipfs = props.ipfs.value; - const profile = props.profile.value; + const status = useComputed(() => ipfs.value != undefined && ()); + const logout = useComputed(() => ipfs.value != undefined && (<> + + {profile.value?.name} + )); - return ( - - - {ipfs != undefined && (<> - - {profile?.name} - )} - - {ipfs != undefined && } - - - - ); - }); + return ( + + + {logout} + + {status} + { + darkMode.value = !darkMode.value; + }} /> + + + + ); } diff --git a/packages/core/src/components/pages/AppContext.tsx b/packages/core/src/components/pages/AppContext.tsx index bf43a2a..2b2c7a7 100644 --- a/packages/core/src/components/pages/AppContext.tsx +++ b/packages/core/src/components/pages/AppContext.tsx @@ -45,9 +45,9 @@ export function AppContextProvider(props: PropsWithChildren) { const profileManager = useSignal(undefined); const node = useSignal(undefined); const state = useSignal(LoadState.Idle); + const darkMode = useSignal(true); - const accentColor = useComputed(() => '#0b3a53'); - const darkMode = useComputed(() => true); + const accentColor = useComputed(() => '#6200EE'); const theme = useComputed(() => darkMode.value ? createDarkTheme(accentColor.value) : createLightTheme(accentColor.value)); async function start(name: string) { @@ -131,15 +131,15 @@ export function AppContextProvider(props: PropsWithChildren) { const profile = useComputed(() => profileManager.value?.profile); - return ( + return useComputed(() => ( - + {content} - ); + )); } export function useApp() { diff --git a/packages/desktop/src/preload/index.ts b/packages/desktop/src/preload/index.ts index 526a783..c2c05e1 100644 --- a/packages/desktop/src/preload/index.ts +++ b/packages/desktop/src/preload/index.ts @@ -21,7 +21,7 @@ import { IConfigurationService, INodeService, IInternalProfile, IProfile, IIpfsS import express from 'express'; function getProfileFolder(name: string): string { - return `./profiles/${name}` + return `./profiles/${name}`; } const nodeService: INodeService = { @@ -67,11 +67,11 @@ const nodeService: INodeService = { const app = express(); app.get('/:cid', async (request, response) => { for await (const buf of fs.cat(CID.parse(request.params.cid))) { - response.write(buf) + response.write(buf); } - response.end() + response.end(); }); - await new Promise((resolve) => app.listen(8090, () => resolve())); + await new Promise((resolve) => app.listen(8090, '127.0.0.1', () => resolve())); return ({ async ls(cid: string) { @@ -104,7 +104,7 @@ const nodeService: INodeService = { const port = connString.substring(connString.lastIndexOf('/') + 1); return { async ls(cid: string) { - const files: IFileInfo[] = [] + const files: IFileInfo[] = []; for await (const file of node.ls(cid)) { files.push({ type: file.type, @@ -123,14 +123,14 @@ const nodeService: INodeService = { async peers() { return (await node.swarm.peers()).map(p => p.addr.toString()); } - } + }; } }; const configService: IConfigurationService = { getProfiles(): string[] { try { - const profiles = fs.readdirSync('./profiles') + const profiles = fs.readdirSync('./profiles'); return profiles; } catch (_) { return []; @@ -154,14 +154,14 @@ if (process.contextIsolated) { contextBridge.exposeInMainWorld('configService', configService); console.log("exposeInMainWorld"); } catch (error) { - console.error(error) + console.error(error); } } else { console.log("window"); // @ts-ignore (define in dts) //window.electron = electronAPI // @ts-ignore (define in dts) - window.configService = configService + window.configService = configService; // @ts-ignore (define in dts) - window.nodeService = nodeService + window.nodeService = nodeService; }