feat: auther name

2026-02-15 12:21:40 -07:00
parent 9635025aed
commit 8242a466b3
4 changed files with 93 additions and 24 deletions
--- a/frontend/src/components/AudioPostCard.jsx
+++ b/frontend/src/components/AudioPostCard.jsx
@@ -1,4 +1,4 @@
-import { Clock, Download, ExternalLink } from 'lucide-react'
+import { Clock, Download, ExternalLink, User } from 'lucide-react'
 import { useState, useEffect } from 'react'
 import { api } from '../api'
 import AudioPlayer from './AudioPlayer'
@@ -7,6 +7,7 @@ export default function AudioPostCard({ post, onViewPost }) {
  const [transcript, setTranscript] = useState(null)
  const [loadingTranscript, setLoadingTranscript] = useState(false)
  const [downloading, setDownloading] = useState(false)
+  const [author, setAuthor] = useState(null)

  useEffect(() => {
    console.log('Post data:', post)
@@ -14,6 +15,22 @@ export default function AudioPostCard({ post, onViewPost }) {
    console.log('Status:', post.status)
  }, [post])

+  // Load author data
+  useEffect(() => {
+    if (post.user_id) {
+      loadAuthor()
+    }
+  }, [post.user_id])
+
+  const loadAuthor = async () => {
+    try {
+      const userData = await api.getUser(post.user_id)
+      setAuthor(userData)
+    } catch (err) {
+      console.error('Failed to load author:', err)
+    }
+  }
+
  const formatDate = (dateString) => {
    return new Date(dateString).toLocaleDateString('en-US', {
      year: 'numeric',
@@ -81,10 +98,32 @@ export default function AudioPostCard({ post, onViewPost }) {
    }
  }

+  const getAuthorDisplayName = () => {
+    if (!author) return 'Loading...'
+    return author.display_name || author.email?.split('@')[0] || 'Unknown Author'
+  }
+
+  const getAuthorInitials = () => {
+    if (!author) return '?'
+    const name = author.display_name || author.email?.split('@')[0] || '?'
+    return name.charAt(0).toUpperCase()
+  }
+
  return (
    <article className="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
      {/* Post Header */}
      <div className="p-6 pb-4">
+        {/* Author Info */}
+        <div className="flex items-center gap-3 mb-4">
+          <div className="w-10 h-10 bg-gradient-to-br from-[#f4b840] to-[#e5a930] rounded-full flex items-center justify-center text-white font-semibold">
+            {getAuthorInitials()}
+          </div>
+          <div className="flex-1">
+            <p className="text-sm font-medium text-gray-900">{getAuthorDisplayName()}</p>
+            <p className="text-xs text-gray-500">{formatDate(post.created_at)}</p>
+          </div>
+        </div>
+
        <div className="flex items-start justify-between mb-4">
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
@@ -96,9 +135,6 @@ export default function AudioPostCard({ post, onViewPost }) {
              )}
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-500">
-              <Clock size={14} />
-              <span>{formatDate(post.created_at)}</span>
-              <span>•</span>
              <span className={`px-2 py-0.5 rounded text-xs ${
                post.status === 'ready' ? 'bg-green-100 text-green-700' :
                post.status === 'processing' ? 'bg-yellow-100 text-yellow-700' :
@@ -106,18 +142,19 @@ export default function AudioPostCard({ post, onViewPost }) {
              }`}>
                {post.status}
              </span>
-              <span>•</span>
              {post.language && (
-                <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
-                  {post.language.toUpperCase()}
-                </span>
+                <>
+                  <span>•</span>
+                  <span className="text-xs px-2 py-0.5 bg-blue-100 text-blue-700 rounded">
+                    {post.language.toUpperCase()}
+                  </span>
+                </>
              )}
            </div>
          </div>

          {/* Action Buttons */}
          <div className="flex items-center gap-2">
-
            {post.status === 'ready' && (
              <button
                onClick={handleDownload}
@@ -146,7 +183,6 @@ export default function AudioPostCard({ post, onViewPost }) {
                <span>View Post</span>
                <ExternalLink size={14} />
              </button>
-
            )}
          </div>
        </div>
@@ -175,9 +211,6 @@ export default function AudioPostCard({ post, onViewPost }) {
                <p className="text-sm text-gray-500 italic">No transcript available</p>
              )}
            </div>
-
-
-
          </>
        )}

--- a/frontend/src/pages/History.jsx
+++ b/frontend/src/pages/History.jsx
@@ -115,11 +115,7 @@ export default function History({ user, onViewPost }) {
      </div>

      {/* My Posted Archives */}
-      <div className="bg-white rounded-lg border border-gray-200 p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
-          <FileText size={20} />
-          My Posted Archives
-        </h3>
+      <div className="bg-white">

        {posts.length > 0 ? (
          <div className="space-y-3">
--- a/frontend/src/pages/PostDetail.jsx
+++ b/frontend/src/pages/PostDetail.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from 'react'
-import { ArrowLeft, Clock, Download, Share2, Calendar, Globe, Lock, Play, Pause, Volume2 } from 'lucide-react'
+import { ArrowLeft, Clock, Download, Share2, Calendar, Globe, Lock, Play, Pause, Volume2, User } from 'lucide-react'
 import { api } from '../api'

 export default function PostDetail({ postId, user, onBack }) {
@@ -9,6 +9,7 @@ export default function PostDetail({ postId, user, onBack }) {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [downloading, setDownloading] = useState(false)
+  const [author, setAuthor] = useState(null)

  // Audio player state
  const [isPlaying, setIsPlaying] = useState(false)
@@ -32,6 +33,22 @@ export default function PostDetail({ postId, user, onBack }) {
    }
  }, [post?.audio_url])

+  // Load author when post loads
+  useEffect(() => {
+    if (post?.user_id) {
+      loadAuthor()
+    }
+  }, [post?.user_id])
+
+  const loadAuthor = async () => {
+    try {
+      const userData = await api.getUser(post.user_id)
+      setAuthor(userData)
+    } catch (err) {
+      console.error('Failed to load author:', err)
+    }
+  }
+
  const loadPostData = async () => {
    setLoading(true)
    setError(null)
@@ -91,6 +108,17 @@ export default function PostDetail({ postId, user, onBack }) {
    return match ? match[1].trim() : null
  }

+  const getAuthorDisplayName = () => {
+    if (!author) return 'Loading...'
+    return author.display_name || author.email?.split('@')[0] || 'Unknown Author'
+  }
+
+  const getAuthorInitials = () => {
+    if (!author) return '?'
+    const name = author.display_name || author.email?.split('@')[0] || '?'
+    return name.charAt(0).toUpperCase()
+  }
+
  // Audio player handlers
  const togglePlay = () => {
    if (!audioRef.current || !post?.audio_url) return
@@ -219,6 +247,17 @@ export default function PostDetail({ postId, user, onBack }) {

      {/* Header Card */}
      <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-8">
+        {/* Author Info */}
+        <div className="flex items-center gap-3 mb-6 pb-6 border-b border-gray-200">
+          <div className="w-12 h-12 bg-gradient-to-br from-[#f4b840] to-[#e5a930] rounded-full flex items-center justify-center text-white font-semibold text-lg">
+            {getAuthorInitials()}
+          </div>
+          <div>
+            <p className="text-base font-semibold text-gray-900">{getAuthorDisplayName()}</p>
+            <p className="text-sm text-gray-500">{formatDate(post.created_at)}</p>
+          </div>
+        </div>
+
        {/* Title and Meta */}
        <div className="mb-6">
          <div className="flex items-start justify-between mb-4">
@@ -234,11 +273,6 @@ export default function PostDetail({ postId, user, onBack }) {

          {/* Metadata */}
          <div className="flex flex-wrap items-center gap-4 text-sm text-gray-600">
-            <div className="flex items-center gap-1">
-              <Calendar size={16} />
-              <span>{formatDate(post.created_at)}</span>
-            </div>
-            <span>•</span>
            <div className={`px-2 py-1 rounded text-xs ${
              post.status === 'ready' ? 'bg-green-100 text-green-700' :
              post.status === 'processing' ? 'bg-yellow-100 text-yellow-700' :
@@ -414,6 +448,12 @@ export default function PostDetail({ postId, user, onBack }) {
        <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Metadata</h2>
          <dl className="grid grid-cols-2 gap-4 text-sm">
+            {author && (
+              <>
+                <dt className="text-gray-600">Author:</dt>
+                <dd className="text-gray-900 font-medium">{getAuthorDisplayName()}</dd>
+              </>
+            )}
            {metadata.source_file && (
              <>
                <dt className="text-gray-600">Source File:</dt>