make app prettier

src-tauri/capabilities/default.json

···
     "core:window:default",
     "core:window:allow-start-dragging",
     "core:event:default",
-    "deep-link:default"
+    "deep-link:default",
+    "core:window:allow-close",
+    "core:window:allow-minimize",
+    "core:window:allow-toggle-maximize",
+    "core:window:allow-internal-toggle-maximize"
   ]
 }

src/App.tsx

···
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import reactLogo from "./assets/react.svg";
 import { invoke } from "@tauri-apps/api/core";
 import "./App.css";
 import { Button } from "./components/ui/button";
 import LoginPage from "./routes/Login";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import {
+  Agent,
+  AtpAgent,
+  type AtpSessionData,
+  type AtpSessionEvent,
+} from "@atproto/api";
+import {
+  BrowserOAuthClient,
+  OAuthSession,
+} from "@atproto/oauth-client-browser";
+import { LoaderIcon } from "lucide-react";
+import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+
+function LoggedInScreen({
+  session,
+  onLogout,
+  agent,
+}: {
+  session: OAuthSession;
+  onLogout: () => void;
+  agent: Agent;
+}) {
+  const [userData, setUserData] = useState<ProfileViewDetailed | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      const sessionData = await agent.getProfile({ actor: agent.assertDid });
+      setUserData(sessionData.data);
+    })();
+  }, [agent]);
+
+  return (
+    <div className="p-4 mt-10">
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-2xl font-bold">Welcome!</h1>
+        <Button onClick={onLogout}>Logout</Button>
+      </div>
+      <div className="bg-card rounded-lg p-4">
+        <p className="mb-2 text-white">
+          Logged in as: <span className="font-mono">@{userData?.handle}</span>
+        </p>
+        <p className="text-sm text-muted-foreground"></p>
+      </div>
+    </div>
+  );
+}
 
 function App() {
-  const [greetMsg, setGreetMsg] = useState("");
-  const [name, setName] = useState("");
+  const [session, setSession] = useState<OAuthSession | null>(null);
+  const appWindow = getCurrentWindow();
+  const [client, setClient] = useState<BrowserOAuthClient | null>(null);
+  const [agent, setAgent] = useState<Agent | null>(null);
+
+  // Load session from localStorage on mount
+  useEffect(() => {
+    (async () => {
+      const client = await BrowserOAuthClient.load({
+        clientId: "https://atproto-backup.pages.dev/client_metadata.json",
+        handleResolver: "https://bsky.social",
+      });
+
+      //@ts-expect-error
+      const result: undefined | { session: OAuthSession; state?: string } =
+        await client.init();
+
+      if (result) {
+        const { session, state } = result;
+        if (state != null) {
+          console.log(
+            `${session.sub} was successfully authenticated (state: ${state})`
+          );
+        } else {
+          console.log(`${session.sub} was restored (last active session)`);
+        }
+        setSession(session);
+        setAgent(new Agent(session));
+      }
+      setClient(client);
+    })();
+  }, []);
 
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
-    setGreetMsg(await invoke("greet", { name }));
-  }
+  const handleLogin = (newSession: OAuthSession) => {
+    setSession(newSession);
+    setAgent(new Agent(newSession));
+  };
+
+  const handleLogout = () => {
+    setSession(null);
+    setAgent(null);
+  };
 
   return (
-    <main className="dark">
+    <main className="dark bg-background min-h-screen flex flex-col">
       <div className="titlebar" data-tauri-drag-region>
         <div className="controls">
-          <Button variant="ghost" id="titlebar-minimize" title="minimize">
+          <Button
+            variant="ghost"
+            id="titlebar-minimize"
+            title="minimize"
+            onClick={() => {
+              appWindow.minimize();
+            }}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
···
               <path fill="currentColor" d="M19 13H5v-2h14z" />
             </svg>
           </Button>
-          <button id="titlebar-maximize" title="maximize">
+          <Button
+            id="titlebar-maximize"
+            title="maximize"
+            onClick={() => {
+              appWindow.toggleMaximize();
+            }}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
···
             >
               <path fill="currentColor" d="M4 4h16v16H4zm2 4v10h12V8z" />
             </svg>
-          </button>
-          <button id="titlebar-close" title="close">
+          </Button>
+          <Button
+            id="titlebar-close"
+            title="close"
+            onClick={() => {
+              appWindow.close();
+            }}
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
···
                 d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"
               />
             </svg>
-          </button>
+          </Button>
         </div>
       </div>
 
-      <LoginPage />
+      {client ? (
+        <>
+          {session && agent ? (
+            <LoggedInScreen
+              session={session}
+              onLogout={handleLogout}
+              agent={agent}
+            />
+          ) : (
+            <LoginPage onLogin={handleLogin} client={client} />
+          )}
+        </>
+      ) : (
+        <div className="flex-1 flex items-center justify-center">
+          <LoaderIcon className="animate-spin" />
+        </div>
+      )}
     </main>
   );
 }

src/routes/Login.tsx

···
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { AtpSessionEvent, Agent, CredentialSession } from "@atproto/api";
+import {
+  AtpSessionEvent,
+  Agent,
+  CredentialSession,
+  AtpSessionData,
+} from "@atproto/api";
 import {
   BrowserOAuthClient,
   BrowserOAuthClientOptions,
+  OAuthSession,
 } from "@atproto/oauth-client-browser";
 import { onOpenUrl } from "@tauri-apps/plugin-deep-link";
 
 type LoginMethod = "credential" | "oauth";
 
-export default function LoginPage() {
+interface LoginPageProps {
+  onLogin: (session: OAuthSession) => void;
+  client: BrowserOAuthClient;
+}
+
+export default function LoginPage({
+  onLogin,
+  client: oauthClient,
+}: LoginPageProps) {
   const [identifier, setIdentifier] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [loginMethod, setLoginMethod] = useState<LoginMethod>("credential");
-  const [oauthClient, setOauthClient] = useState<BrowserOAuthClient | null>(
-    null
-  );
+  const processingOAuthRef = useRef(false);
 
   // Initialize OAuth client
   useEffect(() => {
     const initOAuthClient = async () => {
       try {
-        const client = await BrowserOAuthClient.load({
-          clientId: "https://atproto-backup.pages.dev/client_metadata.json",
+        // Set up deep link handler
+        await onOpenUrl(async (urls) => {
+          console.log("deep link received:", urls);
+          if (!oauthClient || urls.length === 0) return;
+
+          // Prevent duplicate processing
+          if (processingOAuthRef.current) {
+            console.log(
+              "Already processing OAuth callback, ignoring duplicate"
+            );
+            return;
+          }
+
+          try {
+            processingOAuthRef.current = true;
+            // Get the first URL from the array and parse it
+            const url = new URL(urls[0]);
+
+            // Process the OAuth callback with the URLSearchParams directly
+            const session = await oauthClient.callback(url.searchParams);
+            console.log("OAuth callback successful!", session);
+            onLogin(session.session);
+            setLoading(false);
+          } catch (err) {
+            console.error("Failed to process OAuth callback:", err);
+            setError("Failed to complete OAuth login");
+          } finally {
+            processingOAuthRef.current = false;
+          }
         });
-        setOauthClient(client);
       } catch (err) {
         console.error("Failed to initialize OAuth client:", err);
       }
     };
     initOAuthClient();
-  }, []);
+  }, [onLogin]);
 
   const handleLogin = async () => {
     if (!oauthClient) {
···
 
       // Sign in using OAuth with popup
       const session = await oauthClient.signInPopup(identifier, {
-        scope: "atproto",
+        scope: "atproto transition:generic",
+        ui_locales: "en",
+        signal: new AbortController().signal,
       });
 
       console.log("OAuth login successful!", session);
-      // Store session, redirect, etc.
+      onLogin(session);
     } catch (err: any) {
       console.error(err);
       setError(err.message || "OAuth login failed");
···
     }
   };
 
-  const handleOAuthRedirect = async () => {
-    if (!oauthClient) {
-      setError("OAuth client not initialized");
-      return;
-    }
-
-    setLoading(true);
-    setError("");
-
-    try {
-      if (!identifier) {
-        setError("Please enter your handle or identifier");
-        return;
-      }
-
-      // Sign in using OAuth with redirect
-      await oauthClient.signInRedirect(identifier, {
-        scope: "atproto",
-      });
-    } catch (err: any) {
-      console.error(err);
-      setError(err.message || "OAuth redirect failed");
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // Handle OAuth callback on page load
-  useEffect(() => {
-    const handleCallback = async () => {
-      if (!oauthClient) return;
-
-      try {
-        const result = await oauthClient.signInCallback();
-        if (result) {
-          console.log("OAuth callback successful!", result);
-          // Handle successful login
-        }
-      } catch (err) {
-        console.error("OAuth callback error:", err);
-        setError("OAuth callback failed");
-      }
-    };
-
-    handleCallback();
-  }, [oauthClient]);
   return (
     <div className="min-h-screen flex items-center justify-center bg-background px-4">
       <Card className="w-full max-w-sm">
         <CardHeader>
-          <CardTitle>Login to your Bluesky account</CardTitle>
+          <CardTitle>Login with your handle on the Atmosphere</CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
           <Input
···
           />
           {error && <p className="text-sm text-red-500">{error}</p>}
           <Button
-            className="w-full"
+            className="w-full cursor-pointer"
             onClick={handleLogin}
             disabled={loading || identifier == null}
           >