fix(ui) ios 26 quirks

Author: xero

docs/install-pwa.md

@@ -80,7 +80,7 @@ This document provides step-by-step instructions for installing a Progressive We
 
 ## 2. Desktop Safari (macOS)
 
-![safari install](https://raw.githubusercontent.com/wiki/xero/text0wnz/img/pwa-ios.png)
+![safari install](https://raw.githubusercontent.com/wiki/xero/text0wnz/img/pwa-safari.png)
 
 **Steps:**
 
@@ -113,16 +113,16 @@ This document provides step-by-step instructions for installing a Progressive We
 
 ---
 
-## 4. iPadOS (Safari)
+## 4. iPadOS / iOS (Safari)
 
 ![ipad install](https://raw.githubusercontent.com/wiki/xero/text0wnz/img/pwa-ios.png)
 
 **Steps:**
 
-1. Open the website in Safari on your iPad.
+1. Open the website in Safari on your iPad or iPhone.
 2. Tap the "Share" button (square with an arrow pointing up).
-3. Tap “Add to Home Screen.”
-4. Enter a name for the app and tap "Add."
+3. Tap the "More" button (Three dots).
+4. Tap “Add to Home Screen.”
 5. The web app will appear on your home screen and can be launched like any other app.
 
 **What you get after installing:**

eslint.config.js

@@ -34,6 +34,7 @@ export default [
 				Uint16Array: 'readonly',
 				Uint32Array: 'readonly',
 				Uint8Array: 'readonly',
+				URLSearchParams: 'readonly',
 				WebSocket: 'readonly',
 				Worker: 'readonly',
 				alert: 'readonly',

src/css/style.css

@@ -200,14 +200,16 @@
 		@apply w-full flex justify-between h-[var(--header-size)];
 
 		&.dynamic {
+			-webkit-app-region: drag;
 			app-region: drag;
-			padding-left: env(titlebar-area-x, 0px);
-			padding-right: calc(env(titlebar-area-x, 0px) * 1.6);
+			padding-left: calc(env(titlebar-area-x, 0px) + 2px);
+			padding-right: calc(env(titlebar-area-x, 0px) + 25px);
 		}
 		* {
 			@apply my-auto;
 		}
 		nav {
+			-webkit-app-region: no-drag;
 			app-region: no-drag;
 			div {
 				@apply flex;
@@ -1177,6 +1179,10 @@
 		}
 	}
 
+	.iosWin header.dynamic {
+		padding-left: 75px;
+	}
+
 	.includedForWebsocket {
 		@apply hidden;
 	}

src/js/client/main.js

@@ -74,6 +74,7 @@ let saveTimeout;
 let reload;
 let palettePicker;
 let pendingFile = null;
+let navFullscreen;
 
 const $$$$ = () => {
 	htmlDoc = $$('html');
@@ -101,6 +102,7 @@ const $$$$ = () => {
 	metaTheme = $$('meta[name="theme-color"]');
 	saveTimeout = null;
 	reload = $('updateReload');
+	navFullscreen = $('fullscreen');
 };
 
 const openHandler = file => {
@@ -164,9 +166,16 @@ const handleLaunchFiles = () => {
 			const fileHandle = launchParams.files[0];
 			try {
 				const file = await fileHandle.getFile();
-				console.log(`[Launch] File queued: ${file.name} (${file.size} bytes)`);
-				// Store the file to open after initialization
-				pendingFile = file;
+				// If app is already initialized, open immediately
+				if (
+					State.textArtCanvas &&
+					!bodyContainer?.classList.contains('loading')
+				) {
+					openHandler(file);
+				} else {
+					// Otherwise store for later
+					pendingFile = file;
+				}
 			} catch (error) {
 				console.error('[App] Error reading launched file:', error);
 			}
@@ -209,7 +218,23 @@ const save = () => {
 	}, 300);
 };
 
-const isIOS = () => (/iPad|iPhone|iPod/).test(navigator.userAgent);
+const isIOS = (/iPad|iPhone|iPod/).test(navigator.userAgent);
+
+const handleIOS = () => {
+	const isWindowed =
+		window.navigator.standalone ||
+		window.matchMedia('(display-mode: standalone)').matches ||
+		window.matchMedia('(display-mode: window-controls-overlay)').matches;
+	const isMaximized =
+		window.innerWidth >= window.screen.availWidth &&
+		window.innerHeight >= window.screen.availHeight * 0.95;
+	const isWebkitFullscreen = !!(
+		document.webkitFullscreenElement || document.webkitCurrentFullScreenElement
+	);
+	const needsPadding = isWebkitFullscreen || (isWindowed && !isMaximized);
+	htmlDoc.classList.toggle('ios', needsPadding);
+	navFullscreen.classList.toggle('disabled', isWindowed);
+};
 
 document.addEventListener('DOMContentLoaded', async () => {
 	// Initialize service worker
@@ -230,6 +255,39 @@ document.addEventListener('DOMContentLoaded', async () => {
 				};
 			};
 		});
+
+		// Listen for shared file messages from service worker
+		navigator.serviceWorker.addEventListener('message', async event => {
+			if (event.data.type === 'SHARED_FILE_READY') {
+				console.log('[Share] File shared:', event.data.filename);
+				// Wait for app to be ready
+				const waitForApp = () => {
+					return new Promise(resolve => {
+						if (State.textArtCanvas && openHandler) {
+							resolve();
+						} else {
+							setTimeout(() => waitForApp().then(resolve), 100);
+						}
+					});
+				};
+				await waitForApp();
+				const sharedFileData = await handleFileShare();
+				if (sharedFileData) {
+					pendingFile = sharedFileData.file;
+					openHandler(pendingFile);
+					pendingFile = null;
+					// Clean up the cached file
+					caches
+						.open(CACHE_ID)
+						.then(cache => cache.delete(CACHE_DATA))
+						.catch(error =>
+							console.error(
+								'[Error] Failed to cleanup shared file cache:',
+								error,
+							));
+				}
+			}
+		});
 	}
 
 	try {
@@ -312,6 +370,16 @@ const initializeAppComponents = async () => {
 	if (!pendingFile) {
 		State.restoreStateFromLocalStorage();
 	}
+	// iOS quirks
+	if (isIOS) {
+		// Make file picker accept all files on iOS
+		openFile.setAttribute('accept', '*/*');
+		// track state to offset traffic lights
+		handleIOS();
+		document.addEventListener('webkitfullscreenchange', handleIOS);
+		window.addEventListener('resize', handleIOS);
+	}
+
 	document.addEventListener('keydown', undoAndRedo);
 	createResolutionController(
 		$('resolutionLabel'),
@@ -404,11 +472,6 @@ const initializeAppComponents = async () => {
 	onFileChange(openFile, openHandler);
 	createDragDropController(openHandler, $('dragdrop'));
 
-	if (isIOS()) {
-		// Make file picker accept all files on iOS
-		openFile.setAttribute('accept', '*/*');
-	}
-
 	onClick(navSauce, () => {
 		State.menus.close();
 		State.modal.open('sauce');
@@ -500,7 +563,7 @@ const initializeAppComponents = async () => {
 	onClick($('eraseColumn'), keyboard.eraseColumn);
 	onClick($('eraseColumnStart'), keyboard.eraseToStartOfColumn);
 	onClick($('eraseColumnEnd'), keyboard.eraseToEndOfColumn);
-	onClick($('fullscreen'), toggleFullscreen);
+	onClick(navFullscreen, toggleFullscreen);
 
 	onClick($('defaultColor'), () => {
 		State.palette.setForegroundColor(7);
@@ -827,25 +890,28 @@ const initializeAppComponents = async () => {
 	document.addEventListener('onIceColorsChange', save);
 	document.addEventListener('onOpenedFile', save);
 
-	// Handle pending launched file
+	// Handle pending launchQueue file
 	if (pendingFile) {
-		console.log(`[Launch] Opening launched file: ${pendingFile.name}`);
 		openHandler(pendingFile);
 		pendingFile = null;
 		return; // Exit early, don't check for shared files
 	}
 
-	// Check for shared files
-	const sharedFileData = await handleFileShare();
-	if (sharedFileData) {
-		console.log(`[Share] Opening shared file: ${sharedFileData.filename}`);
-		openHandler(sharedFileData.file);
-		// Clean up the cached file
-		caches
-			.open(CACHE_ID)
-			.then(cache => cache.delete(CACHE_DATA))
-			.catch(error =>
-				console.error('[Error] Failed to cleanup shared file cache:', error));
+	// Handle share target files
+	const urlParams = new URLSearchParams(window.location.search);
+	const source = urlParams.get('source');
+	if (source === 'share') {
+		const sharedFileData = await handleFileShare();
+		if (sharedFileData) {
+			console.log(`[Share] Opening shared file: ${sharedFileData.filename}`);
+			openHandler(sharedFileData.file);
+			// Clean up the cached file
+			caches
+				.open(CACHE_ID)
+				.then(cache => cache.delete(CACHE_DATA))
+				.catch(error =>
+					console.error('[Error] Failed to cleanup shared file cache:', error));
+		}
 	}
 };
 

src/js/client/ui.js

@@ -18,12 +18,43 @@ const createCanvas = (width, height) => {
 };
 
 const toggleFullscreen = () => {
-	if (document.fullscreenEnabled) {
-		if (document.fullscreenElement) {
-			document.exitFullscreen();
+	// Check if any fullscreen API is available
+	const isFullscreenEnabled =
+		document.fullscreenEnabled || document.webkitFullscreenEnabled;
+
+	if (!isFullscreenEnabled) {
+		console.warn('[UI] Fullscreen not supported');
+		$('fullscreen').classList.add('disabled');
+		return;
+	}
+
+	try {
+		const fullscreenElement =
+			document.fullscreenElement ||
+			document.webkitFullscreenElement ||
+			document.webkitCurrentFullScreenElement; // Safari specific
+
+		if (fullscreenElement) {
+			if (document.exitFullscreen) {
+				document.exitFullscreen();
+			} else if (document.webkitExitFullscreen) {
+				document.webkitExitFullscreen();
+			} else if (document.webkitCancelFullScreen) {
+				document.webkitCancelFullScreen(); // Older Safari
+			}
 		} else {
-			document.documentElement.requestFullscreen();
+			const element = document.documentElement;
+
+			if (element.requestFullscreen) {
+				element.requestFullscreen();
+			} else if (element.webkitRequestFullscreen) {
+				element.webkitRequestFullscreen();
+			} else if (element.webkitRequestFullScreen) {
+				element.webkitRequestFullScreen(); // Older Safari (capital S)
+			}
 		}
+	} catch {
+		console.error('[UI] Failed toggling fullscreen mode');
 	}
 };
 

src/service.js

@@ -32,11 +32,20 @@ async function handleShareTarget(request) {
 						'X-Filename': file.name || 'untitled.txt',
 						'X-File-Size': file.size.toString(),
 						'X-Shared-At': Date.now().toString(),
+						'X-Source': 'share-target',
 					},
 				}),
 			);
+			const clients = await self.clients.matchAll({ type: 'window' });
+			clients.forEach(client => {
+				client.postMessage({
+					type: 'SHARED_FILE_READY',
+					filename: file.name,
+					size: file.size,
+				});
+			});
 		}
-		return Response.redirect('/', 303);
+		return Response.redirect('/?source=share', 303);
 	} catch (error) {
 		console.error('[ServiceWorker] Error handling share target:', error);
 		return Response.redirect('/', 303);

vite.config.js

@@ -322,6 +322,9 @@ export default ({ mode }) => {
 							}
 						}
 					],
+					launch_handler: {
+						client_mode: 'focus-existing',
+					},
 					// fav/app icons
 					icons: [{
 						src: `${uiDir}img/web-app-manifest-512x512.png`,