From 6186431c3c39ea74a8eba41da4944d4c0e7d89aa Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 11 Jan 2026 02:20:55 +0000 Subject: [PATCH 1/8] feat(ui): simplify mobile receiver view for better first impression - Hide copy buttons for receiver (they accessed via link anyway) - Show compact room ID instead of large heading for receivers - Replace full sidebar with inline compact status bar for receivers - Make step guide more prominent and centered for receivers - Add responsive styles for mobile receiver experience --- public/style.css | 122 +++++++++++++++++++++++++++++++++++++++++++- src/client/room.tsx | 62 +++++++++++++--------- src/ui/room.tsx | 6 +-- 3 files changed, 163 insertions(+), 27 deletions(-) diff --git a/public/style.css b/public/style.css index 75daeff..c96ea9f 100644 --- a/public/style.css +++ b/public/style.css @@ -546,7 +546,7 @@ input[type="checkbox"] { .stepProgress { display: flex; gap: 4px; - margin-top: 16px; + margin-bottom: 12px; } .stepDot { @@ -763,3 +763,123 @@ input[type="checkbox"] { font-size: 28px; } } + +/* ===== Receiver Mode Styles ===== */ + +/* Compact header for receiver */ +.roomHeader.compact { + padding: 16px 24px; + border-bottom: var(--border); +} + +.roomIdCompact { + margin: 4px 0; +} + +/* Receiver layout: no sidebar column */ +.roomGrid.receiverLayout { + grid-template-columns: 1fr; +} + +/* Compact inline sidebar for receiver */ +.roomSideCompact { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 24px; + border-bottom: var(--border); + background: rgba(0, 0, 0, 0.02); +} + +.sideDot { + width: 4px; + height: 4px; + background: var(--gray); + border-radius: 50%; +} + +/* Receiver step guide: larger and more prominent */ +.stepGuide.receiverGuide { + padding: 32px; + text-align: center; +} + +.stepGuide.receiverGuide .stepProgress { + justify-content: center; + margin-bottom: 16px; +} + +.stepGuide.receiverGuide .stepDot { + width: 32px; + height: 6px; +} + +.stepGuide.receiverGuide .stepLabel { + margin-bottom: 12px; +} + +.stepGuide.receiverGuide .stepMain { + font-size: 36px; +} + +.stepGuide.receiverGuide .stepSub { + font-size: 14px; + margin-top: 12px; + max-width: 320px; + margin-left: auto; + margin-right: auto; +} + +/* Receiver pane centered */ +.receiverMode .roomMain { + padding: 24px; +} + +.receiverMode #receiverPane { + text-align: center; + padding: 24px 0; +} + +.receiverMode #receiverPane .muted { + font-size: 14px; +} + +.receiverMode #downloadArea { + flex-direction: column; + text-align: center; + padding: 32px; +} + +.receiverMode #downloadArea .btn { + width: 100%; + max-width: 280px; + justify-content: center; +} + +/* Mobile receiver: even more compact */ +@media (max-width: 600px) { + .roomHeader.compact { + padding: 12px 16px; + } + + .roomSideCompact { + padding: 10px 16px; + font-size: 11px; + } + + .stepGuide.receiverGuide { + padding: 24px 16px; + } + + .stepGuide.receiverGuide .stepMain { + font-size: 28px; + } + + .stepGuide.receiverGuide .stepSub { + font-size: 12px; + } + + .receiverMode .roomMain { + padding: 16px; + } +} diff --git a/src/client/room.tsx b/src/client/room.tsx index e0ae5eb..90e09f2 100644 --- a/src/client/room.tsx +++ b/src/client/room.tsx @@ -768,38 +768,51 @@ function RoomApp({ roomId, maxConcurrent }: RoomAppProps) { .replace("{total}", "4"); return ( -
-
+
+
{t.room.eyebrow}
-

- {t.room.roomLabel} {roomId} -

+ {showReceiver ? ( +
+ {t.room.roomLabel} {roomId} +
+ ) : ( +

+ {t.room.roomLabel} {roomId} +

+ )}
{status}
-
- - -
+ {showSender && ( +
+ + +
+ )}
-
-
-
-
{t.room.roleLabel}
-
{roleLabel}
-
{t.room.peersLabel}
-
{peersLabel}
+
+ {showReceiver ? ( +
+ {roleLabel} + + {t.room.peersLabel} {peersLabel}
-
{t.room.encryptHint}
-
{maxConcurrentLabel}
-
+ ) : ( +
+
+
{t.room.roleLabel}
+
{roleLabel}
+
{t.room.peersLabel}
+
{peersLabel}
+
+
{t.room.encryptHint}
+
{maxConcurrentLabel}
+
+ )}
-
-
{stepLabel}
-
{guideState.main}
-
{guideState.sub}
+
{[1, 2, 3, 4].map((n) => (
))}
+
{stepLabel}
+
{guideState.main}
+
{guideState.sub}
diff --git a/src/ui/room.tsx b/src/ui/room.tsx index 2f4b1bb..60e2545 100644 --- a/src/ui/room.tsx +++ b/src/ui/room.tsx @@ -52,15 +52,15 @@ export function RoomPage({ roomId, maxConcurrent, t, locale }: RoomPageProps) {
-
{initialStepLabel}
-
{t.guide.receiverConnecting}
-
{t.guide.receiverConnectingSub}
+
{initialStepLabel}
+
{t.guide.receiverConnecting}
+
{t.guide.receiverConnectingSub}