fix(ext/popup): replace item type dropdown with selection view

Clicking "+ new" now navigates to a type selection view instead of
showing a dropdown that gets clipped by popup bounds. The selection
view displays all item types as buttons in a scrollable list.

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

extension/src/popup/components/item-list.ts

@@ -67,9 +67,9 @@ export function renderItemList(app: HTMLElement): void {
     setState({ searchQuery: searchInput.value, selectedIndex: 0 });
   });
 
-  document.getElementById('new-btn')?.addEventListener('click', (e) => {
-    e.stopPropagation();
-    showNewTypePicker(e.currentTarget as HTMLElement);
+  document.getElementById('new-btn')?.addEventListener('click', () => {
+    setState({ newType: null });
+    navigate('add');
   });
 
   document.getElementById('sync-btn')?.addEventListener('click', async () => {
@@ -249,12 +249,20 @@ function showNewTypePicker(anchor: HTMLElement): void {
     boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
     padding: '4px',
     minWidth: '160px',
+    maxHeight: '280px',
+    overflowY: 'auto',
     zIndex: '999999',
     fontSize: '12px',
   });
 
   const rect = anchor.getBoundingClientRect();
-  picker.style.top = `${rect.bottom + 4}px`;
+  const dropdownHeight = 220; // approx height for 7 items
+  const spaceBelow = window.innerHeight - rect.bottom;
+  if (spaceBelow < dropdownHeight && rect.top > dropdownHeight) {
+    picker.style.bottom = `${window.innerHeight - rect.top + 4}px`;
+  } else {
+    picker.style.top = `${rect.bottom + 4}px`;
+  }
   picker.style.left = `${rect.left}px`;
 
   for (const opt of NEW_TYPE_OPTIONS) {