finish migration to Jazz 0.18

Author: BrianHicks

src/lib/components/AreaForm.svelte

@@ -6,8 +6,8 @@
     area,
     onsave,
   }: {
-    area?: co.loaded<typeof Area, { title: true; notes: true }>;
-    onsave: (area: Area) => void;
+    area?: co.loaded<typeof Area, { title: true; notes: true; projects: true }>;
+    onsave: (area: co.loaded<typeof Area, { title: true; notes: true; projects: true }>) => void;
   } = $props();
 
   let draftTitle = $state(area?.title?.toString() || '');
@@ -17,8 +17,8 @@
     e.preventDefault();
 
     if (area) {
-      area.title.applyDiff(draftTitle);
-      area.notes.applyDiff(draftNotes);
+      area.title.$jazz.applyDiff(draftTitle);
+      area.notes.$jazz.applyDiff(draftNotes);
       onsave(area);
     } else {
       onsave(

src/lib/components/ProfileEditor.svelte

@@ -12,7 +12,7 @@
       placeholder="Kermit the Frog"
       type="text"
       value={profile.name}
-      oninput={(ev) => (profile.name = ev.currentTarget.value)}
+      oninput={(ev) => profile.$jazz.set('name', ev.currentTarget.value)}
     />
   </label>
 </form>

src/lib/components/Sidebar.svelte

@@ -76,11 +76,11 @@
         </div>
       {:else}
         <ol class="flex flex-col gap-4">
-          {#each root.areas.filter((area) => !area.archived) as area (area.id)}
+          {#each root.areas.filter((area) => !area.archived) as area (area.$jazz.id)}
             {@render link(
-              `/area/${area.id}`,
+              `/area/${area.$jazz.id}`,
               area.title?.toString(),
-              page.route.id === `/area/${area.id}`,
+              page.route.id === `/area/${area.$jazz.id}`,
               Grid2x2,
               'text-surface-300-700',
               area.projects.length > 0 ? area.projects.length.toString() : '',
@@ -121,7 +121,7 @@
 >
   <QuickAdd
     onadd={(task) => {
-      if (root?.inbox) root.inbox.push(task);
+      if (root?.inbox) root.inbox.$jazz.push(task);
       quickAdd.close();
     }}
   />
@@ -134,7 +134,7 @@
 >
   <AreaForm
     onsave={(area) => {
-      if (root?.areas) root.areas.push(area);
+      if (root?.areas) root.areas.$jazz.push(area);
       newArea.close();
     }}
   />

src/lib/components/SingleTask.svelte

@@ -104,7 +104,7 @@
           bind:value={
             () => task.title?.toString(),
             (val) => {
-              if (val) task.title?.applyDiff(val);
+              if (val) task.title?.$jazz.applyDiff(val);
             }
           }
         />
@@ -140,7 +140,7 @@
             bind:value={waitDraft}
             onblur={parseAndSave(
               waitDraft,
-              (v) => (task.wait = v),
+              (v) => task.$jazz.set('wait', v),
               () => (waitDraft = task.wait?.toLocaleString() || ''),
             )}
           />
@@ -155,7 +155,7 @@
             bind:value={dueDraft}
             onblur={parseAndSave(
               dueDraft,
-              (v) => (task.due = v),
+              (v) => task.$jazz.set('due', v),
               () => (dueDraft = task.due?.toLocaleString() || ''),
             )}
           />

src/lib/components/TaskList.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <ol class="flex flex-col gap-2">
-  {#each list as task (task?.id)}
+  {#each list as task (task?.$jazz.id)}
     {#if task}
       <li>
         <SingleTask {task} />

src/lib/schema/account.ts

@@ -17,31 +17,31 @@ export const Account = co
     if (account.root === undefined) {
       const group = Group.create();
 
-      account.root = Root.create(
-        {
-          inbox: [],
-          areas: [],
-        },
-        group,
-      );
+      account.$jazz.set("root", Root.create(
+                {
+                  inbox: [],
+                  areas: [],
+                },
+                group,
+              ));
     }
 
     if (account.root && account.root.areas === undefined) {
       const group = Group.create();
-      group.addMember(account.root._owner, 'admin');
+      group.addMember(account.root.$jazz.owner, 'admin');
 
-      account.root.areas = Root.shape.areas.create([], group);
+      account.root.$jazz.set("areas", Root.shape.areas.create([], group));
     }
 
     if (!account.profile) {
       const group = Group.create();
       group.addMember('everyone', 'reader');
 
-      account.profile = Profile.create(
-        {
-          name: '',
-        },
-        group,
-      );
+      account.$jazz.set("profile", Profile.create(
+                {
+                  name: '',
+                },
+                group,
+              ));
     }
   });

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

@@ -41,12 +41,12 @@
 
   <div id={optionsId} class="rounded-base p-2" {@attach popover}>
     {#if !area.archived}
-      <button class="btn-primary btn" onclick={() => (area.archived = new Date())}>
+      <button class="btn-primary btn" onclick={() => area.$jazz.set('archived', new Date())}>
         <Archive class="h-8 w-8 text-error-500" />
         Archive {area.title}
       </button>
     {:else}
-      <button class="btn-primary btn" onclick={() => (area.archived = undefined)}>
+      <button class="btn-primary btn" onclick={() => area.$jazz.delete('archived')}>
         <ArchiveRestore class="h-8 w-8 text-success-500" />
         Restore {area.title}
       </button>