new dashboard layout

src/App.tsx

···
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } 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 ThemeControls from "./components/ThemeControls";
 import Firefly from "./components/Firefly";
-
+import { DEFAULT_SETTINGS } from "./types/settings";
+import type { UserSettings } from "./types/settings";
 
 export default function App() {
   // Auth hook
···
   // Add state to track current platform
   const [currentPlatform, setCurrentPlatform] = useState<string>('tiktok');
   const saveCalledRef = useRef<string | null>(null); // Track by uploadId
+
+  // Settings state
+  const [userSettings, setUserSettings] = useState<UserSettings>(() => {
+    const saved = localStorage.getItem('atlast_settings');
+    return saved ? JSON.parse(saved) : DEFAULT_SETTINGS;
+  });
+
+  // Save settings to localStorage whenever they change
+  useEffect(() => {
+    localStorage.setItem('atlast_settings', JSON.stringify(userSettings));
+  }, [userSettings]);
+
+  const handleSettingsUpdate = (newSettings: Partial<UserSettings>) => {
+    setUserSettings(prev => ({ ...prev, ...newSettings }));
+  };
 
   // Search hook
   const {
···
             isDark={isDark}
             onToggleTheme={toggleTheme}
             onToggleMotion={toggleMotion}
+            userSettings={userSettings}
+            onSettingsUpdate={handleSettingsUpdate}
           />
         )}
 

src/components/SetupWizard.tsx

···
+import { useState } from 'react';
+import { Heart, X, Check, ChevronRight } from 'lucide-react';
+import { PLATFORMS } from '../constants/platforms';
+import { ATPROTO_APPS } from '../constants/atprotoApps';
+import type { UserSettings, PlatformDestinations } from '../types/settings';
+
+interface SetupWizardProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onComplete: (settings: Partial<UserSettings>) => void;
+  currentSettings: UserSettings;
+}
+
+const wizardSteps = [
+  { title: 'Welcome', description: 'Set up your preferences' },
+  { title: 'Platforms', description: 'Choose where to import from' },
+  { title: 'Destinations', description: 'Where should matches go?' },
+  { title: 'Privacy', description: 'Data & automation settings' },
+  { title: 'Ready!', description: 'All set to find your people' },
+];
+
+export default function SetupWizard({ isOpen, onClose, onComplete, currentSettings }: SetupWizardProps) {
+  const [wizardStep, setWizardStep] = useState(0);
+  const [selectedPlatform, setSelectedPlatform] = useState<string | null>(null);
+  const [platformDestinations, setPlatformDestinations] = useState<PlatformDestinations>(
+    currentSettings.platformDestinations
+  );
+  const [saveData, setSaveData] = useState(currentSettings.saveData);
+  const [enableAutomation, setEnableAutomation] = useState(currentSettings.enableAutomation);
+  const [automationFrequency, setAutomationFrequency] = useState(currentSettings.automationFrequency);
+
+  if (!isOpen) return null;
+
+  const handleComplete = () => {
+    onComplete({
+      platformDestinations,
+      saveData,
+      enableAutomation,
+      automationFrequency,
+      wizardCompleted: true,
+    });
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl max-w-2xl w-full shadow-2xl max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="p-6 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800 z-10">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center space-x-3">
+              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
+                <Heart className="w-5 h-5 text-white" />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Setup Assistant</h2>
+            </div>
+            <button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
+              <X className="w-6 h-6" />
+            </button>
+          </div>
+          {/* Progress */}
+          <div className="flex items-center space-x-2">
+            {wizardSteps.map((step, idx) => (
+              <div key={idx} className="flex-1">
+                <div
+                  className={`h-2 rounded-full transition-all ${
+                    idx <= wizardStep ? 'bg-gradient-to-r from-blue-500 to-purple-600' : 'bg-gray-200 dark:bg-gray-700'
+                  }`}
+                />
+              </div>
+            ))}
+          </div>
+          <div className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+            Step {wizardStep + 1} of {wizardSteps.length}: {wizardSteps[wizardStep].title}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 min-h-[300px]">
+          {wizardStep === 0 && (
+            <div className="text-center space-y-4">
+              <div className="text-6xl mb-4">👋</div>
+              <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Welcome to ATlast!</h3>
+              <p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
+                Let's get you set up in just a few steps. We'll help you configure how you want to reconnect with your
+                community on the ATmosphere.
+              </p>
+            </div>
+          )}
+
+          {wizardStep === 1 && (
+            <div className="space-y-4">
+              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">Which platforms will you import from?</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Select the platforms you follow people on. We'll help you find them on the ATmosphere.
+              </p>
+              <div className="grid grid-cols-3 gap-3 mt-4">
+                {Object.entries(PLATFORMS).map(([key, p]) => {
+                  const Icon = p.icon;
+                  return (
+                    <button
+                      key={key}
+                      onClick={() => setSelectedPlatform(key)}
+                      className={`p-4 rounded-xl border-2 transition-all ${
+                        selectedPlatform === key
+                          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
+                          : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'
+                      }`}
+                    >
+                      <Icon className="w-8 h-8 mx-auto mb-2 text-gray-700 dark:text-gray-300" />
+                      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{p.name}</div>
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {wizardStep === 2 && (
+            <div className="space-y-4">
+              <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">Where should matches go?</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Choose which ATmosphere app to use for each platform. You can change this later.
+              </p>
+              <div className="space-y-3 mt-4">
+                {Object.entries(PLATFORMS).map(([key, p]) => {
+                  const Icon = p.icon;
+                  return (
+                    <div key={key} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
+                      <div className="flex items-center space-x-3">
+                        <Icon className="w-6 h-6 text-gray-700 dark:text-gray-300" />
+                        <span className="font-medium text-gray-900 dark:text-gray-100">{p.name}</span>
+                      </div>
+                      <select
+                        value={platformDestinations[key as keyof PlatformDestinations]}
+                        onChange={(e) =>
+                          setPlatformDestinations({
+                            ...platformDestinations,
+                            [key]: e.target.value,
+                          })
+                        }
+                        className="px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-gray-100"
+                      >
+                        {Object.values(ATPROTO_APPS).map((app) => (
+                          <option key={app.id} value={app.id}>
+                            {app.icon} {app.name}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          )}
+
+          {wizardStep === 3 && (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Privacy & Automation</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">Control how your data is used.</p>
+              </div>
+
+              <div className="space-y-4">
+                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
+                  <div className="flex items-start space-x-3">
+                    <input
+                      type="checkbox"
+                      checked={saveData}
+                      onChange={(e) => setSaveData(e.target.checked)}
+                      className="mt-1"
+                      id="save-data"
+                    />
+                    <div className="flex-1">
+                      <label htmlFor="save-data" className="font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
+                        Save my data for future checks
+                      </label>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        Store your following lists so we can check for new matches later. You can delete anytime.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-xl">
+                  <div className="flex items-start space-x-3">
+                    <input
+                      type="checkbox"
+                      checked={enableAutomation}
+                      onChange={(e) => setEnableAutomation(e.target.checked)}
+                      className="mt-1"
+                      id="enable-automation"
+                    />
+                    <div className="flex-1">
+                      <label htmlFor="enable-automation" className="font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
+                        Notify me about new matches
+                      </label>
+                      <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                        We'll check periodically and DM you when people you follow join the ATmosphere.
+                      </p>
+                      {enableAutomation && (
+                        <select
+                          value={automationFrequency}
+                          onChange={(e) => setAutomationFrequency(e.target.value as 'weekly' | 'monthly' | 'quarterly')}
+                          className="mt-2 px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm w-full text-gray-900 dark:text-gray-100"
+                        >
+                          <option value="daily">Check daily</option>
+                          <option value="weekly">Check weekly</option>
+                          <option value="monthly">Check monthly</option>
+                        </select>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {wizardStep === 4 && (
+            <div className="text-center space-y-4">
+              <div className="text-6xl mb-4">🎉</div>
+              <h3 className="text-2xl font-bold text-gray-900 dark:text-gray-100">You're all set!</h3>
+              <p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
+                Your preferences have been saved. You can change them anytime in Settings.
+              </p>
+              <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-xl p-4 mt-4">
+                <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">Quick Summary:</h4>
+                <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 text-left max-w-sm mx-auto">
+                  <li className="flex items-center space-x-2">
+                    <Check className="w-4 h-4 text-green-500" />
+                    <span>Data saving: {saveData ? 'Enabled' : 'Disabled'}</span>
+                  </li>
+                  <li className="flex items-center space-x-2">
+                    <Check className="w-4 h-4 text-green-500" />
+                    <span>Automation: {enableAutomation ? 'Enabled' : 'Disabled'}</span>
+                  </li>
+                  <li className="flex items-center space-x-2">
+                    <Check className="w-4 h-4 text-green-500" />
+                    <span>Ready to upload your first file!</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between sticky bottom-0 bg-white dark:bg-gray-800">
+          <button
+            onClick={() => wizardStep > 0 && setWizardStep(wizardStep - 1)}
+            disabled={wizardStep === 0}
+            className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
+          >
+            Back
+          </button>
+          <button
+            onClick={() => {
+              if (wizardStep < wizardSteps.length - 1) {
+                setWizardStep(wizardStep + 1);
+              } else {
+                handleComplete();
+              }
+            }}
+            className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 transition-all flex items-center space-x-2"
+          >
+            <span>{wizardStep === wizardSteps.length - 1 ? 'Get Started' : 'Next'}</span>
+            {wizardStep < wizardSteps.length - 1 && <ChevronRight className="w-4 h-4" />}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/constants/atprotoApps.ts

···
+import type { AtprotoApp } from '../types/settings';
+
+export const ATPROTO_APPS: Record<string, AtprotoApp> = {
+  bluesky: {
+    id: 'bluesky',
+    name: 'Bluesky',
+    description: 'The main ATmosphere social network',
+    color: 'blue',
+    icon: '🦋',
+    action: 'Follow',
+    enabled: true,
+  },
+  tangled: {
+    id: 'tangled',
+    name: 'Tangled',
+    description: 'Alternative following for developers & creators',
+    color: 'purple',
+    icon: '🐑',
+    action: 'Follow',
+    enabled: false, // Not yet integrated
+  },
+  spark: {
+    id: 'spark',
+    name: 'Spark',
+    description: 'Short-form video focused social',
+    color: 'orange',
+    icon: '✨',
+    action: 'Follow',
+    enabled: false, // Not yet integrated
+  },
+  lists: {
+    id: 'bsky list',
+    name: 'List',
+    description: 'Organize into custom Bluesky lists',
+    color: 'green',
+    icon: '📃',
+    action: 'Add to List',
+    enabled: false, // Not yet implemented
+  },
+};
+
+export function getAppById(id: string): AtprotoApp | undefined {
+  return ATPROTO_APPS[id];
+}
+
+export function getEnabledApps(): AtprotoApp[] {
+  return Object.values(ATPROTO_APPS).filter(app => app.enabled);
+}

src/constants/platforms.ts

···
   accentBg: string;
   fileHint: string;
   enabled: boolean;
+  defaultApp: string;
 }
 
 export const PLATFORMS: Record<string, PlatformConfig> = {
···
     accentBg: 'bg-blue-500',
     fileHint: 'following.txt, data.json, or data.zip',
     enabled: false,
+    defaultApp: 'bluesky',
   },
   instagram: {
     name: 'Instagram',
···
     accentBg: 'bg-pink-500',
     fileHint: 'following.html or data ZIP',
     enabled: true,
+    defaultApp: 'bluesky',
   },
   tiktok: {
     name: 'TikTok',
···
     accentBg: 'bg-black',
     fileHint: 'Following.txt or data ZIP',
     enabled: true,
+    defaultApp: 'spark',
   },
   tumblr: {
     name: 'Tumblr',
···
     accentBg: 'bg-indigo-600',
     fileHint: 'following.csv or data export',
     enabled: false,
+    defaultApp: 'bluesky',
   },
   twitch: {
     name: 'Twitch',
···
     accentBg: 'bg-purple-600',
     fileHint: 'following.json or data export',
     enabled: false,
+    defaultApp: 'bluesky'
   },
   youtube: {
     name: 'YouTube',
···
     accentBg: 'bg-red-600',
     fileHint: 'subscriptions.csv or Takeout ZIP',
     enabled: false,
+    defaultApp: 'bluesky'
   },
 };
 

src/index.css

···
   }
 }
 
+/* Hide scrollbar but allow scrolling */
+.scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;
+}
+
 /* Firefly animation keyframes */
 @keyframes float {
   0%, 100% { 

src/pages/Home.tsx

···
-import { Upload, History, FileText, Sparkles } from "lucide-react";
+import { Upload, History, Settings, BookOpen, Grid3x3, ChevronRight, Sparkles } from "lucide-react";
 import { useState, useEffect, useRef } from "react";
 import AppHeader from "../components/AppHeader";
 import PlatformSelector from "../components/PlatformSelector";
+import SetupWizard from "../components/SetupWizard";
 import { apiClient } from "../lib/apiClient";
+import { ATPROTO_APPS } from "../constants/atprotoApps";
 import type { Upload as UploadType } from "../types";
+import type { UserSettings } from "../types/settings";
 
 interface atprotoSession {
   did: string;
···
   onFileUpload: (e: React.ChangeEvent<HTMLInputElement>, platform: string) => void;
   onLoadUpload: (uploadId: string) => void;
   currentStep: string;
+  userSettings: UserSettings;
+  onSettingsUpdate: (settings: Partial<UserSettings>) => void;
+  // New props from changes.js
   reducedMotion?: boolean;
   isDark?: boolean;
   onToggleTheme?: () => void;
   onToggleMotion?: () => void;
 }
 
+type TabId = 'upload' | 'history' | 'settings' | 'guides' | 'apps';
+
 export default function HomePage({ 
   session, 
   onLogout, 
···
   onFileUpload, 
   onLoadUpload,
   currentStep,
+  userSettings,
+  onSettingsUpdate,
+  // New props
   reducedMotion = false,
   isDark = false,
   onToggleTheme,
   onToggleMotion
 }: HomePageProps) {
+  const [activeTab, setActiveTab] = useState<TabId>('upload');
   const [uploads, setUploads] = useState<UploadType[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [selectedPlatform, setSelectedPlatform] = useState<string>('');
+  const [showWizard, setShowWizard] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (session) {
       loadUploads();
     }
-  }, [session]);
+    
+    // Show wizard on first visit
+    if (!userSettings.wizardCompleted) {
+      setShowWizard(true);
+    }
+  }, [session, userSettings.wizardCompleted]);
 
   async function loadUploads() {
     try {
···
 
   const handlePlatformSelect = (platform: string) => {
     setSelectedPlatform(platform);
-    // Trigger the file input
     fileInputRef.current?.click();
   };
 
···
     return colors[platform] || 'from-gray-400 to-gray-600';
   };
 
+  const tabs = [
+    { id: 'upload' as TabId, icon: Upload, label: 'Upload' },
+    { id: 'history' as TabId, icon: History, label: 'History' },
+    { id: 'settings' as TabId, icon: Settings, label: 'Settings' },
+    { id: 'guides' as TabId, icon: BookOpen, label: 'Guides' },
+    { id: 'apps' as TabId, icon: Grid3x3, label: 'Apps' },
+  ];
+
   return (
-    <div className="min-h-screen">
-      <AppHeader 
-        session={session} 
-        onLogout={onLogout} 
-        onNavigate={onNavigate} 
-        currentStep={currentStep}
-        isDark={isDark}
-        reducedMotion={reducedMotion}
-        onToggleTheme={onToggleTheme}
-        onToggleMotion={onToggleMotion}
+    // Updated background from changes.js
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+      <SetupWizard
+        isOpen={showWizard}
+        onClose={() => setShowWizard(false)}
+        onComplete={onSettingsUpdate}
+        currentSettings={userSettings}
       />
 
-      <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
-        {/* Upload Section */}
-        <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
-          <div className="flex items-center space-x-3 mb-4">
-            <div 
-              className={`w-12 h-12 bg-gradient-to-br from-firefly-amber to-firefly-orange rounded-xl flex items-center justify-center shadow-md ${
-                reducedMotion ? '' : 'animate-glow-pulse'
-              }`}
-            >
-              <Upload className="w-6 h-6 text-slate-900" />
-            </div>
-            <div>
-              <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">
-                Light Up Your Network
-              </h2>
-              <p className="text-sm text-slate-700 dark:text-slate-300">
-                Upload your data to find your fireflies
-              </p>
+      {/* Header */}
+      <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+        {/* Updated AppHeader props from changes.js */}
+        <AppHeader 
+          session={session} 
+          onLogout={onLogout} 
+          onNavigate={onNavigate} 
+          currentStep={currentStep}
+          isDark={isDark}
+          reducedMotion={reducedMotion}
+          onToggleTheme={onToggleTheme}
+          onToggleMotion={onToggleMotion}
+        />
+
+        {/* Tab Navigation */}
+        <div className="max-w-6xl mx-auto">
+          <div className="overflow-x-auto scrollbar-hide px-4">
+            <div className="flex space-x-1 border-b border-gray-200 dark:border-gray-700 min-w-max">
+              {tabs.map(tab => {
+                const Icon = tab.icon;
+                return (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    className={`flex items-center space-x-2 px-4 py-3 border-b-2 transition-all whitespace-nowrap ${
+                      activeTab === tab.id
+                        ? 'border-blue-500 text-blue-600 dark:text-blue-400'
+                        : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+                    }`}
+                  >
+                    <Icon className="w-4 h-4" />
+                    <span className="font-medium">{tab.label}</span>
+                  </button>
+                );
+              })}
             </div>
           </div>
-          <p className="text-slate-700 dark:text-slate-300 mb-6">
-            Click a platform below to upload your exported data and discover matches in the ATmosphere
-          </p>
-  
-          <PlatformSelector onPlatformSelect={handlePlatformSelect} />
-          
-          {/* Hidden file input */}
-          <input
-            id="file-upload"
-            ref={fileInputRef}
-            type="file"
-            accept=".txt,.json,.html,.zip"
-            onChange={(e) => onFileUpload(e, selectedPlatform || 'tiktok')}
-            className="sr-only"
-            aria-label="Upload following data file"
-          />
-          
-          <div className="mt-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border-2 border-blue-200 dark:border-blue-800/30">
-            <p className="text-sm text-blue-900 dark:text-blue-300 font-semibold">
-              💡 How to get your data:
-            </p>
-            <p className="text-sm text-blue-900 dark:text-blue-300 mt-2">
-              <strong>TikTok:</strong> Profile → Settings → Account → Download your data → Upload Following.txt
-            </p>
-            <p className="text-sm text-blue-900 dark:text-blue-300 mt-1">
-              <strong>Instagram:</strong> Profile → Settings → Accounts Center → Your information and permissions → Download your information → Upload following.html
-            </p>
-          </div>
         </div>
-
-        {/* Upload History Section */}
-        <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
-          <div className="flex items-center space-x-3 mb-6">
-            <Sparkles className="w-6 h-6 text-firefly-amber" />
-            <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">
-              Your Light Trail
-            </h2>
-          </div>
+      </div>
 
-          {isLoading ? (
-            <div className="space-y-3">
-              {[...Array(3)].map((_, i) => (
-                <div key={i} className="animate-pulse flex items-center space-x-4 p-4 bg-slate-50 dark:bg-slate-700 rounded-xl">
-                  <div className="w-12 h-12 bg-slate-200 dark:bg-slate-600 rounded-xl" />
-                  <div className="flex-1 space-y-2">
-                    <div className="h-4 bg-slate-200 dark:bg-slate-600 rounded w-3/4" />
-                    <div className="h-3 bg-slate-200 dark:bg-slate-600 rounded w-1/2" />
+      {/* Tab Content */}
+      <div className="max-w-6xl mx-auto px-4 py-8">
+        {/* Upload Tab */}
+        {activeTab === 'upload' && (
+          <div className="space-y-6">
+            {/* Setup Assistant  */}
+            {!userSettings.wizardCompleted && (
+              <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-6 text-white">
+                <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+                  <div className="flex-1">
+                    <h2 className="text-2xl font-bold mb-2">Need help getting started?</h2>
+                    <p className="text-white/90">Run the setup assistant to configure your preferences in minutes.</p>
                   </div>
+                  <button
+                    onClick={() => setShowWizard(true)}
+                    className="bg-white text-blue-600 px-6 py-3 rounded-xl font-semibold hover:bg-blue-50 transition-all flex items-center space-x-2 whitespace-nowrap"
+                  >
+                    <span>Start Setup</span>
+                    <ChevronRight className="w-4 h-4" />
+                  </button>
                 </div>
-              ))}
-            </div>
-          ) : uploads.length === 0 ? (
-            <div className="text-center py-12">
-              <FileText className="w-16 h-16 text-slate-300 dark:text-slate-600 mx-auto mb-4" />
-              <p className="text-slate-600 dark:text-slate-400 font-medium">No previous uploads yet</p>
-              <p className="text-sm text-slate-500 dark:text-slate-500 mt-2">
-                Upload your first file to get started
+              </div>
+            )}
+
+            {/* Upload Section */}
+            <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+              <div className="flex items-center space-x-3 mb-4">
+                <div 
+                  className={`w-12 h-12 bg-gradient-to-br from-firefly-amber to-firefly-orange rounded-xl flex items-center justify-center shadow-md ${
+                    reducedMotion ? '' : 'animate-glow-pulse'
+                  }`}
+                >
+                  <Upload className="w-6 h-6 text-slate-900" />
+                </div>
+                <div>
+                  <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+                    Light Up Your Network
+                  </h2>
+                  <p className="text-sm text-slate-700 dark:text-slate-300">
+                    Upload your data to find your fireflies
+                  </p>
+                </div>
+              </div>
+              
+              <p className="text-slate-700 dark:text-slate-300 mb-6">
+                Click a platform below to upload your exported data and discover matches in the ATmosphere
               </p>
+      
+              <PlatformSelector onPlatformSelect={handlePlatformSelect} />
+              
+              <input
+                id="file-upload"
+                ref={fileInputRef}
+                type="file"
+                accept=".txt,.json,.html,.zip"
+                onChange={(e) => onFileUpload(e, selectedPlatform || 'tiktok')}
+                className="sr-only"
+                aria-label="Upload following data file"
+              />
             </div>
-          ) : (
-            <div className="space-y-3">
-              {uploads.map((upload) => (
-                <button
-                  key={upload.uploadId}
-                  onClick={() => onLoadUpload(upload.uploadId)}
-                  className="w-full flex items-start space-x-4 p-4 bg-slate-50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-900/70 rounded-xl transition-all text-left border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange shadow-md hover:shadow-lg"
-                >
-                  <div className={`w-12 h-12 bg-gradient-to-r ${getPlatformColor(upload.sourcePlatform)} rounded-xl flex items-center justify-center flex-shrink-0 shadow-md`}>
-                    <Sparkles className="w-6 h-6 text-white" />
+          </div>
+        )}
+
+        {/* History Tab */}
+        {activeTab === 'history' && (
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+            <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+              <div className="flex items-center space-x-3 mb-6">
+                <Sparkles className="w-6 h-6 text-firefly-amber" />
+                <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">
+                  Your Light Trail
+                </h2>
+              </div>
+
+            {isLoading ? (
+              <div className="space-y-3">
+                {[...Array(3)].map((_, i) => (
+                  <div key={i} className="animate-pulse flex items-center space-x-4 p-4 bg-slate-50 dark:bg-slate-700 rounded-xl">
+                    <div className="w-12 h-12 bg-slate-200 dark:bg-slate-600 rounded-xl" />
+                    <div className="flex-1 space-y-2">
+                      <div className="h-4 bg-slate-200 dark:bg-slate-600 rounded w-3/4" />
+                      <div className="h-3 bg-slate-200 dark:bg-slate-600 rounded w-1/2" />
+                    </div>
                   </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2 mb-1">
-                      <div className="font-semibold text-slate-900 dark:text-slate-100 capitalize">
-                        {upload.sourcePlatform}
+                ))}
+              </div>
+            ) : uploads.length === 0 ? (
+              <div className="text-center py-12">
+                <Upload className="w-16 h-16 text-slate-300 dark:text-slate-600 mx-auto mb-4" />
+                <p className="text-slate-600 dark:text-slate-400 font-medium">No previous uploads yet</p>
+                <p className="text-sm text-slate-500 dark:text-slate-500 mt-2">
+                  Upload your first file to get started
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {uploads.map((upload) => {
+                  const destApp = ATPROTO_APPS[userSettings.platformDestinations[upload.sourcePlatform as keyof typeof userSettings.platformDestinations]];
+                  return (
+                    <button
+                      key={upload.uploadId}
+                      onClick={() => onLoadUpload(upload.uploadId)}
+                      className="w-full flex items-start space-x-4 p-4 bg-slate-50 dark:bg-slate-900/50 hover:bg-slate-100 dark:hover:bg-slate-900/70 rounded-xl transition-all text-left border-2 border-slate-200 dark:border-slate-700 hover:border-firefly-orange dark:hover:border-firefly-orange shadow-md hover:shadow-lg"
+                    >
+                      <div className={`w-12 h-12 bg-gradient-to-r ${getPlatformColor(upload.sourcePlatform)} rounded-xl flex items-center justify-center flex-shrink-0 shadow-md`}>
+                        <Sparkles className="w-6 h-6 text-white" />
                       </div>
-                      <div className="flex items-center gap-2 flex-shrink-0">
-                        <span className="text-xs px-2 py-0.5 bg-firefly-amber/20 dark:bg-firefly-amber/30 text-amber-900 dark:text-firefly-glow rounded-full font-medium border border-firefly-amber/20 dark:border-firefly-amber/50 whitespace-nowrap">
-                          {upload.matchedUsers} {upload.matchedUsers === 1 ? 'firefly' : 'fireflies'}
-                        </span>
-                        <div className="text-sm text-slate-600 dark:text-slate-400 font-medium whitespace-nowrap">
-                          {Math.round((upload.matchedUsers / upload.totalUsers) * 100)}%
+                      <div className="flex-1 min-w-0">
+                        <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2 mb-1">
+                          <div className="font-semibold text-slate-900 dark:text-slate-100 capitalize">
+                            {upload.sourcePlatform}
+                          </div>
+                          <div className="flex items-center gap-2 flex-shrink-0">
+                            <span className="text-xs px-2 py-0.5 bg-firefly-amber/20 dark:bg-firefly-amber/30 text-amber-900 dark:text-firefly-glow rounded-full font-medium border border-firefly-amber/20 dark:border-firefly-amber/50 whitespace-nowrap">
+                              {upload.matchedUsers} {upload.matchedUsers === 1 ? 'firefly' : 'fireflies'}
+                            </span>
+                            <div className="text-sm text-slate-600 dark:text-slate-400 font-medium whitespace-nowrap">
+                              {Math.round((upload.matchedUsers / upload.totalUsers) * 100)}%
+                            </div>
+                          </div>
+                        </div>
+                        <div className="text-sm text-slate-700 dark:text-slate-300">
+                          {upload.totalUsers} users • {formatDate(upload.createdAt)}
                         </div>
+                        {destApp && (
+                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            Sent to {destApp.icon} {destApp.name}
+                          </div>
+                        )}
                       </div>
-                    </div>
-                    <div className="text-sm text-slate-700 dark:text-slate-300">
-                      {upload.totalUsers} users • {formatDate(upload.createdAt)}
-                    </div>
-                  </div>
-                </button>
-              ))}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+            </div>
+          </div>
+        )}
+
+        {/* Settings Tab - Placeholder */}
+        {activeTab === 'settings' && (
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+            <div className="flex items-center space-x-3 mb-6">
+              <Settings className="w-6 h-6 text-gray-600 dark:text-gray-400" />
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Settings</h2>
+            </div>
+            <p className="text-gray-600 dark:text-gray-400">Settings page coming soon...</p>
+          </div>
+        )}
+
+        {/* Guides Tab - Placeholder */}
+        {activeTab === 'guides' && (
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+            <div className="flex items-center space-x-3 mb-6">
+              <BookOpen className="w-6 h-6 text-gray-600 dark:text-gray-400" />
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Platform Guides</h2>
+            </div>
+            <p className="text-gray-600 dark:text-gray-400">Export guides coming soon...</p>
+          </div>
+        )}
+
+        {/* Apps Tab - Placeholder */}
+        {activeTab === 'apps' && (
+          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
+            <div className="flex items-center space-x-3 mb-6">
+              <Grid3x3 className="w-6 h-6 text-gray-600 dark:text-gray-400" />
+              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">ATmosphere Apps</h2>
             </div>
-          )}
-        </div>
+            <p className="text-gray-600 dark:text-gray-400">Apps directory coming soon...</p>
+          </div>
+        )}
       </div>
     </div>
   );

src/types/settings.ts

···
+export type AtprotoAppId = 'bluesky' | 'tangled' | 'spark' | 'bsky list';
+
+export interface AtprotoApp {
+  id: AtprotoAppId;
+  name: string;
+  description: string;
+  color: string;
+  icon: string;
+  action: string;
+  enabled: boolean;
+}
+
+export interface PlatformDestinations {
+  twitter: AtprotoAppId;
+  instagram: AtprotoAppId;
+  tiktok: AtprotoAppId;
+  github: AtprotoAppId;
+  twitch: AtprotoAppId;
+  youtube: AtprotoAppId;
+  tumblr: AtprotoAppId;
+}
+
+export interface UserSettings {
+  platformDestinations: PlatformDestinations;
+  saveData: boolean;
+  enableAutomation: boolean;
+  automationFrequency: 'weekly' | 'monthly' | 'quarterly';
+  wizardCompleted: boolean;
+}
+
+export const DEFAULT_SETTINGS: UserSettings = {
+  platformDestinations: {
+    twitter: 'bluesky',
+    instagram: 'bluesky',
+    tiktok: 'spark',
+    github: 'tangled',
+    twitch: 'bluesky',
+    youtube: 'bluesky',
+    tumblr: 'bluesky',
+  },
+  saveData: true,
+  enableAutomation: false,
+  automationFrequency: 'monthly',
+  wizardCompleted: false,
+};