ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1import { BookOpen, Grid3x3 } from "lucide-react";
2import { useState, useEffect } from "react";
3import AppHeader from "../components/AppHeader";
4import SetupWizard from "../components/SetupWizard";
5import TabNavigation, { TabId } from "../components/TabNavigation";
6import UploadTab from "../components/UploadTab";
7import HistoryTab from "../components/HistoryTab";
8import PlaceholderTab from "../components/PlaceholderTab";
9import { apiClient } from "../lib/api/client";
10import type { Upload as UploadType } from "../types";
11import type { UserSettings } from "../types/settings";
12import SettingsPage from "./Settings";
13
14interface atprotoSession {
15 did: string;
16 handle: string;
17 displayName?: string;
18 avatar?: string;
19 description?: string;
20}
21
22interface HomePageProps {
23 session: atprotoSession | null;
24 onLogout: () => void;
25 onNavigate: (step: "home" | "login") => void;
26 onFileUpload: (
27 e: React.ChangeEvent<HTMLInputElement>,
28 platform: string,
29 ) => void;
30 onLoadUpload: (uploadId: string) => void;
31 currentStep: string;
32 userSettings: UserSettings;
33 onSettingsUpdate: (settings: Partial<UserSettings>) => void;
34 reducedMotion?: boolean;
35 isDark?: boolean;
36 onToggleTheme?: () => void;
37 onToggleMotion?: () => void;
38}
39
40export default function HomePage({
41 session,
42 onLogout,
43 onNavigate,
44 onFileUpload,
45 onLoadUpload,
46 currentStep,
47 userSettings,
48 onSettingsUpdate,
49 reducedMotion = false,
50 isDark = false,
51 onToggleTheme,
52 onToggleMotion,
53}: HomePageProps) {
54 const [activeTab, setActiveTab] = useState<TabId>("upload");
55 const [uploads, setUploads] = useState<UploadType[]>([]);
56 const [isLoading, setIsLoading] = useState(true);
57 const [selectedPlatform, setSelectedPlatform] = useState<string>("");
58 const [showWizard, setShowWizard] = useState(false);
59
60 useEffect(() => {
61 if (session) {
62 loadUploads();
63 }
64
65 // Show wizard on first visit
66 if (!userSettings.wizardCompleted) {
67 setShowWizard(true);
68 }
69 }, [session, userSettings.wizardCompleted]);
70
71 // Reload uploads when navigating to history tab
72 useEffect(() => {
73 if (activeTab === "history" && session) {
74 loadUploads();
75 }
76 }, [activeTab, session]);
77
78 async function loadUploads() {
79 try {
80 setIsLoading(true);
81 const data = await apiClient.getUploads();
82 setUploads(data.uploads);
83 } catch (error) {
84 console.error("Failed to load uploads:", error);
85 } finally {
86 setIsLoading(false);
87 }
88 }
89
90 return (
91 <div className="min-h-screen">
92 <SetupWizard
93 isOpen={showWizard}
94 onClose={() => setShowWizard(false)}
95 onComplete={onSettingsUpdate}
96 currentSettings={userSettings}
97 />
98
99 {/* Header */}
100 <div className="bg-white dark:bg-slate-900 border-b-2 border-cyan-500/50 dark:border-purple-500/50 overflow-x-auto">
101 <AppHeader
102 session={session}
103 onLogout={onLogout}
104 onNavigate={onNavigate}
105 currentStep={currentStep}
106 isDark={isDark}
107 reducedMotion={reducedMotion}
108 onToggleTheme={onToggleTheme}
109 onToggleMotion={onToggleMotion}
110 />
111 </div>
112
113 <div className="max-w-6xl mx-auto px-4 py-8">
114 <div className="max-w-6xl mx-auto bg-slate-100/50 dark:bg-slate-900/50 backdrop-blur-xl rounded-3xl p-3 border-2 border-cyan-500/30 dark:border-purple-500/30 mb-8">
115 {/* Tab Navigation */}
116 <TabNavigation activeTab={activeTab} onTabChange={setActiveTab} />
117
118 {/* Tab Content */}
119 <div>
120 {activeTab === "upload" && (
121 <UploadTab
122 wizardCompleted={userSettings.wizardCompleted}
123 onShowWizard={() => setShowWizard(true)}
124 onPlatformSelect={setSelectedPlatform}
125 onFileUpload={onFileUpload}
126 selectedPlatform={selectedPlatform}
127 />
128 )}
129
130 {activeTab === "history" && (
131 <HistoryTab
132 wizardCompleted={userSettings.wizardCompleted}
133 onShowWizard={() => setShowWizard(true)}
134 uploads={uploads}
135 isLoading={isLoading}
136 userSettings={userSettings}
137 onLoadUpload={onLoadUpload}
138 />
139 )}
140
141 {activeTab === "settings" && (
142 <SettingsPage
143 userSettings={userSettings}
144 onSettingsUpdate={onSettingsUpdate}
145 onOpenWizard={() => setShowWizard(true)}
146 />
147 )}
148
149 {activeTab === "guides" && (
150 <PlaceholderTab
151 icon={BookOpen}
152 title="Platform Guides"
153 message="Export guides coming soon..."
154 />
155 )}
156
157 {activeTab === "apps" && (
158 <PlaceholderTab
159 icon={Grid3x3}
160 title="ATmosphere Apps"
161 message="Apps directory coming soon..."
162 />
163 )}
164 </div>
165 </div>
166 </div>
167 </div>
168 );
169}