From 5b65455b265705d8d0854ff270d596303dea779b Mon Sep 17 00:00:00 2001 From: posimai Date: Sat, 21 Mar 2026 20:49:14 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20toolbar=E7=B5=B1=E5=90=88=20=E2=80=94?= =?UTF-8?q?=20=E3=82=AB=E3=83=86=E3=82=B4=E3=83=AA=E3=82=BF=E3=83=96+?= =?UTF-8?q?=E6=A4=9C=E7=B4=A2+=E7=B7=A8=E9=9B=86=E3=82=921=E8=A1=8C?= =?UTF-8?q?=E3=81=AB=E3=80=81=E6=A4=9C=E7=B4=A2=E3=81=AF=E6=8A=98=E3=82=8A?= =?UTF-8?q?=E3=81=9F=E3=81=9F=E3=81=BF=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 163 ++++++++++++++++++++++++++++++----------------------- 1 file changed, 92 insertions(+), 71 deletions(-) diff --git a/index.html b/index.html index 803413f..2c39241 100644 --- a/index.html +++ b/index.html @@ -90,50 +90,25 @@ } .veil-settings-btn:active { background: var(--surface2); } - /* ── Search ── */ - .search-wrap { - padding: 8px 16px 4px; + /* ── Toolbar (カテゴリ + アクションボタン統合行) ── */ + .toolbar-wrap { position: sticky; top: 0; - z-index: 10; + z-index: 9; background: var(--bg); } - .search-wrap-inner { position: relative; } - .search-icon { - position: absolute; - left: 12px; - top: 50%; - transform: translateY(-50%); - color: var(--text3); - pointer-events: none; + .toolbar { display: flex; + align-items: center; + gap: 6px; + padding: 6px 16px; } - .search-input { - width: 100%; - box-sizing: border-box; - background: var(--surface); - border: 1px solid var(--border); - border-radius: var(--radius); - color: var(--text); - font-size: 14px; - padding: 9px 14px 9px 38px; - outline: none; - font-family: inherit; - transition: border-color 0.15s; - } - .search-input:focus { border-color: var(--accent); } - - /* ── Category tabs ── */ .cat-scroll { display: flex; gap: 6px; - padding: 8px 16px; overflow-x: auto; scrollbar-width: none; - position: sticky; - top: 52px; - z-index: 9; - background: var(--bg); + flex: 1; } .cat-scroll::-webkit-scrollbar { display: none; } .cat-btn { @@ -155,23 +130,57 @@ border-color: var(--accent); font-weight: 600; } + .toolbar-actions { + display: flex; + align-items: center; + gap: 6px; + flex-shrink: 0; + } + .toolbar-search-btn { + width: 30px; + height: 30px; + border-radius: 50%; + border: 1px solid var(--border); + background: transparent; + color: var(--text2); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + flex-shrink: 0; + transition: color 0.12s, border-color 0.12s; + } + .toolbar-search-btn.active { + color: var(--accent); + border-color: var(--accent); + } - /* ── Edit bar ── */ - .edit-bar { - display: flex; - align-items: center; - justify-content: space-between; - padding: 8px 16px 0; - min-height: 36px; - gap: 8px; + /* ── Search expand (折りたたみ) ── */ + .search-expand { + overflow: hidden; + max-height: 0; + padding: 0 16px; + transition: max-height 0.2s cubic-bezier(0.2, 0.9, 0.2, 1), + padding 0.2s cubic-bezier(0.2, 0.9, 0.2, 1); } - .edit-bar-left { - display: flex; - align-items: center; - gap: 8px; - flex: 1; + .search-expand.open { + max-height: 56px; + padding: 4px 16px 8px; } - .edit-bar-hint { font-size: 11px; color: var(--text3); } + .search-input { + width: 100%; + box-sizing: border-box; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text); + font-size: 14px; + padding: 9px 14px; + outline: none; + font-family: inherit; + transition: border-color 0.15s; + } + .search-input:focus { border-color: var(--accent); } .edit-toggle-btn { font-size: 12px; padding: 5px 12px; @@ -749,29 +758,26 @@ -
-
- - - +
+
+
+
+ + + +
+
+
-
- -
-
- - -
- -
-
@@ -1083,12 +1089,10 @@ function renderCatTabs() { // ── アプリグリッド描画 ────────────────────────────────────── function renderApps() { const container = document.getElementById('appSections'); - const hint = document.getElementById('editBarHint'); - const editBtn = document.getElementById('editToggleBtn'); - const addBtn = document.getElementById('addAppBtn'); + const editBtn = document.getElementById('editToggleBtn'); + const addBtn = document.getElementById('addAppBtn'); editBtn.classList.toggle('active', editMode); - hint.textContent = editMode ? 'タップで表示/非表示を切り替え' : ''; addBtn.classList.toggle('visible', editMode); const q = searchQ.toLowerCase(); @@ -1198,8 +1202,25 @@ document.getElementById('editToggleBtn').addEventListener('click', () => { renderApps(); }); -// ── 検索 ──────────────────────────────────────────────────── -document.getElementById('searchInput').addEventListener('input', e => { +// ── 検索（折りたたみ） ────────────────────────────────────── +const searchBtn = document.getElementById('searchBtn'); +const searchExpand = document.getElementById('searchExpand'); +const searchInput = document.getElementById('searchInput'); + +searchBtn.addEventListener('click', () => { + const open = searchExpand.classList.toggle('open'); + searchBtn.classList.toggle('active', open); + if (open) { + searchInput.focus(); + } else { + searchInput.value = ''; + searchQ = ''; + renderCatTabs(); + renderApps(); + } +}); + +searchInput.addEventListener('input', e => { searchQ = e.target.value; if (searchQ) activeCat = 'all'; renderCatTabs();