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

@@ -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>
 

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;

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>

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'
     }
   }
-});
+}));