fix(ui): resolve duplicate attributes and improve code style

- Remove duplicate class attributes in ProjectsView and ClaimView
- Fix attribute ordering for better readability
- Replace this references with direct variable names in templates
- Update icon-size prop to use kebab-case
- Remove unnecessary comments and improve formatting
- Fix import organization in ProjectsView

This commit resolves Vue template errors and improves code consistency.

src/views/HomeView.vue

@@ -1,12 +1,8 @@
-/**
- * @file HomeView.vue
- * @description Main view component for the application's home page. Handles user identity, feed management,
- * and interaction with various dialogs and components. Implements infinite scrolling for activity feed
- * and manages user registration status.
- * 
- * @author Matthew Raymer
- * @version 1.0.0
- */
+/** * @file HomeView.vue * @description Main view component for the
+application's home page. Handles user identity, feed management, * and
+interaction with various dialogs and components. Implements infinite scrolling
+for activity feed * and manages user registration status. * * @author Matthew
+Raymer * @version 1.0.0 */
 
 <template>
   <QuickNav selected="Home" />
@@ -356,21 +352,21 @@ import { GiveRecordWithContactInfo } from "types";
 
 /**
  * HomeView Component
- * 
+ *
  * Main view component that handles:
  * 1. User identity and registration management
  * 2. Activity feed with infinite scrolling
  * 3. Contact management and display
  * 4. Gift/claim creation and viewing
  * 5. Feed filtering and settings
- * 
+ *
  * Template Usage:
  * ```vue
  * <HomeView>
  *   <!-- Content is managed internally -->
  * </HomeView>
  * ```
- * 
+ *
  * Component Dependencies:
  * - QuickNav: Navigation component
  * - TopMessage: Message display component
@@ -444,7 +440,7 @@ export default class HomeView extends Vue {
    * 5. Load feed data
    * 6. Load new offers
    * 7. Check onboarding status
-   * 
+   *
    * @internal
    * Called automatically by Vue lifecycle system
    */
@@ -468,7 +464,7 @@ export default class HomeView extends Vue {
    * - Creates new DID if none exists
    * - Loads user settings and contacts
    * - Checks registration status
-   * 
+   *
    * @internal
    * Called by mounted()
    * @throws Logs error if DID retrieval fails
@@ -576,7 +572,7 @@ export default class HomeView extends Vue {
    * - Feed filters and view settings
    * - Registration status
    * - Notification acknowledgments
-   * 
+   *
    * @internal
    * Called by mounted() and reloadFeedOnChange()
    */
@@ -600,7 +596,7 @@ export default class HomeView extends Vue {
   /**
    * Loads user contacts from database
    * Used for displaying contact info in feed and actions
-   * 
+   *
    * @internal
    * Called by mounted() and initializeIdentity()
    */
@@ -613,7 +609,7 @@ export default class HomeView extends Vue {
    * - Checks if unregistered user can access API
    * - Updates registration status if successful
    * - Preserves unregistered state on failure
-   * 
+   *
    * @internal
    * Called by mounted() and initializeIdentity()
    */
@@ -642,7 +638,7 @@ export default class HomeView extends Vue {
   /**
    * Initializes feed data
    * Triggers updateAllFeed() to populate activity feed
-   * 
+   *
    * @internal
    * Called by mounted()
    */
@@ -656,7 +652,7 @@ export default class HomeView extends Vue {
    * - Number of new direct offers
    * - Number of new project offers
    * - Rate limit status for both
-   * 
+   *
    * @internal
    * Called by mounted() and initializeIdentity()
    * @requires Active DID
@@ -686,7 +682,7 @@ export default class HomeView extends Vue {
   /**
    * Checks if user needs onboarding
    * Opens onboarding dialog if not completed
-   * 
+   *
    * @internal
    * Called by mounted()
    */
@@ -701,7 +697,7 @@ export default class HomeView extends Vue {
    * Handles errors during initialization
    * - Logs error to console and database
    * - Displays user notification
-   * 
+   *
    * @internal
    * Called by mounted() and handleFeedError()
    * @param err Error object with optional userMessage
@@ -723,7 +719,7 @@ export default class HomeView extends Vue {
 
   /**
    * Checks if feed results are being filtered
-   * 
+   *
    * @public
    * Used in template for filter button display
    * @returns true if visible or nearby filters are active
@@ -734,7 +730,7 @@ export default class HomeView extends Vue {
 
   /**
    * Checks if browser notifications are supported
-   * 
+   *
    * @public
    * Used in template for notification feature detection
    * @returns true if Notification API is available
@@ -748,7 +744,7 @@ export default class HomeView extends Vue {
    * - Updates filter states
    * - Clears existing feed data
    * - Triggers new feed load
-   * 
+   *
    * @public
    * Called by FeedFilters component when filters change
    */
@@ -765,7 +761,7 @@ export default class HomeView extends Vue {
 
   /**
    * Loads more feed items for infinite scroll
-   * 
+   *
    * @public
    * Called by InfiniteScroll component when bottom is reached
    * @param payload Boolean indicating if more items should be loaded
@@ -781,18 +777,18 @@ export default class HomeView extends Vue {
 
   /**
    * Checks if coordinates fall within any search box
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: shouldIncludeRecord()
    * Calls: None
-   * 
+   *
    * @chain
    * shouldIncludeRecord() -> latLongInAnySearchBox()
-   * 
+   *
    * @requires
    * - this.searchBoxes
-   * 
+   *
    * @param lat Latitude to check
    * @param long Longitude to check
    * @returns true if coordinates are within any search box
@@ -812,10 +808,10 @@ export default class HomeView extends Vue {
 
   /**
    * Updates feed with latest activity
-   * 
+   *
    * @internal
    * @callGraph
-   * Called by: 
+   * Called by:
    * - loadMoreGives()
    * - initializeIdentity()
    * Calls:
@@ -823,16 +819,16 @@ export default class HomeView extends Vue {
    * - processFeedResults()
    * - updateFeedLastViewedId()
    * - handleFeedError()
-   * 
+   *
    * @chain
    * loadMoreGives() -> updateAllFeed()
    * initializeIdentity() -> updateAllFeed()
-   * 
+   *
    * @requires
    * - this.apiServer
    * - this.activeDid
    * - this.feedPreviousOldestId
-   * 
+   *
    * @modifies
    * - this.isFeedLoading
    * - this.feedData (via processFeedResults)
@@ -841,9 +837,12 @@ export default class HomeView extends Vue {
   async updateAllFeed() {
     this.isFeedLoading = true;
     let endOfResults = true;
-    
+
     try {
-      const results = await this.retrieveGives(this.apiServer, this.feedPreviousOldestId);
+      const results = await this.retrieveGives(
+        this.apiServer,
+        this.feedPreviousOldestId,
+      );
       if (results.data.length > 0) {
         endOfResults = false;
         await this.processFeedResults(results.data);
@@ -856,29 +855,29 @@ export default class HomeView extends Vue {
     if (this.feedData.length === 0 && !endOfResults) {
       await this.updateAllFeed();
     }
-    
+
     this.isFeedLoading = false;
   }
 
   /**
    * Processes feed results and adds them to feedData
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: updateAllFeed()
    * Calls: processRecord()
-   * 
+   *
    * @chain
    * updateAllFeed() -> processFeedResults()
-   * 
+   *
    * @requires
    * - this.feedData
    * - this.feedPreviousOldestId
-   * 
+   *
    * @modifies
    * - this.feedData
    * - this.feedPreviousOldestId
-   * 
+   *
    * @param records Array of feed records to process
    */
   private async processFeedResults(records: GiveSummaryRecord[]) {
@@ -893,11 +892,11 @@ export default class HomeView extends Vue {
 
   /**
    * Processes a single record and returns it if it passes filters
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: processFeedResults()
-   * Calls: 
+   * Calls:
    * - extractClaim()
    * - extractGiverDid()
    * - extractRecipientDid()
@@ -906,24 +905,26 @@ export default class HomeView extends Vue {
    * - extractProvider()
    * - getProvidedByPlan()
    * - createFeedRecord()
-   * 
+   *
    * @chain
    * updateAllFeed() -> processFeedResults() -> processRecord()
-   * 
+   *
    * @requires
    * - this.isAnyFeedFilterOn
    * - this.isFeedFilteredByVisible
    * - this.isFeedFilteredByNearby
    * - this.activeDid
    * - this.allContacts
-   * 
+   *
    * @modifies
    * - this.feedData (via createFeedRecord)
-   * 
+   *
    * @param record The record to process
    * @returns Processed record with contact info if it passes filters, null otherwise
    */
-  private async processRecord(record: GiveSummaryRecord): Promise<GiveRecordWithContactInfo | null> {
+  private async processRecord(
+    record: GiveSummaryRecord,
+  ): Promise<GiveRecordWithContactInfo | null> {
     const claim = this.extractClaim(record);
     const giverDid = this.extractGiverDid(claim);
     const recipientDid = this.extractRecipientDid(claim);
@@ -936,23 +937,31 @@ export default class HomeView extends Vue {
     const provider = this.extractProvider(claim);
     const providedByPlan = await this.getProvidedByPlan(provider);
 
-    return this.createFeedRecord(record, claim, giverDid, recipientDid, provider, fulfillsPlan, providedByPlan);
+    return this.createFeedRecord(
+      record,
+      claim,
+      giverDid,
+      recipientDid,
+      provider,
+      fulfillsPlan,
+      providedByPlan,
+    );
   }
 
   /**
    * Extracts claim from record, handling both direct and wrapped claims
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: processRecord()
    * Calls: None
-   * 
+   *
    * @chain
    * processRecord() -> extractClaim()
-   * 
+   *
    * @requires
    * - record.fullClaim
-   * 
+   *
    * @param record The record containing the claim
    * @returns The extracted claim object
    */
@@ -963,18 +972,18 @@ export default class HomeView extends Vue {
 
   /**
    * Extracts giver DID from claim
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: processRecord()
    * Calls: None
-   * 
+   *
    * @chain
    * processRecord() -> extractGiverDid()
-   * 
+   *
    * @requires
    * - claim.agent
-   * 
+   *
    * @param claim The claim object containing giver information
    * @returns The giver's DID
    */
@@ -985,7 +994,7 @@ export default class HomeView extends Vue {
 
   /**
    * Extracts recipient DID from claim
-   * 
+   *
    * @internal
    * Called by processRecord()
    */
@@ -996,20 +1005,20 @@ export default class HomeView extends Vue {
 
   /**
    * Gets fulfills plan from cache
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: processRecord()
    * Calls: getPlanFromCache()
-   * 
+   *
    * @chain
    * processRecord() -> getFulfillsPlan()
-   * 
+   *
    * @requires
    * - this.axios
    * - this.apiServer
    * - this.activeDid
-   * 
+   *
    * @param record The record containing the plan handle ID
    * @returns The fulfills plan object
    */
@@ -1024,28 +1033,31 @@ export default class HomeView extends Vue {
 
   /**
    * Checks if record should be included based on filters
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: processRecord()
-   * Calls: 
+   * Calls:
    * - containsNonHiddenDid()
    * - latLongInAnySearchBox()
-   * 
+   *
    * @chain
    * processRecord() -> shouldIncludeRecord()
-   * 
+   *
    * @requires
    * - this.isAnyFeedFilterOn
    * - this.isFeedFilteredByVisible
    * - this.isFeedFilteredByNearby
    * - this.searchBoxes
-   * 
+   *
    * @param record The record to check
    * @param fulfillsPlan The fulfills plan object
    * @returns true if record should be included based on filters
    */
-  private shouldIncludeRecord(record: GiveSummaryRecord, fulfillsPlan: any): boolean {
+  private shouldIncludeRecord(
+    record: GiveSummaryRecord,
+    fulfillsPlan: any,
+  ): boolean {
     if (!this.isAnyFeedFilterOn) {
       return true;
     }
@@ -1055,9 +1067,17 @@ export default class HomeView extends Vue {
       anyMatch = true;
     }
 
-    if (!anyMatch && this.isFeedFilteredByNearby && record.fulfillsPlanHandleId) {
+    if (
+      !anyMatch &&
+      this.isFeedFilteredByNearby &&
+      record.fulfillsPlanHandleId
+    ) {
       if (fulfillsPlan?.locLat && fulfillsPlan?.locLon) {
-        anyMatch = this.latLongInAnySearchBox(fulfillsPlan.locLat, fulfillsPlan.locLon) ?? false;
+        anyMatch =
+          this.latLongInAnySearchBox(
+            fulfillsPlan.locLat,
+            fulfillsPlan.locLon,
+          ) ?? false;
       }
     }
 
@@ -1066,7 +1086,7 @@ export default class HomeView extends Vue {
 
   /**
    * Extracts provider from claim
-   * 
+   *
    * @internal
    * Called by processRecord()
    */
@@ -1076,7 +1096,7 @@ export default class HomeView extends Vue {
 
   /**
    * Gets provided by plan from cache
-   * 
+   *
    * @internal
    * Called by processRecord()
    */
@@ -1091,22 +1111,22 @@ export default class HomeView extends Vue {
 
   /**
    * Creates a feed record with contact info
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: processRecord()
-   * Calls: 
+   * Calls:
    * - didInfoForContact()
    * - contactForDid()
-   * 
+   *
    * @chain
    * processRecord() -> createFeedRecord()
-   * 
+   *
    * @requires
    * - this.activeDid
    * - this.allContacts
    * - this.allMyDids
-   * 
+   *
    * @param record The base record
    * @param claim The claim object
    * @param giverDid The giver's DID
@@ -1123,13 +1143,13 @@ export default class HomeView extends Vue {
     recipientDid: string,
     provider: any,
     fulfillsPlan: any,
-    providedByPlan: any
+    providedByPlan: any,
   ): GiveRecordWithContactInfo {
     return {
       ...record,
       jwtId: record.jwtId,
       fullClaim: record.fullClaim,
-      description: record.description || '',
+      description: record.description || "",
       handleId: record.handleId,
       issuerDid: record.issuerDid,
       fulfillsPlanHandleId: record.fulfillsPlanHandleId,
@@ -1160,7 +1180,7 @@ export default class HomeView extends Vue {
 
   /**
    * Updates the last viewed claim ID in settings
-   * 
+   *
    * @internal
    * Called by updateAllFeed()
    */
@@ -1178,7 +1198,7 @@ export default class HomeView extends Vue {
 
   /**
    * Handles feed error and shows notification
-   * 
+   *
    * @internal
    * Called by updateAllFeed()
    */
@@ -1197,7 +1217,7 @@ export default class HomeView extends Vue {
 
   /**
    * Retrieve claims in reverse chronological order
-   * 
+   *
    * @internal
    * Called by updateAllFeed()
    * @param endorserApiServer API server URL
@@ -1237,22 +1257,22 @@ export default class HomeView extends Vue {
 
   /**
    * Formats gift description with giver and recipient info
-   * 
+   *
    * @public
    * @callGraph
    * Called by: Template
    * Calls: displayAmount()
-   * 
+   *
    * @chain
    * Template -> giveDescription() -> displayAmount() -> currencyShortWordForCode()
-   * 
+   *
    * @requires
    * - giveRecord.fullClaim
    * - giveRecord.giver
    * - giveRecord.receiver
    * - giveRecord.recipientProjectName
    * - giveRecord.providerPlanName
-   * 
+   *
    * @param giveRecord Record containing gift information
    * @returns formatted description string
    */
@@ -1338,7 +1358,7 @@ export default class HomeView extends Vue {
 
   /**
    * Navigates to activity page
-   * 
+   *
    * @public
    * Called by template click handler
    */
@@ -1348,7 +1368,7 @@ export default class HomeView extends Vue {
 
   /**
    * Navigates to claim details page
-   * 
+   *
    * @public
    * Called by ActivityListItem component
    * @param jwtId ID of the claim to view
@@ -1362,19 +1382,19 @@ export default class HomeView extends Vue {
 
   /**
    * Formats amount with currency code
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: giveDescription()
    * Calls: currencyShortWordForCode()
-   * 
+   *
    * @chain
    * giveDescription() -> displayAmount() -> currencyShortWordForCode()
-   * 
+   *
    * @requires
    * - code: string (currency code)
    * - amt: number (amount to format)
-   * 
+   *
    * @param code Currency code
    * @param amt Amount to format
    * @returns formatted amount string
@@ -1385,19 +1405,19 @@ export default class HomeView extends Vue {
 
   /**
    * Gets currency word based on code and plurality
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: displayAmount()
    * Calls: None
-   * 
+   *
    * @chain
    * giveDescription() -> displayAmount() -> currencyShortWordForCode()
-   * 
+   *
    * @requires
    * - unitCode: string (currency code)
    * - single: boolean (whether to use singular form)
-   * 
+   *
    * @param unitCode Currency code
    * @param single Whether to use singular form
    * @returns formatted currency word
@@ -1408,22 +1428,22 @@ export default class HomeView extends Vue {
 
   /**
    * Opens dialog for creating new gift/claim
-   * 
+   *
    * @public
    * @callGraph
-   * Called by: 
+   * Called by:
    * - Template
    * - openGiftedPrompts()
    * Calls: GiftedDialog.open()
-   * 
+   *
    * @chain
    * Template -> openDialog()
    * openGiftedPrompts() -> openDialog()
-   * 
+   *
    * @requires
    * - this.$refs.customDialog
    * - this.activeDid
-   * 
+   *
    * @param giver Optional contact info for giver
    * @param description Optional gift description
    */
@@ -1442,18 +1462,18 @@ export default class HomeView extends Vue {
 
   /**
    * Opens prompts for gift ideas
-   * 
+   *
    * @public
    * @callGraph
    * Called by: Template
    * Calls: openDialog()
-   * 
+   *
    * @chain
    * Template -> openGiftedPrompts() -> openDialog()
-   * 
+   *
    * @requires
    * - this.$refs.giftedPrompts
-   * 
+   *
    * @param callback Function to handle selected gift info
    */
   openGiftedPrompts() {
@@ -1464,7 +1484,7 @@ export default class HomeView extends Vue {
 
   /**
    * Opens feed filter configuration
-   * 
+   *
    * @public
    * Called by template click handler
    */
@@ -1474,7 +1494,7 @@ export default class HomeView extends Vue {
 
   /**
    * Shows toast notification to user
-   * 
+   *
    * @internal
    * Used for various user notifications
    * @param message Message to display
@@ -1493,7 +1513,7 @@ export default class HomeView extends Vue {
 
   /**
    * Computes CSS classes for known person icons
-   * 
+   *
    * @public
    * Used in template for icon styling
    * @param known Whether the person is known
@@ -1505,17 +1525,17 @@ export default class HomeView extends Vue {
 
   /**
    * Shows name input dialog if needed
-   * 
+   *
    * @public
    * @callGraph
    * Called by: Template
-   * Calls: 
+   * Calls:
    * - UserNameDialog.open()
    * - promptForShareMethod()
-   * 
+   *
    * @chain
    * Template -> showNameThenIdDialog() -> promptForShareMethod()
-   * 
+   *
    * @requires
    * - this.$refs.userNameDialog
    * - this.givenName
@@ -1532,15 +1552,15 @@ export default class HomeView extends Vue {
 
   /**
    * Shows dialog for sharing method selection
-   * 
+   *
    * @internal
    * @callGraph
    * Called by: showNameThenIdDialog()
    * Calls: ChoiceButtonDialog.open()
-   * 
+   *
    * @chain
    * Template -> showNameThenIdDialog() -> promptForShareMethod()
-   * 
+   *
    * @requires
    * - this.$refs.choiceButtonDialog
    * - this.$router
@@ -1566,7 +1586,7 @@ export default class HomeView extends Vue {
 
   /**
    * Caches image data for sharing
-   * 
+   *
    * @public
    * Called by ActivityListItem component
    * @param event Event object
@@ -1584,7 +1604,7 @@ export default class HomeView extends Vue {
 
   /**
    * Opens image viewer dialog
-   * 
+   *
    * @public
    * Called by ActivityListItem component
    * @param imageUrl URL of image to display
@@ -1597,7 +1617,7 @@ export default class HomeView extends Vue {
 
   /**
    * Handles claim confirmation
-   * 
+   *
    * @public
    * Called by ActivityListItem component
    * @param record Record to confirm