Improve collection filing and sidebar moves (#212)

* feat: improve collection filing workflows

* fix: expand sidebar group drop targets

* fix: use explicit collection drag handles

* fix: use pointer-driven collection moves

* feat: show collection drag preview

* fix: prevent stale collection move undo

* fix: make collection moves keyboard accessible

* fix: serialize collection move persistence

* fix: avoid sidebar shift during drag

* fix: restore focus after closing move menu

Author: silverbucket

packages/web/src/components/CollectionPicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Collection } from '@inbox-rs/rs-module';
+  import type { Collection, CollectionGroup } from '@inbox-rs/rs-module';
   import { get } from 'svelte/store';
   import {
     appConfig,
@@ -9,6 +9,7 @@
     items,
     orphanCollections,
     sortedGroups,
+    storeGroup,
     updateConfig,
   } from '../lib/stores';
   import {
@@ -43,6 +44,8 @@
   let createName = $state('');
   let creating = $state(false);
   let createError = $state('');
+  let creatingNewGroup = $state(false);
+  let createGroupName = $state('');
 
   // Autofocusing the search field pops the keyboard over half the sheet on
   // touch devices — desktop-only.
@@ -128,28 +131,43 @@
   function openCreate() {
     createName = query.trim();
     createGroupId = pickInitialGroupId();
+    creatingNewGroup = get(sortedGroups).length === 0;
+    createGroupName = '';
     createError = '';
     showCreate = true;
   }
 
   async function handleCreate() {
     const name = createName.trim();
-    if (!name || !createGroupId || creating) return;
+    const groupName = createGroupName.trim();
+    if (!name || creating || (creatingNewGroup ? !groupName : !createGroupId)) return;
     creating = true;
     createError = '';
     try {
+      let destinationGroupId = createGroupId;
+      if (creatingNewGroup) {
+        const group: CollectionGroup = {
+          id: crypto.randomUUID(),
+          name: groupName,
+          collectionIds: [],
+          createdAt: new Date().toISOString(),
+          color: randomPresetColor(),
+        };
+        await storeGroup(group);
+        destinationGroupId = group.id;
+      }
       const col: Collection = {
         id: crypto.randomUUID(),
         name,
         itemIds: [],
         createdAt: new Date().toISOString(),
         color: randomPresetColor(),
-        groupId: createGroupId,
+        groupId: destinationGroupId,
       };
       await createCollection(col);
       // Remember the group like CollectionFormModal does — best-effort.
       try {
-        await updateConfig({ lastSelectedGroupId: createGroupId });
+        await updateConfig({ lastSelectedGroupId: destinationGroupId });
       } catch (e) {
         console.error('Failed to persist lastSelectedGroupId', e);
       }
@@ -231,17 +249,45 @@
           }}
         />
         {#if $sortedGroups.length > 0}
-          <select
-            class="create-select"
-            aria-label="Group"
-            bind:value={createGroupId}
-          >
-            {#each $sortedGroups as g (g.id)}
-              <option value={g.id}>{g.name}</option>
-            {/each}
-          </select>
+          {#if creatingNewGroup}
+            <input
+              type="text"
+              class="create-input"
+              bind:value={createGroupName}
+              placeholder="Group name"
+              aria-label="New group name"
+              onkeydown={(e) => {
+                if (e.key === 'Enter') handleCreate();
+              }}
+            />
+            <button type="button" class="group-switch" onclick={() => (creatingNewGroup = false)}>
+              Choose an existing group
+            </button>
+          {:else}
+            <select
+              class="create-select"
+              aria-label="Group"
+              bind:value={createGroupId}
+            >
+              {#each $sortedGroups as g (g.id)}
+                <option value={g.id}>{g.name}</option>
+              {/each}
+            </select>
+            <button type="button" class="group-switch" onclick={() => (creatingNewGroup = true)}>
+              Create a new group
+            </button>
+          {/if}
         {:else}
-          <p class="empty">No groups yet — create one in the filter bar first.</p>
+          <input
+            type="text"
+            class="create-input"
+            bind:value={createGroupName}
+            placeholder="Group name"
+            aria-label="New group name"
+            onkeydown={(e) => {
+              if (e.key === 'Enter') handleCreate();
+            }}
+          />
         {/if}
         {#if createError}
           <p class="error" role="status" aria-live="polite">{createError}</p>
@@ -255,7 +301,7 @@
           <button
             type="button"
             class="btn-create"
-            disabled={!createName.trim() || !createGroupId || creating}
+            disabled={!createName.trim() || (creatingNewGroup ? !createGroupName.trim() : !createGroupId) || creating}
             onclick={handleCreate}
           >
             {creating ? 'Creating…' : 'Create & file'}
@@ -690,6 +736,17 @@
     margin-top: 0.2rem;
   }
 
+  .group-switch {
+    align-self: flex-start;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--accent);
+    font: inherit;
+    font-size: 0.82rem;
+    cursor: pointer;
+  }
+
   .btn-cancel {
     background: none;
     border: 1px solid var(--border);

packages/web/src/components/CollectionPicker.svelte.test.ts

@@ -14,11 +14,18 @@ vi.mock('../lib/stores', async () => {
     items: writable({}),
     orphanCollections: writable([]),
     sortedGroups: writable([]),
+    storeGroup: vi.fn().mockResolvedValue(undefined),
     updateConfig: vi.fn().mockResolvedValue(undefined),
   };
 });
 
-import { groupCollections, groups, sortedGroups } from '../lib/stores';
+import {
+  createCollection,
+  groupCollections,
+  groups,
+  sortedGroups,
+  storeGroup,
+} from '../lib/stores';
 import CollectionPicker from './CollectionPicker.svelte';
 
 const writableStore = <T>(store: unknown) => store as Writable<T>;
@@ -28,6 +35,10 @@ describe('CollectionPicker', () => {
   let component: ReturnType<typeof mount> | undefined;
 
   beforeEach(() => {
+    vi.clearAllMocks();
+    writableStore<Record<string, CollectionGroup>>(groups).set({});
+    writableStore<CollectionGroup[]>(sortedGroups).set([]);
+    writableStore<Record<string, Collection[]>>(groupCollections).set({});
     localStorage.clear();
     host = document.createElement('div');
     document.body.appendChild(host);
@@ -100,4 +111,33 @@ describe('CollectionPicker', () => {
       suggestedRows[1]?.querySelector('.suggestion-group')?.textContent.trim(),
     ).toBe('Personal');
   });
+
+  it('creates a group and collection together when filing without groups', async () => {
+    const onpick = vi.fn();
+    component = mount(CollectionPicker, {
+      target: host,
+      props: { item: { title: 'First item' }, onpick, onclose: vi.fn() },
+    });
+    flushSync();
+
+    host.querySelector<HTMLButtonElement>('.create-option')?.click();
+    flushSync();
+    const inputs = host.querySelectorAll<HTMLInputElement>('.create-input');
+    inputs[0]!.value = 'Reading';
+    inputs[0]!.dispatchEvent(new Event('input', { bubbles: true }));
+    inputs[1]!.value = 'Personal';
+    inputs[1]!.dispatchEvent(new Event('input', { bubbles: true }));
+    flushSync();
+    host.querySelector<HTMLButtonElement>('.btn-create')?.click();
+    await vi.waitFor(() => expect(onpick).toHaveBeenCalledOnce());
+
+    expect(storeGroup).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'Personal' }),
+    );
+    const createdGroup = vi.mocked(storeGroup).mock.calls[0]![0];
+    expect(createCollection).toHaveBeenCalledWith(
+      expect.objectContaining({ name: 'Reading', groupId: createdGroup.id }),
+    );
+    expect(onpick).toHaveBeenCalledWith(expect.any(String));
+  });
 });