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/components/InfiniteScroll.vue

@@ -1,12 +1,8 @@
-/**
- * @file InfiniteScroll.vue
- * @description A Vue component that implements infinite scrolling functionality using the Intersection Observer API.
- * This component emits a 'reached-bottom' event when the user scrolls near the bottom of the content.
- * It includes debouncing to prevent multiple rapid triggers and loading state management.
- * 
- * @author Matthew Raymer
- * @version 1.0.0
- */
+/** * @file InfiniteScroll.vue * @description A Vue component that implements
+infinite scrolling functionality using the Intersection Observer API. * This
+component emits a 'reached-bottom' event when the user scrolls near the bottom
+of the content. * It includes debouncing to prevent multiple rapid triggers and
+loading state management. * * @author Matthew Raymer * @version 1.0.0 */
 
 <template>
   <div ref="scrollContainer">
@@ -20,21 +16,21 @@ import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
 
 /**
  * InfiniteScroll Component
- * 
+ *
  * This component implements infinite scrolling functionality by observing when a user
  * scrolls near the bottom of the content. It uses the Intersection Observer API for
  * efficient scroll detection and includes debouncing to prevent multiple rapid triggers.
- * 
+ *
  * Usage in template:
  * ```vue
  * <InfiniteScroll @reached-bottom="loadMore">
  *   <div>Content goes here</div>
  * </InfiniteScroll>
  * ```
- * 
+ *
  * Props:
  * - distance: number (default: 200) - Distance in pixels from the bottom at which to trigger the event
- * 
+ *
  * Events:
  * - reached-bottom: Emitted when the user scrolls near the bottom of the content
  */
@@ -59,7 +55,7 @@ export default class InfiniteScroll extends Vue {
   /**
    * Vue lifecycle hook that runs after component updates.
    * Initializes the Intersection Observer if not already set up.
-   * 
+   *
    * @internal
    * Used internally by Vue's lifecycle system
    */
@@ -81,7 +77,7 @@ export default class InfiniteScroll extends Vue {
   /**
    * Vue lifecycle hook that runs before component unmounting.
    * Cleans up the Intersection Observer and any pending timeouts.
-   * 
+   *
    * @internal
    * Used internally by Vue's lifecycle system
    */
@@ -97,10 +93,10 @@ export default class InfiniteScroll extends Vue {
   /**
    * Handles intersection observer callbacks when the sentinel element becomes visible.
    * Implements debouncing to prevent multiple rapid triggers and manages loading state.
-   * 
+   *
    * @param entries - Array of IntersectionObserverEntry objects
    * @returns false (required by @Emit decorator)
-   * 
+   *
    * @internal
    * Used internally by the Intersection Observer
    * @emits reached-bottom - Emitted when the user scrolls near the bottom
@@ -113,7 +109,7 @@ export default class InfiniteScroll extends Vue {
       if (this.debounceTimeout) {
         window.clearTimeout(this.debounceTimeout);
       }
-      
+
       this.debounceTimeout = window.setTimeout(() => {
         this.isLoading = true;
         this.$emit("reached-bottom", true);