[feat] turn actions list into actual pages that (right now) only tell what they do

src/App.tsx

···
 import { useState, useEffect } from 'react'
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
 import { AtpAgent } from '@atproto/api'
+import { AvatarProvider } from './contexts/AvatarContext'
 import Login from './components/auth/Login'
 import Actions from './components/common/Actions'
+import Migration from './components/common/Migration'
+import RecoveryKey from './components/common/RecoveryKey'
 import './styles/App.css'
 
 const SESSION_KEY = 'atproto_session';
···
   };
 
   return (
-    <Router>
-      <Routes>
-        <Route
-          path="/"
-          element={
-            agent ? (
-              <Navigate to="/actions" replace />
-            ) : (
-              <Login onLogin={handleLogin} />
-            )
-          }
-        />
-        <Route
-          path="/actions"
-          element={
-            agent ? (
-              <Actions agent={agent} onLogout={handleLogout} />
-            ) : (
-              <Navigate to="/" replace />
-            )
-          }
-        />
-      </Routes>
-    </Router>
+    <AvatarProvider>
+      <Router>
+        <Routes>
+          <Route
+            path="/"
+            element={
+              agent ? (
+                <Navigate to="/actions" replace />
+              ) : (
+                <Login onLogin={handleLogin} />
+              )
+            }
+          />
+          <Route
+            path="/actions"
+            element={
+              agent ? (
+                <Actions agent={agent} onLogout={handleLogout} />
+              ) : (
+                <Navigate to="/" replace />
+              )
+            }
+          />
+          <Route
+            path="/migration"
+            element={
+              agent ? (
+                <Migration agent={agent} onLogout={handleLogout} />
+              ) : (
+                <Navigate to="/" replace />
+              )
+            }
+          />
+          <Route
+            path="/recovery-key"
+            element={
+              agent ? (
+                <RecoveryKey agent={agent} onLogout={handleLogout} />
+              ) : (
+                <Navigate to="/" replace />
+              )
+            }
+          />
+        </Routes>
+      </Router>
+    </AvatarProvider>
   )
 }
 

src/components/common/Actions.tsx

···
 import { AtpAgent } from '@atproto/api';
 import { useNavigate } from 'react-router-dom';
 import Footer from '../layout/Footer';
+import Header from '../layout/Header';
 import '../../styles/App.css';
 
 interface ActionsProps {
···
 export default function Actions({ agent, onLogout }: ActionsProps) {
   const [didDoc, setDidDoc] = useState<string>('');
   const [loading, setLoading] = useState(true);
-  const [avatarUrl, setAvatarUrl] = useState<string>('');
   const navigate = useNavigate();
 
   const handleLogout = () => {
···
           throw new Error('No DID found in session');
         }
 
-        // Fetch profile using authenticated agent
-        const profile = await agent.getProfile({ actor: agent.session?.handle || '' });
-        if (profile.data.avatar) {
-          setAvatarUrl(profile.data.avatar);
-        }
-
         let didDocResponse;
         
         if (did.startsWith('did:plc:')) {
···
 
         setDidDoc(JSON.stringify(didDocResponse, null, 2));
       } catch (err) {
-        console.error('Error fetching profile or DID document:', err);
+        console.error('Error fetching DID document:', err);
         setDidDoc(`Error fetching DID document: ${err instanceof Error ? err.message : 'Unknown error'}`);
       } finally {
         setLoading(false);
···
 
   return (
     <div className="actions-page">
-      <header className="app-header">
-        <h1 className="app-title">ATproto Migrator</h1>
-        <div className="user-info">
-          {avatarUrl && (
-            <img
-              src={avatarUrl}
-              alt="Profile"
-              className="user-avatar"
-            />
-          )}
-          <span className="user-handle">{agent.session?.handle}</span>
-          <button className="logout-button" onClick={handleLogout}>
-            Logout
-          </button>
-        </div>
-      </header>
+      <Header agent={agent} onLogout={handleLogout} />
 
       <div className="actions-container">
         <div className="actions-list">
-          <div className="action-item">
+          <button 
+            className="action-item"
+            onClick={() => navigate('/migration')}
+          >
             <div className="action-icon">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
···
             </div>
             <div className="action-content">
               <div className="action-title">Migrate account</div>
-              <div className="action-subtitle">Move your account to a new host</div>
+              <div className="action-subtitle">Move your account to a new data server</div>
             </div>
-          </div>
+          </button>
 
-          <div className="action-item">
+          <button 
+            className="action-item"
+            onClick={() => navigate('/recovery-key')}
+          >
             <div className="action-icon">
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
···
             </div>
             <div className="action-content">
               <div className="action-title">Add recovery key</div>
-              <div className="action-subtitle">Create a new recovery method for your account</div>
+              <div className="action-subtitle">Create a new recovery key for your account</div>
             </div>
-          </div>
+          </button>
         </div>
 
         <details className="user-info-section">

src/components/common/Migration.tsx

···
+import { useNavigate } from 'react-router-dom';
+import { AtpAgent } from '@atproto/api';
+import Footer from '../layout/Footer';
+import Header from '../layout/Header';
+import '../../styles/App.css';
+
+interface MigrationProps {
+  agent: AtpAgent;
+  onLogout: () => void;
+}
+
+export default function Migration({ agent, onLogout }: MigrationProps) {
+  const navigate = useNavigate();
+
+  return (
+    <div className="actions-page">
+      <Header agent={agent} onLogout={onLogout} />
+
+      <div className="actions-container">
+        <div className="page-content">
+          <h2>Migrate your account</h2>
+          <p>This tool allows you to migrate your account to a new Personal Data Server, a data storage service that hosts your account and all of its data.</p>
+          <h3>What to expect</h3>
+          <p>The migration process is <i>possible</i>, however it is not recommended if you are unsure about what you are doing, especially if you are migrating your primary account.</p>
+          <p>You will need the following items to begin the migration process:</p>
+          <ul>
+            <li>A new PDS to migrate to</li>
+            <li>An invite code from the new PDS (if required)</li>
+            <li>A PLC operation token to confirm the migration</li>
+            <li>A new password for your account <b>(Your password will not be stored by this tool.)</b></li>
+            <li>If you are not using a custom domain, you will need a new handle as the default domain (such as alice.bsky.social or bob.example-pds.com) is non-transferable.</li>
+          </ul>
+
+          <div className="warning-section">
+            <h3>⚠️ Read Before Continuing ⚠️</h3>
+            <ul>
+              <li>If you are already on a third-party PDS, it must be able to send emails or you will not be able to get a PLC operation token without direct access to the server.</li>
+              <li>Due to performance issues, the main Bluesky data servers do not allow for account data to be imported at this time. <b>You will not be able to migrate back to Bluesky servers.</b></li>
+              <li>If your PDS goes down and you do not have access to a recovery key, you will be locked out of your account. <b>Bluesky developers will not be able to help you.</b></li>
+            </ul>
+          </div>
+
+          <div className="docs-section">
+            <h3>Additional Resources</h3>
+            <p>For the technically inclined, here are some additional resources for how the migration process works:</p>
+            <ul>
+              <li><a href="https://github.com/bluesky-social/pds/blob/main/ACCOUNT_MIGRATION.md" target="_blank" rel="noopener noreferrer">Detailed document on migration for PDS hosters</a></li>
+              <li><a href="https://atproto.com/guides/account-migration" target="_blank" rel="noopener noreferrer">AT Protocol's developer documentation on account migration</a></li>
+              <li><a href="https://whtwnd.com/bnewbold.net/3l5ii332pf32u">Guide to migrating an account using the command line</a></li>
+            </ul>
+          </div>
+
+          <button
+            className="back-button"
+            onClick={() => navigate('/actions')}
+          >
+            ← Go back
+          </button>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+} 

src/components/common/RecoveryKey.tsx

···
+import { useNavigate } from 'react-router-dom';
+import { AtpAgent } from '@atproto/api';
+import Footer from '../layout/Footer';
+import Header from '../layout/Header';
+import '../../styles/App.css';
+
+interface RecoveryKeyProps {
+  agent: AtpAgent;
+  onLogout: () => void;
+}
+
+export default function RecoveryKey({ agent, onLogout }: RecoveryKeyProps) {
+  const navigate = useNavigate();
+
+  return (
+    <div className="actions-page">
+      <Header agent={agent} onLogout={onLogout} />
+
+      <div className="actions-container">
+        <div className="page-content">
+          <h2>Add a recovery key</h2>
+          <p>A recovery key (known as a <b>rotation key</b> in the AT Protocol) is a cryptographic key associated with your account that allows you to modify your account's core identity.</p>
+          
+          <h3>How rotation keys work</h3>
+          <p>In the AT Protocol, your account is identified using a DID (<b>Decentralized Identifier</b>), with most accounts on the protocol using a variant of it developed specifically for the protocol. The account's core information (such as your handle and data server on the network) is stored in the account's DID document.</p>
+          <p>To change this document, you use a rotation key to confirm that you are the owner of the account and that you are authorized to make the changes. For example, when changing your handle, your data server (also known as a PDS) will use its own rotation key to change it without asking you to manually sign the operation.</p>
+          <h3>Why should I add another key?</h3>
+          <p>Adding a rotation key allows you to regain control of your account if it is compromised. It also allows you to move your account to a new data server, even if the current server is down.</p>
+          <div className="warning-section">
+            <h3>⚠️ Read Before Continuing ⚠️</h3>
+            <ul>
+              <li>You will need a PLC operation token to add a recovery key. Tokens are sent to the email address associated with your account.</li>
+              <li>While we do generate a key for you, we will not store it. Please save it in a secure location.</li>
+              <li>Keep your recovery key private. Anyone with access to it could potentially take control of your account.</li>
+              <li>If you're using a third-party PDS, it must be able to send emails or you will not be able to use this tool to add a recovery key.</li>
+            </ul>
+          </div>
+          <div className="docs-section">
+            <h3>Additional Resources</h3>
+            <p>For the technically inclined, here are some additional resources for how rotation keys work:</p>
+            <ul>
+              <li><a href="https://atproto.com/guides/identity" target="_blank" rel="noopener noreferrer">AT Protocol's developer documentation on identity</a></li>
+              <li><a href="https://whtwnd.com/did:plc:xz3euvkhf44iadavovbsmqoo/3laimapx6ks2b" target="_blank" rel="noopener noreferrer">Guide to adding a recovery key using the command line</a></li>
+              <li><a href="https://whtwnd.com/did:plc:44ybard66vv44zksje25o7dz/3lj7jmt2ct72r" target="_blank" rel="noopener noreferrer">More in-depth guide to adding a recovery key</a></li>
+            </ul>
+          </div>
+
+          <button 
+            className="back-button"
+            onClick={() => navigate('/actions')}
+          >
+            ← Go back
+          </button>
+        </div>
+      </div>
+      <Footer />
+    </div>
+  );
+} 

src/components/layout/Header.tsx

···
+import { useEffect } from 'react';
+import { AtpAgent } from '@atproto/api';
+import { useAvatar } from '../../contexts/AvatarContext';
+import '../../styles/App.css';
+
+interface HeaderProps {
+  agent: AtpAgent;
+  onLogout: () => void;
+}
+
+export default function Header({ agent, onLogout }: HeaderProps) {
+  const { avatarUrl, setAvatarUrl } = useAvatar();
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      // Only fetch if we don't already have an avatar
+      if (!avatarUrl) {
+        try {
+          const profile = await agent.getProfile({ actor: agent.session?.handle || '' });
+          if (profile.data.avatar) {
+            setAvatarUrl(profile.data.avatar);
+          }
+        } catch (err) {
+          console.error('Error fetching profile:', err);
+        }
+      }
+    };
+
+    fetchProfile();
+  }, [agent, avatarUrl, setAvatarUrl]);
+
+  return (
+    <header className="app-header">
+      <h1 className="app-title">ATproto Migrator</h1>
+      <div className="user-info">
+        {avatarUrl && (
+          <img
+            src={avatarUrl}
+            alt="Profile"
+            className="user-avatar"
+          />
+        )}
+        <span className="user-handle">{agent.session?.handle}</span>
+        <button className="logout-button" onClick={onLogout}>
+          Logout
+        </button>
+      </div>
+    </header>
+  );
+} 

src/contexts/AvatarContext.tsx

···
+import { createContext, useContext, useState, ReactNode } from 'react';
+
+interface AvatarContextType {
+  avatarUrl: string;
+  setAvatarUrl: (url: string) => void;
+}
+
+const AvatarContext = createContext<AvatarContextType | undefined>(undefined);
+
+export function AvatarProvider({ children }: { children: ReactNode }) {
+  const [avatarUrl, setAvatarUrl] = useState<string>('');
+
+  return (
+    <AvatarContext.Provider value={{ avatarUrl, setAvatarUrl }}>
+      {children}
+    </AvatarContext.Provider>
+  );
+}
+
+export function useAvatar() {
+  const context = useContext(AvatarContext);
+  if (context === undefined) {
+    throw new Error('useAvatar must be used within an AvatarProvider');
+  }
+  return context;
+} 

src/styles/App.css

···
   max-width: 28rem;
   width: 100%;
   padding: 2rem;
+  padding-top: 0;
   background-color: var(--white);
   border-radius: 0.5rem;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
···
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: transform 0.2s, box-shadow 0.2s;
+  border: none;
+  width: 100%;
+  text-align: left;
 }
 
 .action-item:hover {
···
 }
 
 .action-icon {
-  width: 2rem;
-  height: 2rem;
+  width: 2.5rem;
+  height: 2.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary-color);
+  background-color: var(--bg-color);
+  border-radius: 0.5rem;
+  flex-shrink: 0;
 }
 
 .action-content {
   flex: 1;
+  text-align: left;
 }
 
 .action-title {
···
   font-weight: 600;
   color: var(--text-color);
   margin-bottom: 0.25rem;
+  text-align: left;
 }
 
 .action-subtitle {
   font-size: 0.875rem;
   color: var(--text-light);
+  text-align: left;
 }
 
 /* User info section */
···
   background-color: var(--text-light);
   cursor: not-allowed;
   opacity: 0.8;
+}
+
+.page-content {
+  background-color: var(--white);
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 2rem;
+  padding-top: 1rem;
+  margin-top: 1rem;
+}
+
+.page-content h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 1rem;
+}
+
+.page-content p {
+  color: var(--text-color);
+  margin-bottom: 1rem;
+}
+
+.page-content ul {
+  list-style-type: disc;
+  margin-left: 1.5rem;
+  margin-bottom: 1.5rem;
+  color: var(--text-color);
+}
+
+.page-content li {
+  margin-bottom: 0.5rem;
+}
+
+.back-button {
+  background-color: var(--primary-color);
+  color: var(--white);
+  border: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.back-button:hover {
+  background-color: var(--primary-hover);
+}
+
+.page-content h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-color);
+  margin: 1.5rem 0 1rem 0;
+}
+
+.warning-section {
+  background-color: #fef3c7;
+  border: 1px solid #fbbf24;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.warning-section h3 {
+  color: #92400e;
+  margin-top: 0;
+}
+
+.warning-section ul {
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.warning-section li {
+  color: #92400e;
+}
+
+.warning-section b {
+  color: #78350f;
+}
+
+.docs-section {
+  background-color: var(--bg-color);
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.docs-section h3 {
+  margin-top: 0;
+}
+
+.docs-section ul {
+  margin-bottom: 0;
+  padding-left: 0;
+}
+
+.docs-section a {
+  color: var(--primary-color);
+  text-decoration: none;
+  transition: color 0.2s;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.docs-section a:hover {
+  color: var(--primary-hover);
+}
+
+.docs-section a::after {
+  content: "→";
+  transition: transform 0.2s;
+}
+
+.docs-section a:hover::after {
+  transform: translateX(4px);
 }