Merge pull request #55 from abiddiscombe/dev

  Release v1.5.2 - Dev to Main

Author: abiddiscombe

Diff for: package-lock.json

@@ -1,7 +1,7 @@
 {
     "name": "notedeck",
     "private": true,
-    "version": "1.5.1",
+    "version": "1.5.2",
     "type": "module",
     "scripts": {
         "dev": "vite",

Diff for: package.json

@@ -1,71 +1,36 @@
-import { createContext, useEffect, useState } from "react";
 import { isMobile } from "react-device-detect";
-import { serviceSettings } from "./database/serviceSettings";
-import { AppUnsupported } from "./AppUnsupported";
-import { Main } from "./layout/Main/Main";
-import { AppSplash } from "./AppSplash";
-import { Header } from "./layout/Header/Header";
-import { update } from "./utilities/update";
-
-interface AppContextType {
-    loaded: boolean;
-    updateAvailable: boolean;
-    updateTargetVersion: string;
-}
-
-export const AppContext = createContext<AppContextType | null>(null);
+import { AppRoot } from "./AppRoot";
+import { appInfo } from "./utilities/constants";
+import { Typography } from "./components/Typography";
+import { ExternalLink } from "./components/ExternalLink";
 
 export function App() {
-    const [context, setContext] = useState<AppContextType>({
-        loaded: false,
-        updateAvailable: false,
-        updateTargetVersion: "",
-    });
-
-    async function init() {
-        await serviceSettings.instantiate();
-
-        const autoUpdateCheck = await serviceSettings.read("autoUpdateCheck");
-        if (autoUpdateCheck) {
-            const updateCheckEvent = await update.check();
-            if (updateCheckEvent?.updateAvailable) {
-                setContext((prevState) => ({
-                    ...prevState,
-                    ...updateCheckEvent,
-                }));
-            }
-        }
-
-        setTimeout(() => {
-            // Experimental! Increases the visible time
-            // of the Splash Screen by 250 ms in order to
-            // reduce "flicker" on app load.
-
-            setContext((prevState) => ({
-                ...prevState,
-                loaded: true,
-            }));
-        }, 250);
-    }
-
-    useEffect(() => {
-        init();
-    }, []);
-
-    if (!context.loaded) {
-        return <AppSplash />;
-    }
+    // If the app is loaded on a mobile device, bypass
+    // initialization and data loading to improve performance.
 
     if (isMobile) {
-        return <AppUnsupported />;
-    }
-
-    return (
-        <AppContext.Provider value={context}>
+        return (
             <div className="grid h-screen grid-rows-[auto,_1fr] bg-primary-50 dark:bg-primary-950">
-                <Header />
-                <Main />
+                <header className="p-10">
+                    <Typography.H1>{appInfo.name}</Typography.H1>
+                </header>
+                <main className="m-auto max-w-sm p-10 pb-20">
+                    <Typography.H2>
+                        Sorry, mobile devices are not supported :/
+                    </Typography.H2>
+                    <Typography.Body>
+                        To explore {appInfo.name}, open this page on your
+                        desktop or laptop. More information about {appInfo.name}{" "}
+                        is available in the{" "}
+                        <ExternalLink href={appInfo.sourceUrl}>
+                            project documentation
+                        </ExternalLink>{" "}
+                        on GitHub.
+                    </Typography.Body>
+                </main>
             </div>
-        </AppContext.Provider>
-    );
+        );
+    }
+
+    return <AppRoot />;
 }

Diff for: src/App.tsx

@@ -0,0 +1,65 @@
+import { createContext, useEffect, useState } from "react";
+import { serviceSettings } from "./database/serviceSettings";
+import { update } from "./utilities/update";
+import { AppSplash } from "./AppSplash";
+import { Main } from "./layout/Main/Main";
+import { Header } from "./layout/Header/Header";
+
+interface AppContextType {
+    loaded: boolean;
+    updateAvailable: boolean;
+    updateTargetVersion: string;
+}
+
+export const AppContext = createContext<AppContextType | null>(null);
+
+export function AppRoot() {
+    const [context, setContext] = useState<AppContextType>({
+        loaded: false,
+        updateAvailable: false,
+        updateTargetVersion: "",
+    });
+
+    async function init() {
+        await serviceSettings.instantiate();
+
+        const autoUpdateCheck = await serviceSettings.read("autoUpdateCheck");
+        if (autoUpdateCheck) {
+            const updateCheckEvent = await update.check();
+            if (updateCheckEvent?.updateAvailable) {
+                setContext((prevState) => ({
+                    ...prevState,
+                    ...updateCheckEvent,
+                }));
+            }
+        }
+
+        setTimeout(() => {
+            // Experimental! Increases the visible time
+            // of the Splash Screen by 250 ms in order to
+            // reduce "flicker" on app load.
+
+            setContext((prevState) => ({
+                ...prevState,
+                loaded: true,
+            }));
+        }, 250);
+    }
+
+    useEffect(() => {
+        init();
+    }, []);
+
+    if (!context.loaded) {
+        return <AppSplash />;
+    }
+
+    return (
+        <AppContext.Provider value={context}>
+            <div className="grid h-screen grid-rows-[auto,_1fr] bg-primary-50 dark:bg-primary-950">
+                <Header />
+                <Main />
+            </div>
+        </AppContext.Provider>
+    );
+}

Diff for: src/AppRoot.tsx

@@ -61,7 +61,10 @@ export function Dialog(p: DialogProps) {
                                             {p.title}
                                         </Typography.H2>
                                     </DialogTitle>
-                                    <CloseButton className="rounded-full outline outline-8 outline-white/0 hover:bg-primary-50 hover:outline-primary-50 active:bg-primary-100 active:outline-primary-100 dark:hover:bg-primary-700 dark:hover:outline-primary-700 dark:active:bg-primary-600 dark:active:outline-primary-600">
+                                    <CloseButton
+                                        aria-label="Close Dialog"
+                                        className="rounded-full outline outline-8 outline-white/0 hover:bg-primary-50 hover:outline-primary-50 active:bg-primary-100 active:outline-primary-100 dark:hover:bg-primary-700 dark:hover:outline-primary-700 dark:active:bg-primary-600 dark:active:outline-primary-600"
+                                    >
                                         <XMarkIcon className="h-6 text-primary-600 dark:text-primary-200" />
                                     </CloseButton>
                                 </div>

Diff for: src/AppUnsupported.tsx

@@ -1,52 +1,29 @@
-import { useState } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
 import { serviceNote } from "../../database/serviceNote";
-import { Cog6ToothIcon } from "@heroicons/react/16/solid";
-import { Button } from "../../components/Button";
-import { Tooltip } from "../../components/Tooltip";
-import { Settings } from "../Settings/Settings";
 import { HeaderLogo } from "./HeaderLogo";
 import { HeaderBackup } from "./HeaderBackup";
 import { HeaderNewNote } from "./HeaderNewNote";
 import { HeaderDeleteNotes } from "./HeaderDeleteNotes";
 import { HeaderThemeSwitch } from "./HeaderThemeSwitch";
 import { HeaderUpdateNotification } from "./HeaderUpdateNotification";
+import { HeaderSettings } from "./HeaderSettings";
 
 export function Header() {
     const notes = useLiveQuery(() => serviceNote.list());
-    const [showSettings, setShowSettings] = useState(false);
 
     return (
-        <>
-            <Settings
-                isOpen={showSettings}
-                setIsOpen={setShowSettings}
-            />
-            <header className="flex items-center gap-2 border-b border-b-primary-200 bg-white px-4 py-1.5 dark:border-b-primary-800 dark:bg-primary-900">
-                <HeaderLogo />
-                <HeaderUpdateNotification />
-                {!!notes?.length && (
-                    <>
-                        <HeaderNewNote />
-                        <HeaderDeleteNotes />
-                    </>
-                )}
-                <HeaderThemeSwitch />
-                <HeaderBackup />
-                <Tooltip
-                    label="Settings"
-                    className="right-0"
-                >
-                    <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => setShowSettings(true)}
-                        className="bg-primary-50 dark:bg-primary-800"
-                    >
-                        <Cog6ToothIcon />
-                    </Button>
-                </Tooltip>
-            </header>
-        </>
+        <header className="flex items-center gap-2 border-b border-b-primary-200 bg-white px-4 py-1.5 dark:border-b-primary-800 dark:bg-primary-900">
+            <HeaderLogo />
+            <HeaderUpdateNotification />
+            {!!notes?.length && (
+                <>
+                    <HeaderNewNote />
+                    <HeaderDeleteNotes />
+                </>
+            )}
+            <HeaderThemeSwitch />
+            <HeaderBackup />
+            <HeaderSettings />
+        </header>
     );
 }

Diff for: src/components/Dialog.tsx

@@ -11,6 +11,7 @@ import { Tooltip } from "../../components/Tooltip";
 
 export function HeaderBackup() {
     const [backupDone, setBackupDone] = useState(false);
+    const label = "Download Backup";
 
     async function handleDownloadBackup() {
         const parsedDate = convertDate();
@@ -22,10 +23,11 @@ export function HeaderBackup() {
     }
 
     return (
-        <Tooltip label="Download Backup">
+        <Tooltip label={label}>
             <Button
                 size="sm"
                 variant="ghost"
+                aria-label={label}
                 className="bg-primary-50 dark:bg-primary-800"
                 onClick={() => handleDownloadBackup()}
             >

Diff for: src/layout/Header/Header.tsx

@@ -11,6 +11,7 @@ import { Typography } from "../../components/Typography";
 export function HeaderDeleteNotes() {
     const [showModal, setShowModal] = useState(false);
     const [retainPriorityNotes, setRetainPriorityNotes] = useState(true);
+    const label = "Delete All Notes";
 
     // // Revert the "Retain Priority Notes" checkbox to
     // // "checked" when the modal is re-opened.
@@ -60,10 +61,11 @@ export function HeaderDeleteNotes() {
                     </>
                 </Button>
             </Dialog>
-            <Tooltip label="Delete All Notes">
+            <Tooltip label={label}>
                 <Button
                     size="sm"
                     variant="ghost"
+                    aria-label={label}
                     onClick={() => setShowModal(true)}
                     className="bg-primary-50 dark:bg-primary-800"
                 >

Diff for: src/layout/Header/HeaderBackup.tsx

@@ -7,7 +7,7 @@ export function HeaderLogo() {
             <Typography.H1 noMargin={true}>{appInfo.name}</Typography.H1>
             <Typography.Body
                 noMargin={true}
-                className="hidden text-[0.7rem] text-primary-400 sm:block dark:text-primary-500"
+                className="hidden text-[0.7rem] text-primary-700 sm:block dark:text-primary-200"
             >
                 v{appInfo.semVer}
             </Typography.Body>

Diff for: src/layout/Header/HeaderDeleteNotes.tsx

@@ -4,6 +4,8 @@ import { Button } from "../../components/Button";
 import { Tooltip } from "../../components/Tooltip";
 
 export function HeaderNewNote() {
+    const label = "New Note";
+
     function handleCreateNote() {
         serviceNote.create({
             theme: "yellow",
@@ -13,8 +15,6 @@ export function HeaderNewNote() {
         });
     }
 
-    const label = "New Note";
-
     return (
         <Tooltip
             label={label}
@@ -23,6 +23,7 @@ export function HeaderNewNote() {
             <Button
                 size="sm"
                 variant="solid"
+                aria-label={label}
                 onClick={() => handleCreateNote()}
             >
                 <PlusIcon />