profile page link, replies tab

frontend/src/App.tsx

···
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom';
 import { FollowingFeed } from './components/FollowingFeed';
 import { ProfilePage } from './components/ProfilePage';
 import { PostView } from './components/PostView';
 import { ThreadView } from './components/ThreadView';
 import { PostComposer } from './components/PostComposer';
+import { ApiClient } from './api';
 import './App.css';
 
 function Navigation() {
   const location = useLocation();
+  const [myHandle, setMyHandle] = useState<string | null>(null);
+
+  useEffect(() => {
+    ApiClient.getMe().then(data => {
+      setMyHandle(data.handle);
+    }).catch(err => {
+      console.error('Failed to fetch current user:', err);
+    });
+  }, []);
 
   return (
     <nav className="app-nav">
···
           >
             Following
           </Link>
+          {myHandle && (
+            <Link
+              to={`/profile/${myHandle}`}
+              className={`nav-link ${location.pathname.includes('/profile/') ? 'active' : ''}`}
+            >
+              Profile
+            </Link>
+          )}
         </div>
       </div>
     </nav>

frontend/src/api.ts

···
 const API_BASE_URL = 'http://localhost:4444/api';
 
 export class ApiClient {
+  static async getMe(): Promise<{did: string, handle: string}> {
+    const response = await fetch(`${API_BASE_URL}/me`);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch current user: ${response.statusText}`);
+    }
+    return response.json();
+  }
+
   static async getFollowingFeed(cursor?: string): Promise<FeedResponse> {
     const url = cursor
       ? `${API_BASE_URL}/followingfeed?cursor=${encodeURIComponent(cursor)}`

frontend/src/components/ProfilePage.css

···
   padding: 0 20px;
 }
 
+.profile-tabs {
+  display: flex;
+  border-bottom: 1px solid #e1e8ed;
+  margin-bottom: 16px;
+}
+
+.profile-tab {
+  flex: 1;
+  padding: 16px;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  font-size: 15px;
+  font-weight: 600;
+  color: #536471;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.profile-tab:hover {
+  background-color: #f7f9fa;
+}
+
+.profile-tab--active {
+  color: #1da1f2;
+  border-bottom-color: #1da1f2;
+}
+
 .posts-header {
   padding: 16px 0;
   border-bottom: 1px solid #e1e8ed;

frontend/src/components/ProfilePage.tsx

···
   const [userDid, setUserDid] = useState<string | null>(null);
   const [cursor, setCursor] = useState<string | null>(null);
   const [hasMore, setHasMore] = useState(true);
+  const [activeTab, setActiveTab] = useState<'posts' | 'replies'>('posts');
   const observerTarget = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
···
       </div>
 
       <div className="profile-content">
-        <div className="posts-header">
-          <h2>Posts ({posts.length})</h2>
+        <div className="profile-tabs">
+          <button
+            className={`profile-tab ${activeTab === 'posts' ? 'profile-tab--active' : ''}`}
+            onClick={() => setActiveTab('posts')}
+          >
+            Posts
+          </button>
+          <button
+            className={`profile-tab ${activeTab === 'replies' ? 'profile-tab--active' : ''}`}
+            onClick={() => setActiveTab('replies')}
+          >
+            Replies
+          </button>
         </div>
 
         <div className="posts-list">
-          {posts.map((post, index) => (
-            <PostCard key={post.uri || index} postResponse={post} />
-          ))}
-          {posts.length === 0 && !loading && (
+          {posts
+            .filter(post => activeTab === 'posts' ? !post.replyTo : !!post.replyTo)
+            .map((post, index) => (
+              <PostCard key={post.uri || index} postResponse={post} />
+            ))}
+          {posts.filter(post => activeTab === 'posts' ? !post.replyTo : !!post.replyTo).length === 0 && !loading && (
             <div className="empty-posts">
-              <p>No posts yet</p>
+              <p>{activeTab === 'posts' ? 'No posts yet' : 'No replies yet'}</p>
             </div>
           )}
           {hasMore && <div ref={observerTarget} style={{ height: '20px' }} />}

handlers.go

···
 	e.GET("/debug", s.handleGetDebugInfo)
 
 	views := e.Group("/api")
+	views.GET("/me", s.handleGetMe)
 	views.GET("/profile/:account/post/:rkey", s.handleGetPost)
 	views.GET("/profile/:account", s.handleGetProfileView)
 	views.GET("/profile/:account/posts", s.handleGetProfilePosts)
···
 
 	return e.JSON(200, map[string]any{
 		"seq": seq,
+	})
+}
+
+func (s *Server) handleGetMe(e echo.Context) error {
+	ctx := e.Request().Context()
+
+	resp, err := s.dir.LookupDID(ctx, syntax.DID(s.mydid))
+	if err != nil {
+		return e.JSON(500, map[string]any{
+			"error": "failed to lookup handle",
+		})
+	}
+
+	return e.JSON(200, map[string]any{
+		"did":    s.mydid,
+		"handle": resp.Handle.String(),
 	})
 }