Improve the empty state when no collections exist

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

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;

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>
 

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);
   });
 });