per-project form trash collapsedness

src/components/form/trash-list.vue

@@ -57,19 +57,17 @@ export default {
     const { project, deletedForms, userPreferences } = useRequestData();
     return { project, deletedForms, userPreferences, restoreForm: modalData() };
   },
-  data() {
-    return {
-      isFormTrashCollapsed: this.userPreferences.data?.isFormTrashCollapsed
-    };
-  },
   computed: {
     count() {
       return (this.deletedForms.dataExists ? this.deletedForms.length : 0);
     },
     sortedDeletedForms() {
       const sortByDeletedAt = sortWith([ascend(entry => entry.deletedAt)]);
       return sortByDeletedAt(this.deletedForms.data);
-    }
+    },
+    isFormTrashCollapsed() {
+      return (this.userPreferences.dataExists && (this.userPreferences.formTrashCollapsed || []).includes(this.project.id));
+    },
   },
   created() {
     this.fetchDeletedForms(false);
@@ -98,14 +96,14 @@ export default {
       this.userPreferences.request({
         url: apiPaths.userPreferences(),
         resend: false,
-      }).then(() => {
-        this.isFormTrashCollapsed = this.userPreferences.data.formTrashCollapsed;
       });
     },
     toggleTrashExpansion(evt) {
-      const isClosed = (evt.newState === 'closed');
-      this.userPreferences.set('formTrashCollapsed', isClosed);
-      this.isFormTrashCollapsed = isClosed;
+      this.userPreferences.mutateSet(
+        'formTrashCollapsed',
+        this.project.id,
+        (evt.newState === 'closed') ? 'add' : 'delete',
+      );
     }
   }
 };

src/request-data/resources.js

@@ -79,6 +79,7 @@ export default ({ i18n }, createResource) => {
   }));
 
   createResource('userPreferences', (self) => ({
+    transformResponse: ({ data }) => shallowReactive(data),
     set: (k, v) => {
       // Avoid posting prefs to the server when they haven't changed.
       // This stringify-inequality-test may yield false positives, for instance when object field sort order changes.
@@ -96,6 +97,22 @@ export default ({ i18n }, createResource) => {
         });
       }
     },
+    mutateSet: (k, v, op) => {
+      const prefSet = new Set(self.data[k] instanceof Array ? self.data[k] : []); // ignore/overwrite set-incompatible data (as may have been left behind by an older version with a different implicit preferences schema)
+      switch (op) {
+        case 'add':
+          prefSet.add(v);
+          break;
+        case 'delete':
+          prefSet.delete(v);
+          break;
+        default:
+          throw new Error(`Unsupported set operation: "${op}"`);
+      }
+      self.set(k, Array.from(prefSet).sort());
+    },
+    addToSet: (k, v) => self.mutateSet(k, v, 'add'),
+    deleteFromSet: (k, v) => self.mutateSet(k, v, 'delete'),
   }));
 
   const formDraft = createResource('formDraft', () =>