pull webapp upstream at b2a7b1d0 (15.05.2023)

webapp/README.md

@@ -7,7 +7,7 @@ The EteSync Web App - Use EteSync from the browser!
 
 
 ![GitHub tag](https://img.shields.io/github/tag/etesync/etesync-web.svg)
-[![Chat on freenode](https://img.shields.io/badge/irc.freenode.net-%23EteSync-blue.svg)](https://webchat.freenode.net/?channels=#etesync)
+[![Chat with us](https://img.shields.io/badge/chat-IRC%20|%20Matrix%20|%20Web-blue.svg)](https://www.etebase.com/community-chat/)
 
 For notes, please refer to [the EteSync Notes](https://github.com/etesync/etesync-notes/) repository.
 

webapp/src/App.tsx

@@ -146,10 +146,35 @@ export default function App() {
   const [errorsDialog, setErrorsDialog] = React.useState(false);
   const dispatch = useDispatch();
   const etebase = useCredentials();
-  const darkMode = useSelector((state: store.StoreState) => state.settings.darkMode);
+  const darkModeUserSelection = useSelector((state: store.StoreState) => state.settings.darkModeUserSelection);
   const fetchCount = useSelector((state: store.StoreState) => state.fetchCount);
   const errors = useSelector((state: store.StoreState) => state.errors);
 
+  function shouldBeDark(userSelection: string, browserPreference: boolean): boolean {
+    if (userSelection === "auto") {
+      return browserPreference;
+    } else if (userSelection === "dark") {
+      return true;
+    }
+    return false;
+  }
+
+  const [darkModeBrowserPreference, setDarkModeBrowserPreference] = React.useState(Boolean(window.matchMedia?.("(prefers-color-scheme: dark)").matches));
+  const handleBrowserDarkModePreferenceChange = React.useCallback((e) => {
+    setDarkModeBrowserPreference(e.matches);
+  }, []);
+  React.useEffect(() => {
+    window.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", handleBrowserDarkModePreferenceChange);
+    return () => {
+      window.matchMedia?.("(prefers-color-scheme: dark)").removeEventListener("change", handleBrowserDarkModePreferenceChange);
+    };
+  }, [handleBrowserDarkModePreferenceChange]);
+
+  const [darkMode, setDarkMode] = React.useState(() => shouldBeDark(darkModeUserSelection, darkModeBrowserPreference));
+  React.useEffect(() => {
+    setDarkMode(shouldBeDark(darkModeUserSelection, darkModeBrowserPreference));
+  }, [darkModeUserSelection, darkModeBrowserPreference]);
+
   async function refresh() {
     const syncManager = SyncManager.getManager(etebase!);
     const sync = syncManager.sync();

webapp/src/Calendars/Event.tsx

@@ -35,7 +35,7 @@ class Event extends React.PureComponent {
           <div><u>{this.props.item.location}</u></div>
         </PimItemHeader>
         <div style={style.content}>
-          <p style={{ wordWrap: "break-word" }}>{this.props.item.description}</p>
+          <p style={{ wordWrap: "break-word", whiteSpace: "pre-wrap" }}>{this.props.item.description}</p>
           {(this.props.item.attendees.length > 0) && (
             <div>Attendees: {this.props.item.attendees.map((x) => (x.getFirstValue())).join(", ")}</div>)}
         </div>

webapp/src/Settings/index.tsx

@@ -8,9 +8,6 @@ import { useSelector, useDispatch } from "react-redux";
 import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import FormControl from "@material-ui/core/FormControl";
-import FormControlLabel from "@material-ui/core/FormControlLabel";
-import FormGroup from "@material-ui/core/FormGroup";
-import Switch from "@material-ui/core/Switch";
 import InputLabel from "@material-ui/core/InputLabel";
 
 import { StoreState } from "../store";
@@ -173,8 +170,6 @@ export default React.memo(function Settings() {
   const dispatch = useDispatch();
   const settings = useSelector((state: StoreState) => state.settings);
 
-  const darkMode = !!settings.darkMode;
-
   function handleChange(event: React.ChangeEvent<any>) {
     const name = event.target.name;
     const value = event.target.value;
@@ -228,18 +223,17 @@ export default React.memo(function Settings() {
           </Select>
         </FormControl>
         <h2>Dark mode</h2>
-        <FormGroup>
-          <FormControlLabel
-            control={
-              <Switch
-                color="primary"
-                checked={darkMode}
-                onChange={() => dispatch(setSettings({ ...settings, darkMode: !darkMode }))}
-              />
-            }
-            label="Dark mode"
-          />
-        </FormGroup>
+        <FormControl style={{ width: "15em" }}>
+          <Select
+            name="darkModeUserSelection"
+            value={settings.darkModeUserSelection}
+            onChange={handleChange}
+          >
+            <MenuItem value="auto">Auto</MenuItem>
+            <MenuItem value="dark">Dark</MenuItem>
+            <MenuItem value="light">Light</MenuItem>
+          </Select>
+        </FormControl>
       </Container>
     </>
   );

webapp/src/store/reducers.ts

@@ -240,7 +240,7 @@ export const messagesReducer = handleActions(
 // FIXME Move all the below (potentially the fetchCount ones too) to their own file
 export interface SettingsType {
   locale: string;
-  darkMode?: boolean;
+  darkModeUserSelection: string;
   taskSettings: {
     filterBy: string | null;
     sortBy: string;
@@ -255,7 +255,7 @@ export const settingsReducer = handleActions(
   },
   {
     locale: "en-gb",
-    darkMode: false,
+    darkModeUserSelection: "auto",
     taskSettings: {
       filterBy: null,
       sortBy: "smart",