admin-frontend/.env_example

@@ -3,4 +3,8 @@
 # Backend API base URL (must be reachable from the browser)
 VITE_API_URL=
 
+# Enable developer mode (shows additional debug info and options)
+# Set to "true" to enable, leave empty or unset to disable
+VITE_DEVELOPER_MODE=
+
 

admin-frontend/src/context/DeveloperModeContext.tsx

@@ -1,32 +1,17 @@
-import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { createContext, useContext, ReactNode } from 'react'
 
 interface DeveloperModeContextType {
   isDeveloperMode: boolean
-  setDeveloperMode: (enabled: boolean) => void
 }
 
 const DeveloperModeContext = createContext<DeveloperModeContextType | undefined>(undefined)
 
-const STORAGE_KEY = 'punimtag_developer_mode'
+// Check environment variable (set at build time)
+const isDeveloperMode = import.meta.env.VITE_DEVELOPER_MODE === 'true'
 
 export function DeveloperModeProvider({ children }: { children: ReactNode }) {
-  const [isDeveloperMode, setIsDeveloperMode] = useState<boolean>(false)
-
-  // Load from localStorage on mount
-  useEffect(() => {
-    const stored = localStorage.getItem(STORAGE_KEY)
-    if (stored !== null) {
-      setIsDeveloperMode(stored === 'true')
-    }
-  }, [])
-
-  const setDeveloperMode = (enabled: boolean) => {
-    setIsDeveloperMode(enabled)
-    localStorage.setItem(STORAGE_KEY, enabled.toString())
-  }
-
   return (
-    <DeveloperModeContext.Provider value={{ isDeveloperMode, setDeveloperMode }}>
+    <DeveloperModeContext.Provider value={{ isDeveloperMode }}>
       {children}
     </DeveloperModeContext.Provider>
   )

admin-frontend/src/pages/Settings.tsx

@@ -1,7 +1,7 @@
 import { useDeveloperMode } from '../context/DeveloperModeContext'
 
 export default function Settings() {
-  const { isDeveloperMode, setDeveloperMode } = useDeveloperMode()
+  const { isDeveloperMode } = useDeveloperMode()
 
   return (
     <div>
@@ -11,24 +11,23 @@ export default function Settings() {
         
         <div className="flex items-center justify-between py-3 border-b border-gray-200">
           <div className="flex-1">
-            <label htmlFor="developer-mode" className="text-sm font-medium text-gray-700">
+            <label className="text-sm font-medium text-gray-700">
               Developer Mode
             </label>
             <p className="text-xs text-gray-500 mt-1">
-              Enable developer features. Additional features will be available when enabled.
+              {isDeveloperMode 
+                ? 'Developer mode is enabled (controlled by VITE_DEVELOPER_MODE environment variable)'
+                : 'Developer mode is disabled. Set VITE_DEVELOPER_MODE=true in .env to enable.'}
             </p>
           </div>
           <div className="ml-4">
-            <label className="relative inline-flex items-center cursor-pointer">
-              <input
-                type="checkbox"
-                id="developer-mode"
-                checked={isDeveloperMode}
-                onChange={(e) => setDeveloperMode(e.target.checked)}
-                className="sr-only peer"
-              />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
-            </label>
+            <div className={`px-3 py-1 rounded text-sm font-medium ${
+              isDeveloperMode 
+                ? 'bg-green-100 text-green-800' 
+                : 'bg-gray-100 text-gray-600'
+            }`}>
+              {isDeveloperMode ? 'Enabled' : 'Disabled'}
+            </div>
           </div>
         </div>
       </div>

admin-frontend/src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_API_URL?: string
+  readonly VITE_DEVELOPER_MODE?: string
 }
 
 interface ImportMeta {