cleanup types, components, api+state+performance improvements

src/App.tsx

···
-import { useState, useRef, useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { ArrowRight } from "lucide-react";
 import LoginPage from "./pages/Login";
 import HomePage from "./pages/Home";
···
 import { useFollow } from "./hooks/useFollows";
 import { useFileUpload } from "./hooks/useFileUpload";
 import { useTheme } from "./hooks/useTheme";
+import { useNotifications } from "./hooks/useNotifications";
 import Firefly from "./components/Firefly";
+import NotificationContainer from "./components/common/NotificationContainer";
 import { DEFAULT_SETTINGS } from "./types/settings";
-import type { UserSettings } from "./types/settings";
+import type { UserSettings, SearchResult } from "./types";
 import { apiClient } from "./lib/api/client";
 import { ATPROTO_APPS } from "./config/atprotoApps";
 
 export default function App() {
-  // Auth hook :)
+  // Auth hook
   const {
     session,
     currentStep,
···
     logout,
   } = useAuth();
 
+  // Notifications hook (replaces alerts)
+  const { notifications, removeNotification, success, error, info } =
+    useNotifications();
+
   // Theme hook
   const { isDark, reducedMotion, toggleTheme, toggleMotion } = useTheme();
 
-  // Add state to track current platform
+  // Current platform state
   const [currentPlatform, setCurrentPlatform] = useState<string>("tiktok");
-  const saveCalledRef = useRef<string | null>(null); // Track by uploadId
+
+  // Track saved uploads to prevent duplicates
+  const [savedUploads, setSavedUploads] = useState<Set<string>>(new Set());
 
   // Settings state
   const [userSettings, setUserSettings] = useState<UserSettings>(() => {
···
     localStorage.setItem("atlast_settings", JSON.stringify(userSettings));
   }, [userSettings]);
 
-  const handleSettingsUpdate = (newSettings: Partial<UserSettings>) => {
-    setUserSettings((prev) => ({ ...prev, ...newSettings }));
-  };
+  const handleSettingsUpdate = useCallback(
+    (newSettings: Partial<UserSettings>) => {
+      setUserSettings((prev) => ({ ...prev, ...newSettings }));
+    },
+    [],
+  );
 
   // Search hook
   const {
···
     currentDestinationAppId,
   );
 
-  // File upload hook
+  // Save results handler (proper state management)
+  const saveResults = useCallback(
+    async (uploadId: string, platform: string, results: SearchResult[]) => {
+      if (!userSettings.saveData) {
+        console.log("Data storage disabled - skipping save to database");
+        return;
+      }
+
+      if (savedUploads.has(uploadId)) {
+        console.log("Upload already saved:", uploadId);
+        return;
+      }
+
+      try {
+        setSavedUploads((prev) => new Set(prev).add(uploadId));
+        await apiClient.saveResults(uploadId, platform, results);
+        console.log("Results saved successfully:", uploadId);
+      } catch (err) {
+        console.error("Background save failed:", err);
+        setSavedUploads((prev) => {
+          const next = new Set(prev);
+          next.delete(uploadId);
+          return next;
+        });
+      }
+    },
+    [userSettings.saveData, savedUploads],
+  );
+
+  // File upload handler
   const { handleFileUpload: processFileUpload } = useFileUpload(
     (initialResults, platform) => {
       setCurrentPlatform(platform);
-
       setSearchResults(initialResults);
       setCurrentStep("loading");
 
···
       const followLexicon =
         ATPROTO_APPS[currentDestinationAppId]?.followLexicon;
 
-      searchAllUsers(initialResults, setStatusMessage, () => {
-        setCurrentStep("results");
+      searchAllUsers(
+        initialResults,
+        setStatusMessage,
+        () => {
+          setCurrentStep("results");
 
-        // CONDITIONAL SAVE: Only save if user has enabled data storage
-        if (userSettings.saveData) {
-          // Prevent duplicate saves
-          if (saveCalledRef.current !== uploadId) {
-            saveCalledRef.current = uploadId;
-            // Need to wait for React to finish updating searchResults state
-            // Use a longer delay and access via setSearchResults callback to get final state
-            setTimeout(() => {
-              setSearchResults((currentResults) => {
-                if (currentResults.length > 0) {
-                  apiClient
-                    .saveResults(uploadId, platform, currentResults)
-                    .then(() => {
-                      // Invalidate cache after successful save
-                      apiClient.cache.invalidate("uploads");
-                      apiClient.cache.invalidatePattern("upload-details");
-                    })
-                    .catch((err) => {
-                      console.error("Background save failed:", err);
-                    });
-                }
-                return currentResults;
-              });
-            }, 1000); // Longer delay to ensure all state updates complete
-          }
-        } else {
-          console.log("Data storage disabled - skipping save to database");
-        }
-      });
+          // Save results after search completes
+          setTimeout(() => {
+            setSearchResults((currentResults) => {
+              if (currentResults.length > 0) {
+                saveResults(uploadId, platform, currentResults);
+              }
+              return currentResults;
+            });
+          }, 1000);
+        },
+        followLexicon,
+      );
     },
     setStatusMessage,
-    userSettings, // Pass userSettings to hook
+    userSettings,
   );
 
   // Load previous upload handler
-  const handleLoadUpload = async (uploadId: string) => {
-    try {
-      setStatusMessage("Loading previous upload...");
-      setCurrentStep("loading");
+  const handleLoadUpload = useCallback(
+    async (uploadId: string) => {
+      try {
+        setStatusMessage("Loading previous upload...");
+        setCurrentStep("loading");
 
-      const data = await apiClient.getUploadDetails(uploadId);
+        const data = await apiClient.getUploadDetails(uploadId);
 
-      if (data.results.length === 0) {
-        setSearchResults([]);
-        setCurrentPlatform("tiktok");
-        setCurrentStep("home");
-        setStatusMessage("No previous results found.");
-        return;
-      }
+        if (data.results.length === 0) {
+          setSearchResults([]);
+          setCurrentPlatform("tiktok");
+          setCurrentStep("home");
+          info("No previous results found.");
+          return;
+        }
 
-      const platform = "tiktok"; // Default, will be updated when we add platform to upload details
-      setCurrentPlatform(platform);
-      saveCalledRef.current = null;
+        const platform = "tiktok";
+        setCurrentPlatform(platform);
 
-      // Convert the loaded results to SearchResult format with selectedMatches
-      const loadedResults = data.results.map((result) => ({
-        ...result,
-        sourcePlatform: platform,
-        isSearching: false,
-        selectedMatches: new Set<string>(
-          result.atprotoMatches
-            .filter((match) => !match.followed)
-            .slice(0, 1)
-            .map((match) => match.did),
-        ),
-      }));
+        const loadedResults: SearchResult[] = data.results.map((result) => ({
+          ...result,
+          sourcePlatform: platform,
+          isSearching: false,
+          selectedMatches: new Set<string>(
+            result.atprotoMatches
+              .filter((match) => !match.followed)
+              .slice(0, 1)
+              .map((match) => match.did),
+          ),
+        }));
 
-      setSearchResults(loadedResults);
-      setCurrentStep("results");
-      setStatusMessage(
-        `Loaded ${loadedResults.length} results from previous upload`,
-      );
-    } catch (error) {
-      console.error("Failed to load upload:", error);
-      setStatusMessage("Failed to load previous upload");
-      setCurrentStep("home");
-      alert("Failed to load previous upload. Please try again.");
-    }
-  };
+        setSearchResults(loadedResults);
+        setCurrentStep("results");
+        success(`Loaded ${loadedResults.length} results from previous upload`);
+      } catch (err) {
+        console.error("Failed to load upload:", err);
+        error("Failed to load previous upload. Please try again.");
+        setCurrentStep("home");
+      }
+    },
+    [setStatusMessage, setCurrentStep, setSearchResults, info, error, success],
+  );
 
   // Login handler
-  const handleLogin = async (handle: string) => {
-    if (!handle?.trim()) {
-      setStatusMessage("Please enter your handle");
-      alert("Please enter your handle");
-      return;
-    }
+  const handleLogin = useCallback(
+    async (handle: string) => {
+      if (!handle?.trim()) {
+        error("Please enter your handle");
+        return;
+      }
 
-    try {
-      await login(handle);
-    } catch (err) {
-      console.error("OAuth error:", err);
-      const errorMsg = `Error starting OAuth: ${err instanceof Error ? err.message : "Unknown error"}`;
-      setStatusMessage(errorMsg);
-      alert(errorMsg);
-    }
-  };
+      try {
+        await login(handle);
+      } catch (err) {
+        console.error("OAuth error:", err);
+        const errorMsg = `Error starting OAuth: ${err instanceof Error ? err.message : "Unknown error"}`;
+        setStatusMessage(errorMsg);
+        error(errorMsg);
+      }
+    },
+    [login, error, setStatusMessage],
+  );
 
   // Logout handler
-  const handleLogout = async () => {
+  const handleLogout = useCallback(async () => {
     try {
       await logout();
       setSearchResults([]);
       setCurrentPlatform("tiktok");
-    } catch (error) {
-      alert("Failed to logout. Please try again.");
+      setSavedUploads(new Set());
+      success("Logged out successfully");
+    } catch (err) {
+      error("Failed to logout. Please try again.");
     }
-  };
+  }, [logout, setSearchResults, success, error]);
 
   return (
     <div className="min-h-screen relative overflow-hidden">
+      {/* Notification Container */}
+      <NotificationContainer
+        notifications={notifications}
+        onRemove={removeNotification}
+      />
+
       {/* Firefly particles - only render if motion not reduced */}
       {!reducedMotion && (
         <div className="fixed inset-0 pointer-events-none" aria-hidden="true">
···
         {currentStep === "checking" && (
           <div className="p-6 max-w-md mx-auto mt-8">
             <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 text-center space-y-4">
-              <div className="w-16 h-16 bbg-firefly-banner dark:bg-firefly-banner-dark text-white rounded-2xl mx-auto flex items-center justify-center">
+              <div className="w-16 h-16 bg-firefly-banner dark:bg-firefly-banner-dark text-white rounded-2xl mx-auto flex items-center justify-center">
                 <ArrowRight className="w-8 h-8 text-white animate-pulse" />
               </div>
               <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
···
             currentStep={currentStep}
             sourcePlatform={currentPlatform}
             isDark={isDark}
+            reducedMotion={reducedMotion}
             onToggleTheme={toggleTheme}
             onToggleMotion={toggleMotion}
           />

src/components/SearchResultCard.tsx

···
-import {
-  MessageCircle,
-  Check,
-  UserPlus,
-  ChevronDown,
-  UserCheck,
-} from "lucide-react";
+import React, { useMemo } from "react";
+import { MessageCircle, ChevronDown } from "lucide-react";
 import type { SearchResult } from "../types";
 import { getAtprotoAppWithFallback } from "../lib/utils/platform";
 import type { AtprotoAppId } from "../types/settings";
 import AvatarWithFallback from "./common/AvatarWithFallback";
+import FollowButton from "./common/FollowButton";
 
 interface SearchResultCardProps {
   result: SearchResult;
···
   destinationAppId?: AtprotoAppId;
 }
 
-export default function SearchResultCard({
-  result,
-  resultIndex,
-  isExpanded,
-  onToggleExpand,
-  onToggleMatchSelection,
-  sourcePlatform,
-  destinationAppId = "bluesky",
-}: SearchResultCardProps) {
-  const displayMatches = isExpanded
-    ? result.atprotoMatches
-    : result.atprotoMatches.slice(0, 1);
-  const hasMoreMatches = result.atprotoMatches.length > 1;
-  const currentApp = getAtprotoAppWithFallback(destinationAppId);
-  const currentLexicon = currentApp?.followLexicon || "app.bsky.graph.follow";
-
+// Memoize the match item to prevent unnecessary re-renders
+const MatchItem = React.memo<{
+  match: any;
+  isSelected: boolean;
+  isFollowed: boolean;
+  currentAppName: string;
+  onToggle: () => void;
+}>(({ match, isSelected, isFollowed, currentAppName, onToggle }) => {
   return (
-    <div className="bg-white/50 dark:bg-slate-900/50 rounded-2xl shadow-sm overflow-hidden border-2 border-cyan-500/30 dark:border-purple-500/30">
-      {/* Source User */}
-      <div className="px-4 py-3 bg-purple-100 dark:bg-slate-900 border-b-2 border-cyan-500/30 dark:border-purple-500/30">
-        <div className="flex justify-between gap-2 items-center">
-          <div className="flex-1 min-w-0">
-            <div className="flex flex-wrap gap-x-2 gap-y-1">
-              <span className="font-bold text-purple-950 dark:text-cyan-50 truncate text-base">
-                @{result.sourceUser.username}
-              </span>
+    <div className="flex items-start gap-3 p-3 cursor-pointer hover:scale-[1.01] transition-transform">
+      <AvatarWithFallback
+        avatar={match.avatar}
+        handle={match.handle || ""}
+        size="sm"
+      />
+
+      <div className="flex-1 min-w-0 space-y-1">
+        <div>
+          {match.displayName && (
+            <div className="font-semibold text-purple-950 dark:text-cyan-50 leading-tight">
+              {match.displayName}
             </div>
-          </div>
-          <div
-            className={`text-sm text-purple-750 dark:text-cyan-250 whitespace-nowrap flex-shrink-0`}
+          )}
+          <a
+            href={`https://bsky.app/profile/${match.handle}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-sm text-purple-750 dark:text-cyan-250 hover:underline leading-tight"
           >
-            {result.atprotoMatches.length}{" "}
-            {result.atprotoMatches.length === 1 ? "match" : "matches"}
-          </div>
+            @{match.handle}
+          </a>
         </div>
-      </div>
 
-      {/* ATProto Matches */}
-      {result.atprotoMatches.length === 0 ? (
-        <div className="text-center py-6">
-          <MessageCircle className="w-8 h-8 mx-auto mb-2 opacity-50 text-purple-750 dark:text-cyan-250" />
-          <p className="text-sm text-purple-950 dark:text-cyan-50">
-            Not found on the ATmosphere yet
-          </p>
+        <div className="flex items-center flex-wrap gap-2">
+          {typeof match.postCount === "number" && match.postCount > 0 && (
+            <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
+              {match.postCount.toLocaleString()} posts
+            </span>
+          )}
+          {typeof match.followerCount === "number" &&
+            match.followerCount > 0 && (
+              <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
+                {match.followerCount.toLocaleString()} followers
+              </span>
+            )}
+          <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
+            {match.matchScore}% match
+          </span>
         </div>
-      ) : (
-        <div className="">
-          {displayMatches.map((match) => {
-            // Check follow status for current lexicon
-            const isFollowedInCurrentApp =
-              match.followStatus?.[currentLexicon] ?? match.followed ?? false;
-            const isSelected = result.selectedMatches?.has(match.did);
 
-            return (
-              <div
-                key={match.did}
-                className="flex items-start gap-3 p-3 cursor-pointer hover:scale-[1.01] transition-transform"
-              >
-                {/* Avatar */}
-                <AvatarWithFallback
-                  avatar={match.avatar}
-                  handle={match.handle || ""}
-                  size="sm"
-                />
+        {match.description && (
+          <div className="text-sm text-purple-900 dark:text-cyan-100 line-clamp-2 pt-1">
+            {match.description}
+          </div>
+        )}
+      </div>
 
-                {/* Match Info */}
-                <div className="flex-1 min-w-0 space-y-1">
-                  {/* Name and Handle */}
-                  <div>
-                    {match.displayName && (
-                      <div className="font-semibold text-purple-950 dark:text-cyan-50 leading-tight">
-                        {match.displayName}
-                      </div>
-                    )}
-                    <a
-                      href={`https://bsky.app/profile/${match.handle}`}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm text-purple-750 dark:text-cyan-250 hover:underline leading-tight"
-                    >
-                      @{match.handle}
-                    </a>
-                  </div>
+      <FollowButton
+        isFollowed={isFollowed}
+        isSelected={isSelected}
+        onToggle={onToggle}
+        appName={currentAppName}
+      />
+    </div>
+  );
+});
 
-                  {/* User Stats and Match Percent */}
-                  <div className="flex items-center flex-wrap gap-2 sm:ml-0 -ml-10">
-                    {typeof match.postCount === "number" &&
-                      match.postCount > 0 && (
-                        <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-                          {match.postCount.toLocaleString()} posts
-                        </span>
-                      )}
-                    {typeof match.followerCount === "number" &&
-                      match.followerCount > 0 && (
-                        <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-                          {match.followerCount.toLocaleString()} followers
-                        </span>
-                      )}
-                    <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 dark:bg-slate-900 text-purple-950 dark:text-cyan-50 font-medium">
-                      {match.matchScore}% match
-                    </span>
-                  </div>
+MatchItem.displayName = "MatchItem";
 
-                  {/* Description */}
-                  {match.description && (
-                    <div className="text-sm text-purple-900 dark:text-cyan-100 line-clamp-2 pt-1 sm:ml-0 -ml-10">
-                      {match.description}
-                    </div>
-                  )}
-                </div>
+const SearchResultCard = React.memo<SearchResultCardProps>(
+  ({
+    result,
+    resultIndex,
+    isExpanded,
+    onToggleExpand,
+    onToggleMatchSelection,
+    sourcePlatform,
+    destinationAppId = "bluesky",
+  }) => {
+    const currentApp = useMemo(
+      () => getAtprotoAppWithFallback(destinationAppId),
+      [destinationAppId],
+    );
 
-                {/* Select/Follow Button */}
-                <button
-                  onClick={() => onToggleMatchSelection(match.did)}
-                  disabled={isFollowedInCurrentApp}
-                  className={`p-2 rounded-full font-medium transition-all flex-shrink-0 self-start ${
-                    isFollowedInCurrentApp
-                      ? "bg-purple-100 dark:bg-slate-900 border-2 border-purple-500 dark:border-cyan-500 text-purple-950 dark:text-cyan-50 shadow-md cursor-not-allowed opacity-50"
-                      : isSelected
-                        ? "bg-purple-100 dark:bg-slate-900 border-2 border-purple-500 dark:border-cyan-500 text-purple-950 dark:text-cyan-50 shadow-md"
-                        : "bg-slate-200/50 dark:bg-slate-900/50 border-2 border-cyan-500/30 dark:border-purple-500/30 text-purple-750 dark:text-cyan-250 hover:border-orange-500 dark:hover:border-amber-400"
-                  }`}
-                  title={
-                    isFollowedInCurrentApp
-                      ? `Already following on ${currentApp?.name || "this app"}`
-                      : isSelected
-                        ? "Selected to follow"
-                        : "Select to follow"
-                  }
-                >
-                  {isFollowedInCurrentApp ? (
-                    <Check className="w-4 h-4" />
-                  ) : isSelected ? (
-                    <UserCheck className="w-4 h-4" />
-                  ) : (
-                    <UserPlus className="w-4 h-4" />
-                  )}
-                </button>
+    const currentLexicon = useMemo(
+      () => currentApp?.followLexicon || "app.bsky.graph.follow",
+      [currentApp],
+    );
+
+    const displayMatches = useMemo(
+      () =>
+        isExpanded ? result.atprotoMatches : result.atprotoMatches.slice(0, 1),
+      [isExpanded, result.atprotoMatches],
+    );
+
+    const hasMoreMatches = result.atprotoMatches.length > 1;
+
+    return (
+      <div className="bg-white/50 dark:bg-slate-900/50 rounded-2xl shadow-sm overflow-hidden border-2 border-cyan-500/30 dark:border-purple-500/30">
+        {/* Source User */}
+        <div className="px-4 py-3 bg-purple-100 dark:bg-slate-900 border-b-2 border-cyan-500/30 dark:border-purple-500/30">
+          <div className="flex justify-between gap-2 items-center">
+            <div className="flex-1 min-w-0">
+              <div className="flex flex-wrap gap-x-2 gap-y-1">
+                <span className="font-bold text-purple-950 dark:text-cyan-50 truncate text-base">
+                  @{result.sourceUser.username}
+                </span>
               </div>
-            );
-          })}
-          {hasMoreMatches && (
-            <button
-              onClick={onToggleExpand}
-              className="w-full py-2 text-sm text-purple-600 hover:text-purple-950 dark:text-cyan-400 dark:hover:text-cyan-50 font-medium transition-colors flex items-center justify-center space-x-1 border-t-2 border-cyan-500/30 dark:border-purple-500/30 hover:border-orange-500 dark:hover:border-amber-400/50"
-            >
-              <span>
-                {isExpanded
-                  ? "Show less"
-                  : `Show ${result.atprotoMatches.length - 1} more ${result.atprotoMatches.length - 1 === 1 ? "option" : "options"}`}
-              </span>
-              <ChevronDown
-                className={`w-4 h-4 transition-transform ${isExpanded ? "rotate-180" : ""}`}
-              />
-            </button>
-          )}
+            </div>
+            <div className="text-sm text-purple-750 dark:text-cyan-250 whitespace-nowrap flex-shrink-0">
+              {result.atprotoMatches.length}{" "}
+              {result.atprotoMatches.length === 1 ? "match" : "matches"}
+            </div>
+          </div>
         </div>
-      )}
-    </div>
-  );
-}
+
+        {/* ATProto Matches */}
+        {result.atprotoMatches.length === 0 ? (
+          <div className="text-center py-6">
+            <MessageCircle className="w-8 h-8 mx-auto mb-2 opacity-50 text-purple-750 dark:text-cyan-250" />
+            <p className="text-sm text-purple-950 dark:text-cyan-50">
+              Not found on the ATmosphere yet
+            </p>
+          </div>
+        ) : (
+          <div>
+            {displayMatches.map((match) => {
+              const isFollowedInCurrentApp =
+                match.followStatus?.[currentLexicon] ?? match.followed ?? false;
+              const isSelected = result.selectedMatches?.has(match.did);
+
+              return (
+                <MatchItem
+                  key={match.did}
+                  match={match}
+                  isSelected={isSelected || false}
+                  isFollowed={isFollowedInCurrentApp}
+                  currentAppName={currentApp?.name || "this app"}
+                  onToggle={() => onToggleMatchSelection(match.did)}
+                />
+              );
+            })}
+            {hasMoreMatches && (
+              <button
+                onClick={onToggleExpand}
+                className="w-full py-2 text-sm text-purple-600 hover:text-purple-950 dark:text-cyan-400 dark:hover:text-cyan-50 font-medium transition-colors flex items-center justify-center space-x-1 border-t-2 border-cyan-500/30 dark:border-purple-500/30 hover:border-orange-500 dark:hover:border-amber-400/50"
+              >
+                <span>
+                  {isExpanded
+                    ? "Show less"
+                    : `Show ${result.atprotoMatches.length - 1} more ${result.atprotoMatches.length - 1 === 1 ? "option" : "options"}`}
+                </span>
+                <ChevronDown
+                  className={`w-4 h-4 transition-transform ${isExpanded ? "rotate-180" : ""}`}
+                />
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+SearchResultCard.displayName = "SearchResultCard";
+export default SearchResultCard;

src/components/common/AvatarWithFallback.tsx

···
+import React, { useState } from "react";
+
 interface AvatarWithFallbackProps {
   avatar?: string;
   handle: string;
···
   className?: string;
 }
 
-export default function AvatarWithFallback({
-  avatar,
-  handle,
-  size = "md",
-  className = "",
-}: AvatarWithFallbackProps) {
-  const sizeClasses = {
-    sm: "w-8 h-8 text-sm",
-    md: "w-12 h-12 text-base",
-    lg: "w-16 h-16 text-xl",
-  };
+const sizeClasses = {
+  sm: { container: "w-8 h-8", text: "text-sm" },
+  md: { container: "w-12 h-12", text: "text-base" },
+  lg: { container: "w-16 h-16", text: "text-xl" },
+};
 
-  const sizeClass = sizeClasses[size];
+const AvatarWithFallback = React.memo<AvatarWithFallbackProps>(
+  ({ avatar, handle, size = "md", className = "" }) => {
+    const [imageError, setImageError] = useState(false);
+    const { container, text } = sizeClasses[size];
+
+    const fallbackInitial = handle.charAt(0).toUpperCase();
+
+    if (!avatar || imageError) {
+      return (
+        <div
+          className={`${container} bg-gradient-to-br from-cyan-400 to-purple-500 rounded-full flex items-center justify-center shadow-sm ${className}`}
+          aria-label={`${handle}'s avatar`}
+        >
+          <span className={`text-white font-bold ${text}`}>
+            {fallbackInitial}
+          </span>
+        </div>
+      );
+    }
 
-  if (avatar) {
     return (
       <img
         src={avatar}
         alt={`${handle}'s avatar`}
-        className={`${sizeClass} rounded-full object-cover ${className}`}
+        className={`${container} rounded-full object-cover ${className}`}
+        onError={() => setImageError(true)}
+        loading="lazy"
       />
     );
-  }
+  },
+);
 
-  return (
-    <div
-      className={`${sizeClass} bg-gradient-to-br from-cyan-400 to-purple-500 rounded-full flex items-center justify-center shadow-sm ${className}`}
-    >
-      <span className="text-white font-bold">
-        {handle.charAt(0).toUpperCase()}
-      </span>
-    </div>
-  );
-}
+AvatarWithFallback.displayName = "AvatarWithFallback";
+
+export default AvatarWithFallback;

src/components/common/Button.tsx

···
+import React from "react";
+import { LucideIcon } from "lucide-react";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+  icon?: LucideIcon;
+  children: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = "primary",
+      size = "md",
+      isLoading = false,
+      icon: Icon,
+      children,
+      className = "",
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const baseStyles =
+      "inline-flex items-center justify-center font-semibold transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";
+
+    const variants = {
+      primary:
+        "bg-firefly-banner dark:bg-firefly-banner-dark text-white hover:shadow-lg focus:ring-orange-500 dark:focus:ring-amber-400",
+      secondary:
+        "bg-slate-600 dark:bg-slate-700 hover:bg-slate-700 dark:hover:bg-slate-600 text-white focus:ring-slate-400",
+      danger: "bg-red-600 hover:bg-red-700 text-white focus:ring-red-500",
+      ghost:
+        "bg-transparent hover:bg-purple-100 dark:hover:bg-slate-800 text-purple-900 dark:text-cyan-100 focus:ring-purple-500",
+    };
+
+    const sizes = {
+      sm: "px-3 py-1.5 text-sm rounded-lg",
+      md: "px-4 py-2 text-base rounded-xl",
+      lg: "px-6 py-3 text-lg rounded-xl",
+    };
+
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || isLoading}
+        className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+        {...props}
+      >
+        {isLoading ? (
+          <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
+        ) : Icon ? (
+          <Icon className="w-5 h-5 mr-2" />
+        ) : null}
+        {children}
+      </button>
+    );
+  },
+);
+
+Button.displayName = "Button";
+
+export default Button;

src/components/common/FollowButton.tsx

···
+import React from "react";
+import { Check, UserPlus, UserCheck } from "lucide-react";
+
+interface FollowButtonProps {
+  isFollowed: boolean;
+  isSelected: boolean;
+  onToggle: () => void;
+  disabled?: boolean;
+  appName?: string;
+}
+
+const FollowButton = React.memo<FollowButtonProps>(
+  ({ isFollowed, isSelected, onToggle, disabled = false, appName }) => {
+    const getButtonStyles = () => {
+      if (isFollowed) {
+        return "bg-purple-100 dark:bg-slate-900 border-2 border-purple-500 dark:border-cyan-500 text-purple-950 dark:text-cyan-50 shadow-md cursor-not-allowed opacity-50";
+      }
+      if (isSelected) {
+        return "bg-purple-100 dark:bg-slate-900 border-2 border-purple-500 dark:border-cyan-500 text-purple-950 dark:text-cyan-50 shadow-md hover:scale-105";
+      }
+      return "bg-slate-200/50 dark:bg-slate-900/50 border-2 border-cyan-500/30 dark:border-purple-500/30 text-purple-750 dark:text-cyan-250 hover:border-orange-500 dark:hover:border-amber-400 hover:scale-105";
+    };
+
+    const getTitle = () => {
+      if (isFollowed) {
+        return appName
+          ? `Already following on ${appName}`
+          : "Already following";
+      }
+      return isSelected ? "Selected to follow" : "Select to follow";
+    };
+
+    const Icon = isFollowed ? Check : isSelected ? UserCheck : UserPlus;
+
+    return (
+      <button
+        onClick={onToggle}
+        disabled={disabled || isFollowed}
+        className={`p-2 rounded-full font-medium transition-all flex-shrink-0 self-start ${getButtonStyles()}`}
+        title={getTitle()}
+        aria-label={getTitle()}
+      >
+        <Icon className="w-4 h-4" />
+      </button>
+    );
+  },
+);
+
+FollowButton.displayName = "FollowButton";
+
+export default FollowButton;

src/components/common/IconButton.tsx

···
+import React from "react";
+import { LucideIcon } from "lucide-react";
+
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: LucideIcon;
+  label: string;
+  variant?: "primary" | "secondary" | "ghost";
+  size?: "sm" | "md" | "lg";
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      icon: Icon,
+      label,
+      variant = "ghost",
+      size = "md",
+      className = "",
+      ...props
+    },
+    ref,
+  ) => {
+    const baseStyles =
+      "inline-flex items-center justify-center rounded-full transition-all focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+
+    const variants = {
+      primary:
+        "bg-purple-100 dark:bg-slate-900 border-2 border-purple-500 dark:border-cyan-500 text-purple-950 dark:text-cyan-50 hover:border-orange-500 dark:hover:border-amber-400",
+      secondary:
+        "bg-slate-200/50 dark:bg-slate-900/50 border-2 border-cyan-500/30 dark:border-purple-500/30 text-purple-750 dark:text-cyan-250 hover:border-orange-500 dark:hover:border-amber-400",
+      ghost:
+        "bg-white/90 dark:bg-slate-800/90 backdrop-blur-sm border border-slate-200 dark:border-slate-700 hover:bg-white dark:hover:bg-slate-700",
+    };
+
+    const sizes = {
+      sm: "p-1.5",
+      md: "p-2",
+      lg: "p-3",
+    };
+
+    const iconSizes = {
+      sm: "w-4 h-4",
+      md: "w-5 h-5",
+      lg: "w-6 h-6",
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+        aria-label={label}
+        title={label}
+        {...props}
+      >
+        <Icon className={iconSizes[size]} />
+      </button>
+    );
+  },
+);
+
+IconButton.displayName = "IconButton";
+
+export default IconButton;

src/components/common/Notification.tsx

···
+import React, { useEffect } from "react";
+import { X, AlertCircle, CheckCircle, Info, AlertTriangle } from "lucide-react";
+
+export type NotificationType = "success" | "error" | "info" | "warning";
+
+interface NotificationProps {
+  type: NotificationType;
+  message: string;
+  onClose: () => void;
+  duration?: number;
+}
+
+const iconMap = {
+  success: CheckCircle,
+  error: AlertCircle,
+  warning: AlertTriangle,
+  info: Info,
+};
+
+const styleMap = {
+  success:
+    "bg-green-50 dark:bg-green-900/20 border-green-500 text-green-900 dark:text-green-100",
+  error:
+    "bg-red-50 dark:bg-red-900/20 border-red-500 text-red-900 dark:text-red-100",
+  warning:
+    "bg-yellow-50 dark:bg-yellow-900/20 border-yellow-500 text-yellow-900 dark:text-yellow-100",
+  info: "bg-blue-50 dark:bg-blue-900/20 border-blue-500 text-blue-900 dark:text-blue-100",
+};
+
+const Notification: React.FC<NotificationProps> = ({
+  type,
+  message,
+  onClose,
+  duration = 5000,
+}) => {
+  const Icon = iconMap[type];
+
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(onClose, duration);
+      return () => clearTimeout(timer);
+    }
+  }, [duration, onClose]);
+
+  return (
+    <div
+      className={`flex items-start gap-3 p-4 rounded-xl border-2 shadow-lg ${styleMap[type]} animate-slide-in`}
+      role="alert"
+    >
+      <Icon className="w-5 h-5 flex-shrink-0 mt-0.5" />
+      <p className="flex-1 text-sm font-medium">{message}</p>
+      <button
+        onClick={onClose}
+        className="flex-shrink-0 hover:opacity-70 transition-opacity"
+        aria-label="Close notification"
+      >
+        <X className="w-5 h-5" />
+      </button>
+    </div>
+  );
+};
+
+export default Notification;

src/components/common/NotificationContainer.tsx

···
+import React from "react";
+import { createPortal } from "react-dom";
+import Notification, { NotificationType } from "./Notification";
+
+export interface NotificationItem {
+  id: string;
+  type: NotificationType;
+  message: string;
+}
+
+interface NotificationContainerProps {
+  notifications: NotificationItem[];
+  onRemove: (id: string) => void;
+}
+
+const NotificationContainer: React.FC<NotificationContainerProps> = ({
+  notifications,
+  onRemove,
+}) => {
+  if (notifications.length === 0) return null;
+
+  return createPortal(
+    <div
+      className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 max-w-md"
+      aria-live="polite"
+      aria-atomic="false"
+    >
+      {notifications.map((notification) => (
+        <Notification
+          key={notification.id}
+          type={notification.type}
+          message={notification.message}
+          onClose={() => onRemove(notification.id)}
+        />
+      ))}
+    </div>,
+    document.body,
+  );
+};
+
+export default NotificationContainer;

src/hooks/useAuth.ts

···
 
   async function login(handle: string) {
     if (!handle) {
-      const errorMsg = "Please enter your handle";
-      setStatusMessage(errorMsg);
-      throw new Error(errorMsg);
+      throw new Error("Please enter your handle");
     }
 
     setStatusMessage("Starting authentication...");

src/hooks/useNotifications.ts

···
+import { useState, useCallback } from "react";
+import type { NotificationType } from "../components/common/Notification";
+
+export interface NotificationItem {
+  id: string;
+  type: NotificationType;
+  message: string;
+}
+
+export function useNotifications() {
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+
+  const addNotification = useCallback(
+    (type: NotificationType, message: string) => {
+      const id = `notification-${Date.now()}-${Math.random()}`;
+      setNotifications((prev) => [...prev, { id, type, message }]);
+      return id;
+    },
+    [],
+  );
+
+  const removeNotification = useCallback((id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id));
+  }, []);
+
+  const clearAll = useCallback(() => {
+    setNotifications([]);
+  }, []);
+
+  // Convenience methods
+  const success = useCallback(
+    (message: string) => addNotification("success", message),
+    [addNotification],
+  );
+
+  const error = useCallback(
+    (message: string) => addNotification("error", message),
+    [addNotification],
+  );
+
+  const info = useCallback(
+    (message: string) => addNotification("info", message),
+    [addNotification],
+  );
+
+  const warning = useCallback(
+    (message: string) => addNotification("warning", message),
+    [addNotification],
+  );
+
+  return {
+    notifications,
+    addNotification,
+    removeNotification,
+    clearAll,
+    success,
+    error,
+    info,
+    warning,
+  };
+}

src/index.css

···
     --color-hover: rgb(126 34 206 / 0.2);
     --color-avatar-fallback: rgb(126 34 206 / 0.2);
 }
+
+/* Notification animations */
+@keyframes slide-in {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.animate-slide-in {
+    animation: slide-in 0.3s ease-out;
+}

src/lib/api/adapters/RealApiAdapter.ts

···
   SaveResultsResponse,
   SearchResult,
 } from "../../../types";
-import { CacheService } from "../../../lib/utils/cache";
+import { CacheService } from "../../utils/cache";
 import { CACHE_CONFIG } from "../../../config/constants";
 
 /**
···
 }
 
 /**
+ * Generate cache key for complex requests
+ */
+function generateCacheKey(
+  prefix: string,
+  ...parts: (string | number)[]
+): string {
+  return `${prefix}:${parts.join(":")}`;
+}
+
+/**
  * Real API Client Adapter
- * Implements actual HTTP calls to backend
+ * Implements actual HTTP calls to backend with optimized caching
  */
 export class RealApiAdapter implements IApiClient {
   private responseCache = new CacheService(CACHE_CONFIG.DEFAULT_TTL);
···
     results: SearchResult[];
     pagination?: any;
   }> {
-    const cacheKey = `upload-details-${uploadId}-p${page}-s${pageSize}`;
+    const cacheKey = generateCacheKey(
+      "upload-details",
+      uploadId,
+      page,
+      pageSize,
+    );
     const cached = this.responseCache.get<any>(cacheKey);
     if (cached) {
       return cached;
···
   async getAllUploadDetails(
     uploadId: string,
   ): Promise<{ results: SearchResult[] }> {
-    const firstPage = await this.getUploadDetails(uploadId, 1, 100);
+    // Check if we have all pages cached
+    const firstPageKey = generateCacheKey("upload-details", uploadId, 1, 100);
+    const firstPage = this.responseCache.get<any>(firstPageKey);
 
-    if (!firstPage.pagination || firstPage.pagination.totalPages === 1) {
+    if (
+      firstPage &&
+      (!firstPage.pagination || firstPage.pagination.totalPages === 1)
+    ) {
       return { results: firstPage.results };
     }
 
-    const allResults = [...firstPage.results];
-    const promises = [];
+    // Fetch first page to get total pages
+    const firstPageData = await this.getUploadDetails(uploadId, 1, 100);
+
+    if (
+      !firstPageData.pagination ||
+      firstPageData.pagination.totalPages === 1
+    ) {
+      return { results: firstPageData.results };
+    }
+
+    // Fetch remaining pages in parallel
+    const allResults = [...firstPageData.results];
+    const pagePromises = [];
 
-    for (let page = 2; page <= firstPage.pagination.totalPages; page++) {
-      promises.push(this.getUploadDetails(uploadId, page, 100));
+    for (let page = 2; page <= firstPageData.pagination.totalPages; page++) {
+      pagePromises.push(this.getUploadDetails(uploadId, page, 100));
     }
 
-    const remainingPages = await Promise.all(promises);
+    const remainingPages = await Promise.all(pagePromises);
     for (const pageData of remainingPages) {
       allResults.push(...pageData.results);
     }
···
     dids: string[],
     followLexicon: string,
   ): Promise<Record<string, boolean>> {
-    const cacheKey = `follow-status-${followLexicon}-${dids.slice().sort().join(",")}`;
+    // Sort DIDs for consistent cache key
+    const sortedDids = [...dids].sort();
+    const cacheKey = generateCacheKey(
+      "follow-status",
+      followLexicon,
+      sortedDids.join(","),
+    );
     const cached = this.responseCache.get<Record<string, boolean>>(cacheKey);
     if (cached) {
       return cached;
···
     usernames: string[],
     followLexicon?: string,
   ): Promise<{ results: BatchSearchResult[] }> {
-    const cacheKey = `search-${followLexicon || "default"}-${usernames.slice().sort().join(",")}`;
+    // Sort usernames for consistent cache key
+    const sortedUsernames = [...usernames].sort();
+    const cacheKey = generateCacheKey(
+      "search",
+      followLexicon || "default",
+      sortedUsernames.join(","),
+    );
     const cached = this.responseCache.get<any>(cacheKey);
     if (cached) {
       return cached;
···
     const response = await res.json();
     const data = unwrapResponse<any>(response);
 
-    // Invalidate caches after following
-    this.responseCache.invalidate("uploads");
-    this.responseCache.invalidatePattern("upload-details");
-    this.responseCache.invalidatePattern("follow-status");
+    // Invalidate relevant caches after following
+    this.cache.invalidate("uploads");
+    this.cache.invalidatePattern("upload-details");
+    this.cache.invalidatePattern("follow-status");
 
     return data;
   }
···
         const data = unwrapResponse<SaveResultsResponse>(response);
 
         // Invalidate caches
-        this.responseCache.invalidate("uploads");
-        this.responseCache.invalidatePattern("upload-details");
+        this.cache.invalidate("uploads");
+        this.cache.invalidatePattern("upload-details");
 
         return data;
       } else {

src/lib/utils/index.ts

···
 export * from "./platform";
+export * from "./date";
+export * from "./cache";

src/lib/utils/platform.ts

···
 import { ATPROTO_APPS, type AtprotoApp } from "../../config/atprotoApps";
 import type { AtprotoAppId } from "../../types/settings";
 
+// Cache for platform lookups
+const platformCache = new Map<string, PlatformConfig>();
+const appCache = new Map<AtprotoAppId, AtprotoApp>();
+
 /**
- * Get platform configuration by key
- *
- * @param platformKey - The platform identifier (e.g., "tiktok", "instagram")
- * @returns Platform configuration or default to TikTok
- **/
+ * Get platform configuration by key (memoized)
+ */
 export function getPlatform(platformKey: string): PlatformConfig {
-  return PLATFORMS[platformKey] || PLATFORMS.tiktok;
+  if (!platformCache.has(platformKey)) {
+    platformCache.set(platformKey, PLATFORMS[platformKey] || PLATFORMS.tiktok);
+  }
+  return platformCache.get(platformKey)!;
 }
 
 /**
  * Get platform gradient color classes for UI
- *
- * @param platformKey - The platform identifier
- * @returns Tailwind gradient classes for the platform
- **/
+ */
 export function getPlatformColor(platformKey: string): string {
   const colors: Record<string, string> = {
     tiktok: "from-black via-gray-800 to-cyan-400",
···
 }
 
 /**
- * Get ATProto app configuration by ID
- *
- * @param appId - The app identifier
- * @returns App configuration or undefined if not found
- **/
+ * Get ATProto app configuration by ID (memoized)
+ */
 export function getAtprotoApp(appId: AtprotoAppId): AtprotoApp | undefined {
-  return ATPROTO_APPS[appId];
+  if (!appCache.has(appId)) {
+    const app = ATPROTO_APPS[appId];
+    if (app) {
+      appCache.set(appId, app);
+    }
+  }
+  return appCache.get(appId);
 }
 
 /**
- * Get ATProto app with fallback to default
- *
- * @param appId - The app identifier
- * @param defaultApp - Default app ID to use as fallback
- * @returns App configuration, falling back to default or Bluesky
- **/
+ * Get ATProto app with fallback to default (memoized)
+ */
 export function getAtprotoAppWithFallback(
   appId: AtprotoAppId,
   defaultApp: AtprotoAppId = "bluesky",
 ): AtprotoApp {
   return (
-    ATPROTO_APPS[appId] || ATPROTO_APPS[defaultApp] || ATPROTO_APPS.bluesky
+    getAtprotoApp(appId) || getAtprotoApp(defaultApp) || ATPROTO_APPS.bluesky
   );
 }
 
 /**
- * Get all enabled ATProto apps
- *
- * @returns Array of enabled app configurations
- **/
+ * Get all enabled ATProto apps (cached result)
+ */
+let enabledAppsCache: AtprotoApp[] | null = null;
 export function getEnabledAtprotoApps(): AtprotoApp[] {
-  return Object.values(ATPROTO_APPS).filter((app) => app.enabled);
+  if (!enabledAppsCache) {
+    enabledAppsCache = Object.values(ATPROTO_APPS).filter((app) => app.enabled);
+  }
+  return enabledAppsCache;
 }
 
 /**
- * Get all enabled platforms
- *
- * @returns Array of [key, config] tuples for enabled platforms
- **/
+ * Get all enabled platforms (cached result)
+ */
+let enabledPlatformsCache: Array<[string, PlatformConfig]> | null = null;
 export function getEnabledPlatforms(): Array<[string, PlatformConfig]> {
-  return Object.entries(PLATFORMS).filter(([_, config]) => config.enabled);
+  if (!enabledPlatformsCache) {
+    enabledPlatformsCache = Object.entries(PLATFORMS).filter(
+      ([_, config]) => config.enabled,
+    );
+  }
+  return enabledPlatformsCache;
 }
 
 /**
  * Check if a platform is enabled
- *
- * @param platformKey - The platform identifier
- * @returns True if platform is enabled
- **/
+ */
 export function isPlatformEnabled(platformKey: string): boolean {
   return PLATFORMS[platformKey]?.enabled || false;
 }
 
 /**
  * Check if an app is enabled
- *
- * @param appId - The app identifier
- * @returns True if app is enabled
- **/
+ */
 export function isAppEnabled(appId: AtprotoAppId): boolean {
   return ATPROTO_APPS[appId]?.enabled || false;
 }
+
+/**
+ * Clear all caches (useful for hot reload in development)
+ */
+export function clearPlatformCaches(): void {
+  platformCache.clear();
+  appCache.clear();
+  enabledAppsCache = null;
+  enabledPlatformsCache = null;
+}

src/types/index.ts

···
-export * from "./auth.types";
-export * from "./search.types";
-export * from "./common.types";
+// Core type exports
+export type {
+  AtprotoSession,
+  UserSessionData,
+  OAuthConfig,
+  StateData,
+  SessionData,
+} from "./auth.types";
 
-// Re-export settings types for convenience
+export type {
+  SourceUser,
+  AtprotoMatch,
+  SearchResult,
+  SearchProgress,
+  BatchSearchResult,
+  BatchFollowResult,
+} from "./search.types";
+
+export type { AppStep, Upload, SaveResultsResponse } from "./common.types";
+
 export type {
   UserSettings,
   PlatformDestinations,
   AtprotoApp,
   AtprotoAppId,
 } from "./settings";
+
+// Re-export for convenience
+export * from "./auth.types";
+export * from "./search.types";
+export * from "./common.types";
+export * from "./settings";
+export * from "./ui.types";

src/types/ui.types.ts

···
+import type { LucideIcon } from "lucide-react";
+
+export interface BaseComponentProps {
+  className?: string;
+}
+
+export interface AvatarProps extends BaseComponentProps {
+  avatar?: string;
+  handle: string;
+  size?: "sm" | "md" | "lg";
+}
+
+export interface ButtonVariant {
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  size?: "sm" | "md" | "lg";
+  isLoading?: boolean;
+  disabled?: boolean;
+}
+
+export interface IconButtonProps extends ButtonVariant, BaseComponentProps {
+  icon: LucideIcon;
+  label: string;
+  onClick?: () => void;
+}
+
+export interface TabConfig {
+  id: string;
+  icon: LucideIcon;
+  label: string;
+}