possibilité de partage un espace

src/components/NavigationConsole.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef } from 'react'
-import { navigateToSpace } from '../store'
+import { navigateToSpace, currentSpace } from '../store'
 import { db } from '../db'
+import { useStore } from '@nanostores/react'
+import { generateShareLink, copyToClipboard } from '../utils/shareSpace'
 
 interface NavigationConsoleProps {
   isOpen: boolean
@@ -12,7 +14,9 @@ export function NavigationConsole({ isOpen, onClose }: NavigationConsoleProps) {
   const [existingSpaces, setExistingSpaces] = useState<string[]>([])
   const [filteredSpaces, setFilteredSpaces] = useState<string[]>([])
   const [selectedIndex, setSelectedIndex] = useState(0)
+  const [isSharing, setIsSharing] = useState(false)
   const inputRef = useRef<HTMLInputElement>(null)
+  const space = useStore(currentSpace)
 
   useEffect(() => {
     const loadSpaces = async () => {
@@ -47,11 +51,32 @@ export function NavigationConsole({ isOpen, onClose }: NavigationConsoleProps) {
     setSelectedIndex(0)
   }, [input, existingSpaces])
 
+  const handleShare = async () => {
+    if (!space) return
+
+    const shareLink = generateShareLink(space)
+    const success = await copyToClipboard(shareLink)
+
+    if (success) {
+      setIsSharing(true)
+      setTimeout(() => {
+        onClose()
+        setIsSharing(false)
+      }, 1500)
+    }
+  }
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Escape') {
       onClose()
     } else if (e.key === 'Enter') {
       e.preventDefault()
+
+      if (input.toLowerCase() === 'share') {
+        handleShare()
+        return
+      }
+
       const targetSpace = filteredSpaces[selectedIndex] || input
       if (targetSpace.trim()) {
         navigateToSpace(sanitizeSpaceId(targetSpace.trim()))
@@ -116,24 +141,45 @@ export function NavigationConsole({ isOpen, onClose }: NavigationConsoleProps) {
         }}
       >
         <div style={{ padding: '8px' }}>
-          <input
-            ref={inputRef}
-            value={input}
-            onChange={(e) => setInput(e.target.value)}
-            onKeyDown={handleKeyDown}
-            placeholder="Name a space"
-            style={{
-              width: '100%',
-              background: 'transparent',
-              border: 'none',
-              outline: 'none',
-              color: 'white',
+          {isSharing ? (
+            <div style={{
+              color: '#4CAF50',
               fontSize: '14px',
-              fontFamily: 'monospace'
-            }}
-          />
+              fontFamily: 'monospace',
+              padding: '4px 0'
+            }}>
+              ✓ Link copied to clipboard!
+            </div>
+          ) : (
+            <input
+              ref={inputRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Name a space"
+              style={{
+                width: '100%',
+                background: 'transparent',
+                border: 'none',
+                outline: 'none',
+                color: 'white',
+                fontSize: '14px',
+                fontFamily: 'monospace'
+              }}
+            />
+          )}
         </div>
-        {filteredSpaces.length > 0 && (
+        {input.toLowerCase() === 'share' && (
+          <div style={{
+            borderTop: '1px solid #333',
+            padding: '12px',
+            color: '#4CAF50',
+            fontSize: '13px'
+          }}>
+            Press Enter to share the current space.
+          </div>
+        )}
+        {filteredSpaces.length > 0 && input.toLowerCase() !== 'share' && (
           <div style={{ borderTop: '1px solid #333', maxHeight: '200px', overflowY: 'auto' }}>
             {filteredSpaces.map((space, index) => {
               const isExisting = existingSpaces.includes(space)