Regenerate icons

package.json

@@ -11,7 +11,8 @@
     "preview": "vite preview",
     "test": "playwright test",
     "lint": "eslint src tests --ext .js,.jsx",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "regenerate-icons": "./src/assets/icon/generate.sh"
   },
   "dependencies": {
     "@capacitor/app": "^5.0.3",
@@ -44,6 +45,7 @@
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "prettier": "^3.3.1",
+    "sharp-cli": "^4.2.0",
     "vite": "^5.2.12"
   },
   "peerDependencies": {

src/assets/icon/generate.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+sharp -i src/assets/imgs/logo.png -o src/assets/icon/favicon-16x16.png resize 16 16
+sharp -i src/assets/imgs/logo.png -o src/assets/icon/favicon-32x32.png resize 32 32
+sharp -i src/assets/imgs/logo.png -o src/assets/icon/android-chrome-192x192.png resize 192 192
+sharp -i src/assets/imgs/logo.png -o src/assets/icon/android-chrome-512x512.png resize 512 512
+sharp -i src/assets/imgs/logo.png -o src/assets/icon/apple-touch-icon.png resize 180 180
+sharp -i src/assets/imgs/logo.png -o src/assets/icon/favicon.ico resize 48 48

src/css/style.css

@@ -21,11 +21,11 @@ body,
   height: 100%;
 }
 
-.start-button {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+#start {
+  padding: 1px 1em 1px;
+  max-width: 600px;
+  margin: env(safe-area-inset-top) auto 0;
+  font-size: 1em;
 }
 
 #select {

src/js/components.jsx

@@ -16,6 +16,7 @@ import {
 	MenuItem,
 	ToolbarButton,
 	ToolbarGroup,
+	Button,
 } from '@wordpress/components';
 import {
 	chevronDown,
@@ -50,13 +51,6 @@ function getUniqueId(object) {
 
 async function pick() {
 	const { url } = await Filesystem.pickDirectory();
-	if (typeof url === 'string') {
-		await Preferences.set({ key: 'selectedFolderURL', value: url });
-	} else {
-		await Preferences.remove({ key: 'selectedFolderURL' });
-		await set('directoryHandle', url);
-	}
-
 	return url;
 }
 
@@ -370,6 +364,13 @@ function Note({
 						>
 							{__('Pick Folder')}
 						</MenuItem>
+						<MenuItem
+							onClick={async () => {
+								setSelectedFolderURL();
+							}}
+						>
+							{__('Forget Folder')}
+						</MenuItem>
 					</MenuGroup>
 				</>
 			)}
@@ -438,8 +439,22 @@ function App({ selectedFolderURL: initialSelectedFolderURL }) {
 	useEffect(() => {
 		registerCoreBlocks();
 	}, []);
+	const isMounted = useRef(false);
 	useEffect(() => {
-		setCurrentPath();
+		if (isMounted.current) {
+			setCurrentPath();
+			if (typeof url === 'string') {
+				Preferences.set({
+					key: 'selectedFolderURL',
+					value: selectedFolderURL,
+				});
+			} else {
+				Preferences.remove({ key: 'selectedFolderURL' });
+				set('directoryHandle', selectedFolderURL);
+			}
+		} else {
+			isMounted.current = true;
+		}
 	}, [selectedFolderURL]);
 	useEffect(() => {
 		getPaths('', selectedFolderURL)
@@ -458,21 +473,36 @@ function App({ selectedFolderURL: initialSelectedFolderURL }) {
 
 	if (!selectedFolderURL) {
 		return (
-			<button
-				className="start-button"
-				// eslint-disable-next-line jsx-a11y/no-autofocus
-				autoFocus
-				onClick={async () => {
-					try {
-						setSelectedFolderURL(await pick());
-					} catch (e) {
-						// eslint-disable-next-line no-alert
-						window.alert(e.message);
-					}
-				}}
-			>
-				{__('Pick Folder')}
-			</button>
+			<main id="start">
+				<h1>Welcome to Blocknotes!</h1>
+				<p>Please pick a folder to read and write your notes.</p>
+				<Button
+					variant="primary"
+					className="start-button"
+					// eslint-disable-next-line jsx-a11y/no-autofocus
+					autoFocus
+					onClick={async () => {
+						try {
+							setSelectedFolderURL(await pick());
+						} catch (e) {
+							// eslint-disable-next-line no-alert
+							window.alert(e.message);
+						}
+					}}
+				>
+					{__('Pick Folder')}
+				</Button>
+				<p>
+					Blocknotes works completely offline, and notes are stored in
+					the folder you pick, so only you have complete control over
+					your data.
+				</p>
+				<p>
+					For the best experience, create a new cloud folder (such as
+					iCloud), so you can also use Blocknotes to access the notes
+					on your phone.
+				</p>
+			</main>
 		);
 	}
 

tests/mock.spec.js

@@ -80,7 +80,7 @@ describe('Blocknotes', () => {
 
 		await expect(
 			page.getByRole('menu', { name: 'Notes' }).getByRole('menuitem')
-		).toHaveText(['New Note', 'Untitled', 'Pick Folder']);
+		).toHaveText(['New Note', 'Untitled', 'Pick Folder', 'Forget Folder']);
 
 		await emptyBlock.click();
 
@@ -94,7 +94,7 @@ describe('Blocknotes', () => {
 
 		await expect(
 			page.getByRole('menu', { name: 'Notes' }).getByRole('menuitem')
-		).toHaveText(['New Note', 'aa', 'Pick Folder']);
+		).toHaveText(['New Note', 'aa', 'Pick Folder', 'Forget Folder']);
 
 		// Nothing should have been saved yet because saving is debounced.
 		expect(await getPaths(page)).toEqual([]);
@@ -140,7 +140,7 @@ describe('Blocknotes', () => {
 
 		await expect(
 			page.getByRole('menu', { name: 'Notes' }).getByRole('menuitem')
-		).toHaveText(['New Note', 'b', 'aaaa', 'Pick Folder']);
+		).toHaveText(['New Note', 'b', 'aaaa', 'Pick Folder', 'Forget Folder']);
 
 		// Immediately switch back to note A.
 		await page.getByRole('menuitem', { name: 'aaaa' }).click();