fix(ui): dismissable multi-device note; drop synthetic category tag from search results

src/util/multideviceNote.ts

@@ -0,0 +1,19 @@
+// The multi-device note shows on every multi-device Activity view; once
+// dismissed it stays dismissed (localStorage, like the supporter nudge on Home).
+const DISMISSED_KEY = 'aw-multidevice-note-dismissed';
+
+export function isMultideviceNoteDismissed(): boolean {
+  try {
+    return localStorage.getItem(DISMISSED_KEY) === 'true';
+  } catch (e) {
+    return false;
+  }
+}
+
+export function persistMultideviceNoteDismissed(): void {
+  try {
+    localStorage.setItem(DISMISSED_KEY, 'true');
+  } catch (e) {
+    // Storage unavailable: the note stays hidden for this page view only.
+  }
+}

src/views/Search.vue

@@ -84,7 +84,10 @@ export default {
       try {
         this.status = 'searching';
         const data = await this.$aw.query(timeperiods, query_array);
-        this.events = _.orderBy(data[0], ['timestamp'], ['desc']);
+        // Every hit carries the synthetic `searched` category the query uses
+        // for filtering; it is not a real category, so drop it from results.
+        const events = data[0].map(e => ({ ...e, data: _.omit(e.data, '$category') }));
+        this.events = _.orderBy(events, ['timestamp'], ['desc']);
         this.error = '';
       } catch (e) {
         console.error(e);

src/views/activity/Activity.vue

@@ -56,7 +56,14 @@ div
       li.list-group-item.pl-0.pr-3.py-0.border-0
         b.mr-1 {{ $t('activity.timeActive') }}
         span {{ activityStore.active.duration | friendlyduration }}
-    div(v-if="isMultidevice") {{ $t('activity.multideviceNote') }}
+    b-alert.py-1.px-2.mb-1.small(
+      v-if="isMultidevice && !multideviceNoteDismissed"
+      show
+      variant="info"
+      dismissible
+      @dismissed="dismissMultideviceNote"
+      data-testid="multidevice-note"
+    ) {{ $t('activity.multideviceNote') }}
     ul.list-group.list-group-horizontal-md(v-if="periodLength != 'day'")
       li.list-group-item.pl-0.pr-3.py-0.border-0
         b.mr-1 {{ $t('activity.queryRange') }}
@@ -333,6 +340,10 @@ import {
 } from '~/util/multidevice';
 import { getClient } from '~/util/awclient';
 import { nextEarliestDate } from '~/util/earliestEvent';
+import {
+  isMultideviceNoteDismissed,
+  persistMultideviceNoteDismissed,
+} from '~/util/multideviceNote';
 
 export default {
   name: 'Activity',
@@ -364,6 +375,7 @@ export default {
 
       today: null,
       showOptions: false,
+      multideviceNoteDismissed: isMultideviceNoteDismissed(),
       // First day with data for the host, used by All time
       earliestDate: null,
 
@@ -666,6 +678,10 @@ export default {
   },
 
   methods: {
+    dismissMultideviceNote: function () {
+      this.multideviceNoteDismissed = true;
+      persistMultideviceNoteDismissed();
+    },
     previousPeriod: function () {
       if (this.dateRange) {
         return formatDateRange(shiftDateRange(this.dateRange, -1));

test/unit/multideviceNote.test.js

@@ -0,0 +1,19 @@
+import {
+  isMultideviceNoteDismissed,
+  persistMultideviceNoteDismissed,
+} from '~/util/multideviceNote';
+
+describe('multi-device note dismissal', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  test('is shown until dismissed', () => {
+    expect(isMultideviceNoteDismissed()).toBe(false);
+  });
+
+  test('stays dismissed once dismissed', () => {
+    persistMultideviceNoteDismissed();
+    expect(isMultideviceNoteDismissed()).toBe(true);
+  });
+});