feat: enhance WhatsNewPopup with archive tab support and improved changelog display

app/components/WhatsNewPopup.tsx

@@ -5,17 +5,11 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { X } from 'lucide-react';
 
 // Current app version from package.json
 const APP_VERSION = '2025.07.01';
 
 // Changelog data - add new versions at the top
-
-// title can be like this
-// "month New Month Update"
-// "month Mid-Month Update"
-// "month Final Update"
 const CHANGELOG = [
   {
     version: '2025.07.01',
@@ -40,111 +34,164 @@ const CHANGELOG = [
       'Fixed layout issues on smaller screens',
       'Resolved scrobbling issues with Last.fm integration'
     ]
+  },
+  // Example previous version
+  {
+    version: '2025.06.15',
+    title: 'June Final Update',
+    changes: [
+      'Added dark mode toggle',
+      'Improved playlist management',
+    ],
+    breaking: [],
+    fixes: [
+      'Fixed login bug',
+    ]
   }
 ];
 
+type TabType = 'latest' | 'archive';
+
 export function WhatsNewPopup() {
   const [isOpen, setIsOpen] = useState(false);
+  const [tab, setTab] = useState<TabType>('latest');
+  const [selectedArchive, setSelectedArchive] = useState(CHANGELOG[1]?.version || '');
 
   useEffect(() => {
-    // Only show for users who have completed onboarding
     const hasCompletedOnboarding = localStorage.getItem('onboarding-completed');
     if (!hasCompletedOnboarding) return;
-    
-    // Check if we've shown the popup for this version
     const lastShownVersion = localStorage.getItem('whats-new-last-shown');
-    
     if (lastShownVersion !== APP_VERSION) {
       setIsOpen(true);
     }
   }, []);
 
   const handleClose = () => {
-    // Mark this version as shown
     localStorage.setItem('whats-new-last-shown', APP_VERSION);
     setIsOpen(false);
   };
 
   const currentVersionChangelog = CHANGELOG.find(entry => entry.version === APP_VERSION);
+  const archiveChangelogs = CHANGELOG.filter(entry => entry.version !== APP_VERSION);
+
+  // For archive, show selected version
+  const archiveChangelog = archiveChangelogs.find(entry => entry.version === selectedArchive) || archiveChangelogs[0];
 
   if (!currentVersionChangelog) {
     return null;
   }
 
+  const renderChangelog = (changelog: typeof CHANGELOG[0]) => (
+    <div className="space-y-6">
+      {changelog.title && (
+        <div>
+          <h3 className="text-lg font-semibold mb-2">{changelog.title}</h3>
+        </div>
+      )}
+
+      {changelog.changes.length > 0 && (
+        <div>
+          <h4 className="text-md font-medium mb-3 flex items-center gap-2">
+            ✨ New Features & Improvements
+          </h4>
+          <ul className="space-y-2">
+            {changelog.changes.map((change, index) => (
+              <li key={index} className="flex items-start gap-2">
+                <span className="text-green-500 mt-1">•</span>
+                <span className="text-sm">{change}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {changelog.fixes.length > 0 && (
+        <div>
+          <h4 className="text-md font-medium mb-3 flex items-center gap-2">
+            🐛 Bug Fixes
+          </h4>
+          <ul className="space-y-2">
+            {changelog.fixes.map((fix, index) => (
+              <li key={index} className="flex items-start gap-2">
+                <span className="text-blue-500 mt-1">•</span>
+                <span className="text-sm">{fix}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {changelog.breaking.length > 0 && (
+        <div>
+          <h4 className="text-md font-medium mb-3 flex items-center gap-2">
+            ⚠️ Breaking Changes
+          </h4>
+          <ul className="space-y-2">
+            {changelog.breaking.map((breaking, index) => (
+              <li key={index} className="flex items-start gap-2">
+                <span className="text-red-500 mt-1">•</span>
+                <span className="text-sm">{breaking}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
       <DialogContent className="max-w-2xl max-h-[80vh]">
         <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
           <div>
             <DialogTitle className="text-2xl font-bold flex items-center gap-2">
-              What&apos;s New in mice
-              <Badge variant="outline">{currentVersionChangelog.version}</Badge>
+              What&apos;s New in Mice
+              <Badge variant="outline">
+                {tab === 'latest' ? currentVersionChangelog.version : archiveChangelog?.version}
+              </Badge>
             </DialogTitle>
-            {/* <p className="text-sm text-muted-foreground mt-1">
-              Released on {currentVersionChangelog.date}
-            </p> */}
           </div>
         </DialogHeader>
 
+        {/* Tabs */}
+        <div className="flex gap-2 mb-4">
+          <Button
+            variant={tab === 'latest' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setTab('latest')}
+          >
+            Latest
+          </Button>
+          <Button
+            variant={tab === 'archive' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => setTab('archive')}
+            disabled={archiveChangelogs.length === 0}
+          >
+            Archive
+          </Button>
+          {tab === 'archive' && archiveChangelogs.length > 0 && (
+            <select
+              className="ml-2 border rounded px-2 py-1 text-sm"
+              value={selectedArchive}
+              onChange={e => setSelectedArchive(e.target.value)}
+            >
+              {archiveChangelogs.map(entry => (
+                <option key={entry.version} value={entry.version}>
+                  {entry.version}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+
         <ScrollArea className="max-h-[60vh] pr-4">
-          <div className="space-y-6">
-            {currentVersionChangelog.title && (
-              <div>
-                <h3 className="text-lg font-semibold mb-2">{currentVersionChangelog.title}</h3>
-              </div>
-            )}
-
-            {currentVersionChangelog.changes.length > 0 && (
-              <div>
-                <h4 className="text-md font-medium mb-3 flex items-center gap-2">
-                  ✨ New Features & Improvements
-                </h4>
-                <ul className="space-y-2">
-                  {currentVersionChangelog.changes.map((change, index) => (
-                    <li key={index} className="flex items-start gap-2">
-                      <span className="text-green-500 mt-1">•</span>
-                      <span className="text-sm">{change}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            {currentVersionChangelog.fixes.length > 0 && (
-              <div>
-                <h4 className="text-md font-medium mb-3 flex items-center gap-2">
-                  🐛 Bug Fixes
-                </h4>
-                <ul className="space-y-2">
-                  {currentVersionChangelog.fixes.map((fix, index) => (
-                    <li key={index} className="flex items-start gap-2">
-                      <span className="text-blue-500 mt-1">•</span>
-                      <span className="text-sm">{fix}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            {currentVersionChangelog.breaking.length > 0 && (
-              <div>
-                <h4 className="text-md font-medium mb-3 flex items-center gap-2">
-                  ⚠️ Breaking Changes
-                </h4>
-                <ul className="space-y-2">
-                  {currentVersionChangelog.breaking.map((breaking, index) => (
-                    <li key={index} className="flex items-start gap-2">
-                      <span className="text-red-500 mt-1">•</span>
-                      <span className="text-sm">{breaking}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-          </div>
+          {tab === 'latest'
+            ? renderChangelog(currentVersionChangelog)
+            : archiveChangelog && renderChangelog(archiveChangelog)}
         </ScrollArea>
 
-        <div className="flex justify-end pt-4">
+        <div className="flex justify-center pt-4">
           <Button onClick={handleClose}>
             Got it!
           </Button>