better flyer icons + archive

src/App.tsx

@@ -104,7 +104,7 @@ function App() {
 
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [unitSystem, setUnitSystem] = useState<'metric' | 'imperial'>('imperial');
-  const [profile, setProfile] = useState<Profile | null>(null);
+  const [profile, setProfile] = useState<UserProfile | null>(null);
   const [authStatus, setAuthStatus] = useState<AuthStatus>('SIGNED_OUT');
   const [isProfileManagerOpen, setIsProfileManagerOpen] = useState(false); // This will now control the login modal as well
   const [isWhatsNewOpen, setIsWhatsNewOpen] = useState(false);
@@ -126,6 +126,16 @@ function App() {
     setSelectedFlyer(updatedFlyer);
   };
 
+  const handleProfileUpdate = (updatedProfileData: Profile) => {
+    // When the profile is updated, the API returns a `Profile` object.
+    // We need to merge it with the existing `user` object to maintain
+    // the `UserProfile` type in our state.
+    if (user) {
+      const updatedUserProfile: UserProfile = { ...updatedProfileData, user };
+      setProfile(updatedUserProfile);
+    }
+  };
+
   const [estimatedTime, setEstimatedTime] = useState(0);
   
   const [activeListId, setActiveListId] = useState<number | null>(null);
@@ -609,7 +619,7 @@ function App() {
             user={user}
             authStatus={authStatus}
             profile={profile}
-            onProfileUpdate={setProfile}
+            onProfileUpdate={handleProfileUpdate}
             onLoginSuccess={handleLoginSuccess}
             onSignOut={handleSignOut} // Pass the signOut handler
         />
@@ -653,7 +663,7 @@ function App() {
             <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 items-start">
               
               <div className="lg:col-span-1 flex flex-col space-y-6">
-                <FlyerList flyers={flyers} onFlyerSelect={handleFlyerSelect} selectedFlyerId={selectedFlyer?.flyer_id || null} />
+                <FlyerList flyers={flyers} onFlyerSelect={handleFlyerSelect} selectedFlyerId={selectedFlyer?.flyer_id || null} profile={profile} />
                 <FlyerUploader onProcessingComplete={refetchFlyers} />
               </div>