From 97d6fae367f408b3e7f95a74544a0254a3b6ac66 Mon Sep 17 00:00:00 2001
From: David <dyk1454683243@gmail.com>
Date: Fri, 18 Sep 2026 06:48:02 +0000
Subject: [PATCH] fix(#9): clarify collections empty state and focus name field

Make the no-collections guide name the next click, and focus the
collection name field when the composer opens from that empty state.

Co-authored-by: David <dyk1454683243-sudo@users.noreply.github.com>
---
 CHANGELOG.md               |  2 ++
 extension/popup/popup.css  |  5 +++++
 extension/popup/popup.html | 14 ++++++++++----
 extension/popup/popup.js   | 11 +++++++++--
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e057c21..2f533a6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,8 @@ extension (`extension/manifest.json`).
 
 ### Changed
 
+- Clearer collections empty state in the popup, with focus on the name field when creating a collection
+
 ### Fixed
 
 ## [1.0.1] - 2026-08-24
diff --git a/extension/popup/popup.css b/extension/popup/popup.css
index 23d02c7..f35ea1a 100644
--- a/extension/popup/popup.css
+++ b/extension/popup/popup.css
@@ -428,6 +428,11 @@ body {
   font-size: 0.88rem;
 }
 
+.empty-guide strong {
+  color: var(--ink);
+  font-weight: 700;
+}
+
 .empty-steps {
   margin: 0 0 14px;
   padding-left: 1.2rem;
diff --git a/extension/popup/popup.html b/extension/popup/popup.html
index dcbf7ac..4441934 100644
--- a/extension/popup/popup.html
+++ b/extension/popup/popup.html
@@ -114,7 +114,7 @@ <h1 class="view-title" id="auth-title">Sign in</h1>
         <div id="collection-fields" hidden>
           <label class="field">
             <span>Name</span>
-            <input name="name">
+            <input id="collection-name" name="name" placeholder="Frontend" autocomplete="off">
           </label>
           <label class="field">
             <span>Description</span>
@@ -148,14 +148,20 @@ <h2>Start your library</h2>
           <h2 class="section-title">Collections</h2>
           <div id="collection-list" class="collection-list"></div>
           <div id="collections-empty" class="empty-guide" hidden>
+            <p class="kicker">Organize</p>
             <h3>No collections yet</h3>
-            <p>Group related bookmarks so a topic lives in one place.</p>
+            <p id="collections-empty-copy">Group related bookmarks so a topic lives in one place.</p>
             <ol class="empty-steps">
-              <li>Click Create a collection.</li>
+              <li>Click <strong>Create a collection</strong> below.</li>
               <li>Give it a name.</li>
               <li>Add bookmarks to it later.</li>
             </ol>
-            <button class="btn btn-primary btn-sm" type="button" data-start-composer="collection">Create a collection</button>
+            <button
+              class="btn btn-primary btn-sm"
+              type="button"
+              data-start-composer="collection"
+              aria-describedby="collections-empty-copy"
+            >Create a collection</button>
           </div>
         </div>
 
diff --git a/extension/popup/popup.js b/extension/popup/popup.js
index a95a67d..018116c 100644
--- a/extension/popup/popup.js
+++ b/extension/popup/popup.js
@@ -228,6 +228,13 @@ async function loadLibrary() {
   fillCollectionSelect();
 }
 
+function focusComposerField(type = composerType) {
+  const field = type === 'collection'
+    ? $('#collection-name')
+    : addForm.elements.title;
+  field?.focus();
+}
+
 function openComposer(type = 'bookmark') {
   hideCollectionComposer();
   editingBookmarkId = null;
@@ -237,8 +244,7 @@ function openComposer(type = 'bookmark') {
   setComposerType(type);
   fillCollectionSelect();
   addForm.scrollIntoView({ block: 'nearest' });
-  const focusEl = type === 'collection' ? addForm.elements.name : addForm.elements.title;
-  focusEl?.focus();
+  focusComposerField(type);
 }
 
 function openCollectionComposer() {
@@ -400,6 +406,7 @@ addForm.querySelectorAll('.composer-tab').forEach((tab) => {
   tab.addEventListener('click', () => {
     if (editingBookmarkId) return;
     setComposerType(tab.dataset.type);
+    focusComposerField(tab.dataset.type);
   });
 });