document deployment

src/components/StorageConfig.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { getStorageMode, setStorageMode, type StorageMode } from '../db'
+
+export function StorageConfig() {
+  const [currentMode, setCurrentMode] = useState<StorageMode>(getStorageMode())
+  const [showConfig, setShowConfig] = useState(false)
+
+  const handleModeChange = (mode: StorageMode) => {
+    setStorageMode(mode)
+    setCurrentMode(mode)
+    window.location.reload()
+  }
+
+  if (!showConfig) {
+    return (
+      <button 
+        onClick={() => setShowConfig(true)}
+        className="fixed bottom-4 right-4 bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded text-sm"
+      >
+        ⚙️ Storage
+      </button>
+    )
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 bg-white border rounded-lg shadow-lg p-4 min-w-64">
+      <div className="flex justify-between items-center mb-3">
+        <h3 className="font-medium">Storage Mode</h3>
+        <button 
+          onClick={() => setShowConfig(false)}
+          className="text-gray-500 hover:text-gray-700"
+        >
+          ✕
+        </button>
+      </div>
+      
+      <div className="space-y-2">
+        <label className="flex items-center space-x-2">
+          <input
+            type="radio"
+            name="storage-mode"
+            value="indexeddb"
+            checked={currentMode === 'indexeddb'}
+            onChange={() => handleModeChange('indexeddb')}
+          />
+          <span>IndexedDB (Local)</span>
+        </label>
+        
+        <label className="flex items-center space-x-2">
+          <input
+            type="radio"
+            name="storage-mode"
+            value="database"
+            checked={currentMode === 'database'}
+            onChange={() => handleModeChange('database')}
+          />
+          <span>Database (Collaborative)</span>
+        </label>
+      </div>
+      
+      <div className="mt-3 text-xs text-gray-600">
+        Current: {currentMode === 'indexeddb' ? 'Local storage' : 'Remote database'}
+      </div>
+    </div>
+  )
+}