From 1703e0ec73c2fd0ef77be5cd08a6c73da6da2b22 Mon Sep 17 00:00:00 2001
From: Christian Semmler <mail@csemmler.com>
Date: Sun, 11 Jan 2026 21:11:32 -0700
Subject: [PATCH] Improve development mode experience

- Show "DEVELOPMENT MODE" in footer instead of timestamp
- Disable offline install/uninstall when service worker unavailable
- Set __BUILD_TIME__ to null in dev mode for conditional rendering
---
 src/App.svelte                  | 6 +++++-
 src/app.css                     | 6 ++++++
 src/lib/config/ExtrasTab.svelte | 6 ++++--
 vite.config.js                  | 6 +++---
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 8e4574d..7f3bd8f 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -83,7 +83,11 @@
     </div>
 
     <div class="app-footer">
-        <p>Last updated: {__BUILD_TIME__}</p>
+        {#if __BUILD_TIME__}
+            <p>Last updated: {__BUILD_TIME__}</p>
+        {:else}
+            <p><strong>DEVELOPMENT MODE</strong></p>
+        {/if}
     </div>
 </div>
 
diff --git a/src/app.css b/src/app.css
index cc81c50..40b291a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -704,6 +704,12 @@ body {
     margin-top: 8px;
 }
 
+.offline-play-controls .offline-error {
+    color: var(--color-primary);
+    font-style: italic;
+    font-size: 0.9em;
+}
+
 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
diff --git a/src/lib/config/ExtrasTab.svelte b/src/lib/config/ExtrasTab.svelte
index dd38c8e..c586e22 100644
--- a/src/lib/config/ExtrasTab.svelte
+++ b/src/lib/config/ExtrasTab.svelte
@@ -1,6 +1,6 @@
 <script>
     import ImageButton from '../ImageButton.svelte';
-    import { installState } from '../../stores.js';
+    import { installState, swRegistration } from '../../stores.js';
 
     export let opfsDisabled;
     export let openSection;
@@ -49,7 +49,9 @@
                     <p class="offline-note">Note: browsers enforce strict storage quotas, especially in private/incognito windows.</p>
                 </div>
                 <div class="offline-play-controls">
-                    {#if $installState.installing}
+                    {#if !$swRegistration}
+                        <p class="offline-error">Not available in development mode.</p>
+                    {:else if $installState.installing}
                         <div class="progress-circular" style="background: radial-gradient(var(--color-bg-input) 60%, transparent 61%), conic-gradient(var(--color-primary) {progressAngle}deg, var(--color-border-dark) {progressAngle}deg);">
                             {Math.round($installState.progress)}%
                         </div>
diff --git a/vite.config.js b/vite.config.js
index 52f248e..9cc5e38 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,10 +3,10 @@ import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 const buildTime = new Date().toISOString().replace('T', ' ').replace(/\.\d{3}Z$/, ' UTC');
 
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins: [svelte()],
   define: {
-    __BUILD_TIME__: JSON.stringify(buildTime)
+    __BUILD_TIME__: mode === 'development' ? null : JSON.stringify(buildTime)
   },
   build: {
     outDir: 'dist',
@@ -31,4 +31,4 @@ export default defineConfig({
       'Cross-Origin-Embedder-Policy': 'require-corp'
     }
   }
-});
+}));