first commit

src/components/WelcomeModal.tsx

@@ -0,0 +1,117 @@
+import { useState, useEffect } from 'react'
+
+interface WelcomeModalProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+export function WelcomeModal({ isOpen, onClose }: WelcomeModalProps) {
+  const [neverShowAgain, setNeverShowAgain] = useState(false)
+
+  const handleClose = () => {
+    if (neverShowAgain) {
+      localStorage.setItem('palace-welcome-dismissed', 'true')
+    }
+    onClose()
+  }
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      handleClose()
+    }
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <div 
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: 'rgba(0, 0, 0, 0.8)',
+        zIndex: 3000,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+      onClick={handleOverlayClick}
+    >
+      <div
+        style={{
+          background: '#1a1a1a',
+          border: '1px solid #333',
+          width: '500px',
+          maxWidth: '90vw',
+          fontFamily: 'monospace',
+          color: 'white'
+        }}
+      >
+        <div style={{ padding: '24px' }}>
+          <h2 style={{ margin: '0 0 20px 0', fontSize: '18px', color: '#fff' }}>
+            Bienvenue dans Palace
+          </h2>
+          
+          <div style={{ marginBottom: '20px', lineHeight: '1.5', color: '#ccc' }}>
+            <p style={{ margin: '0 0 12px 0' }}>
+              <strong>Navigation :</strong> Tapez <code style={{ background: '#333', padding: '2px 4px', borderRadius: '2px' }}>:</code> pour ouvrir la console de navigation
+            </p>
+            <p style={{ margin: '0 0 12px 0' }}>
+              <strong>Création de notes :</strong> Double-cliquez sur l'espace vide pour créer une note
+            </p>
+            <p style={{ margin: '0 0 12px 0' }}>
+              <strong>Sélection multiple :</strong> Shift+clic ou glisser pour sélectionner plusieurs notes
+            </p>
+            <p style={{ margin: '0 0 12px 0' }}>
+              <strong>Navigation entre espaces :</strong> Double-cliquez sur une note pour naviguer vers l'espace correspondant
+            </p>
+            <p style={{ margin: '0' }}>
+              <strong>Raccourcis :</strong> Suppr/Backspace pour effacer, Échap pour désélectionner
+            </p>
+          </div>
+
+          <div style={{ marginBottom: '20px' }}>
+            <label style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', color: '#ccc' }}>
+              <input
+                type="checkbox"
+                checked={neverShowAgain}
+                onChange={(e) => setNeverShowAgain(e.target.checked)}
+                style={{ marginRight: '8px' }}
+              />
+              Ne plus afficher ce message
+            </label>
+          </div>
+
+          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '12px' }}>
+            <button
+              onClick={handleClose}
+              style={{
+                background: '#333',
+                color: 'white',
+                border: '1px solid #555',
+                padding: '8px 16px',
+                cursor: 'pointer',
+                fontFamily: 'monospace',
+                fontSize: '14px'
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = '#444'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = '#333'
+              }}
+            >
+              Compris !
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function shouldShowWelcome(): boolean {
+  return localStorage.getItem('palace-welcome-dismissed') !== 'true'
+}