From 8212bc7391615e7d3f959f12c54d01df7cb257f8 Mon Sep 17 00:00:00 2001 From: ordinarthur <@arthurbarre.js@gmail.com> Date: Tue, 14 Apr 2026 12:52:54 +0200 Subject: [PATCH] refactor: simplify layout flow 1. Peers (available devices) 2. Pair device + Public link (side by side buttons, modals for details) 3. File drop + Text send (only when a peer is selected) 4. Transfer progress Removed the always-visible drop zone and join-code input from PeerList. Pairing and public room now open as overlay modals. Co-Authored-By: Claude Opus 4.6 --- web/src/components/DevicePairingPanel.tsx | 92 ++++++++++-------- web/src/components/PeerList.tsx | 56 +---------- web/src/components/PublicRoomPanel.tsx | 109 ++++++++++++++++------ web/src/pages/Home.tsx | 28 ++---- 4 files changed, 144 insertions(+), 141 deletions(-) diff --git a/web/src/components/DevicePairingPanel.tsx b/web/src/components/DevicePairingPanel.tsx index 0438d7e..2b0fb7c 100644 --- a/web/src/components/DevicePairingPanel.tsx +++ b/web/src/components/DevicePairingPanel.tsx @@ -22,50 +22,60 @@ export default function DevicePairingPanel() { const pairUrl = groupId ? `${BASE_URL}/pair?g=${groupId}` : ""; - if (showQR && groupId) { - return ( -
-

- Ajouter un appareil -

+ return ( + <> + -

- Scannez ce QR code depuis votre autre appareil -

+ {showQR && groupId && ( +
setShowQR(false)} + > +
e.stopPropagation()} + > +

+ Appairer un appareil +

-
-
- +

+ Scannez ce QR code depuis votre autre appareil +

+ +
+
+ +
+
+ +

+ Appairage permanent — vos appareils se verront toujours, + sur n'importe quel réseau. +

+ +
- -

- L'appairage est permanent — vos appareils se verront toujours, - même sur des réseaux différents. -

- - -
- ); - } - - return ( - + )} + ); } diff --git a/web/src/components/PeerList.tsx b/web/src/components/PeerList.tsx index 6a4be42..3529f2a 100644 --- a/web/src/components/PeerList.tsx +++ b/web/src/components/PeerList.tsx @@ -1,16 +1,13 @@ -import { useState } from "react"; import { useStore } from "../stores/useStore"; import PeerAvatar from "./PeerAvatar"; interface PeerListProps { onPeerSelect: (peerId: string) => void; - onCreateRoom?: () => void; } -export default function PeerList({ onPeerSelect, onCreateRoom }: PeerListProps) { +export default function PeerList({ onPeerSelect }: PeerListProps) { const peers = useStore((s) => s.peers); const selectedPeerId = useStore((s) => s.selectedPeerId); - const [joinCode, setJoinCode] = useState(""); if (peers.length === 0) { return ( @@ -18,56 +15,9 @@ export default function PeerList({ onPeerSelect, onCreateRoom }: PeerListProps)
📡

En attente d'appareils...

- Ouvrez AnyDrop sur un autre appareil connecté au même Wi-Fi. + Ouvrez AnyDrop sur un autre appareil connecté au même Wi-Fi, + ou appairez vos appareils ci-dessous.

- -
-

Pas sur le même réseau ?

- - {onCreateRoom && ( - - )} - -
- setJoinCode(e.target.value.toLowerCase().trim())} - placeholder="Code de partage" - maxLength={4} - className="flex-1 px-3 py-2.5 bg-slate-800/50 border border-slate-700 - rounded-xl text-white text-sm text-center font-mono tracking-widest - placeholder:text-slate-600 focus:outline-none focus:border-brand-500" - onKeyDown={(e) => { - if (e.key === "Enter" && joinCode.length >= 3) { - window.location.href = `/${joinCode}`; - } - }} - /> - -
-
); } diff --git a/web/src/components/PublicRoomPanel.tsx b/web/src/components/PublicRoomPanel.tsx index 822fe11..4ca07b2 100644 --- a/web/src/components/PublicRoomPanel.tsx +++ b/web/src/components/PublicRoomPanel.tsx @@ -1,3 +1,4 @@ +import { useState } from "react"; import { QRCodeSVG } from "qrcode.react"; import { useStore } from "../stores/useStore"; @@ -8,54 +9,104 @@ interface PublicRoomPanelProps { export default function PublicRoomPanel({ onCreateRoom }: PublicRoomPanelProps) { const publicRoomCode = useStore((s) => s.publicRoomCode); const publicRoomUrl = useStore((s) => s.publicRoomUrl); + const [showModal, setShowModal] = useState(false); - if (!publicRoomCode || !publicRoomUrl) { - return ( + const handleClick = () => { + if (publicRoomCode && publicRoomUrl) { + setShowModal(true); + } else { + onCreateRoom(); + setShowModal(true); + } + }; + + return ( + <> - ); - } + {showModal && ( + setShowModal(false)} + /> + )} + + ); +} + +function PublicRoomModal({ + code, + url, + onClose, +}: { + code: string | null; + url: string | null; + onClose: () => void; +}) { const copyToClipboard = () => { - navigator.clipboard.writeText(publicRoomUrl); + if (url) navigator.clipboard.writeText(url); }; return ( -
-

- Lien public -

+
+
e.stopPropagation()} + > +

Lien public

-
-
- -
-
+ {!code || !url ? ( +

Création en cours...

+ ) : ( + <> +
+
+ +
+
+ +
+

+ {code.toUpperCase()} +

+ +
+ +

+ Partagez ce lien pour recevoir des fichiers de n'importe qui. + Expire dans 10 minutes. +

+ + )} -
-

- {publicRoomCode.toUpperCase()} -

- -

- Partagez ce QR code ou ce lien pour recevoir des fichiers de n'importe qui. -

); } diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index 38a4da6..e3b2926 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -123,19 +123,21 @@ function HomeConnected() {
)} - {/* Peer list */} + {/* 1. Appareils disponibles */}
- +
- {/* Drop zone */} -
- + {/* 2. Appairage + Lien public */} +
+ +
- {/* Text share button */} + {/* 3. Envoi fichiers + texte (seulement quand un peer est sélectionné) */} {selectedPeerId && ( -
+
+
)} - {/* Transfer progress */} + {/* 4. Transferts en cours */}
- {/* Device pairing */} -
- -
- - {/* Public room */} -
- -
- {/* Footer */}