Skip to content

Commit 9e43d3d

Browse files
BunsDevBunsDev
committed
fix: collapse mobile connect section by default — hide URL, QR, password until expanded
1 parent d529116 commit 9e43d3d

1 file changed

Lines changed: 44 additions & 48 deletions

File tree

‎components/settings-panel.tsx‎

Lines changed: 44 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { motion, AnimatePresence } from 'framer-motion'
66
import { MobileConnect } from './mobile-connect'
77
import { SessionPresence } from './session-presence'
88
import { CaffeinateToggle } from './caffeinate-toggle'
9+
import { KnotLogo } from './knot-logo'
910
import { useGateway } from '@/context/gateway-context'
1011
import { useGitHubAuth } from '@/context/github-auth-context'
1112
import { fetchAuthenticatedUser, startDeviceFlow, pollDeviceFlow, fetchUserRepos, type GitHubUser, type Repo } from '@/lib/github-api'
@@ -66,6 +67,7 @@ export function SettingsPanel({
6667
const [loadingRepos, setLoadingRepos] = useState(false)
6768
const [repoSearch, setRepoSearch] = useState('')
6869
const [showGatewayUrl, setShowGatewayUrl] = useState(false)
70+
const [connectExpanded, setConnectExpanded] = useState(false)
6971

7072
// Fetch GitHub user on token change
7173
const ghTokenRef = useRef(ghToken)
@@ -248,58 +250,52 @@ export function SettingsPanel({
248250
<div className="flex-1 overflow-y-auto px-4 py-5 sm:py-5">
249251
{tab === 'connect' && (
250252
<div className="space-y-5">
251-
<MobileConnect />
252-
<SessionPresence />
253-
253+
{/* Collapsed connect summary */}
254254
<section className="rounded-[24px] border border-[var(--glass-border)] bg-[color-mix(in_srgb,var(--bg-elevated)_88%,transparent)] p-4 shadow-[var(--shadow-sm)]">
255-
<div className="mb-4 flex items-center gap-2">
256-
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] text-[var(--brand)]">
257-
<Icon icon="lucide:activity" width={14} />
258-
</span>
259-
<div>
260-
<h3 className="text-sm font-medium text-[var(--text-primary)]">
261-
Gateway
262-
</h3>
263-
<p className="text-[11px] text-[var(--text-secondary)]">
264-
Connection state for the local app bridge.
265-
</p>
266-
</div>
267-
</div>
268-
269-
<div className="space-y-3 text-xs">
270-
<div className="flex items-center justify-between gap-3">
271-
<span className="text-[var(--text-secondary)]">Status</span>
272-
<span
273-
className={`inline-flex items-center gap-2 rounded-full px-2.5 py-1 font-medium ${
274-
status === 'connected'
275-
? 'bg-[color-mix(in_srgb,var(--success)_14%,transparent)] text-[var(--success)]'
276-
: status === 'connecting'
277-
? 'bg-[color-mix(in_srgb,var(--warning)_14%,transparent)] text-[var(--warning)]'
278-
: 'bg-[color-mix(in_srgb,var(--text-primary)_6%,transparent)] text-[var(--text-secondary)]'
279-
}`}
280-
>
281-
<span className="h-1.5 w-1.5 rounded-full bg-current" />
282-
{status === 'connected'
283-
? 'Connected'
284-
: status === 'connecting'
285-
? 'Connecting'
286-
: 'Disconnected'}
255+
<button
256+
onClick={() => setConnectExpanded(v => !v)}
257+
className="w-full flex items-center justify-between cursor-pointer"
258+
>
259+
<div className="flex items-center gap-2">
260+
<span className="flex h-8 w-8 items-center justify-center rounded-2xl bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] text-[var(--brand)]">
261+
<Icon icon="lucide:activity" width={14} />
287262
</span>
263+
<div className="text-left">
264+
<h3 className="text-sm font-medium text-[var(--text-primary)]">Gateway</h3>
265+
<p className="text-[11px] text-[var(--text-secondary)]">
266+
{status === 'connected' ? 'Connected' : status === 'connecting' ? 'Connecting…' : 'Disconnected'}
267+
</p>
268+
</div>
288269
</div>
270+
<div className="flex items-center gap-2">
271+
<span className={`h-2 w-2 rounded-full ${status === 'connected' ? 'bg-[var(--success)]' : status === 'connecting' ? 'bg-[var(--warning)]' : 'bg-[var(--text-disabled)]'}`} />
272+
<Icon icon={connectExpanded ? 'lucide:chevron-up' : 'lucide:chevron-down'} width={14} className="text-[var(--text-disabled)]" />
273+
</div>
274+
</button>
289275

290-
{gatewayUrl && (
291-
<div className="flex items-start justify-between gap-3">
292-
<span className="pt-0.5 text-[var(--text-secondary)]">Gateway</span>
293-
<button
294-
onClick={() => setShowGatewayUrl(v => !v)}
295-
className="max-w-[220px] truncate rounded-full border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] px-2.5 py-1 font-mono text-[11px] text-[var(--text-primary)] cursor-pointer hover:border-[var(--text-disabled)] transition-colors"
296-
>
297-
{showGatewayUrl ? gatewayUrl : '••••••••'}
298-
</button>
276+
{connectExpanded && (
277+
<div className="mt-4 space-y-4">
278+
<div className="space-y-3 text-xs">
279+
{gatewayUrl && (
280+
<div className="flex items-start justify-between gap-3">
281+
<span className="pt-0.5 text-[var(--text-secondary)]">URL</span>
282+
<button
283+
onClick={(e) => { e.stopPropagation(); setShowGatewayUrl(v => !v) }}
284+
className="max-w-[220px] truncate rounded-full border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] px-2.5 py-1 font-mono text-[11px] text-[var(--text-primary)] cursor-pointer hover:border-[var(--text-disabled)] transition-colors"
285+
>
286+
{showGatewayUrl ? gatewayUrl : '••••••••'}
287+
</button>
288+
</div>
289+
)}
299290
</div>
300-
)}
301-
</div>
291+
<div className="border-t border-[var(--border)] pt-4">
292+
<MobileConnect />
293+
</div>
294+
</div>
295+
)}
302296
</section>
297+
298+
<SessionPresence />
303299
</div>
304300
)}
305301

@@ -576,7 +572,7 @@ export function SettingsPanel({
576572
<section className="rounded-[24px] border border-[var(--glass-border)] bg-[color-mix(in_srgb,var(--bg-elevated)_88%,transparent)] p-4 shadow-[var(--shadow-sm)]">
577573
<div className="flex items-center gap-3">
578574
<span className="flex h-10 w-10 items-center justify-center rounded-[18px] bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] text-[var(--brand)]">
579-
<Icon icon="lucide:chevron-left-dot" width={20} />
575+
<KnotLogo size={22} />
580576
</span>
581577
<div>
582578
<div className="text-sm font-semibold text-[var(--text-primary)]">
@@ -828,7 +824,7 @@ export function SettingsPanel({
828824
<section className="rounded-[24px] border border-[var(--glass-border)] bg-[color-mix(in_srgb,var(--bg-elevated)_88%,transparent)] p-4 shadow-[var(--shadow-sm)]">
829825
<div className="flex items-center gap-3">
830826
<span className="flex h-10 w-10 items-center justify-center rounded-[18px] bg-[color-mix(in_srgb,var(--brand)_12%,transparent)] text-[var(--brand)]">
831-
<Icon icon="lucide:chevron-left-dot" width={20} />
827+
<KnotLogo size={22} />
832828
</span>
833829
<div>
834830
<div className="text-sm font-semibold text-[var(--text-primary)]">

0 commit comments

Comments
 (0)