Initial commit

src/renderer/App.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+
+import { api } from './utils/api';
+import PageBackground from './assets/background.png';
+import Header from './components/Header';
+import LaunchPanel from './components/LaunchPanel';
+import SelfUpdateBanner from './components/SelfUpdateBanner';
+import TabsPanel, { type TabType } from './components/TabsPanel';
+import TopBar from './components/TopBar';
+import IconSpinner from './components/styled/IconSpinner';
+import usePreventDefaultEvents from './utils/usePreventDefaultEvents';
+
+const App = () => {
+	const { isLoading } = api.preferences.get.useQuery();
+	const { data: appVersion } = api.general.appVersion.useQuery();
+
+	const [activeTab, setActiveTab] = useState<TabType>();
+
+	usePreventDefaultEvents();
+
+	return (
+		<div
+			className="relative flex grow flex-col gap-3 overflow-hidden bg-cover bg-top bg-no-repeat p-[44px]"
+			style={{ backgroundImage: `url(${PageBackground})` }}
+		>
+			<TopBar />
+			<SelfUpdateBanner />
+			<Header {...{ activeTab, setActiveTab }} />
+
+			{isLoading ? (
+				<div className="flex flex-grow items-center justify-center">
+					<IconSpinner />
+				</div>
+			) : (
+				<>
+					<TabsPanel activeTab={activeTab} />
+					<LaunchPanel />
+				</>
+			)}
+
+			{/* Launcher build label, anchored bottom-right.*/}
+			{appVersion && (
+				<span className="pointer-events-none absolute bottom-2 right-3 text-[10px] font-mono uppercase tracking-wider text-white/40 select-none">
+					v{appVersion}
+				</span>
+			)}
+		</div>
+	);
+};
+
+export default App;