Add Theme toggle

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<boolean>; }) {
+	const icon = useComputed(() => props.isDark.value ? <LightModeIcon /> : <DarkModeIcon />);
+
+	return <IconButton onClick={props.toggle}>
+		{icon}
+	</IconButton>;
+}

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<string[]>([])
+export function ConnectionStatus(props: { ipfs: IIpfsService; }) {
+	const peers = useSignal<string[]>([]);
 
 	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(() => (
-		<Button>{peers.value.length}</Button>
+		<Button onClick={() => console.log(peers.value)}>{peers.value.length}</Button>
 	));
-}
+}

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<IIpfsService | undefined>;
 	profile: Signal<IProfile | undefined>;
+	darkMode: Signal<boolean>;
 }) {
-	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 && (<ConnectionStatus ipfs={ipfs.value} />));
+	const logout = useComputed(() => ipfs.value != undefined && (<>
+		<Button onClick={shutdownProfile}>{_t('Logout')}</Button>
+		{profile.value?.name}
+	</>));
 
-		return (
-			<Box sx={{ backgroundColor: 'primary' }}>
-				<Toolbar>
-					{ipfs != undefined && (<>
-						<Button onClick={shutdownProfile}>{_t('Logout')}</Button>
-						{profile?.name}
-					</>)}
-					<Box sx={{ flexGrow: 1 }} />
-					{ipfs != undefined && <ConnectionStatus ipfs={ipfs} />}
-					<LanguageSelector />
-				</Toolbar>
-			</Box>
-		);
-	});
+	return (
+		<Box sx={{ backgroundColor: 'primary' }}>
+			<Toolbar>
+				{logout}
+				<Box sx={{ flexGrow: 1 }} />
+				{status}
+				<ThemeToggle isDark={darkMode} toggle={() => {
+					darkMode.value = !darkMode.value;
+				}} />
+				<LanguageSelector />
+			</Toolbar>
+		</Box>
+	);
 }

packages/core/src/components/pages/AppContext.tsx

@@ -45,9 +45,9 @@ export function AppContextProvider(props: PropsWithChildren<IAppInit>) {
 	const profileManager = useSignal<IProfileManager | undefined>(undefined);
 	const node = useSignal<IIpfsService | undefined>(undefined);
 	const state = useSignal<LoadState>(LoadState.Idle);
+	const darkMode = useSignal<boolean>(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<IAppInit>) {
 
 	const profile = useComputed(() => profileManager.value?.profile);
 
-	return (
+	return useComputed(() => (
 		<ThemeProvider theme={theme.value}>
 			<CssBaseline />
 			<Stack sx={{ height: '100vh', overflow: 'hidden' }}>
-				<AppBar shutdownProfile={stop} ipfs={node} profile={profile} />
+				<AppBar shutdownProfile={stop} ipfs={node} profile={profile} darkMode={darkMode} />
 				{content}
 			</Stack>
 		</ThemeProvider>
-	);
+	));
 }
 
 export function useApp() {

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<void>((resolve) => app.listen(8090, () => resolve()));
+		await new Promise<void>((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;
 }