refactor: improve component architecture, loading states, and mobile accessibility

src/components/MobileNavButton.tsx

@@ -0,0 +1,35 @@
+import Link from 'next/link';
+import React from 'react';
+
+interface MobileNavButtonProps {
+  href: string;
+  icon: React.ReactNode;
+  label: string;
+  active?: boolean;
+}
+
+export function MobileNavButton({
+  href,
+  icon,
+  label,
+  active = false,
+}: MobileNavButtonProps) {
+  return (
+    <Link
+      href={href}
+      aria-label={label}
+      className={`
+        flex min-h-[44px] min-w-[44px]
+        items-center justify-center
+        rounded-lg
+        transition-colors
+        touch-manipulation
+        ${active
+          ? 'text-blue-600'
+          : 'text-gray-500 hover:text-gray-900'}
+      `}
+    >
+      {icon}
+    </Link>
+  );
+}

src/components/analytics/AnalyticsTableShimmer.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface AnalyticsTableShimmerProps {
+  rows?: number;
+}
+
+export function AnalyticsTableShimmer({
+  rows = 6,
+}: AnalyticsTableShimmerProps) {
+  return (
+    <div
+      role="status"
+      aria-label="Loading analytics data"
+      className="animate-pulse"
+    >
+      <div className="space-y-3">
+        {Array.from({ length: rows }).map((_, index) => (
+          <div
+            key={index}
+            className="grid grid-cols-5 gap-4 rounded-lg border border-gray-200 dark:border-gray-700 p-4"
+          >
+            <div className="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+            <div className="h-4 rounded bg-gray-200 dark:bg-gray-700" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/eslint/deep-import-rules.js

@@ -0,0 +1,34 @@
+/**
+ * Enforce deep imports across components.
+ *
+ * Prevents importing from barrel files such as:
+ *   import { Button } from "@/components";
+ *
+ * Encourages:
+ *   import Button from "@/components/ui/Button";
+ */
+
+export const deepImportRules = {
+  "no-restricted-imports": [
+    "warn",
+    {
+      paths: [
+        {
+          name: "@/components",
+          message:
+            "Use deep imports instead of barrel imports for better code-splitting.",
+        },
+      ],
+      patterns: [
+        {
+          group: [
+            "@/components/index",
+            "@/components/**/index",
+          ],
+          message:
+            "Import components directly from their source file instead of a barrel export.",
+        },
+      ],
+    },
+  ],
+};

src/hooks/usePropertyCardData.ts

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+
+import type { Property } from '@/types/property';
+import { useComparisonStore } from '@/store/comparisonStore';
+import { useCompareStore } from '@/store/compareStore';
+import { useFavoritesStore } from '@/store/favoritesStore';
+
+import {
+  formatPrice,
+  formatNumber,
+  formatROI,
+  getBlockchainColor,
+} from '@/utils/searchUtils';
+
+export function usePropertyCardData(property: Property) {
+  const { isPropertySelected } = useComparisonStore();
+
+  const selectedIds = useCompareStore((state) => state.selectedIds);
+
+  const { isFavorite } = useFavoritesStore();
+
+  return useMemo(() => {
+    const isCompared = selectedIds.includes(property.id);
+
+    return {
+      isSelectedForComparison: isPropertySelected(property.id),
+
+      isCompared,
+
+      compareLimitReached:
+        selectedIds.length >= 3 && !isCompared,
+
+      isFavorite: isFavorite(property.id),
+
+      formattedROI: formatROI(property.metrics.roi),
+
+      formattedSquareFeet: formatNumber(
+        property.details.squareFeet,
+      ),
+
+      formattedAvailableTokens: formatNumber(
+        property.tokenInfo.available,
+      ),
+
+      formattedTotalSupply: formatNumber(
+        property.tokenInfo.totalSupply,
+      ),
+
+      formattedTokenPrice: formatPrice(
+        property.price.perToken,
+      ),
+
+      blockchainColor: getBlockchainColor(
+        property.blockchain,
+      ),
+    };
+  }, [
+    property,
+    selectedIds,
+    isPropertySelected,
+    isFavorite,
+  ]);
+}