Initial scaffold: Researcher Endorsement frontend

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/routes/CreateUser.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import useAppStore from '../store/useAppStore'
+
+const CreateUser: React.FC = () => {
+  const [name, setName] = useState('')
+  const [email, setEmail] = useState('')
+  const [bio, setBio] = useState('')
+  const [specialties, setSpecialties] = useState('')
+  const createUser = useAppStore((s) => s.createUser)
+  const navigate = useNavigate()
+
+  const onSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    const parsed = specialties.split(',').map((s) => s.trim()).filter(Boolean)
+    if (!name || !email || !bio || parsed.length === 0) return alert('All fields required and at least one specialty')
+    const newUser = createUser({ name, email, bio, specialties: parsed })
+    navigate(`/profile/${newUser.id}`)
+  }
+
+  return (
+    <div className="container">
+      <div className="card">
+        <h2>Create User</h2>
+        <form onSubmit={onSubmit}>
+          <div>
+            <label>Name</label>
+            <input value={name} onChange={(e) => setName(e.target.value)} />
+          </div>
+          <div>
+            <label>Email</label>
+            <input value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <div>
+            <label>Bio</label>
+            <input value={bio} onChange={(e) => setBio(e.target.value)} />
+          </div>
+          <div>
+            <label>Specialties (comma separated)</label>
+            <input value={specialties} onChange={(e) => setSpecialties(e.target.value)} />
+          </div>
+          <div style={{marginTop:8}}>
+            <button className="button" type="submit">Create</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default CreateUser

src/routes/Home.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Feed from '../components/Feed'
+import UserCard from '../components/UserCard'
+import useAppStore from '../store/useAppStore'
+
+const Home: React.FC = () => {
+  const users = useAppStore((s) => s.users)
+  const currentUserId = useAppStore((s) => s.currentUserId)
+  const suggestions = users.filter((u) => u.id !== currentUserId).slice(0, 3)
+
+  return (
+    <div className="container" style={{display:'flex',gap:16}}>
+      <div style={{flex:1}}>
+        <Feed />
+      </div>
+      <aside className="sidebar">
+        <h3>Suggested Researchers</h3>
+        {suggestions.map((u) => (
+          <UserCard key={u.id} user={u} />
+        ))}
+      </aside>
+    </div>
+  )
+}
+
+export default Home

src/routes/PostDetail.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import useAppStore from '../store/useAppStore'
+import PDFPreview from '../components/PDFPreview'
+
+const PostDetail: React.FC = () => {
+  const { id } = useParams<{ id: string }>()
+  const post = useAppStore((s) => s.posts.find((p) => p.id === id))
+  const author = useAppStore((s) => s.users.find((u) => u.id === post?.authorId))
+  const endorsePost = useAppStore((s) => s.endorsePost)
+
+  if (!post) return <div className="card">Post not found</div>
+
+  return (
+    <div className="container">
+      <div className="card">
+        <h3>{author?.name}</h3>
+        <div className="small">{author?.bio}</div>
+        <div style={{marginTop:8}}>{post.content}</div>
+        {post.attachedPDF && <PDFPreview url={post.attachedPDF.url} name={post.attachedPDF.name} />}
+        <div style={{marginTop:8}}>
+          <button className="button" onClick={() => endorsePost(post.id)}>Endorse Post ({post.endorsements})</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PostDetail

src/routes/Profile.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useParams } from 'react-router-dom'
+import useAppStore from '../store/useAppStore'
+import EndorseButton from '../components/EndorseButton'
+import UserCard from '../components/UserCard'
+
+const Profile: React.FC = () => {
+  const { id } = useParams<{ id: string }>()
+  const user = useAppStore((s) => s.users.find((u) => u.id === id))
+  const posts = useAppStore((s) => s.posts.filter((p) => p.authorId === id))
+  const endorseUser = useAppStore((s) => s.endorseUser)
+  const currentUserId = useAppStore((s) => s.currentUserId)
+
+  if (!user) return <div className="card">User not found</div>
+
+  return (
+    <div className="container">
+      <div className="card">
+        <h2>{user.name}</h2>
+        <div className="small">{user.bio}</div>
+        <div style={{marginTop:8}}>
+          {user.specialties.map((s) => (
+            <div key={s} style={{display:'flex',alignItems:'center',gap:8,marginTop:6}}>
+              <span className="tag">{s}</span>
+              <div className="small">Endorsements: {user.endorsements[s] ?? 0}</div>
+              <div>
+                <EndorseButton onClick={() => endorseUser(user.id, s)} count={user.endorsements[s] ?? 0} disabled={currentUserId === user.id} />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <h3>Posts</h3>
+      {posts.length === 0 && <div className="card">No posts yet.</div>}
+      {posts.map((p) => (
+        <div key={p.id} className="card">
+          <UserCard user={user} />
+          <div style={{marginTop:8}}>{p.content}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default Profile