fix(posimai-dev): icon-only Claude btn, slim scrollbar, move session badge to chat bar

- Claude 開始 → bot icon only (32x32, same style as settings btn)
- xterm-viewport scrollbar: 4px, translucent violet, rounded
- session badge moved from header to chat bar left edge (mobile-friendly)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
posimai 2026-03-31 00:48:41 +09:00
parent 1a00108255
commit 170dfaa7e0
1 changed files with 17 additions and 11 deletions

View File

@ -74,19 +74,20 @@
} }
.status-badge.disconnected { background: rgba(239,68,68,0.12); color: #F87171; } .status-badge.disconnected { background: rgba(239,68,68,0.12); color: #F87171; }
/* セッションバッジ(チャットバー内) */
.session-badge { .session-badge {
font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.3); font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.25);
font-family: monospace; display: none; font-family: monospace; display: none; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis; max-width: 180px;
} }
.session-badge.visible { display: block; } .session-badge.visible { display: block; }
/* Claude開始ボタン */ /* Claude開始ボタン — アイコンのみ */
.claude-btn { .claude-btn {
display: flex; align-items: center; gap: 6px; width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
padding: 5px 12px; border-radius: 8px; border: none; cursor: pointer;
background: var(--accent-dim); color: var(--accent); background: var(--accent-dim); color: var(--accent);
font-size: 12px; font-weight: 500; font-family: Inter, sans-serif; display: flex; align-items: center; justify-content: center;
transition: background 0.15s; flex-shrink: 0; transition: background 0.15s;
} }
.claude-btn:hover { background: rgba(167,139,250,0.25); } .claude-btn:hover { background: rgba(167,139,250,0.25); }
@ -104,6 +105,12 @@
#terminal-container .xterm { height: 100%; } #terminal-container .xterm { height: 100%; }
#terminal-container .xterm-viewport { border-radius: 8px 8px 0 0; } #terminal-container .xterm-viewport { border-radius: 8px 8px 0 0; }
/* スクロールバー — 細く・半透明 */
.xterm-viewport::-webkit-scrollbar { width: 4px; }
.xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.xterm-viewport::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.25); border-radius: 2px; }
.xterm-viewport::-webkit-scrollbar-thumb:hover { background: rgba(167,139,250,0.5); }
/* ── Chat input bar ── */ /* ── Chat input bar ── */
.chat-bar { .chat-bar {
display: flex; display: flex;
@ -180,12 +187,10 @@
<div class="header-dot" aria-hidden="true"></div> <div class="header-dot" aria-hidden="true"></div>
<span class="header-title">posimai-dev</span> <span class="header-title">posimai-dev</span>
<span class="status-badge disconnected" id="statusBadge">接続中...</span> <span class="status-badge disconnected" id="statusBadge">接続中...</span>
<span class="session-badge" id="sessionBadge"></span>
</div> </div>
<div class="header-right"> <div class="header-right">
<button class="claude-btn" id="claudeBtn"> <button class="claude-btn" id="claudeBtn" aria-label="Claude 開始">
<i data-lucide="bot" style="width:13px;height:13px;stroke-width:1.75"></i> <i data-lucide="bot" style="width:15px;height:15px;stroke-width:1.75"></i>
Claude 開始
</button> </button>
<button class="icon-btn" id="settingsBtn" aria-label="設定" aria-expanded="false"> <button class="icon-btn" id="settingsBtn" aria-label="設定" aria-expanded="false">
<i data-lucide="settings" style="width:18px;height:18px;stroke-width:1.5"></i> <i data-lucide="settings" style="width:18px;height:18px;stroke-width:1.5"></i>
@ -196,6 +201,7 @@
<div id="terminal-container"></div> <div id="terminal-container"></div>
<div class="chat-bar"> <div class="chat-bar">
<span class="session-badge" id="sessionBadge"></span>
<input <input
type="text" type="text"
class="chat-input" class="chat-input"