Replace the compact "Add" buttons with a plus icon

The kanban column, sidebar inbox, and add-status forms all had their
own "Add" submit button; with a column-per-status now, that's a lot of
identical labels on screen at once. Replaced with a small square "+"
icon button (.btn-icon), each keeping a descriptive title + aria-label
(dynamic, so it reads "Adding…" while the request is in flight) since
the visible glyph alone isn't an accessible name.

.btn-icon is excluded (":not(.btn-icon)") from the generic submit
button rule and the .field-row/.kanban__new compact-button overrides,
rather than out-specificity'd -- same reasoning as .field's low
specificity against input:focus: it shouldn't depend on source order
which one wins. .kanban__new's own override is now dead (both of its
two buttons are icons) and removed outright.

Left the "Add card" button on the "All tasks" tab as text -- it's a
lone, full-width primary action in a larger form, not one of several
compact icon-sized ones crowded together.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/components/AppSidebar.vue

@@ -169,7 +169,13 @@ async function onInboxChange(change: ColumnChange) {
         placeholder="New card"
         aria-label="New card"
       />
-      <button type="submit" :disabled="addingToInbox">Add</button>
+      <button
+        type="submit"
+        class="btn-icon"
+        :disabled="addingToInbox"
+        :title="addingToInbox ? 'Adding…' : 'Add card to inbox'"
+        :aria-label="addingToInbox ? 'Adding…' : 'Add card to inbox'"
+      >+</button>
     </form>
   </aside>
 </template>

web/src/components/StatusManager.vue

@@ -175,7 +175,13 @@ useDialog(computed(() => pendingDelete.value !== null), cancelReassign, reassign
         placeholder="Status name"
         aria-label="Status name"
       />
-      <button type="submit" :disabled="addingStatus">{{ addingStatus ? 'Adding…' : 'Add' }}</button>
+      <button
+        type="submit"
+        class="btn-icon"
+        :disabled="addingStatus"
+        :title="addingStatus ? 'Adding…' : 'Add status'"
+        :aria-label="addingStatus ? 'Adding…' : 'Add status'"
+      >+</button>
     </form>
     <p v-if="addStatusError" class="form-error">{{ addStatusError.message }}</p>
   </section>

web/src/style.css

@@ -824,7 +824,10 @@ h1 {
   margin-top: 0.75rem;
 }
 
-.field-row button[type='submit'] {
+/* :not(.btn-icon) -- an icon button (see below) sets its own compact size;
+   without the exclusion this would win the tie against it (same specificity,
+   later in the file) the same way ".form input" once beat "input:focus". */
+.field-row button[type='submit']:not(.btn-icon) {
   flex: none;
   padding: 0.4rem 0.7rem;
   font-size: 0.9rem;
@@ -927,13 +930,6 @@ h1 {
   margin-top: 0.6rem;
 }
 
-.kanban__new button[type="submit"] {
-  flex: none;
-  padding: 0.4rem 0.7rem;
-  font-size: 0.9rem;
-  border-radius: var(--radius-sm);
-}
-
 /* --- confirmation modal --------------------------------------------------- */
 
 .modal {
@@ -1020,7 +1016,7 @@ h1 {
   font-size: 0.9rem;
 }
 
-button[type="submit"],
+button[type="submit"]:not(.btn-icon),
 .btn-primary {
   padding: 0.6rem 1rem;
   border: none;
@@ -1037,12 +1033,40 @@ button[type="submit"],
   text-align: center;
 }
 
-button[type="submit"]:disabled,
+button[type="submit"]:disabled:not(.btn-icon),
 .btn-primary:disabled {
   opacity: var(--opacity-disabled);
   cursor: progress;
 }
 
+/* A small square icon button -- the compact "add to X" forms (a kanban
+   column, the inbox, the status list) all used a full "Add" label until
+   there were enough of them on screen at once to feel cluttered. Excluded
+   (":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
+   rather than out-specificity'd, so it isn't at the mercy of source order --
+   the same reasoning as .field's low specificity against input:focus. */
+.btn-icon {
+  flex: none;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-sm);
+  background: var(--accent);
+  color: var(--accent-text);
+  font-size: 1.1rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.btn-icon:disabled {
+  opacity: var(--opacity-disabled);
+  cursor: progress;
+}
+
 .link {
   border: none;
   background: none;

web/src/views/ProjectView.vue

@@ -252,9 +252,13 @@ async function onCreateInColumn(column: Column) {
                 placeholder="New card"
                 :aria-label="`New card in ${column.title}`"
               />
-              <button type="submit" :disabled="addingToStatusId === column.statusId">
+              <button
-                {{ addingToStatusId === column.statusId ? 'Adding…' : 'Add' }}
+                type="submit"
-              </button>
+                class="btn-icon"
+                :disabled="addingToStatusId === column.statusId"
+                :title="addingToStatusId === column.statusId ? 'Adding…' : `Add card to ${column.title}`"
+                :aria-label="addingToStatusId === column.statusId ? 'Adding…' : `Add card to ${column.title}`"
+              >+</button>
             </form>
           </section>
         </div>