feat(panel): collapse connection form when connected; add Disconnect button

On startup the full form shows. On successful connect the form hides and a
compact connected-bar appears with the server hostname and a Disconnect button.
This commit is contained in:
Zac Gaetano 2026-05-27 19:21:38 -04:00
parent e5c9c770d0
commit 552506ec7a

View file

@ -8,8 +8,8 @@
</head> </head>
<body> <body>
<div id="panel-container"> <div id="panel-container">
<!-- Connection Bar --> <!-- Connection Form: shown when disconnected (startup) -->
<div class="connection-bar"> <div id="connection-form" class="connection-bar">
<div class="connection-controls connection-controls--stacked"> <div class="connection-controls connection-controls--stacked">
<div class="server-input-row"> <div class="server-input-row">
<input <input
@ -35,6 +35,15 @@
</div> </div>
</div> </div>
<!-- Connected Bar: compact strip shown only when connected -->
<div id="connected-bar" class="connected-bar hidden">
<div class="connected-bar-status">
<div class="status-indicator connected"></div>
<span id="connected-host" class="connected-host"></span>
</div>
<button id="disconnect-btn" class="btn btn-ghost btn-sm">Disconnect</button>
</div>
<!-- Tab Navigation --> <!-- Tab Navigation -->
<div class="tab-nav"> <div class="tab-nav">
<button id="tab-library" class="tab-btn active"> <button id="tab-library" class="tab-btn active">