fix browser

browser/src/App.tsx

@@ -3,13 +3,13 @@ import { AtUriBrowser, useAtUriBrowser } from './components/AtUriBrowser'
 import './App.css'
 
 function BrowserContent() {
-  const [atUri, setAtUri] = useState('')
-  const { navigate, currentRecord } = useAtUriBrowser()
+  const [handle, setHandle] = useState('')
+  const { records, currentRecord, setCurrentRecord, loading, error, loadHandle } = useAtUriBrowser()
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (atUri) {
-      await navigate(atUri)
+    if (handle) {
+      await loadHandle(handle)
     }
   }
 
@@ -20,21 +20,59 @@ function BrowserContent() {
       <form onSubmit={handleSubmit} className="input-section">
         <input
           type="text"
-          placeholder="at://did:plc:xxx/ai.syui.log.post/rkey"
-          value={atUri}
-          onChange={(e) => setAtUri(e.target.value)}
+          placeholder="handle (e.g., ai.syui.ai)"
+          value={handle}
+          onChange={(e) => setHandle(e.target.value)}
           className="at-uri-input"
         />
-        <button type="submit">Browse</button>
+        <button type="submit" disabled={loading}>
+          {loading ? 'Loading...' : 'Browse'}
+        </button>
       </form>
 
-      {!currentRecord && (
+      {error && (
+        <div className="error-section">
+          <p>Error: {error}</p>
+        </div>
+      )}
+
+      {currentRecord ? (
+        <div className="record-view">
+          <button onClick={() => setCurrentRecord(null)} className="back-button">
+            ← Back to list
+          </button>
+          <h2>{currentRecord.value.title}</h2>
+          <div className="record-meta">
+            <p>URI: {currentRecord.uri}</p>
+            <p>Created: {new Date(currentRecord.value.createdAt).toLocaleString()}</p>
+          </div>
+          <div className="record-content">
+            <pre>{currentRecord.value.content}</pre>
+          </div>
+        </div>
+      ) : records.length > 0 ? (
+        <div className="records-list">
+          <h2>Posts ({records.length})</h2>
+          <ul>
+            {records.map((record) => (
+              <li key={record.uri}>
+                <button onClick={() => setCurrentRecord(record)} className="record-link">
+                  <span className="record-title">{record.value.title}</span>
+                  <span className="record-date">
+                    {new Date(record.value.createdAt).toLocaleDateString()}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : !loading && !error && (
         <div className="info-section">
           <h2>About</h2>
           <p>Browse AT Protocol records directly from the PDS.</p>
           <ul>
-            <li>Enter an AT URI to view its content</li>
-            <li>Example: at://did:plc:xxx/ai.syui.log.post/xxx</li>
+            <li>Enter a handle to view posts</li>
+            <li>Example: ai.syui.ai</li>
             <li>Supports syu.is PDS environment</li>
           </ul>
         </div>