fix: linting

feat: add starred project list in search, refactor variable names
feat: add a page to see all the starred projects
2025-09-27 13:24:28 -06:00 · 2025-09-26 20:13:18 -06:00 · 2025-09-10 14:40:36 -06:00 · 2025-09-01 18:40:35 -06:00 · 2025-09-01 14:53:39 -06:00 · 2025-08-31 08:21:25 -06:00
20 changed files with 1148 additions and 75 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
        "@ethersproject/hdnode": "^5.7.0",
        "@ethersproject/wallet": "^5.8.0",
        "@fortawesome/fontawesome-svg-core": "^6.5.1",
+        "@fortawesome/free-regular-svg-icons": "^6.7.2",
        "@fortawesome/free-solid-svg-icons": "^6.5.1",
        "@fortawesome/vue-fontawesome": "^3.0.6",
        "@jlongster/sql.js": "^1.6.7",
@@ -90,6 +91,7 @@
        "vue": "3.5.13",
        "vue-axios": "^3.5.2",
        "vue-facing-decorator": "3.0.4",
+        "vue-markdown-render": "^2.2.1",
        "vue-picture-cropper": "^0.7.0",
        "vue-qrcode-reader": "^5.5.3",
        "vue-router": "^4.5.0",
@@ -106,6 +108,7 @@
        "@types/js-yaml": "^4.0.9",
        "@types/leaflet": "^1.9.8",
        "@types/luxon": "^3.4.2",
+        "@types/markdown-it": "^14.1.2",
        "@types/node": "^20.14.11",
        "@types/node-fetch": "^2.6.12",
        "@types/ramda": "^0.29.11",
@@ -6786,6 +6789,17 @@
        "node": ">=6"
      }
    },
+    "node_modules/@fortawesome/free-regular-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-7Z/ur0gvCMW8G93dXIQOkQqHo2M5HLhYrRVC0//fakJXxcF1VmMPsxnG6Ee8qEylA8b8Q3peQXWMNZ62lYF28g==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/@fortawesome/free-solid-svg-icons": {
      "version": "6.7.2",
      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz",
@@ -10147,6 +10161,12 @@
        "@types/geojson": "*"
      }
    },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true
+    },
    "node_modules/@types/luxon": {
      "version": "3.7.1",
      "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-3.7.1.tgz",
@@ -10154,6 +10174,22 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true
+    },
    "node_modules/@types/minimist": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
@@ -32883,6 +32919,61 @@
        "vue": "^3.0.0"
      }
    },
+    "node_modules/vue-markdown-render": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/vue-markdown-render/-/vue-markdown-render-2.2.1.tgz",
+      "integrity": "sha512-XkYnC0PMdbs6Vy6j/gZXSvCuOS0787Se5COwXlepRqiqPiunyCIeTPQAO2XnB4Yl04EOHXwLx5y6IuszMWSgyQ==",
+      "dependencies": {
+        "markdown-it": "^13.0.2"
+      },
+      "peerDependencies": {
+        "vue": "^3.3.4"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/entities": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
+      "integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/linkify-it": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
+      "integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
+      "dependencies": {
+        "uc.micro": "^1.0.1"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/markdown-it": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.2.tgz",
+      "integrity": "sha512-FtwnEuuK+2yVU7goGn/MJ0WBZMM9ZPgU9spqlFs7/A/pDIUNSOQZhUgOqYCficIuR2QaFnrt8LHqBWsbTAoI5w==",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "~3.0.1",
+        "linkify-it": "^4.0.1",
+        "mdurl": "^1.0.1",
+        "uc.micro": "^1.0.5"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.js"
+      }
+    },
+    "node_modules/vue-markdown-render/node_modules/mdurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+      "integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g=="
+    },
+    "node_modules/vue-markdown-render/node_modules/uc.micro": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+      "integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+    },
    "node_modules/vue-picture-cropper": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/vue-picture-cropper/-/vue-picture-cropper-0.7.0.tgz",
--- a/package.json
+++ b/package.json
@@ -136,7 +136,6 @@
    "*.{js,ts,vue,css,json,yml,yaml}": "eslint --fix || true",
    "*.{md,markdown,mdc}": "markdownlint-cli2 --fix"
  },
-
  "dependencies": {
    "@capacitor-community/electron": "^5.0.1",
    "@capacitor-community/sqlite": "6.0.2",
@@ -157,6 +156,7 @@
    "@ethersproject/hdnode": "^5.7.0",
    "@ethersproject/wallet": "^5.8.0",
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/vue-fontawesome": "^3.0.6",
    "@jlongster/sql.js": "^1.6.7",
@@ -220,6 +220,7 @@
    "vue": "3.5.13",
    "vue-axios": "^3.5.2",
    "vue-facing-decorator": "3.0.4",
+    "vue-markdown-render": "^2.2.1",
    "vue-picture-cropper": "^0.7.0",
    "vue-qrcode-reader": "^5.5.3",
    "vue-router": "^4.5.0",
@@ -236,6 +237,7 @@
    "@types/js-yaml": "^4.0.9",
    "@types/leaflet": "^1.9.8",
    "@types/luxon": "^3.4.2",
+    "@types/markdown-it": "^14.1.2",
    "@types/node": "^20.14.11",
    "@types/node-fetch": "^2.6.12",
    "@types/ramda": "^0.29.11",
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -22,4 +22,24 @@
 	.dialog {
 		@apply bg-white p-4 rounded-lg w-full max-w-lg;
 	}
+
+	/* Markdown content styling to restore list elements */
+	.markdown-content ul {
+		@apply list-disc list-inside ml-4;
+	}
+
+	.markdown-content ol {
+		@apply list-decimal list-inside ml-4;
+	}
+
+	.markdown-content li {
+		@apply mb-1;
+	}
+
+	.markdown-content ul ul,
+	.markdown-content ol ol,
+	.markdown-content ul ol,
+	.markdown-content ol ul {
+		@apply ml-4 mt-1;
+	}
 }
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -80,7 +80,10 @@
      <!-- Description -->
      <p class="font-medium">
        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
-          {{ description }}
+          <vue-markdown
+            :source="truncatedDescription"
+            class="markdown-content"
+          />
        </a>
      </p>

@@ -258,11 +261,13 @@ import {
  NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
 import { TIMEOUTS } from "@/utils/notify";
+import VueMarkdown from "vue-markdown-render";

@Component({
  components: {
    EntityIcon,
    ProjectIcon,
+    VueMarkdown,
  },
 })
 export default class ActivityListItem extends Vue {
@@ -303,6 +308,14 @@ export default class ActivityListItem extends Vue {
    return `${claim?.description || ""}`;
  }

+  get truncatedDescription(): string {
+    const desc = this.description;
+    if (desc.length <= 300) {
+      return desc;
+    }
+    return desc.substring(0, 300) + "...";
+  }
+
  private displayAmount(code: string, amt: number) {
    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
  }
--- a/src/db-sql/migration.ts
+++ b/src/db-sql/migration.ts
@@ -124,6 +124,13 @@ const MIGRATIONS = [
      ALTER TABLE contacts ADD COLUMN iViewContent BOOLEAN DEFAULT TRUE;
    `,
  },
+  {
+    name: "005_add_starredPlanHandleIds_to_settings",
+    sql: `
+      ALTER TABLE settings ADD COLUMN starredPlanHandleIds TEXT DEFAULT '[]'; -- JSON string
+      ALTER TABLE settings ADD COLUMN lastAckedStarredPlanChangesJwtId TEXT;
+    `,
+  },
 ];

 /**
--- a/src/db/databaseUtil.ts
+++ b/src/db/databaseUtil.ts
@@ -157,10 +157,11 @@ export async function retrieveSettingsForDefaultAccount(): Promise<Settings> {
      result.columns,
      result.values,
    )[0] as Settings;
-    if (settings.searchBoxes) {
-      // @ts-expect-error - the searchBoxes field is a string in the DB
-      settings.searchBoxes = JSON.parse(settings.searchBoxes);
-    }
+    settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+    settings.starredPlanHandleIds = parseJsonField(
+      settings.starredPlanHandleIds,
+      [],
+    );
    return settings;
  }
 }
@@ -226,10 +227,11 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
        );
      }

-      // Handle searchBoxes parsing
-      if (settings.searchBoxes) {
-        settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
-      }
+      settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+      settings.starredPlanHandleIds = parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );

      return settings;
    } catch (error) {
--- a/src/db/tables/settings.ts
+++ b/src/db/tables/settings.ts
@@ -36,6 +36,7 @@ export type Settings = {

  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred plan changes that they've acknowledged seeing

  // The claim list has a most recent one used in notifications that's separate from the last viewed
  lastNotifiedClaimId?: string;
@@ -60,15 +61,18 @@ export type Settings = {
  showContactGivesInline?: boolean; // Display contact inline or not
  showGeneralAdvanced?: boolean; // Show advanced features which don't have their own flag
  showShortcutBvc?: boolean; // Show shortcut for Bountiful Voluntaryist Community actions
+
+  starredPlanHandleIds?: string[]; // Array of starred plan handle IDs
  vapid?: string; // VAPID (Voluntary Application Server Identification) field for web push
  warnIfProdServer?: boolean; // Warn if using a production server
  warnIfTestServer?: boolean; // Warn if using a testing server
  webPushServer?: string; // Web Push server URL
 };

-// type of settings where the searchBoxes are JSON strings instead of objects
+// type of settings where the values are JSON strings instead of objects
 export type SettingsWithJsonStrings = Settings & {
  searchBoxes: string;
+  starredPlanHandleIds: string;
 };

 export function checkIsAnyFeedFilterOn(settings: Settings): boolean {
@@ -85,6 +89,11 @@ export const SettingsSchema = {
 /**
 * Constants.
 */
+
+/**
+ * This is deprecated.
+ * It only remains for those with a PWA who have not migrated, but we'll soon remove it.
+ */
 export const MASTER_SETTINGS_KEY = "1";

 export const DEFAULT_PASSKEY_EXPIRATION_MINUTES = 15;
--- a/src/interfaces/claims.ts
+++ b/src/interfaces/claims.ts
@@ -72,11 +72,15 @@ export interface PlanActionClaim extends ClaimObject {
  name: string;
  agent?: { identifier: string };
  description?: string;
+  endTime?: string;
  identifier?: string;
+  image?: string;
  lastClaimId?: string;
  location?: {
    geo: { "@type": "GeoCoordinates"; latitude: number; longitude: number };
  };
+  startTime?: string;
+  url?: string;
 }

 // AKA Registration & RegisterAction
--- a/src/interfaces/records.ts
+++ b/src/interfaces/records.ts
@@ -1,4 +1,5 @@
-import { GiveActionClaim, OfferClaim } from "./claims";
+import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
+import { GenericCredWrapper } from "./common";

 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
@@ -61,6 +62,11 @@ export interface PlanSummaryRecord {
  jwtId?: string;
 }

+export interface PlanSummaryAndPreviousClaim {
+  plan: PlanSummaryRecord;
+  wrappedClaimBefore: GenericCredWrapper<PlanActionClaim>;
+}
+
 /**
 * Represents data about a project
 *
@@ -87,7 +93,10 @@ export interface PlanData {
  name: string;
  /**
   * The identifier of the project record -- different from jwtId
-   * (Maybe we should use the jwtId to iterate through the records instead.)
+   *
+   * This has been used to iterate through plan records, because jwtId ordering doesn't match
+   * chronological create ordering, though it does match most recent edit order (in reverse order).
+   * (It may be worthwhile to order by jwtId instead. It is an indexed field.)
   **/
  rowId?: string;
 }
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -56,7 +56,12 @@ import {
  KeyMetaWithPrivate,
  KeyMetaMaybeWithPrivate,
 } from "../interfaces/common";
-import { PlanSummaryRecord } from "../interfaces/records";
+import {
+  OfferSummaryRecord,
+  OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
+} from "../interfaces/records";
 import { logger } from "../utils/logger";
 import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import { APP_SERVER } from "@/constants/app";
@@ -362,6 +367,22 @@ export function didInfo(
  return didInfoForContact(did, activeDid, contact, allMyDids).displayName;
 }

+/**
+ * In some contexts (eg. agent), a blank really is nobody.
+ */
+export function didInfoOrNobody(
+  did: string | undefined,
+  activeDid: string | undefined,
+  allMyDids: string[],
+  contacts: Contact[],
+): string {
+  if (did == null) {
+    return "Nobody";
+  } else {
+    return didInfo(did, activeDid, allMyDids, contacts);
+  }
+}
+
 /**
 * return text description without any references to "you" as user
 */
@@ -730,7 +751,7 @@ export async function getNewOffersToUser(
  activeDid: string,
  afterOfferJwtId?: string,
  beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferSummaryRecord>; hitLimit: boolean }> {
  let url = `${apiServer}/api/v2/report/offers?recipientDid=${activeDid}`;
  if (afterOfferJwtId) {
    url += "&afterId=" + afterOfferJwtId;
@@ -752,7 +773,7 @@ export async function getNewOffersToUserProjects(
  activeDid: string,
  afterOfferJwtId?: string,
  beforeOfferJwtId?: string,
-) {
+): Promise<{ data: Array<OfferToPlanSummaryRecord>; hitLimit: boolean }> {
  let url = `${apiServer}/api/v2/report/offersToPlansOwnedByMe`;
  if (afterOfferJwtId) {
    url += "?afterId=" + afterOfferJwtId;
@@ -766,6 +787,44 @@ export async function getNewOffersToUserProjects(
  return response.data;
 }

+/**
+ * Get starred projects that have been updated since the last check
+ *
+ * @param axios - axios instance
+ * @param apiServer - endorser API server URL
+ * @param activeDid - user's DID for authentication
+ * @param starredPlanHandleIds - array of starred project handle IDs
+ * @param afterId - JWT ID to check for changes after (from lastAckedStarredPlanChangesJwtId)
+ * @returns { data: Array<PlanSummaryAndPreviousClaim>, hitLimit: boolean }
+ */
+export async function getStarredProjectsWithChanges(
+  axios: Axios,
+  apiServer: string,
+  activeDid: string,
+  starredPlanHandleIds: string[],
+  afterId?: string,
+): Promise<{ data: Array<PlanSummaryAndPreviousClaim>; hitLimit: boolean }> {
+  if (!starredPlanHandleIds || starredPlanHandleIds.length === 0) {
+    return { data: [], hitLimit: false };
+  }
+
+  if (!afterId) {
+    return { data: [], hitLimit: false };
+  }
+
+  // Use POST method for larger lists of project IDs
+  const url = `${apiServer}/api/v2/report/plansLastUpdatedBetween`;
+  const headers = await getHeaders(activeDid);
+
+  const requestBody = {
+    planIds: starredPlanHandleIds,
+    afterId: afterId,
+  };
+
+  const response = await axios.post(url, requestBody, { headers });
+  return response.data;
+}
+
 /**
 * Construct GiveAction VC for submission to server
 *
--- a/src/libs/fontawesome.ts
+++ b/src/libs/fontawesome.ts
@@ -86,6 +86,7 @@ import {
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
+  faStar,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
@@ -94,6 +95,9 @@ import {
  faXmark,
 } from "@fortawesome/free-solid-svg-icons";

+// these are referenced differently, eg. ":icon='['far', 'star']'" as in ProjectViewView.vue
+import { faStar as faStarRegular } from "@fortawesome/free-regular-svg-icons";
+
 // Initialize Font Awesome library with all required icons
 library.add(
  faArrowDown,
@@ -168,14 +172,16 @@ library.add(
  faPlus,
  faQrcode,
  faQuestion,
-  faRotate,
  faRightFromBracket,
+  faRotate,
  faShareNodes,
  faSpinner,
  faSquare,
  faSquareCaretDown,
  faSquareCaretUp,
  faSquarePlus,
+  faStar,
+  faStarRegular,
  faThumbtack,
  faTrashCan,
  faTriangleExclamation,
--- a/src/test/PlatformServiceMixinTest.vue
+++ b/src/test/PlatformServiceMixinTest.vue
@@ -85,7 +85,6 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";

@Component({
  mixins: [PlatformServiceMixin],
@@ -197,10 +196,10 @@ This tests the helper method only - no database interaction`;
      const success = await this.$saveSettings(testSettings);

      if (success) {
-        // Now query the raw database to see how it's actually stored
+        // Now query the raw database to see how it's actually stored.
+        // Note that new users probably have settings with ID of 1 but old migrated users might skip to 2.
        const rawResult = await this.$dbQuery(
-          "SELECT searchBoxes FROM settings WHERE id = ?",
-          [MASTER_SETTINGS_KEY],
+          "SELECT searchBoxes FROM settings limit 1",
        );

        if (rawResult?.values?.length) {
--- a/src/utils/PlatformServiceMixin.ts
+++ b/src/utils/PlatformServiceMixin.ts
@@ -249,13 +249,13 @@ export const PlatformServiceMixin = {
            // Keep null values as null
          }

-          // Handle JSON fields like contactMethods
-          if (column === "contactMethods" && typeof value === "string") {
-            try {
-              value = JSON.parse(value);
-            } catch {
-              value = [];
-            }
+          // Convert SQLite JSON strings to objects/arrays
+          if (
+            column === "contactMethods" ||
+            column === "searchBoxes" ||
+            column === "starredPlanHandleIds"
+          ) {
+            value = this._parseJsonField(value, []);
          }

          obj[column] = value;
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -150,8 +150,6 @@
    </section>
    <PushNotificationPermission ref="pushNotificationPermission" />

-    <LocationSearchSection :search-box="searchBox" />
-
    <!-- User Profile -->
    <section
      v-if="isRegistered"
@@ -244,6 +242,8 @@
      <div v-else>Saving...</div>
    </section>

+    <LocationSearchSection :search-box="searchBox" />
+
    <UsageLimitsSection
      v-if="activeDid"
      :loading-limits="loadingLimits"
@@ -1059,8 +1059,8 @@ export default class AccountViewView extends Vue {
    this.hideRegisterPromptOnNewContact =
      !!settings.hideRegisterPromptOnNewContact;
    this.isRegistered = !!settings?.isRegistered;
-    this.isSearchAreasSet = !!settings.searchBoxes;
-    this.searchBox = settings.searchBoxes?.[0] || null;
+    this.isSearchAreasSet =
+      !!settings.searchBoxes && settings.searchBoxes.length > 0;
    this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
    this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
    this.notifyingReminder = !!settings.notifyingReminderTime;
@@ -1074,6 +1074,7 @@ export default class AccountViewView extends Vue {
    this.passkeyExpirationMinutes =
      settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
    this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
+    this.searchBox = settings.searchBoxes?.[0] || null;
    this.showGeneralAdvanced = !!settings.showGeneralAdvanced;
    this.showShortcutBvc = !!settings.showShortcutBvc;
    this.warnIfProdServer = !!settings.warnIfProdServer;
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -79,7 +79,10 @@
          <div class="text-sm">
            <div data-testId="description">
              <font-awesome icon="message" class="fa-fw text-slate-400" />
-              {{ claimDescription }}
+              <vue-markdown
+                :source="claimDescription"
+                class="markdown-content"
+              />
            </div>
            <div>
              <font-awesome icon="user" class="fa-fw text-slate-400" />
@@ -515,8 +518,10 @@ import { AxiosError } from "axios";
 import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+
 import { GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -535,7 +540,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { APP_SERVER } from "@/constants/app";

@Component({
-  components: { GiftedDialog, QuickNav },
+  components: { GiftedDialog, QuickNav, VueMarkdown },
  mixins: [PlatformServiceMixin],
 })
 export default class ClaimView extends Vue {
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -51,6 +51,33 @@
    <!-- Secondary Tabs -->
    <div class="text-center text-slate-500 border-b border-slate-300">
      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
+        <li v-if="isProjectsActive">
+          <a
+            href="#"
+            :class="computedStarredTabStyleClassNames()"
+            @click="
+              projects = [];
+              userProfiles = [];
+              isStarredActive = true;
+              isLocalActive = false;
+              isMappedActive = false;
+              isAnywhereActive = false;
+              isSearchVisible = false;
+              tempSearchBox = null;
+              searchStarred();
+            "
+          >
+            Starred
+            <!-- restore when the links don't jump around for different numbers
+            <span
+              class="font-semibold text-sm bg-slate-200 px-1.5 py-0.5 rounded-md"
+              v-if="isLocalActive"
+            >
+              {{ localCount > -1 ? localCount : "?" }}
+            </span>
+            -->
+          </a>
+        </li>
        <li>
          <a
            href="#"
@@ -58,9 +85,11 @@
            @click="
              projects = [];
              userProfiles = [];
+              isStarredActive = false;
              isLocalActive = true;
              isMappedActive = false;
              isAnywhereActive = false;
+              isStarredActive = false;
              isSearchVisible = true;
              tempSearchBox = null;
              searchLocal();
@@ -84,9 +113,11 @@
            @click="
              projects = [];
              userProfiles = [];
+              isStarredActive = false;
              isLocalActive = false;
              isMappedActive = true;
              isAnywhereActive = false;
+              isStarredActive = false;
              isSearchVisible = false;
              searchTerms = '';
              tempSearchBox = null;
@@ -103,9 +134,11 @@
            @click="
              projects = [];
              userProfiles = [];
+              isStarredActive = false;
              isLocalActive = false;
              isMappedActive = false;
              isAnywhereActive = true;
+              isStarredActive = false;
              isSearchVisible = true;
              tempSearchBox = null;
              searchAll();
@@ -201,6 +234,15 @@
          >No {{ isProjectsActive ? "projects" : "people" }} were found with
          that search.</span
        >
+        <span v-else-if="isStarredActive">
+          <p>
+            You have no starred projects. Star some projects to see them here.
+          </p>
+          <p class="mt-4">
+            When you star projects, you will get a notice on the front page when
+            they change.
+          </p>
+        </span>
      </p>
    </div>

@@ -383,9 +425,12 @@ export default class DiscoverView extends Vue {
  allMyDids: Array<string> = [];
  apiServer = "";
  isLoading = false;
+
  isLocalActive = false;
  isMappedActive = false;
  isAnywhereActive = true;
+  isStarredActive = false;
+
  isProjectsActive = true;
  isPeopleActive = false;
  isSearchVisible = true;
@@ -470,6 +515,8 @@ export default class DiscoverView extends Vue {
        leafletObject: L.Map;
      };
      this.requestTiles(mapRef.leafletObject); // not ideal because I found this from experimentation, not documentation
+    } else if (this.isStarredActive) {
+      await this.searchStarred();
    } else {
      await this.searchAll();
    }
@@ -540,6 +587,60 @@ export default class DiscoverView extends Vue {
    }
  }

+  public async searchStarred() {
+    this.resetCounts();
+
+    // Clear any previous results
+    this.projects = [];
+    this.userProfiles = [];
+
+    try {
+      this.isLoading = true;
+
+      // Get starred project IDs from settings
+      const settings = await this.$accountSettings();
+
+      const starredIds = settings.starredPlanHandleIds || [];
+      if (starredIds.length === 0) {
+        // No starred projects
+        return;
+      }
+
+      // This could be optimized to only pull those not already in the cache (endorserServer.ts)
+
+      const planHandleIdsJson = JSON.stringify(starredIds);
+      const endpoint =
+        this.apiServer +
+        "/api/v2/report/plans?planHandleIds=" +
+        encodeURIComponent(planHandleIdsJson);
+      const response = await this.axios.get(endpoint, {
+        headers: await getHeaders(this.activeDid),
+      });
+      if (response.status !== 200) {
+        this.notify.error("Failed to load starred projects", TIMEOUTS.SHORT);
+        return;
+      }
+      const starredPlans: PlanData[] = response.data.data;
+      if (response.data.hitLimit) {
+        // someday we'll have to let them incrementally load the rest
+        this.notify.warning(
+          "Beware: you have so many starred projects that we cannot load them all.",
+          TIMEOUTS.SHORT,
+        );
+      }
+
+      this.projects = starredPlans;
+    } catch (error: unknown) {
+      logger.error("Error loading starred projects:", error);
+      this.notify.error(
+        "Failed to load starred projects. Please try again.",
+        TIMEOUTS.LONG,
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
+
  public async searchLocal(beforeId?: string) {
    this.resetCounts();

@@ -633,9 +734,12 @@ export default class DiscoverView extends Vue {
        const latestProject = this.projects[this.projects.length - 1];
        if (this.isLocalActive || this.isMappedActive) {
          this.searchLocal(latestProject.rowId);
+        } else if (this.isStarredActive) {
+          this.searchStarred();
        } else if (this.isAnywhereActive) {
          this.searchAll(latestProject.rowId);
        }
+        // Note: Starred tab doesn't support pagination since we load all starred projects at once
      } else if (this.isPeopleActive && this.userProfiles.length > 0) {
        const latestProfile = this.userProfiles[this.userProfiles.length - 1];
        if (this.isLocalActive || this.isMappedActive) {
@@ -775,6 +879,24 @@ export default class DiscoverView extends Vue {
    this.$router.push(route);
  }

+  public computedStarredTabStyleClassNames() {
+    return {
+      "inline-block": true,
+      "py-3": true,
+      "rounded-t-lg": true,
+      "border-b-2": true,
+
+      active: this.isStarredActive,
+      "text-black": this.isStarredActive,
+      "border-black": this.isStarredActive,
+      "font-semibold": this.isStarredActive,
+
+      "text-blue-600": !this.isStarredActive,
+      "border-transparent": !this.isStarredActive,
+      "hover:border-slate-400": !this.isStarredActive,
+    };
+  }
+
  public computedLocalTabStyleClassNames() {
    return {
      "inline-block": true,
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -170,10 +170,10 @@ Raymer * @version 1.0.0 */
        class="border-t p-2 border-slate-300"
        @click="goToActivityToUserPage()"
      >
-        <div class="flex justify-center">
+        <div class="flex justify-center gap-2">
          <div
            v-if="numNewOffersToUser"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
          >
            <span
              class="block text-center text-6xl"
@@ -187,7 +187,7 @@ Raymer * @version 1.0.0 */
          </div>
          <div
            v-if="numNewOffersToUserProjects"
-            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] m-1 px-4 py-4 rounded-md text-white"
+            class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
          >
            <span
              class="block text-center text-6xl"
@@ -201,6 +201,22 @@ Raymer * @version 1.0.0 */
              projects
            </p>
          </div>
+          <div
+            v-if="numNewStarredProjectChanges"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] flex-1 px-4 py-4 rounded-md text-white cursor-pointer"
+          >
+            <span
+              class="block text-center text-6xl"
+              data-testId="newStarredProjectChangesActivityNumber"
+            >
+              {{ numNewStarredProjectChanges
+              }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}
+            </span>
+            <p class="text-center">
+              favorite project{{ numNewStarredProjectChanges === 1 ? "" : "s" }}
+              with changes
+            </p>
+          </div>
        </div>
        <div class="flex justify-end mt-2">
          <button class="text-blue-500">View All New Activity For You</button>
@@ -268,6 +284,7 @@ import {
  getHeaders,
  getNewOffersToUser,
  getNewOffersToUserProjects,
+  getStarredProjectsWithChanges,
  getPlanFromCache,
 } from "../libs/endorserServer";
 import {
@@ -283,6 +300,7 @@ import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
 import { NOTIFY_CONTACT_LOADING_ISSUE } from "@/constants/notifications";
 import * as Package from "../../package.json";
 import { UNNAMED_ENTITY_NAME } from "@/constants/entities";
+import * as databaseUtil from "../db/databaseUtil";

 // consolidate this with GiveActionClaim in src/interfaces/claims.ts
 interface Claim {
@@ -395,10 +413,14 @@ export default class HomeView extends Vue {
  isRegistered = false;
  lastAckedOfferToUserJwtId?: string; // the last JWT ID for offer-to-user that they've acknowledged seeing
  lastAckedOfferToUserProjectsJwtId?: string; // the last JWT ID for offers-to-user's-projects that they've acknowledged seeing
+  lastAckedStarredPlanChangesJwtId?: string; // the last JWT ID for starred project changes that they've acknowledged seeing
  newOffersToUserHitLimit: boolean = false;
  newOffersToUserProjectsHitLimit: boolean = false;
+  newStarredProjectChangesHitLimit: boolean = false;
  numNewOffersToUser: number = 0; // number of new offers-to-user
  numNewOffersToUserProjects: number = 0; // number of new offers-to-user's-projects
+  numNewStarredProjectChanges: number = 0; // number of new starred project changes
+  starredPlanHandleIds: Array<string> = []; // list of starred project IDs
  searchBoxes: Array<{
    name: string;
    bbox: BoundingBox;
@@ -438,6 +460,7 @@ export default class HomeView extends Vue {
      // Registration check already handled in initializeIdentity()
      await this.loadFeedData();
      await this.loadNewOffers();
+      await this.loadNewStarredProjectChanges();
      await this.checkOnboarding();
    } catch (err: unknown) {
      this.handleError(err);
@@ -542,8 +565,14 @@ export default class HomeView extends Vue {
      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId;
      this.lastAckedOfferToUserProjectsJwtId =
        settings.lastAckedOfferToUserProjectsJwtId;
+      this.lastAckedStarredPlanChangesJwtId =
+        settings.lastAckedStarredPlanChangesJwtId;
      this.searchBoxes = settings.searchBoxes || [];
      this.showShortcutBvc = !!settings.showShortcutBvc;
+      this.starredPlanHandleIds = databaseUtil.parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );
      this.isAnyFeedFilterOn = checkIsAnyFeedFilterOn(settings);

      // Check onboarding status
@@ -675,6 +704,43 @@ export default class HomeView extends Vue {
    }
  }

+  /**
+   * Loads new changes for starred projects
+   * Updates:
+   * - Number of new starred project changes
+   * - Rate limit status for starred project changes
+   *
+   * @internal
+   * Called by mounted() and initializeIdentity()
+   * @requires Active DID
+   */
+  private async loadNewStarredProjectChanges() {
+    if (this.activeDid && this.starredPlanHandleIds.length > 0) {
+      try {
+        const starredProjectChanges = await getStarredProjectsWithChanges(
+          this.axios,
+          this.apiServer,
+          this.activeDid,
+          this.starredPlanHandleIds,
+          this.lastAckedStarredPlanChangesJwtId,
+        );
+        this.numNewStarredProjectChanges = starredProjectChanges.data.length;
+        this.newStarredProjectChangesHitLimit = starredProjectChanges.hitLimit;
+      } catch (error) {
+        // Don't show errors for starred project changes as it's a secondary feature
+        logger.warn(
+          "[HomeView] Failed to load starred project changes:",
+          error,
+        );
+        this.numNewStarredProjectChanges = 0;
+        this.newStarredProjectChangesHitLimit = false;
+      }
+    } else {
+      this.numNewStarredProjectChanges = 0;
+      this.newStarredProjectChangesHitLimit = false;
+    }
+  }
+
  /**
   * Checks if user needs onboarding using ultra-concise mixin utilities
   * Opens onboarding dialog if not completed
--- a/src/views/NewActivityView.vue
+++ b/src/views/NewActivityView.vue
@@ -29,7 +29,7 @@
          v-if="newOffersToUser.length > 0"
          :icon="showOffersDetails ? 'chevron-down' : 'chevron-right'"
          class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserAndMarkRead()"
+          @click.prevent="expandOffersToUserAndMarkRead()"
        />
      </div>
      <router-link to="/recent-offers-to-user" class="text-blue-500">
@@ -48,7 +48,7 @@
            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
          }}</span>
          offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
            offer.objectDescription
          }}</span
          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -67,10 +67,10 @@
          <!-- New line that appears on hover or when the offer is clicked -->
          <div
            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersAsReadStartingWith(offer.jwtId)"
+            @click.prevent="markOffersAsReadStartingWith(offer.jwtId)"
          >
            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
          </div>
        </li>
      </ul>
@@ -96,7 +96,7 @@
            showOffersToUserProjectsDetails ? 'chevron-down' : 'chevron-right'
          "
          class="cursor-pointer ml-4 mr-4 text-lg"
-          @click="expandOffersToUserProjectsAndMarkRead()"
+          @click.prevent="expandOffersToUserProjectsAndMarkRead()"
        />
      </div>
      <router-link to="/recent-offers-to-user-projects" class="text-blue-500">
@@ -115,7 +115,7 @@
            didInfo(offer.offeredByDid, activeDid, allMyDids, allContacts)
          }}</span>
          offered
-          <span v-if="offer.objectDescription">{{
+          <span v-if="offer.objectDescription" class="truncate">{{
            offer.objectDescription
          }}</span
          >{{ offer.objectDescription && offer.amount ? ", and " : "" }}
@@ -136,10 +136,153 @@
          <!-- New line that appears on hover -->
          <div
            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
-            @click="markOffersToUserProjectsAsReadStartingWith(offer.jwtId)"
+            @click.prevent="
+              markOffersToUserProjectsAsReadStartingWith(offer.jwtId)
+            "
          >
            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
-            Click to keep all above as new offers
+            Click to keep all above as unread offers
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Starred Projects with Changes Section -->
+    <div
+      class="flex justify-between mt-6"
+      data-testId="showStarredProjectChanges"
+    >
+      <div>
+        <span class="text-lg font-medium"
+          >{{ newStarredProjectChanges.length
+          }}{{ newStarredProjectChangesHitLimit ? "+" : "" }}</span
+        >
+        <span class="text-lg font-medium ml-4"
+          >Favorite Project{{
+            newStarredProjectChanges.length === 1 ? "" : "s"
+          }}
+          With Changes</span
+        >
+        <font-awesome
+          v-if="newStarredProjectChanges.length > 0"
+          :icon="
+            showStarredProjectChangesDetails ? 'chevron-down' : 'chevron-right'
+          "
+          class="cursor-pointer ml-4 mr-4 text-lg"
+          @click.prevent="expandStarredProjectChangesAndMarkRead()"
+        />
+      </div>
+    </div>
+
+    <div v-if="showStarredProjectChangesDetails" class="ml-4 mt-4">
+      <ul class="list-disc ml-4">
+        <li
+          v-for="projectChange in newStarredProjectChanges"
+          :key="projectChange.plan.handleId"
+          class="mt-4 relative group"
+        >
+          <div class="flex items-center gap-2">
+            <div class="flex-1 min-w-0">
+              <span class="font-medium">{{
+                projectChange.plan.name || "Unnamed Project"
+              }}</span>
+              <span
+                v-if="projectChange.plan.description"
+                class="text-gray-600 block truncate"
+              >
+                {{ projectChange.plan.description }}
+              </span>
+            </div>
+            <router-link
+              :to="{
+                path:
+                  '/project/' + encodeURIComponent(projectChange.plan.handleId),
+              }"
+              class="text-blue-500 flex-shrink-0"
+            >
+              <font-awesome
+                icon="file-lines"
+                class="text-blue-500 cursor-pointer"
+              />
+            </router-link>
+          </div>
+          <!-- Show what changed -->
+          <div
+            v-if="getPlanDifferences(projectChange.plan.handleId)"
+            class="text-sm mt-2"
+          >
+            <div class="font-medium mb-2">Changes</div>
+            <div class="overflow-x-auto">
+              <table
+                class="w-full text-xs border-collapse border border-gray-300 rounded-lg shadow-sm bg-white"
+              >
+                <thead>
+                  <tr class="bg-gray-50">
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    ></th>
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    >
+                      Previous
+                    </th>
+                    <th
+                      class="border border-gray-300 px-3 py-2 text-left font-semibold text-gray-700"
+                    >
+                      Current
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    v-for="(difference, field) in getPlanDifferences(
+                      projectChange.plan.handleId,
+                    )"
+                    :key="field"
+                    class="hover:bg-gray-50"
+                  >
+                    <td
+                      class="border border-gray-300 px-3 py-2 font-medium text-gray-800 break-words"
+                    >
+                      {{ getDisplayFieldName(field) }}
+                    </td>
+                    <td
+                      class="border border-gray-300 px-3 py-2 text-gray-600 break-words align-top"
+                    >
+                      <vue-markdown
+                        v-if="field === 'description' && difference.old"
+                        :source="formatFieldValue(difference.old)"
+                        class="text-sm markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.old) }}</span>
+                    </td>
+                    <td
+                      class="border border-gray-300 px-3 py-2 text-green-700 font-medium break-words align-top"
+                    >
+                      <vue-markdown
+                        v-if="field === 'description' && difference.new"
+                        :source="formatFieldValue(difference.new)"
+                        class="text-sm markdown-content"
+                      />
+                      <span v-else>{{ formatFieldValue(difference.new) }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div v-else>The changes did not affect essential project data.</div>
+          <!-- New line that appears on hover -->
+          <div
+            class="absolute left-0 w-full text-left text-gray-500 text-sm hidden group-hover:flex cursor-pointer items-center"
+            @click.prevent="
+              markStarredProjectChangesAsReadStartingWith(
+                projectChange.plan.jwtId!,
+              )
+            "
+          >
+            <span class="inline-block w-8 h-px bg-gray-500 mr-2" />
+            Click to keep all above as unread changes
          </div>
        </li>
      </ul>
@@ -149,6 +292,7 @@

 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";

 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
@@ -159,20 +303,28 @@ import { Router } from "vue-router";
 import {
  OfferSummaryRecord,
  OfferToPlanSummaryRecord,
+  PlanSummaryAndPreviousClaim,
+  PlanSummaryRecord,
 } from "../interfaces/records";
 import {
  didInfo,
+  didInfoOrNobody,
  displayAmount,
  getNewOffersToUser,
  getNewOffersToUserProjects,
+  getStarredProjectsWithChanges,
 } from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
+import * as databaseUtil from "../db/databaseUtil";
+import * as R from "ramda";
+import { PlanActionClaim } from "../interfaces/claims";
+import { GenericCredWrapper } from "@/interfaces";

@Component({
-  components: { GiftedDialog, QuickNav, EntityIcon },
+  components: { GiftedDialog, QuickNav, EntityIcon, VueMarkdown },
  mixins: [PlatformServiceMixin],
 })
 export default class NewActivityView extends Vue {
@@ -186,13 +338,22 @@ export default class NewActivityView extends Vue {
  apiServer = "";
  lastAckedOfferToUserJwtId = "";
  lastAckedOfferToUserProjectsJwtId = "";
+  lastAckedStarredPlanChangesJwtId = "";
  newOffersToUser: Array<OfferSummaryRecord> = [];
  newOffersToUserHitLimit = false;
  newOffersToUserProjects: Array<OfferToPlanSummaryRecord> = [];
  newOffersToUserProjectsHitLimit = false;
+  newStarredProjectChanges: Array<PlanSummaryAndPreviousClaim> = [];
+  newStarredProjectChangesHitLimit = false;
+  starredPlanHandleIds: Array<string> = [];
+  planDifferences: Record<
+    string,
+    Record<string, { old: unknown; new: unknown }>
+  > = {};

  showOffersDetails = false;
  showOffersToUserProjectsDetails = false;
+  showStarredProjectChangesDetails = false;
  didInfo = didInfo;
  displayAmount = displayAmount;

@@ -206,6 +367,12 @@ export default class NewActivityView extends Vue {
      this.lastAckedOfferToUserJwtId = settings.lastAckedOfferToUserJwtId || "";
      this.lastAckedOfferToUserProjectsJwtId =
        settings.lastAckedOfferToUserProjectsJwtId || "";
+      this.lastAckedStarredPlanChangesJwtId =
+        settings.lastAckedStarredPlanChangesJwtId || "";
+      this.starredPlanHandleIds = databaseUtil.parseJsonField(
+        settings.starredPlanHandleIds,
+        [],
+      );

      this.allContacts = await this.$getAllContacts();

@@ -229,6 +396,29 @@ export default class NewActivityView extends Vue {
      this.newOffersToUserProjects = offersToUserProjectsData.data;
      this.newOffersToUserProjectsHitLimit = offersToUserProjectsData.hitLimit;

+      // Load starred project changes if user has starred projects
+      if (this.starredPlanHandleIds.length > 0) {
+        try {
+          const starredProjectChangesData = await getStarredProjectsWithChanges(
+            this.axios,
+            this.apiServer,
+            this.activeDid,
+            this.starredPlanHandleIds,
+            this.lastAckedStarredPlanChangesJwtId,
+          );
+          this.newStarredProjectChanges = starredProjectChangesData.data;
+          this.newStarredProjectChangesHitLimit =
+            starredProjectChangesData.hitLimit;
+
+          // Analyze differences between current plans and previous claims
+          this.analyzePlanDifferences(this.newStarredProjectChanges);
+        } catch (error) {
+          logger.warn("Failed to load starred project changes:", error);
+          this.newStarredProjectChanges = [];
+          this.newStarredProjectChangesHitLimit = false;
+        }
+      }
+
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
    } catch (err: any) {
      logger.error("Error retrieving settings & contacts:", err);
@@ -242,13 +432,13 @@ export default class NewActivityView extends Vue {
  async expandOffersToUserAndMarkRead() {
    this.showOffersDetails = !this.showOffersDetails;
    if (this.showOffersDetails) {
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserJwtId: this.newOffersToUser[0].jwtId,
      });
      // note that we don't update this.lastAckedOfferToUserJwtId in case they
      // later choose the last one to keep the offers as new
      this.notify.info(
-        "The offers are marked as viewed. Click in the list to keep them as new.",
+        "The offers are marked read. Click in the list to keep them unread.",
        TIMEOUTS.LONG,
      );
    }
@@ -260,12 +450,12 @@ export default class NewActivityView extends Vue {
    );
    if (index !== -1 && index < this.newOffersToUser.length - 1) {
      // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserJwtId: this.newOffersToUser[index + 1].jwtId,
      });
    } else {
      // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserJwtId: this.lastAckedOfferToUserJwtId,
      });
    }
@@ -279,14 +469,14 @@ export default class NewActivityView extends Vue {
    this.showOffersToUserProjectsDetails =
      !this.showOffersToUserProjectsDetails;
    if (this.showOffersToUserProjectsDetails) {
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserProjectsJwtId:
          this.newOffersToUserProjects[0].jwtId,
      });
      // note that we don't update this.lastAckedOfferToUserProjectsJwtId in case
      // they later choose the last one to keep the offers as new
      this.notify.info(
-        "The offers are now marked as viewed. Click in the list to keep them as new.",
+        "The offers are now marked read. Click in the list to keep them unread.",
        TIMEOUTS.LONG,
      );
    }
@@ -298,13 +488,13 @@ export default class NewActivityView extends Vue {
    );
    if (index !== -1 && index < this.newOffersToUserProjects.length - 1) {
      // Set to the next offer's jwtId
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserProjectsJwtId:
          this.newOffersToUserProjects[index + 1].jwtId,
      });
    } else {
      // it's the last entry (or not found), so just keep it the same
-      await this.$updateSettings({
+      await this.$saveUserSettings(this.activeDid, {
        lastAckedOfferToUserProjectsJwtId:
          this.lastAckedOfferToUserProjectsJwtId,
      });
@@ -314,5 +504,382 @@ export default class NewActivityView extends Vue {
      TIMEOUTS.STANDARD,
    );
  }
+
+  async expandStarredProjectChangesAndMarkRead() {
+    this.showStarredProjectChangesDetails =
+      !this.showStarredProjectChangesDetails;
+    if (
+      this.showStarredProjectChangesDetails &&
+      this.newStarredProjectChanges.length > 0
+    ) {
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId:
+          this.newStarredProjectChanges[0].plan.jwtId,
+      });
+      this.notify.info(
+        "The starred project changes are now marked read. Click in the list to keep them unread.",
+        TIMEOUTS.LONG,
+      );
+    }
+  }
+
+  async markStarredProjectChangesAsReadStartingWith(jwtId: string) {
+    const index = this.newStarredProjectChanges.findIndex(
+      (change) => change.plan.jwtId === jwtId,
+    );
+    if (index !== -1 && index < this.newStarredProjectChanges.length - 1) {
+      // Set to the next change's jwtId
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId:
+          this.newStarredProjectChanges[index + 1].plan.jwtId,
+      });
+    } else {
+      // it's the last entry (or not found), so just keep it the same
+      await this.$saveUserSettings(this.activeDid, {
+        lastAckedStarredPlanChangesJwtId: this.lastAckedStarredPlanChangesJwtId,
+      });
+    }
+    this.notify.info(
+      "All starred project changes above that line are marked as unread.",
+      TIMEOUTS.STANDARD,
+    );
+  }
+
+  /**
+   * Analyzes differences between current plans and their previous claims
+   *
+   * Walks through a list of PlanSummaryAndPreviousClaim items and stores the
+   * differences between the previous claim and the current plan. This method
+   * extracts the claim from the wrappedClaimBefore object and compares relevant
+   * fields with the current plan.
+   *
+   * @param planChanges Array of PlanSummaryAndPreviousClaim objects to analyze
+   */
+  analyzePlanDifferences(planChanges: Array<PlanSummaryAndPreviousClaim>) {
+    this.planDifferences = {};
+
+    for (const planChange of planChanges) {
+      const currentPlan: PlanSummaryRecord = planChange.plan;
+      const wrappedClaim: GenericCredWrapper<PlanActionClaim> =
+        planChange.wrappedClaimBefore;
+
+      // Extract the actual claim from the wrapped claim
+      let previousClaim: PlanActionClaim;
+
+      const embeddedClaim: PlanActionClaim = wrappedClaim.claim;
+      if (
+        embeddedClaim &&
+        typeof embeddedClaim === "object" &&
+        "credentialSubject" in embeddedClaim
+      ) {
+        // It's a Verifiable Credential
+        previousClaim =
+          (embeddedClaim.credentialSubject as PlanActionClaim) || embeddedClaim;
+      } else {
+        // It's a direct claim
+        previousClaim = embeddedClaim;
+      }
+
+      if (!previousClaim || !currentPlan.handleId) {
+        continue;
+      }
+
+      const differences: Record<string, { old: unknown; new: unknown }> = {};
+
+      // Compare name
+      const normalizedOldName = this.normalizeValueForComparison(
+        previousClaim.name,
+      );
+      const normalizedNewName = this.normalizeValueForComparison(
+        currentPlan.name,
+      );
+      if (!R.equals(normalizedOldName, normalizedNewName)) {
+        differences.name = {
+          old: previousClaim.name,
+          new: currentPlan.name,
+        };
+      }
+
+      // Compare description
+      const normalizedOldDescription = this.normalizeValueForComparison(
+        previousClaim.description,
+      );
+      const normalizedNewDescription = this.normalizeValueForComparison(
+        currentPlan.description,
+      );
+      if (!R.equals(normalizedOldDescription, normalizedNewDescription)) {
+        differences.description = {
+          old: previousClaim.description,
+          new: currentPlan.description,
+        };
+      }
+
+      // Compare location (combine latitude and longitude into one row)
+      const oldLat = this.normalizeValueForComparison(
+        previousClaim.location?.geo?.latitude,
+      );
+      const oldLon = this.normalizeValueForComparison(
+        previousClaim.location?.geo?.longitude,
+      );
+      const newLat = this.normalizeValueForComparison(currentPlan.locLat);
+      const newLon = this.normalizeValueForComparison(currentPlan.locLon);
+
+      if (!R.equals(oldLat, newLat) || !R.equals(oldLon, newLon)) {
+        differences.location = {
+          old: this.formatLocationValue(oldLat, oldLon, true),
+          new: this.formatLocationValue(newLat, newLon, false),
+        };
+      }
+
+      // Compare agent (issuer)
+      const oldAgent = didInfoOrNobody(
+        previousClaim.agent?.identifier,
+        this.activeDid,
+        this.allMyDids,
+        this.allContacts,
+      );
+      const newAgent = didInfoOrNobody(
+        currentPlan.agentDid,
+        this.activeDid,
+        this.allMyDids,
+        this.allContacts,
+      );
+      const normalizedOldAgent = this.normalizeValueForComparison(oldAgent);
+      const normalizedNewAgent = this.normalizeValueForComparison(newAgent);
+      if (!R.equals(normalizedOldAgent, normalizedNewAgent)) {
+        differences.agent = {
+          old: oldAgent,
+          new: newAgent,
+        };
+      }
+
+      // Compare start time
+      const oldStartTime = previousClaim.startTime;
+      const newStartTime = currentPlan.startTime;
+      const normalizedOldStartTime =
+        this.normalizeDateForComparison(oldStartTime);
+      const normalizedNewStartTime =
+        this.normalizeDateForComparison(newStartTime);
+      if (!R.equals(normalizedOldStartTime, normalizedNewStartTime)) {
+        differences.startTime = {
+          old: oldStartTime,
+          new: newStartTime,
+        };
+      }
+
+      // Compare end time
+      const oldEndTime = previousClaim.endTime;
+      const newEndTime = currentPlan.endTime;
+      const normalizedOldEndTime = this.normalizeDateForComparison(oldEndTime);
+      const normalizedNewEndTime = this.normalizeDateForComparison(newEndTime);
+      if (!R.equals(normalizedOldEndTime, normalizedNewEndTime)) {
+        differences.endTime = {
+          old: oldEndTime,
+          new: newEndTime,
+        };
+      }
+
+      // Compare image
+      const oldImage = previousClaim.image;
+      const newImage = currentPlan.image;
+      const normalizedOldImage = this.normalizeValueForComparison(oldImage);
+      const normalizedNewImage = this.normalizeValueForComparison(newImage);
+      if (!R.equals(normalizedOldImage, normalizedNewImage)) {
+        differences.image = {
+          old: oldImage,
+          new: newImage,
+        };
+      }
+
+      // Compare url
+      const oldUrl = previousClaim.url;
+      const newUrl = currentPlan.url;
+      const normalizedOldUrl = this.normalizeValueForComparison(oldUrl);
+      const normalizedNewUrl = this.normalizeValueForComparison(newUrl);
+      if (!R.equals(normalizedOldUrl, normalizedNewUrl)) {
+        differences.url = {
+          old: oldUrl,
+          new: newUrl,
+        };
+      }
+
+      // Store differences if any were found
+      if (!R.isEmpty(differences)) {
+        this.planDifferences[currentPlan.handleId] = differences;
+        logger.debug(
+          "[NewActivityView] Plan differences found for",
+          currentPlan.handleId,
+          differences,
+        );
+      }
+    }
+
+    logger.debug(
+      "[NewActivityView] Analyzed",
+      planChanges.length,
+      "plan changes, found differences in",
+      Object.keys(this.planDifferences).length,
+      "plans",
+    );
+  }
+
+  /**
+   * Normalizes values for comparison - treats null, undefined, and empty string as equivalent
+   *
+   * @param value The value to normalize
+   * @returns The normalized value (null for null/undefined/empty, otherwise the original value)
+   */
+  normalizeValueForComparison<T>(value: T | null | undefined): T | null {
+    if (value === null || value === undefined || value === "") {
+      return null;
+    }
+    return value;
+  }
+
+  /**
+   * Normalizes date values for comparison by converting strings to Date objects
+   * Returns null for null/undefined/empty values, Date objects for valid date strings
+   */
+  normalizeDateForComparison(value: unknown): Date | null {
+    if (value === null || value === undefined || value === "") {
+      return null;
+    }
+    if (typeof value === "string") {
+      const date = new Date(value);
+      // Check if the date is valid
+      return isNaN(date.getTime()) ? null : date;
+    }
+    if (value instanceof Date) {
+      return isNaN(value.getTime()) ? null : value;
+    }
+    return null;
+  }
+
+  /**
+   * Gets the differences for a specific plan by handle ID
+   *
+   * @param handleId The handle ID of the plan to get differences for
+   * @returns The differences object or null if no differences found
+   */
+  getPlanDifferences(
+    handleId: string,
+  ): Record<string, { old: unknown; new: unknown }> | null {
+    return this.planDifferences[handleId] || null;
+  }
+
+  /**
+   * Formats a field value for display in the UI
+   *
+   * @param value The value to format
+   * @returns A human-readable string representation
+   */
+  formatFieldValue(value: unknown): string {
+    if (value === null || value === undefined) {
+      return "Not set";
+    }
+    if (typeof value === "string") {
+      const stringValue = value || "Empty";
+
+      // Check if it's a date/time string
+      if (this.isDateTimeString(stringValue)) {
+        return this.formatDateTime(stringValue);
+      }
+
+      // Check if it's a URL
+      if (this.isUrl(stringValue)) {
+        return stringValue; // Keep URLs as-is for now
+      }
+
+      return stringValue;
+    }
+    if (typeof value === "number") {
+      return value.toString();
+    }
+    if (typeof value === "boolean") {
+      return value ? "Yes" : "No";
+    }
+    // For complex objects, stringify
+    const stringified = JSON.stringify(value);
+    return stringified;
+  }
+
+  /**
+   * Checks if a string appears to be a date/time string
+   */
+  isDateTimeString(value: string): boolean {
+    if (!value) return false;
+    // Check for ISO 8601 format or other common date formats
+    const dateRegex = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2})?(\.\d{3})?Z?$/;
+    return dateRegex.test(value) || !isNaN(Date.parse(value));
+  }
+
+  /**
+   * Checks if a string is a URL
+   */
+  isUrl(value: string): boolean {
+    if (!value) return false;
+    try {
+      new URL(value);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Formats a date/time string for display
+   */
+  formatDateTime(value: string): string {
+    try {
+      const date = new Date(value);
+      return date.toLocaleString();
+    } catch {
+      return value; // Return original if parsing fails
+    }
+  }
+
+  /**
+   * Gets a human-readable field name for display
+   *
+   * @param fieldName The internal field name
+   * @returns A formatted field name for display
+   */
+  getDisplayFieldName(fieldName: string): string {
+    const fieldNameMap: Record<string, string> = {
+      name: "Name",
+      description: "Description",
+      location: "Location",
+      agent: "Agent",
+      startTime: "Start Time",
+      endTime: "End Time",
+      image: "Image",
+      url: "URL",
+    };
+    return fieldNameMap[fieldName] || fieldName;
+  }
+
+  /**
+   * Formats location values for display
+   *
+   * @param latitude The latitude value
+   * @param longitude The longitude value
+   * @param isOldValue Whether this is the old value (true) or new value (false)
+   * @returns A formatted location string
+   */
+  formatLocationValue(
+    latitude: number | undefined | null,
+    longitude: number | undefined | null,
+    isOldValue: boolean = false,
+  ): string {
+    if (latitude == null && longitude == null) {
+      return "Not set";
+    }
+    // If there's any location data, show generic labels instead of coordinates
+    if (isOldValue) {
+      return "A Location";
+    } else {
+      return "New Location";
+    }
+  }
 }
 </script>
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -27,10 +27,18 @@
          >
            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
          </button>
-          <button title="Copy Link to Project" @click="onCopyLinkClick()">
+          <button
+            :title="
+              isStarred
+                ? 'Remove from starred projects'
+                : 'Add to starred projects'
+            "
+            @click="toggleStar()"
+          >
            <font-awesome
-              icon="link"
-              class="text-sm text-slate-500 ml-2 mb-1"
+              :icon="isStarred ? 'star' : ['far', 'star']"
+              :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
+              class="text-sm ml-2 mb-1"
            />
          </button>
        </h2>
@@ -58,13 +66,13 @@
                  icon="user"
                  class="fa-fw text-slate-400"
                ></font-awesome>
-                <span class="truncate inline-block max-w-[calc(100%-2rem)]">
+                <span class="truncate max-w-[calc(100%-2rem)] ml-1">
                  {{ issuerInfoObject?.displayName }}
                </span>

                <span
                  v-if="!serverUtil.isHiddenDid(issuer)"
-                  class="inline-flex items-center"
+                  class="inline-flex items-center ml-1"
                >
                  <router-link
                    :to="{
@@ -140,18 +148,22 @@

        <div class="text-sm text-slate-500">
          <div v-if="!expanded">
-            {{ truncatedDesc }}
+            <vue-markdown
+              :source="truncatedDesc"
+              class="mb-4 markdown-content"
+            />
            <a
              v-if="description.length >= truncateLength"
-              class="uppercase text-xs font-semibold text-slate-700"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
              @click="expandText"
              >... Read More</a
            >
          </div>
          <div v-else>
-            {{ description }}
+            <vue-markdown :source="description" class="mb-4 markdown-content" />
            <a
-              class="uppercase text-xs font-semibold text-slate-700"
+              v-if="description.length >= truncateLength"
+              class="mt-4 uppercase text-xs font-semibold text-blue-700 cursor-pointer"
              @click="collapseText"
              >- Read Less</a
            >
@@ -592,7 +604,10 @@
 <script lang="ts">
 import { AxiosError } from "axios";
 import { Component, Vue } from "vue-facing-decorator";
+import VueMarkdown from "vue-markdown-render";
 import { Router } from "vue-router";
+import { useClipboard } from "@vueuse/core";
+
 import {
  GenericVerifiableCredential,
  GenericCredWrapper,
@@ -603,25 +618,24 @@ import {
  PlanSummaryRecord,
 } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
+import HiddenDidDialog from "../components/HiddenDidDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
 import TopMessage from "../components/TopMessage.vue";
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
 import ProjectIcon from "../components/ProjectIcon.vue";
-import { NotificationIface } from "../constants/app";
-// Removed legacy logging import - migrated to PlatformServiceMixin
+import { APP_SERVER, NotificationIface } from "../constants/app";
+import { UNNAMED_PROJECT } from "../constants/entities";
+import { NOTIFY_CONFIRM_CLAIM } from "../constants/notifications";
+import * as databaseUtil from "../db/databaseUtil";
 import { Contact } from "../db/tables/contacts";
 import * as libsUtil from "../libs/util";
 import * as serverUtil from "../libs/endorserServer";
 import { retrieveAccountDids } from "../libs/util";
-import HiddenDidDialog from "../components/HiddenDidDialog.vue";
-import { logger } from "../utils/logger";
-import { useClipboard } from "@vueuse/core";
+import { logger } from "@/utils/logger";
 import { PlatformServiceMixin } from "@/utils/PlatformServiceMixin";
 import { createNotifyHelpers, TIMEOUTS } from "@/utils/notify";
-import { NOTIFY_CONFIRM_CLAIM } from "@/constants/notifications";
-import { APP_SERVER } from "@/constants/app";
-import { UNNAMED_PROJECT } from "@/constants/entities";
+
 /**
 * Project View Component
 * @author Matthew Raymer
@@ -663,6 +677,7 @@ import { UNNAMED_PROJECT } from "@/constants/entities";
    ProjectIcon,
    QuickNav,
    TopMessage,
+    VueMarkdown,
  },
  mixins: [PlatformServiceMixin],
 })
@@ -718,6 +733,8 @@ export default class ProjectViewView extends Vue {
  givesProvidedByHitLimit = false;
  givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
  imageUrl = "";
+  /** Whether this project is starred by the user */
+  isStarred = false;
  /** Project issuer DID */
  issuer = "";
  /** Cached issuer information */
@@ -756,7 +773,7 @@ export default class ProjectViewView extends Vue {
  totalsExpanded = false;
  truncatedDesc = "";
  /** Truncation length */
-  truncateLength = 40;
+  truncateLength = 200;

  // Utility References
  libsUtil = libsUtil;
@@ -805,6 +822,12 @@ export default class ProjectViewView extends Vue {
    }
    this.loadProject(this.projectId, this.activeDid);
    this.loadTotals();
+
+    // Check if this project is starred when settings are loaded
+    if (this.projectId && settings.starredPlanHandleIds) {
+      const starredIds = settings.starredPlanHandleIds || [];
+      this.isStarred = starredIds.includes(this.projectId);
+    }
  }

  /**
@@ -880,7 +903,7 @@ export default class ProjectViewView extends Vue {
        );
        this.issuerVisibleToDids = resp.data.issuerVisibleToDids || [];
        this.name = resp.data.claim?.name || "(no name)";
-        this.description = resp.data.claim?.description || "(no description)";
+        this.description = resp.data.claim?.description || "";
        this.truncatedDesc = this.description.slice(0, this.truncateLength);
        this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
        this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
@@ -1470,5 +1493,72 @@ export default class ProjectViewView extends Vue {
      this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
    );
  }
+
+  /**
+   * Toggle the starred status of the current project
+   */
+  async toggleStar() {
+    if (!this.projectId) return;
+
+    try {
+      if (!this.isStarred) {
+        // Add to starred projects
+        const settings = await databaseUtil.retrieveSettingsForActiveAccount();
+        const starredIds = settings.starredPlanHandleIds || [];
+
+        if (!starredIds.includes(this.projectId)) {
+          const newStarredIds = [...starredIds, this.projectId];
+          const newIdsParam = JSON.stringify(newStarredIds);
+          const result = await databaseUtil.updateDidSpecificSettings(
+            this.activeDid,
+            // @ts-expect-error until we use SettingsWithJsonString properly
+            { starredPlanHandleIds: newIdsParam },
+          );
+          if (result) {
+            this.isStarred = true;
+          } else {
+            // eslint-disable-next-line no-console
+            console.log(
+              "Still getting a bad result from SQL update to star a project.",
+            );
+          }
+        }
+        if (!settings.lastAckedStarredPlanChangesJwtId) {
+          await databaseUtil.updateDidSpecificSettings(this.activeDid, {
+            lastAckedStarredPlanChangesJwtId: settings.lastViewedClaimId,
+          });
+        }
+      } else {
+        // Remove from starred projects
+        const settings = await databaseUtil.retrieveSettingsForActiveAccount();
+        const starredIds = settings.starredPlanHandleIds || [];
+
+        const updatedIds = starredIds.filter((id) => id !== this.projectId);
+        const newIdsParam = JSON.stringify(updatedIds);
+        const result = await databaseUtil.updateDidSpecificSettings(
+          this.activeDid,
+          // @ts-expect-error until we use SettingsWithJsonString properly
+          { starredPlanHandleIds: newIdsParam },
+        );
+        if (result) {
+          this.isStarred = false;
+        } else {
+          // eslint-disable-next-line no-console
+          logger.error("Got a bad result from SQL update to unstar a project.");
+        }
+      }
+    } catch (error) {
+      logger.error("Error toggling star status:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to update starred status. Please try again.",
+        },
+        3000,
+      );
+    }
+  }
 }
 </script>
--- a/test-playwright/testUtils.ts
+++ b/test-playwright/testUtils.ts
@@ -169,9 +169,10 @@ export async function generateAndRegisterEthrUser(page: Page): Promise<string> {
 }

 // Function to generate a random string of specified length
+// Note that this only generates up to 10 characters
 export async function generateRandomString(length: number): Promise<string> {
  return Math.random()
-    .toString(36)
+    .toString(36) // base 36 only generates up to 10 characters
    .substring(2, 2 + length);
 }

@@ -180,7 +181,7 @@ export async function createUniqueStringsArray(
  count: number
 ): Promise<string[]> {
  const stringsArray: string[] = [];
-  const stringLength = 16;
+  const stringLength = 5; // max of 10; see generateRandomString

  for (let i = 0; i < count; i++) {
    let randomString = await generateRandomString(stringLength);
Author	SHA1	Message	Date
Trent Larson	db4496c57b	fix: linting	2025-09-27 13:24:28 -06:00
Trent Larson	a51fd90659	feat: add starred project list in search, refactor variable names	2025-09-26 20:13:18 -06:00
Trent Larson	855448d07a	feat: add a page to see all the starred projects	2025-09-10 14:40:36 -06:00
Trent Larson	9f1495e185	feat: alloww markdown in the descriptions and render them appropriately	2025-09-01 18:40:35 -06:00
Trent Larson	f61cb6eea7	fix: on project changes, truncate the description properly (to avoid screen zooming in) and widen the table	2025-09-01 14:53:39 -06:00
Trent Larson	d3f54d6bff	feat: move the user profile up on page, reword "star" to "favorite"	2025-08-31 08:21:25 -06:00
Trent Larson	2bb733a9ea	feat: make each of the "new" buttons on the home page the same size	2025-08-31 07:46:10 -06:00
Trent Larson	7da6f722f5	fix: fix remaining problems with recent plan changes	2025-08-30 21:30:03 -06:00
Trent Larson	475f4d5ce5	feat: add changed details for plans with recent changes (not all are accurate yet)	2025-08-30 17:18:56 -06:00
Trent Larson	24a7cf5eb6	feat: add a notification for changes to starred projects	2025-08-29 17:31:00 -06:00
Trent Larson	da0621c09a	feat: Start the ability to star/bookmark a project. - Currently toggles & stores correctly locally on project. Does not show on other screens.	2025-08-29 15:03:13 -06:00