Merge pull request 'ui-additions-2024-03' (#113) from ui-additions-2024-03 into master

Reviewed-on: trent_larson/crowd-funder-for-time-pwa#113

babel.config.js

@@ -1,3 +1,4 @@
 module.exports = {
+  plugins: ["@babel/plugin-transform-private-methods"],
   presets: ["@vue/cli-plugin-babel/preset"],
 };

package-lock.json

@@ -42,6 +42,7 @@
         "js-generate-password": "^0.1.9",
         "js-yaml": "^4.1.0",
         "localstorage-slim": "^2.5.0",
+        "lru-cache": "^10.2.0",
         "luxon": "^3.4.4",
         "merkletreejs": "^0.3.11",
         "moment": "^2.29.4",
@@ -3052,6 +3053,18 @@
       "integrity": "sha512-0CNTVCLZggSh7bc5VkX5WWPWO+cyZbNd07IHIsSXLia/eAq+r836hgk+8BKoEh7949Mda87VUOitx5OddVj64A==",
       "optional": true
     },
+    "node_modules/@digitalcredentials/jsonld/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@digitalcredentials/keypair": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@digitalcredentials/keypair/-/keypair-1.0.5.tgz",
@@ -3149,6 +3162,18 @@
       "integrity": "sha512-0CNTVCLZggSh7bc5VkX5WWPWO+cyZbNd07IHIsSXLia/eAq+r836hgk+8BKoEh7949Mda87VUOitx5OddVj64A==",
       "optional": true
     },
+    "node_modules/@digitalcredentials/vc-status-list/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -4317,6 +4342,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/@expo/cli/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@expo/cli/node_modules/mimic-fn": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
@@ -4714,6 +4752,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@expo/config/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@expo/config/node_modules/resolve-from": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
@@ -8912,6 +8963,18 @@
         "node": ">=12"
       }
     },
+    "node_modules/@transmute/jsonld/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@transmute/ld-key-pair": {
       "version": "0.7.0-unstable.81",
       "resolved": "https://registry.npmjs.org/@transmute/ld-key-pair/-/ld-key-pair-0.7.0-unstable.81.tgz",
@@ -9674,6 +9737,18 @@
       "integrity": "sha512-0CNTVCLZggSh7bc5VkX5WWPWO+cyZbNd07IHIsSXLia/eAq+r836hgk+8BKoEh7949Mda87VUOitx5OddVj64A==",
       "optional": true
     },
+    "node_modules/@veramo-community/lds-ecdsa-secp256k1-recovery2020/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@veramo/core": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/@veramo/core/-/core-5.5.3.tgz",
@@ -10378,6 +10453,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/@vue/cli-shared-utils/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@vue/cli-shared-utils/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12425,6 +12512,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/cacache/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cacache/node_modules/mkdirp": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -17014,6 +17114,19 @@
         "node": ">=10"
       }
     },
+    "node_modules/hosted-git-info/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -19269,6 +19382,18 @@
       "integrity": "sha512-0CNTVCLZggSh7bc5VkX5WWPWO+cyZbNd07IHIsSXLia/eAq+r836hgk+8BKoEh7949Mda87VUOitx5OddVj64A==",
       "optional": true
     },
+    "node_modules/jsonld/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/jsonpointer": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
@@ -20246,15 +20371,11 @@
       }
     },
     "node_modules/lru-cache": {
-      "version": "6.0.0",
+      "version": "10.2.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
-      "devOptional": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
       "engines": {
-        "node": ">=10"
+        "node": "14 || >=16.14"
       }
     },
     "node_modules/luxon": {
@@ -25124,6 +25245,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/semver/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "devOptional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/send": {
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",

package.json

@@ -42,6 +42,7 @@
     "js-generate-password": "^0.1.9",
     "js-yaml": "^4.1.0",
     "localstorage-slim": "^2.5.0",
+    "lru-cache": "^10.2.0",
     "luxon": "^3.4.4",
     "merkletreejs": "^0.3.11",
     "moment": "^2.29.4",

project.task.yaml

@@ -1,15 +1,15 @@
 
 tasks :
 
-- finish push server:
+- fix the notification link to the app
-  - get utcHour parameter working
-  - add back the explicit wait for browser subscription timing problems
 - 01 change scanning flow - allow them to stay on the QR/scanning screen after scanning someone
 
 - 24 contextual tutorials https://docs.google.com/document/d/11C_K3RM0rgo0onih20KFhcIzukZyq_CRWqaWX5om_kM/edit#heading=h.iwiwcydou5hw
 
 - 24 Move to Vite assignee:jason
 
+- feeds - add "remote" filter, if they choose 'visible' then warn that they won't see any others, cache list & don't reload front page on change
+
 - .1 add shortcut from project (etc?) to the public project page in a browser
 - .1 add KindSpring link to ideas
 - .1 on feed, don't show "to someone anonymous" if it's to a project
@@ -23,6 +23,7 @@ tasks :
 - .2 don't show a warning on a totally new project when the authorized agent is set
 - .2 anchor hash into BTC
 - .2 list the "show more" contacts alphabetically
+- .5 add back the explicit wait for browser subscription timing problems?
 
 - .5 make Time Safari a share_target for images
 
@@ -126,7 +127,7 @@ tasks :
   - 08 convert to cleaner implementation (maybe Drie -- https://github.com/janvorisek/drie)
 
 - .5 show seed phrase in a QR code for transfer to another device
-- .5 on DiscoverView, switch to a filter UI (eg. just from friend
+- .5 on DiscoverView, switch to a filter UI (eg. just from friend)
 - .5 don't show "Offer" on project screen if they aren't registered
 - 01 especially for iOS, check for new version & update, eg. https://stackoverflow.com/questions/52221805/any-way-yet-to-auto-update-or-just-clear-the-cache-on-a-pwa-on-ios
 

src/components/FeedFilters.vue

@@ -0,0 +1,219 @@
+<template>
+  <div v-if="visible" id="dialogFeedFilters" class="dialog-overlay">
+    <div class="dialog">
+      <h1 class="text-xl font-bold text-center mb-4">Feed Filters</h1>
+
+      <p class="mb-4 font-bold">Show only activities that…</p>
+
+      <div class="grid grid-cols-1 gap-2">
+        <div
+          class="flex items-center justify-between cursor-pointer"
+          @click="toggleHasVisibleDid()"
+        >
+          <!-- label -->
+          <div>Include someone visible to me</div>
+          <!-- toggle -->
+          <div class="relative ml-2">
+            <!-- input -->
+            <input
+              type="checkbox"
+              v-model="hasVisibleDid"
+              name="toggleFilterFromMyContacts"
+              class="sr-only"
+            />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+        </div>
+
+        <em>or</em>
+
+        <div
+          class="flex items-center justify-between cursor-pointer"
+          @click="
+            hasSearchBox
+              ? toggleNearby()
+              : $router.push({ name: 'search-area' })
+          "
+        >
+          <!-- label -->
+          <div>Are nearby</div>
+          <!-- toggle -->
+          <div v-if="hasSearchBox" class="relative ml-2">
+            <!-- input -->
+            <input
+              type="checkbox"
+              v-model="isNearby"
+              name="toggleFilterNearby"
+              class="sr-only"
+            />
+            <!-- line -->
+            <div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
+            <!-- dot -->
+            <div
+              class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
+            ></div>
+          </div>
+          <div v-else class="relative ml-2">
+            <button class="ml-2 px-4 py-2 rounded-md bg-blue-200 text-blue-500">
+              Select Location
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mt-4">
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="setAll()"
+        >
+          Set All
+        </button>
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="clearAll()"
+        >
+          Clear All
+        </button>
+        <button
+          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+          @click="done()"
+        >
+          Done
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-facing-decorator";
+import {
+  LMap,
+  LMarker,
+  LRectangle,
+  LTileLayer,
+} from "@vue-leaflet/vue-leaflet";
+
+import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { db } from "@/db/index";
+
+@Component({
+  components: {
+    LRectangle,
+    LMap,
+    LMarker,
+    LTileLayer,
+  },
+})
+export default class FeedFilters extends Vue {
+  onCloseIfChanged = () => {};
+  hasSearchBox = false;
+  hasVisibleDid = false;
+  isNearby = false;
+  settingChanged = false;
+  visible = false;
+
+  async open(onCloseIfChanged: () => void) {
+    this.onCloseIfChanged = onCloseIfChanged;
+
+    await db.open();
+    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    this.hasVisibleDid = !!settings?.filterFeedByVisible;
+    this.isNearby = !!settings?.filterFeedByNearby;
+    if (settings?.searchBoxes && settings.searchBoxes.length > 0) {
+      this.hasSearchBox = true;
+    }
+
+    this.settingChanged = false;
+    this.visible = true;
+  }
+
+  toggleHasVisibleDid() {
+    this.settingChanged = true;
+    this.hasVisibleDid = !this.hasVisibleDid;
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedByVisible: this.hasVisibleDid,
+    });
+  }
+
+  toggleNearby() {
+    this.settingChanged = true;
+    this.isNearby = !this.isNearby;
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedByNearby: this.isNearby,
+    });
+  }
+
+  async clearAll() {
+    if (this.hasVisibleDid || this.isNearby) {
+      this.settingChanged = true;
+    }
+
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedByNearby: false,
+      filterFeedByVisible: false,
+    });
+
+    this.hasVisibleDid = false;
+    this.isNearby = false;
+  }
+
+  async setAll() {
+    if (!this.hasVisibleDid || !this.isNearby) {
+      this.settingChanged = true;
+    }
+
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      filterFeedByNearby: true,
+      filterFeedByVisible: true,
+    });
+
+    this.hasVisibleDid = true;
+    this.isNearby = true;
+  }
+
+  close() {
+    if (this.settingChanged) {
+      this.onCloseIfChanged();
+    }
+    this.visible = false;
+  }
+
+  done() {
+    this.close();
+  }
+}
+</script>
+
+<style>
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+#dialogFeedFilters.dialog-overlay {
+  z-index: 99999;
+  overflow: scroll;
+}
+
+.dialog {
+  background-color: white;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  width: 100%;
+  max-width: 500px;
+}
+</style>

src/db/tables/settings.ts

@@ -16,6 +16,10 @@ export type Settings = {
 
   activeDid?: string; // Active Decentralized ID
   apiServer?: string; // API server URL
+
+  filterFeedByNearby?: boolean; // filter by nearby
+  filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden
+
   firstName?: string; // User's first name
   isRegistered?: boolean;
   lastName?: string; // deprecated - put all names in firstName
@@ -38,6 +42,10 @@ export type Settings = {
   webPushServer?: string; // Web Push server URL
 };
 
+export function isAnyFeedFilterOn(settings: Settings): boolean {
+  return !!(settings.filterFeedByNearby || settings.filterFeedByVisible);
+}
+
 /**
  * Schema for the Settings table in the database.
  */

src/libs/endorserServer.ts

@@ -1,9 +1,11 @@
+import { Axios, AxiosResponse, RawAxiosRequestHeaders } from "axios";
+import * as didJwt from "did-jwt";
+import { LRUCache } from "lru-cache";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
-import { accessToken, SimpleSigner } from "@/libs/crypto";
+
-import * as didJwt from "did-jwt";
-import { Axios, AxiosResponse } from "axios";
 import { Contact } from "@/db/tables/contacts";
+import { accessToken, SimpleSigner } from "@/libs/crypto";
 
 export const SCHEMA_ORG_CONTEXT = "https://schema.org";
 // the object in RegisterAction claims
@@ -49,7 +51,7 @@ export interface GenericVerifiableCredential {
   [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
-export interface GenericServerRecord extends GenericVerifiableCredential {
+export interface GenericCredWrapper extends GenericVerifiableCredential {
   handleId?: string;
   id: string;
   issuedAt: string;
@@ -58,7 +60,7 @@ export interface GenericServerRecord extends GenericVerifiableCredential {
   claim: Record<string, any>;
   claimType?: string;
 }
-export const BLANK_GENERIC_SERVER_RECORD: GenericServerRecord = {
+export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper = {
   "@context": SCHEMA_ORG_CONTEXT,
   "@type": "",
   claim: {},
@@ -68,7 +70,7 @@ export const BLANK_GENERIC_SERVER_RECORD: GenericServerRecord = {
 };
 
 // a summary record; the VC is found the fullClaim field
-export interface GiveServerRecord {
+export interface GiveSummaryRecord {
   agentDid: string;
   amount: number;
   amountConfirmed: number;
@@ -83,7 +85,7 @@ export interface GiveServerRecord {
 }
 
 // a summary record; the VC is found the fullClaim field
-export interface OfferServerRecord {
+export interface OfferSummaryRecord {
   amount: number;
   amountGiven: number;
   amountGivenConfirmed: number;
@@ -101,7 +103,7 @@ export interface OfferServerRecord {
 }
 
 // a summary record; the VC is not currently part of this record
-export interface PlanServerRecord {
+export interface PlanSummaryRecord {
   agentDid?: string; // optional, if the issuer wants someone else to manage as well
   description: string;
   endTime?: string;
@@ -110,6 +112,7 @@ export interface PlanServerRecord {
   issuerDid: string;
   locLat?: number;
   locLon?: number;
+  name?: string;
   startTime?: string;
   url?: string;
 }
@@ -256,6 +259,10 @@ export type CreateAndSubmitClaimResult = SuccessResult | ErrorResult;
 // See https://github.com/trentlarson/endorser-ch/blob/0cb626f803028e7d9c67f095858a9fc8542e3dbd/server/api/services/util.js#L6
 const HIDDEN_DID = "did:none:HIDDEN";
 
+const planCache: LRUCache<string, PlanSummaryRecord> = new LRUCache({
+  max: 500,
+});
+
 export function isDid(did: string) {
   return did.startsWith("did:");
 }
@@ -269,7 +276,7 @@ export function isEmptyOrHiddenDid(did?: string) {
 }
 
 /**
- * @return true for any nested string where func(input) === true
+ * @return true for any string within this primitive/object/array where func(input) === true
  *
  * Similar logic is found in endorser-mobile.
  */
@@ -304,6 +311,12 @@ export function containsHiddenDid(obj: any) {
   return testRecursivelyOnStrings(isHiddenDid, obj);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const containsNonHiddenDid = (obj: any) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return testRecursivelyOnStrings((s: any) => isDid(s) && !isHiddenDid(s), obj);
+};
+
 export function stripEndorserPrefix(claimId: string) {
   if (claimId && claimId.startsWith(ENDORSER_CH_HANDLE_PREFIX)) {
     return claimId.substring(ENDORSER_CH_HANDLE_PREFIX.length);
@@ -403,8 +416,11 @@ export function didInfoForContact(
     return myId
       ? { displayName: "You (Alt ID)", known: true }
       : isHiddenDid(did)
-        ? { displayName: "Someone Outside Your Network", known: false }
+        ? { displayName: "Someone Totally Outside Your View", known: false }
-        : { displayName: "Someone Outside Contacts", known: false };
+        : {
+            displayName: "Someone Visible But Outside Your Contact List",
+            known: false,
+          };
   }
 }
 
@@ -423,6 +439,71 @@ export function didInfo(
   return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }
 
+async function getHeaders(identity: IIdentifier | null) {
+  const headers: RawAxiosRequestHeaders = {
+    "Content-Type": "application/json",
+  };
+  if (identity) {
+    const token = await accessToken(identity);
+    headers["Authorization"] = "Bearer " + token;
+  }
+  return headers;
+}
+
+/**
+ * @param handleId nullable -- which means that "undefined" will be returned
+ * @param identity nullable -- which means no private info will be returned
+ * @param axios
+ * @param apiServer
+ */
+export async function getPlanFromCache(
+  handleId: string | null,
+  identity: IIdentifier | null,
+  axios: Axios,
+  apiServer: string,
+) {
+  if (!handleId) {
+    return undefined;
+  }
+  let cred = planCache.get(handleId);
+  if (!cred) {
+    const url =
+      apiServer +
+      "/api/v2/report/plans?handleId=" +
+      encodeURIComponent(handleId);
+    const headers = await getHeaders(identity);
+    try {
+      const resp = await axios.get(url, { headers });
+      if (resp.status === 200 && resp.data?.data?.length > 0) {
+        cred = resp.data.data[0];
+        planCache.set(handleId, cred);
+      } else {
+        console.log(
+          "Failed to load plan with handle",
+          handleId,
+          " Got data:",
+          resp.data,
+        );
+      }
+    } catch (error) {
+      console.log(
+        "Failed to load plan with handle",
+        handleId,
+        " Got error:",
+        error,
+      );
+    }
+  }
+  return cred;
+}
+
+export async function setPlanInCache(
+  handleId: string,
+  planSummary: PlanSummaryRecord,
+) {
+  planCache.set(handleId, planSummary);
+}
+
 /**
  * For result, see https://api.endorser.ch/api-docs/#/claims/post_api_v2_claim
  *
@@ -475,7 +556,7 @@ export async function createAndSubmitGive(
     vcClaim.image = imageUrl;
   }
   return createAndSubmitClaim(
-    vcClaim as GenericServerRecord,
+    vcClaim as GenericCredWrapper,
     identity,
     apiServer,
     axios,
@@ -524,7 +605,7 @@ export async function createAndSubmitOffer(
     };
   }
   return createAndSubmitClaim(
-    vcClaim as GenericServerRecord,
+    vcClaim as GenericCredWrapper,
     identity,
     apiServer,
     axios,
@@ -695,7 +776,7 @@ const claimSummary = (claim: Record<string, any>) => {
  similar code is also contained in endorser-mobile
  **/
 export const claimSpecialDescription = (
-  record: GenericServerRecord,
+  record: GenericCredWrapper,
   activeDid: string,
   identifiers: Array<string>,
   contacts: Array<Contact>,
@@ -789,7 +870,7 @@ export const claimSpecialDescription = (
       "...]"
     );
   } else {
-    return issuer + " declared " + claimSummary(claim as GenericServerRecord);
+    return issuer + " declared " + claimSummary(claim as GenericCredWrapper);
   }
 };
 

src/libs/util.ts

@@ -9,7 +9,7 @@ import { accountsDB, db } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
-import { GenericServerRecord, containsHiddenDid } from "@/libs/endorserServer";
+import { GenericCredWrapper, containsHiddenDid } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
 
 export const PRIVACY_MESSAGE =
@@ -70,7 +70,7 @@ export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };
 
-export const giveIsConfirmable = (veriClaim: GenericServerRecord) => {
+export const giveIsConfirmable = (veriClaim: GenericCredWrapper) => {
   return veriClaim.claimType === "GiveAction";
 };
 
@@ -86,7 +86,7 @@ export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
  * @param veriClaim is expected to have fields: claim, claimType, and issuer
  */
 export const isGiveRecordTheUserCanConfirm = (
-  veriClaim: GenericServerRecord,
+  veriClaim: GenericCredWrapper,
   activeDid: string,
   confirmerIdList: string[] = [],
 ) => {
@@ -102,9 +102,9 @@ export const isGiveRecordTheUserCanConfirm = (
  * @returns the DID of the person who offered, or undefined if hidden
  * @param veriClaim is expected to have fields: claim and issuer
  */
-export const offerGiverDid: (
+export const offerGiverDid: (arg0: GenericCredWrapper) => string | undefined = (
-  arg0: GenericServerRecord,
+  veriClaim,
-) => string | undefined = (veriClaim) => {
+) => {
   let giver;
   if (
     veriClaim.claim.offeredBy?.identifier &&
@@ -121,7 +121,7 @@ export const offerGiverDid: (
  * @returns true if the user can fulfill the offer
  * @param veriClaim is expected to have fields: claim, claimType, and issuer
  */
-export const canFulfillOffer = (veriClaim: GenericServerRecord) => {
+export const canFulfillOffer = (veriClaim: GenericCredWrapper) => {
   return !!(veriClaim.claimType === "Offer" && offerGiverDid(veriClaim));
 };
 

src/views/AccountViewView.vue

@@ -112,6 +112,8 @@
     </div>
 
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
+      <!-- label -->
+      <div class="mb-2 font-bold">Settings</div>
       <div
         v-if="!notificationMaybeChanged"
         class="flex items-center justify-between cursor-pointer"
@@ -140,16 +142,38 @@
         Notification status may have changed. Refresh this page to see the
         latest setting.
       </div>
-      <router-link class="px-4 text-sm text-blue-500" to="/help-notifications">
+      <router-link class="pl-4 text-sm text-blue-500" to="/help-notifications">
         Troubleshoot your notification setup.
       </router-link>
+
+      <router-link
+        :to="{ name: 'search-area' }"
+        v-if="activeDid"
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-6"
+      >
+        Set Search Area…
+        <!-- If already set, change button label to "Change Search Area" -->
+      </router-link>
+
+      <div class="text-slate-500 text-sm font-bold mt-6 mb-2">
+        Topics of Interest
+      </div>
+      <textarea
+        class="block w-full rounded border border-slate-400 px-3 py-2"
+        rows="3"
+        value="longing, rusted, seventeen, daybreak, furnace, nine, benign, homecoming, one, freight car"
+      >
+      </textarea>
+      <div class="text-slate-500 text-sm mt-2 mb-2">
+        Separate topics with a comma.
+      </div>
     </div>
 
     <div
       v-if="activeDid"
       class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
     >
-      <div class="mb-2">Usage Limits</div>
+      <div class="mb-2 font-bold">Usage Limits</div>
       <!-- show spinner if loading limits -->
       <div v-if="loadingLimits" class="text-center">
         Checking&hellip; <fa icon="spinner" class="fa-spin"></fa>
@@ -200,7 +224,7 @@
     </div>
 
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8">
-      <div>Data Export</div>
+      <div class="mb-2 font-bold">Data Export</div>
       <router-link
         :to="{ name: 'seed-backup' }"
         v-if="activeDid"
@@ -211,7 +235,7 @@
 
       <button
         v-bind:class="computedStartDownloadLinkClassNames()"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
         @click="exportDatabase()"
       >
         Download Settings & Contacts
@@ -221,7 +245,7 @@
       <a
         ref="downloadLink"
         v-bind:class="computedDownloadLinkClassNames()"
-        class="block w-full text-center text-md uppercase bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+        class="block w-full text-center text-md uppercase bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
       >
         If no download happened yet, click again here to download now.
       </a>
@@ -952,13 +976,13 @@ export default class AccountViewView extends Vue {
 
   public computedStartDownloadLinkClassNames() {
     return {
-      invisible: this.downloadUrl,
+      hidden: this.downloadUrl,
     };
   }
 
   public computedDownloadLinkClassNames() {
     return {
-      invisible: !this.downloadUrl,
+      hidden: !this.downloadUrl,
     };
   }
 

src/views/ContactAmountsView.vue

@@ -119,7 +119,7 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
 import {
   AgreeVerifiableCredential,
-  GiveServerRecord,
+  GiveSummaryRecord,
   GiveVerifiableCredential,
   SCHEMA_ORG_CONTEXT,
 } from "@/libs/endorserServer";
@@ -131,7 +131,7 @@ export default class ContactAmountssView extends Vue {
   activeDid = "";
   apiServer = "";
   contact: Contact | null = null;
-  giveRecords: Array<GiveServerRecord> = [];
+  giveRecords: Array<GiveSummaryRecord> = [];
   numAccounts = 0;
 
   async beforeCreate() {
@@ -197,7 +197,7 @@ export default class ContactAmountssView extends Vue {
   async loadGives(activeDid: string, contact: Contact) {
     try {
       const identity = await this.getIdentity(this.activeDid);
-      let result: Array<GiveServerRecord> = [];
+      let result: Array<GiveSummaryRecord> = [];
       const url =
         this.apiServer +
         "/api/v2/report/gives?agentDid=" +
@@ -252,7 +252,7 @@ export default class ContactAmountssView extends Vue {
         );
       }
 
-      const sortedResult: Array<GiveServerRecord> = R.sort(
+      const sortedResult: Array<GiveSummaryRecord> = R.sort(
         (a, b) =>
           new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(),
         result,
@@ -271,7 +271,7 @@ export default class ContactAmountssView extends Vue {
     }
   }
 
-  async confirm(record: GiveServerRecord) {
+  async confirm(record: GiveSummaryRecord) {
     // Make claim
     // I use clone here because otherwise it gets a Proxy object.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/ContactsView.vue

@@ -303,7 +303,7 @@ import {
 import {
   CONTACT_CSV_HEADER,
   CONTACT_URL_PREFIX,
-  GiveServerRecord,
+  GiveSummaryRecord,
   GiveVerifiableCredential,
   isDid,
   RegisterVerifiableCredential,
@@ -410,7 +410,7 @@ export default class ContactsView extends Vue {
     }
 
     const handleResponse = (
-      resp: { status: number; data: { data: GiveServerRecord[] } },
+      resp: { status: number; data: { data: GiveSummaryRecord[] } },
       descriptions: Record<string, string>,
       confirmed: Record<string, number>,
       unconfirmed: Record<string, number>,

src/views/HomeView.vue

@@ -174,10 +174,19 @@
       showGivenToUser="true"
     />
     <GiftedPrompts ref="giftedPrompts" />
+    <FeedFilters ref="feedFilters" />
 
     <!-- Results List -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-bold mb-4">Latest Activity</h2>
+      <div class="flex items-center mb-4">
+        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <button
+          @click="openFeedFilters()"
+          class="block text-center text-sm uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 ml-auto rounded-md"
+        >
+          {{ resultsAreFiltered() ? "Filtered" : "Unfiltered" }}
+        </button>
+      </div>
       <InfiniteScroll @reached-bottom="loadMoreGives">
         <ul class="border-t border-slate-300">
           <li
@@ -193,20 +202,20 @@
             </div>
 
             <div class="grid grid-cols-12">
-              <span class="col-span-11 justify-self-start">
+              <span class="col-span-1 justify-self-start">
                 <span>
                   <fa
                     v-if="record.giver.known || record.receiver.known"
                     icon="circle-user"
-                    class="col-span-1 pt-1 pl-0 pr-3 text-slate-500"
+                    class="pt-1 text-slate-500"
-                  />
-                  <fa
-                    v-else
-                    icon="gift"
-                    class="col-span-1 pt-1 pl-3 pr-0 text-slate-500"
                   />
+                  <fa v-else icon="gift" class="pt-1 pl-3 text-slate-500" />
+                </span>
+              </span>
+              <span class="col-span-10 justify-self-stretch">
+                <span class="pl-2">
+                  {{ giveDescription(record) }}
                 </span>
-                {{ giveDescription(record) }}
                 <a @click="onClickLoadClaim(record.jwtId)">
                   <fa
                     icon="file-lines"
@@ -214,16 +223,15 @@
                   ></fa>
                 </a>
               </span>
-              <span class="col-span-1 justify-self-end shrink">
+              <span class="col-span-1 justify-self-end">
                 <router-link
                   v-if="record.fulfillsPlanHandleId"
                   :to="
                     '/project/' +
                     encodeURIComponent(record.fulfillsPlanHandleId)
                   "
-                  class="justify-end"
                 >
-                  <fa icon="hammer" class="ml-4 pl-2 text-blue-500"></fa>
+                  <fa icon="hammer" class="text-blue-500"></fa>
                 </router-link>
               </span>
             </div>
@@ -240,11 +248,17 @@
           <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
         </p>
       </div>
+      <div v-if="!isFeedLoading && feedData.length === 0">
+        <p class="text-slate-500 text-center italic mt-4 mb-4">
+          No claims match your filters.
+        </p>
+      </div>
     </div>
   </section>
 </template>
 
 <script lang="ts">
+import * as R from "ramda";
 import { UAParser } from "ua-parser-js";
 import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
@@ -252,6 +266,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import EntityIcon from "@/components/EntityIcon.vue";
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import GiftedPrompts from "@/components/GiftedPrompts.vue";
+import FeedFilters from "@/components/FeedFilters.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import TopMessage from "@/components/TopMessage.vue";
@@ -259,22 +274,30 @@ import { NotificationIface } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import {
+  BoundingBox,
+  isAnyFeedFilterOn,
+  MASTER_SETTINGS_KEY,
+  Settings,
+} from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import {
   contactForDid,
+  containsNonHiddenDid,
   didInfoForContact,
+  getPlanFromCache,
   GiverInputInfo,
-  GiveServerRecord,
+  GiveSummaryRecord,
 } from "@/libs/endorserServer";
 import { generateSaveAndActivateIdentity } from "@/libs/util";
 
-interface GiveRecordWithContactInfo extends GiveServerRecord {
+interface GiveRecordWithContactInfo extends GiveSummaryRecord {
   giver: {
     displayName: string;
     known: boolean;
   };
   image: string;
+  recipientProjectName: string | undefined;
   receiver: {
     displayName: string;
     known: boolean;
@@ -285,6 +308,7 @@ interface GiveRecordWithContactInfo extends GiveServerRecord {
   components: {
     GiftedDialog,
     GiftedPrompts,
+    FeedFilters,
     QuickNav,
     EntityIcon,
     InfiniteScroll,
@@ -301,9 +325,16 @@ export default class HomeView extends Vue {
   feedData: GiveRecordWithContactInfo[] = [];
   feedPreviousOldestId?: string;
   feedLastViewedClaimId?: string;
+  isAnyFeedFilterOn: boolean;
   isCreatingIdentifier = false;
+  isFeedFilteredByVisible = false;
+  isFeedFilteredByNearby = false;
   isFeedLoading = true;
   isRegistered = false;
+  searchBoxes: Array<{
+    name: string;
+    bbox: BoundingBox;
+  }> = [];
   showShortcutBvc = false;
   userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
 
@@ -326,7 +357,7 @@ export default class HomeView extends Vue {
     return headers;
   }
 
-  async created() {
+  async mounted() {
     try {
       await accountsDB.open();
       const allAccounts = await accountsDB.accounts.toArray();
@@ -338,9 +369,14 @@ export default class HomeView extends Vue {
       this.activeDid = settings?.activeDid || "";
       this.allContacts = await db.contacts.toArray();
       this.feedLastViewedClaimId = settings?.lastViewedClaimId;
+      this.isFeedFilteredByVisible = !!settings?.filterFeedByVisible;
+      this.isFeedFilteredByNearby = !!settings?.filterFeedByNearby;
       this.isRegistered = !!settings?.isRegistered;
+      this.searchBoxes = settings?.searchBoxes || [];
       this.showShortcutBvc = !!settings?.showShortcutBvc;
 
+      this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+
       if (this.allMyDids.length === 0) {
         this.isCreatingIdentifier = true;
         this.activeDid = await generateSaveAndActivateIdentity();
@@ -369,6 +405,10 @@ export default class HomeView extends Vue {
     }
   }
 
+  resultsAreFiltered() {
+    return this.isFeedFilteredByVisible || this.isFeedFilteredByNearby;
+  }
+
   notificationsSupported() {
     return "Notification" in window;
   }
@@ -378,27 +418,34 @@ export default class HomeView extends Vue {
       "Content-Type": "application/json",
     };
 
+    const identity = await this.getIdentity(this.activeDid);
     if (this.activeDid) {
-      await accountsDB.open();
+      if (identity) {
-      const allAccounts = await accountsDB.accounts.toArray();
+        headers["Authorization"] = "Bearer " + (await accessToken(identity));
-      const account = allAccounts.find(
+      } else {
-        (acc) => acc.did === this.activeDid,
-      ) as Account;
-      const identity = JSON.parse(account?.identity || "null");
-
-      if (!identity) {
         throw new Error(
           "An ID is chosen but there are no keys for it so it cannot be used to talk with the service. Switch your ID.",
         );
       }
-
-      headers["Authorization"] = "Bearer " + (await accessToken(identity));
     } else {
       // it's OK without auth... we just won't get any identifiers
     }
     return headers;
   }
 
+  // only called when a setting was changed
+  async reloadFeedOnChange() {
+    await db.open();
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.isFeedFilteredByVisible = !!settings?.filterFeedByVisible;
+    this.isFeedFilteredByNearby = !!settings?.filterFeedByNearby;
+    this.isAnyFeedFilterOn = isAnyFeedFilterOn(settings);
+
+    this.feedData = [];
+    this.feedPreviousOldestId = undefined;
+    this.updateAllFeed();
+  }
+
   /**
    * Data loader used by infinite scroller
    * @param payload is the flag from the InfiniteScroll indicating if it should load
@@ -409,14 +456,30 @@ export default class HomeView extends Vue {
     }
   }
 
+  latLongInAnySearchBox(lat: number, long: number) {
+    for (const boxInfo of this.searchBoxes) {
+      if (
+        boxInfo.bbox.westLong <= long &&
+        long <= boxInfo.bbox.eastLong &&
+        boxInfo.bbox.minLat <= lat &&
+        lat <= boxInfo.bbox.maxLat
+      ) {
+        return true;
+      }
+    }
+  }
+
   public async updateAllFeed() {
     this.isFeedLoading = true;
+    let endOfResults = true;
     await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
       .then(async (results) => {
         if (results.data.length > 0) {
+          endOfResults = false;
           // include the descriptions of the giver and receiver
-          const newFeedData: GiveRecordWithContactInfo = results.data.map(
+          const identity = await this.getIdentity(this.activeDid);
-            (record: GiveServerRecord) => {
+          const newFeedData: Array<Promise<GiveRecordWithContactInfo>> =
+            results.data.map(async (record: GiveSummaryRecord) => {
               // similar code is in endorser-mobile utility.ts
               // claim.claim happen for some claims wrapped in a Verifiable Credential
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -427,6 +490,36 @@ export default class HomeView extends Vue {
               // recipient.did is for legacy data, before March 2023
               const recipientDid =
                 claim.recipient?.identifier || (claim.recipient as any)?.did; // eslint-disable-line @typescript-eslint/no-explicit-any
+              const plan = await getPlanFromCache(
+                record.fulfillsPlanHandleId,
+                identity,
+                this.axios,
+                this.apiServer,
+              );
+
+              // check if the record should be filtered out
+              let anyMatch = false;
+              if (
+                this.isFeedFilteredByVisible &&
+                containsNonHiddenDid(record)
+              ) {
+                // has a visible DID so it's a keeper
+                anyMatch = true;
+              }
+              if (!anyMatch && this.isFeedFilteredByNearby) {
+                // check if the associated project has a location inside user's search box
+                if (record.fulfillsPlanHandleId) {
+                  if (plan?.locLat && plan?.locLon) {
+                    if (this.latLongInAnySearchBox(plan.locLat, plan.locLon)) {
+                      anyMatch = true;
+                    }
+                  }
+                }
+              }
+              if (this.isAnyFeedFilterOn && !anyMatch) {
+                return null;
+              }
+
               return {
                 ...record,
                 giver: didInfoForContact(
@@ -436,6 +529,7 @@ export default class HomeView extends Vue {
                   this.allMyDids,
                 ),
                 image: claim.image,
+                recipientProjectName: plan?.name,
                 receiver: didInfoForContact(
                   recipientDid,
                   this.activeDid,
@@ -443,9 +537,11 @@ export default class HomeView extends Vue {
                   this.allMyDids,
                 ),
               };
-            },
+            });
-          );
+          const allNewFeedData: GiveRecordWithContactInfo[] =
-          this.feedData = this.feedData.concat(newFeedData);
+            await Promise.all(newFeedData);
+          const filteredFeedData = allNewFeedData.filter(R.isNotNil);
+          this.feedData = this.feedData.concat(filteredFeedData);
           this.feedPreviousOldestId =
             results.data[results.data.length - 1].jwtId;
           // The following update is only done on the first load.
@@ -472,6 +568,10 @@ export default class HomeView extends Vue {
           -1,
         );
       });
+    if (this.feedData.length === 0 && !endOfResults) {
+      // repeat until there's at least some data
+      this.updateAllFeed();
+    }
     this.isFeedLoading = false;
   }
 
@@ -538,12 +638,28 @@ export default class HomeView extends Vue {
       return `${giverInfo.displayName} gave to ${recipientInfo.displayName}: ${gaveAmount}`;
     } else if (giverInfo.known) {
       // giver is named but recipient is not
+
+      // show the project name if to one
+      if (giveRecord.recipientProjectName) {
+        // retrieve the project name
+        return `${giverInfo.displayName} gave: ${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+      }
+
+      // it's not to a project
       return `${giverInfo.displayName} gave: ${gaveAmount} (to ${recipientInfo.displayName})`;
     } else if (recipientInfo.known) {
       // recipient is named but giver is not
       return `${recipientInfo.displayName} received: ${gaveAmount} (from ${giverInfo.displayName})`;
     } else {
       // neither giver nor recipient are named
+
+      // show the project name if to one
+      if (giveRecord.recipientProjectName) {
+        // retrieve the project name
+        return `${gaveAmount} (to the project ${giveRecord.recipientProjectName})`;
+      }
+
+      // it's not to a project
       let peopleInfo;
       if (giverInfo.displayName === recipientInfo.displayName) {
         peopleInfo = `between two who are ${giverInfo.displayName}`;
@@ -576,5 +692,9 @@ export default class HomeView extends Vue {
   openGiftedPrompts() {
     (this.$refs.giftedPrompts as GiftedPrompts).open();
   }
+
+  openFeedFilters() {
+    (this.$refs.feedFilters as FeedFilters).open(this.reloadFeedOnChange);
+  }
 }
 </script>

src/views/ProjectViewView.vue

@@ -362,11 +362,11 @@ import { accessToken } from "@/libs/crypto";
 import * as libsUtil from "@/libs/util";
 import {
   BLANK_GENERIC_SERVER_RECORD,
-  GenericServerRecord,
+  GenericCredWrapper,
   GiverInputInfo,
-  GiveServerRecord,
+  GiveSummaryRecord,
-  OfferServerRecord,
+  OfferSummaryRecord,
-  PlanServerRecord,
+  PlanSummaryRecord,
 } from "@/libs/endorserServer";
 import * as serverUtil from "@/libs/endorserServer";
 
@@ -390,14 +390,14 @@ export default class ProjectViewView extends Vue {
   apiServer = "";
   description = "";
   expanded = false;
-  fulfilledByThis: PlanServerRecord | null = null;
+  fulfilledByThis: PlanSummaryRecord | null = null;
-  fulfillersToThis: Array<PlanServerRecord> = [];
+  fulfillersToThis: Array<PlanSummaryRecord> = [];
-  givesToThis: Array<GiveServerRecord> = [];
+  givesToThis: Array<GiveSummaryRecord> = [];
   issuer = "";
   latitude = 0;
   longitude = 0;
   name = "";
-  offersToThis: Array<OfferServerRecord> = [];
+  offersToThis: Array<OfferSummaryRecord> = [];
   projectId = localStorage.getItem("projectId") || ""; // handle ID
   showDidCopy = false;
   timeSince = "";
@@ -720,8 +720,8 @@ export default class ProjectViewView extends Vue {
     this.$router.push(route);
   }
 
-  checkIsFulfillable(offer: OfferServerRecord) {
+  checkIsFulfillable(offer: OfferSummaryRecord) {
-    const offerRecord: GenericServerRecord = {
+    const offerRecord: GenericCredWrapper = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       claimType: "Offer",
@@ -730,8 +730,8 @@ export default class ProjectViewView extends Vue {
     return libsUtil.canFulfillOffer(offerRecord);
   }
 
-  onClickFulfillGiveToOffer(offer: OfferServerRecord) {
+  onClickFulfillGiveToOffer(offer: OfferSummaryRecord) {
-    const offerRecord: GenericServerRecord = {
+    const offerRecord: GenericCredWrapper = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: offer.fullClaim,
       issuer: offer.offeredByDid,
@@ -770,8 +770,8 @@ export default class ProjectViewView extends Vue {
     }
   }
 
-  checkIsConfirmable(give: GiveServerRecord) {
+  checkIsConfirmable(give: GiveSummaryRecord) {
-    const giveDetails: GenericServerRecord = {
+    const giveDetails: GenericCredWrapper = {
       ...BLANK_GENERIC_SERVER_RECORD,
       claim: give.fullClaim,
       claimType: "GiveAction",
@@ -781,7 +781,7 @@ export default class ProjectViewView extends Vue {
   }
 
   // similar code is found in ClaimView
-  async confirmClaim(give: GiveServerRecord) {
+  async confirmClaim(give: GiveSummaryRecord) {
     if (confirm("Do you personally confirm that this is true?")) {
       // similar logic is found in endorser-mobile
       const goodClaim = serverUtil.removeSchemaContext(

src/views/ProjectsView.vue

@@ -223,7 +223,7 @@ import InfiniteScroll from "@/components/InfiniteScroll.vue";
 import QuickNav from "@/components/QuickNav.vue";
 import ProjectIcon from "@/components/ProjectIcon.vue";
 import TopMessage from "@/components/TopMessage.vue";
-import { OfferServerRecord, PlanData } from "@/libs/endorserServer";
+import { OfferSummaryRecord, PlanData } from "@/libs/endorserServer";
 import EntityIcon from "@/components/EntityIcon.vue";
 
 @Component({
@@ -237,7 +237,7 @@ export default class ProjectsView extends Vue {
   currentIid: IIdentifier;
   isLoading = false;
   numAccounts = 0;
-  offers: OfferServerRecord[] = [];
+  offers: OfferSummaryRecord[] = [];
   showOffers = true;
   showProjects = false;
 

src/views/QuickActionBvcEndView.vue

@@ -146,7 +146,7 @@ import {
   createAndSubmitConfirmation,
   createAndSubmitGive,
   ErrorResult,
-  GenericServerRecord,
+  GenericCredWrapper,
   GenericVerifiableCredential,
 } from "@/libs/endorserServer";
 import * as libsUtil from "@/libs/util";
@@ -166,7 +166,7 @@ export default class QuickActionBvcBeginView extends Vue {
   allMyDids: Array<string> = [];
   apiServer = "";
   claimCountWithHidden = 0;
-  claimsToConfirm: GenericServerRecord[] = [];
+  claimsToConfirm: GenericCredWrapper[] = [];
   claimsToConfirmSelected: string[] = [];
   description = "breakfast";
   loadingConfirms = true;
@@ -228,7 +228,7 @@ export default class QuickActionBvcBeginView extends Vue {
       }
       await response.json().then((data) => {
         const dataByOthers = R.reject(
-          (claim: GenericServerRecord) => claim.issuer === this.activeDid,
+          (claim: GenericCredWrapper) => claim.issuer === this.activeDid,
           data,
         );
         const dataByOthersWithoutHidden = R.reject(

src/views/SearchAreaView.vue

@@ -209,9 +209,9 @@ export default class DiscoverView extends Vue {
             group: "alert",
             type: "success",
             title: "Saved",
-            text: "That has been saved in your preferences.",
+            text: "That has been saved in your preferences. You can now filter by it on your home screen feed.",
           },
-          -1,
+          7000,
         );
         this.$router.back();
       } catch (err) {
@@ -247,6 +247,7 @@ export default class DiscoverView extends Vue {
       await db.open();
       db.settings.update(MASTER_SETTINGS_KEY, {
         searchBoxes: [],
+        filterFeedByNearby: false,
       });
       this.searchBox = null;
       this.localCenterLat = 0;