popover for "new" thingies

e2e/snapshots.test.ts

@@ -23,3 +23,12 @@ test('inbox page snapshot should be accessible', async ({ page }) => {
 
   await expect(page.getByRole('main')).toMatchAriaSnapshot({ name: 'inbox.aria.yaml' });
 });
+
+test('area page snapshot should be accessible', async ({ page }) => {
+  await start(page);
+
+  await addArea(page, 'Gardening');
+  await page.getByRole('link', { name: 'Gardening' }).click();
+
+  await expect(page.getByRole('main')).toMatchAriaSnapshot({ name: 'area.aria.yaml' });
+});

e2e/snapshots.test.ts-snapshots/area-aria.yaml

@@ -0,0 +1,4 @@
+- main:
+  - heading "Gardening Options" [level=1]:
+    - button "Options"
+  - paragraph

e2e/snapshots.test.ts-snapshots/nav-aria.yaml

@@ -13,6 +13,5 @@
         - link "Home"
       - listitem:
         - link "Work"
-  - button "Add item"
-  - button "Add area"
+  - button "New item"
   - text: Not signed in!

e2e/utils.ts

@@ -9,13 +9,15 @@ export async function goToInbox(page: Page) {
 }
 
 export async function quickAdd(page: Page, text: string) {
-  await page.getByRole('button', { name: 'Add item' }).click();
+  await page.getByRole('button', { name: 'New item' }).click();
+  await page.getByRole('button', { name: 'Quick add' }).click();
 
   await page.getByPlaceholder('What needs doing?').fill(text);
   await page.getByPlaceholder('What needs doing?').press('Enter');
 }
 
 export async function addArea(page: Page, text: string) {
+  await page.getByRole('button', { name: 'New item' }).click();
   await page.getByRole('button', { name: 'Add area' }).click();
 
   await page.getByLabel('Title').fill(text);

src/lib/components/Sidebar.svelte

@@ -6,6 +6,7 @@
   import QuickAdd from './QuickAdd.svelte';
   import AreaForm from './AreaForm.svelte';
   import Grid_2x2Plus from '@lucide/svelte/icons/grid-2x2-plus';
+  import { popover } from '$lib/popover';
 
   let account = new AccountCoState(Account, {
     resolve: {
@@ -26,6 +27,9 @@
 
   let quickAdd: HTMLDialogElement;
   let newArea: HTMLDialogElement;
+
+  let id = $props.id();
+  let addId = `add-${id}`;
 </script>
 
 {#snippet link(
@@ -80,7 +84,7 @@
             {@render link(
               `/area/${area.$jazz.id}`,
               area.title?.toString(),
-              page.route.id === `/area/${area.$jazz.id}`,
+              page.route.id === '/area/[id]' && page.params.id === area.$jazz.id,
               Grid2x2,
               'text-surface-300-700',
               area.projects.length > 0 ? area.projects.length.toString() : '',
@@ -93,14 +97,9 @@
   <div
     class="flex shrink-1 items-center justify-between border-t border-gray-200 bg-gray-100 p-4 dark:border-gray-800 dark:bg-gray-900"
   >
-    <button class="btn" onclick={() => quickAdd.showModal()}>
+    <button class="btn-icon btn" popovertarget={addId}>
       <CirclePlus class="w-4 text-success-500" aria-hidden="true" />
-      <span class="sr-only">Add item</span>
-    </button>
-
-    <button class="btn" onclick={() => newArea.showModal()}>
-      <Grid_2x2Plus class="w-4 text-success-500" aria-hidden="true" />
-      <span class="sr-only">Add area</span>
+      <span class="sr-only">New item</span>
     </button>
 
     {#if root && account.isAuthenticated}
@@ -114,6 +113,20 @@
   </div>
 </header>
 
+<div id={addId} class="rounded-base" {@attach popover}>
+  <div class="flex flex-col gap-2 p-2">
+    <button class="btn" onclick={() => quickAdd.showModal()}>
+      <Inbox class="w-4 text-success-500" aria-hidden="true" />
+      Quick add
+    </button>
+
+    <button class="btn" onclick={() => newArea.showModal()}>
+      <Grid_2x2Plus class="w-4 text-success-500" aria-hidden="true" />
+      Add area
+    </button>
+  </div>
+</div>
+
 <dialog
   bind:this={quickAdd}
   closedby="any"

src/lib/components/SingleTask.svelte

@@ -56,7 +56,8 @@
 
   <input
     type="checkbox"
-    bind:checked={task.completed}
+    checked={task.completed}
+    onchange={(ev) => task.$jazz.set('completed', ev.currentTarget.checked)}
     aria-label="Mark {task.title} {task.completed ? 'incomplete' : 'complete'}"
     class="order-1"
   />
@@ -112,7 +113,8 @@
 
       <input
         type="checkbox"
-        bind:checked={task.completed}
+        checked={task.completed}
+        onchange={(ev) => task.$jazz.set('completed', ev.currentTarget.checked)}
         aria-label="Mark {task.title} {task.completed ? 'incomplete' : 'complete'}"
         class="order-1"
       />
@@ -127,7 +129,8 @@
             class="input"
             min="0"
             placeholder="Blocks"
-            bind:value={task.plannedBlocks}
+            value={task.plannedBlocks}
+            onchange={(ev) => task.$jazz.set('plannedBlocks', parseInt(ev.currentTarget.value))}
           />
         </label>
 

src/lib/popover.ts

@@ -1,4 +1,4 @@
-import { autoUpdate, computePosition } from '@floating-ui/dom';
+import { autoPlacement, autoUpdate, computePosition } from '@floating-ui/dom';
 import type { Attachment } from 'svelte/attachments';
 
 export const popover: Attachment<HTMLElement> = (target) => {
@@ -11,7 +11,9 @@ export const popover: Attachment<HTMLElement> = (target) => {
     if (!anchor) return;
 
     const updatePosition = () => {
-      computePosition(anchor, target).then(({ x, y }) => {
+      computePosition(anchor, target, {
+        middleware: [autoPlacement({ allowedPlacements: ['top', 'top-start', 'bottom'] })],
+      }).then(({ x, y }) => {
         Object.assign(target.style, {
           left: `${x}px`,
           top: `${y}px`,

src/routes/area/[id]/+page.svelte

@@ -32,11 +32,11 @@
       <Grid_2x2 aria-hidden="true" class="h-8 w-8 text-primary-300-700" />
       <span class:line-through={area.archived}>{area.title}</span>
       <button class="area-options-anchor -ml-4 btn-icon btn py-2" popovertarget={optionsId}>
-        <Ellipsis class="h-12 w-12 text-surface-700-300" />
+        <Ellipsis class="h-12 w-12 text-surface-700-300" aria-hidden="true" />
         <span class="sr-only">Options</span>
       </button>
     </h1>
-    <p>{area.notes}</p>
+    <p>{area.notes.toString() || 'No notes'}</p>
   </div>
 
   <div id={optionsId} class="rounded-base p-2" {@attach popover}>