spine-framework-cortex 0.1.1

package/pages/community/CommunityPage.tsx

@@ -0,0 +1,159 @@
+import { useState, useEffect } from 'react'
+import { Send, Hash, MessageSquarePlus, AlertCircle } from 'lucide-react'
+import { apiFetch } from '@core/lib/api'
+import { Button } from '@core/components/ui/button'
+import { Input } from '@core/components/ui/input'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+
+const CHANNELS = ['general', 'announcements', 'help', 'show-and-tell']
+const CHANNEL_LABELS: Record<string, string> = { general: 'General', announcements: 'Announcements', help: 'Help', 'show-and-tell': 'Show & Tell' }
+
+interface Post { id: string; title: string; description?: string; data?: Record<string, any>; created_at: string }
+interface Message { id: string; content: string; direction: string; created_at: string }
+interface Thread { id: string }
+
+function ThreadPane({ post }: { post: Post }) {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [thread, setThread] = useState<Thread | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [replyText, setReplyText] = useState('')
+  const [sending, setSending] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    apiFetch(`/api/admin-data?action=list&entity=threads&target_id=${post.id}&limit=5`)
+      .then(r => r.json()).then(j => {
+        const t = (j?.data ?? j)?.[0] ?? null
+        setThread(t)
+        if (t) return apiFetch(`/api/admin-data?action=list&entity=messages&thread_id=${t.id}&limit=100`).then(r => r.json())
+        return []
+      }).then(raw => { const msgs = raw?.data ?? raw; setMessages(Array.isArray(msgs) ? msgs : []) }).catch(() => {}).finally(() => setLoading(false))
+  }, [post.id])
+
+  const handleSend = async () => {
+    if (!replyText.trim() || !thread) return
+    setSending(true)
+    try {
+      const res = await apiFetch('/api/admin-data?action=create&entity=messages', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ thread_id: thread.id, content: replyText.trim(), direction: 'outbound', entity: 'messages', type_slug: 'message' }),
+      })
+      const msg = await res.json()
+      if (msg?.id) setMessages(prev => [...prev, msg])
+      setReplyText('')
+    } finally { setSending(false) }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-6 py-3 border-b border-border shrink-0">
+        <h3 className="text-sm font-semibold">{post.title}</h3>
+        {post.description && <p className="text-sm text-muted-foreground mt-1">{post.description}</p>}
+      </div>
+      <ScrollArea className="flex-1 p-4">
+        <div className="space-y-3">
+          {loading && <Skeleton className="h-10 w-2/3" />}
+          {!loading && messages.length === 0 && <p className="text-sm text-muted-foreground italic text-center py-8">No replies yet.</p>}
+          {messages.map(msg => (
+            <div key={msg.id} className={`flex ${msg.direction === 'outbound' ? 'justify-end' : 'justify-start'}`}>
+              <div className={`max-w-sm rounded-lg px-3 py-2 text-sm ${msg.direction === 'outbound' ? 'bg-primary text-primary-foreground' : 'bg-muted border border-border'}`}>{msg.content}</div>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+      <div className="border-t p-3 flex gap-2 shrink-0">
+        <Input placeholder="Reply as agent…" value={replyText} onChange={e => setReplyText(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && !e.shiftKey && handleSend()} className="flex-1" />
+        <Button size="icon" onClick={handleSend} disabled={sending || !replyText.trim() || !thread}><Send size={14} /></Button>
+      </div>
+    </div>
+  )
+}
+
+export default function CommunityPage() {
+  const [activeChannel, setActiveChannel] = useState('general')
+  const [selected, setSelected] = useState<Post | null>(null)
+  const [search, setSearch] = useState('')
+  const [posts, setPosts] = useState<Post[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=items&type_slug=community_post&limit=500')
+      .then(r => r.json()).then(j => setPosts(Array.isArray(j?.data) ? j.data : Array.isArray(j) ? j : [])).catch(() => setPosts([])).finally(() => setLoading(false))
+  }, [])
+
+  const channelPosts = posts.filter(p => (p.data?.channel as string || 'general') === activeChannel)
+  const filtered = channelPosts.filter(p => p.title?.toLowerCase().includes(search.toLowerCase()))
+  const unanswered = posts.filter(p => !p.data?.reply_count)
+
+  return (
+    <div className="flex h-full min-h-0">
+      <div className="w-44 shrink-0 border-r border-border bg-muted/30 flex flex-col min-h-0">
+        <div className="px-3 py-2 h-9 border-b border-border shrink-0 flex items-center">
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Channels</p>
+        </div>
+        <div className="flex-1 overflow-y-auto py-1">
+          {CHANNELS.map(ch => {
+            const count = posts.filter(p => (p.data?.channel as string || 'general') === ch).length
+            return (
+              <button key={ch} onClick={() => { setActiveChannel(ch); setSelected(null) }}
+                className={`w-full text-left px-3 py-2 flex items-center gap-2 hover:bg-accent/50 transition-colors ${activeChannel === ch ? 'bg-accent text-accent-foreground font-medium' : 'text-muted-foreground'}`}>
+                <Hash size={13} className="shrink-0" />
+                <span className="text-sm flex-1 truncate">{CHANNEL_LABELS[ch]}</span>
+                {count > 0 && <Badge variant="secondary" className="text-xs h-4 px-1.5">{count}</Badge>}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+
+      <div className="w-64 shrink-0 border-r border-border flex flex-col min-h-0">
+        <div className="flex items-center px-3 py-2 h-9 border-b border-border shrink-0">
+          <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide flex-1">#{CHANNEL_LABELS[activeChannel]}</p>
+        </div>
+        <div className="px-3 py-2 border-b border-border shrink-0">
+          <Input placeholder="Search…" value={search} onChange={e => setSearch(e.target.value)} className="h-7 text-xs" />
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {loading ? <div className="p-3 space-y-2">{Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-12 w-full" />)}</div>
+            : filtered.length === 0 ? <div className="flex flex-col items-center justify-center gap-2 py-10 px-4 text-center"><MessageSquarePlus size={24} className="text-muted-foreground/40" /><p className="text-sm text-muted-foreground">No discussions yet.</p></div>
+            : filtered.map(post => (
+              <button key={post.id} onClick={() => setSelected(post)}
+                className={`w-full text-left px-3 py-2.5 border-b border-border hover:bg-accent/50 transition-colors ${selected?.id === post.id ? 'bg-accent border-l-2 border-l-primary' : ''}`}>
+                <p className="text-sm font-medium truncate">{post.title || 'Untitled'}</p>
+                {post.description && <p className="text-xs text-muted-foreground truncate mt-0.5">{post.description}</p>}
+              </button>
+            ))
+          }
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 flex flex-col">
+        {!selected ? <div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground"><MessageSquarePlus size={32} className="opacity-30" /><p className="text-sm">Select a discussion to reply</p></div>
+          : <ThreadPane post={selected} />}
+      </div>
+
+      <div className="w-52 shrink-0 border-l border-border flex flex-col min-h-0">
+        <div className="px-4 py-2 border-b border-border shrink-0 flex items-center gap-2">
+          <AlertCircle className="h-3.5 w-3.5 text-amber-500" />
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Moderation</p>
+        </div>
+        <ScrollArea className="flex-1">
+          <div className="p-3 space-y-1">
+            <p className="text-xs font-medium text-muted-foreground px-2 py-1">Unanswered ({unanswered.length})</p>
+            {unanswered.length === 0 && <p className="text-xs text-muted-foreground px-2 italic">All caught up.</p>}
+            {unanswered.slice(0, 15).map(p => (
+              <button key={p.id} onClick={() => { setActiveChannel(p.data?.channel as string || 'general'); setSelected(p) }}
+                className="w-full text-left px-2 py-2 rounded hover:bg-accent/50 transition-colors">
+                <p className="text-xs font-medium truncate">{p.title || 'Untitled'}</p>
+                <p className="text-xs text-muted-foreground">{new Date(p.created_at).toLocaleDateString()}</p>
+              </button>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  )
+}

package/pages/courses/CoursesPage.tsx

@@ -0,0 +1,231 @@
+import { useState, useEffect } from 'react'
+import { resolveTypeId } from '../../../lib/resolveTypeId'
+import { useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+import { Button } from '@core/components/ui/button'
+import { Input } from '@core/components/ui/input'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+import { Separator } from '@core/components/ui/separator'
+import { GraduationCap, Plus, PlayCircle, Edit, MessageSquare } from 'lucide-react'
+
+interface Lesson { id: string; title: string; description?: string; status?: string; data?: Record<string, any>; created_at: string }
+interface Message { id: string; content: string; created_at: string; direction: string }
+interface Thread { id: string }
+
+function groupByCourse(lessons: Lesson[]): Map<string, Lesson[]> {
+  const map = new Map<string, Lesson[]>()
+  for (const l of lessons) {
+    const key = (l.data?.course_title as string) || 'General'
+    if (!map.has(key)) map.set(key, [])
+    map.get(key)!.push(l)
+  }
+  for (const [k, v] of map) map.set(k, [...v].sort((a, b) => ((a.data?.sequence as number) ?? 9999) - ((b.data?.sequence as number) ?? 9999)))
+  return map
+}
+
+function DiscussionPanel({ lesson }: { lesson: Lesson }) {
+  const [messages, setMessages] = useState<Message[]>([])
+  const [thread, setThread] = useState<Thread | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [newMessage, setNewMessage] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+
+  useEffect(() => {
+    setLoading(true)
+    apiFetch(`/api/admin-data?action=list&entity=threads&target_id=${lesson.id}&limit=5`)
+      .then(r => r.json()).then(j => {
+        const t = (j?.data ?? j)?.[0] ?? null
+        setThread(t)
+        if (t) return apiFetch(`/api/admin-data?action=list&entity=messages&thread_id=${t.id}&limit=50`).then(r => r.json())
+        return []
+      }).then(raw => { const msgs = raw?.data ?? raw; setMessages(Array.isArray(msgs) ? msgs : []) }).catch(() => {}).finally(() => setLoading(false))
+  }, [lesson.id])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!newMessage.trim() || submitting) return
+
+    setSubmitting(true)
+    try {
+      // Create thread if it doesn't exist
+      let currentThread = thread
+      if (!currentThread) {
+        const threadResponse = await apiFetch('/api/admin-data?action=create&entity=threads', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            target_type: 'item',
+            target_id: lesson.id,
+            title: `Discussion: ${lesson.title}`,
+            status: 'active'
+          })
+        })
+        const threadResult = await threadResponse.json()
+        currentThread = threadResult?.data || threadResult
+        setThread(currentThread)
+      }
+
+      // Create message
+      const messageTypeId = await resolveTypeId('message')
+      const messageResponse = await apiFetch('/api/admin-data?action=create&entity=messages', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type_id: messageTypeId,
+          thread_id: currentThread.id,
+          content: newMessage.trim(),
+          direction: 'inbound',
+          sequence: messages.length + 1
+        })
+      })
+      const messageResult = await messageResponse.json()
+      const newMsg = messageResult?.data || messageResult
+
+      // Add to local state
+      setMessages(prev => [...prev, newMsg])
+      setNewMessage('')
+    } catch (error) {
+      console.error('Failed to send message:', error)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <div className="shrink-0 border-t border-border" style={{ maxHeight: '300px' }}>
+      <div className="px-4 py-2 border-b border-border flex items-center gap-2">
+        <MessageSquare className="h-3.5 w-3.5 text-muted-foreground" />
+        <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Discussion ({messages.length})</p>
+      </div>
+      <ScrollArea style={{ maxHeight: '200px' }}>
+        <div className="px-4 py-2 space-y-2">
+          {loading && <Skeleton className="h-8 w-full" />}
+          {!loading && messages.length === 0 && <p className="text-xs text-muted-foreground italic py-2">No discussion yet.</p>}
+          {messages.map(msg => (
+            <div key={msg.id || `msg-${Math.random()}`} className="text-xs border border-border rounded p-2 bg-muted/30">
+              <p>{msg.content}</p>
+              <p className="text-muted-foreground mt-1">{msg.created_at ? new Date(msg.created_at).toLocaleString() : 'Just now'}</p>
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+      <div className="px-4 py-3 border-t border-border">
+        <form onSubmit={handleSubmit} className="flex gap-2">
+          <input
+            type="text"
+            value={newMessage}
+            onChange={(e) => setNewMessage(e.target.value)}
+            placeholder="Add a comment..."
+            className="flex-1 px-3 py-2 text-xs border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
+            disabled={submitting}
+          />
+          <button
+            type="submit"
+            disabled={!newMessage.trim() || submitting}
+            className="px-3 py-2 text-xs bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            {submitting ? 'Sending...' : 'Send'}
+          </button>
+        </form>
+      </div>
+    </div>
+  )
+}
+
+export default function CoursesPage() {
+  const navigate = useNavigate()
+  const [lessons, setLessons] = useState<Lesson[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [selectedCourse, setSelectedCourse] = useState<string | null>(null)
+  const [selected, setSelected] = useState<Lesson | null>(null)
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=items&type_slug=course_lesson&limit=500')
+      .then(r => r.json()).then(j => setLessons(Array.isArray(j?.data) ? j.data : Array.isArray(j) ? j : [])).catch(() => setLessons([])).finally(() => setLoading(false))
+  }, [])
+
+  const courseMap = groupByCourse(lessons)
+  const courseNames = Array.from(courseMap.keys()).filter(c => !search || c.toLowerCase().includes(search.toLowerCase()))
+  const chaptersForCourse = selectedCourse ? courseMap.get(selectedCourse) ?? [] : []
+
+  return (
+    <div className="flex h-full min-h-0">
+      <div className="w-48 shrink-0 border-r border-border flex flex-col min-h-0">
+        <div className="px-4 py-3 border-b border-border shrink-0 flex items-center justify-between">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Courses</p>
+        </div>
+        <div className="px-3 py-2 border-b border-border shrink-0">
+          <Input placeholder="Search…" value={search} onChange={e => setSearch(e.target.value)} className="h-7 text-xs" />
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {loading ? <div className="p-3 space-y-2">{Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+            : courseNames.length === 0 ? <div className="p-4 text-sm text-muted-foreground text-center">No courses.</div>
+            : courseNames.map(name => (
+              <button key={name} onClick={() => { setSelectedCourse(name); setSelected(null) }}
+                className={`w-full text-left px-4 py-3 border-b border-border hover:bg-accent/50 transition-colors ${selectedCourse === name ? 'bg-accent border-l-2 border-l-primary' : ''}`}>
+                <p className={`text-sm font-medium truncate ${selectedCourse === name ? 'text-primary' : ''}`}>{name}</p>
+                <p className="text-xs text-muted-foreground mt-0.5">{courseMap.get(name)?.length} lessons</p>
+              </button>
+            ))
+          }
+        </div>
+      </div>
+
+      <div className="w-64 shrink-0 border-r border-border flex flex-col min-h-0">
+        <div className="px-4 py-3 border-b border-border shrink-0">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Lessons</p>
+        </div>
+        <div className="flex-1 overflow-y-auto">
+          {!selectedCourse ? <div className="p-4 text-sm text-muted-foreground">Select a course</div>
+            : chaptersForCourse.length === 0 ? <div className="p-4 text-sm text-muted-foreground">No lessons.</div>
+            : chaptersForCourse.map(lesson => {
+              const seq = lesson.data?.sequence as number | undefined
+              return (
+                <button key={lesson.id} onClick={() => setSelected(lesson)}
+                  className={`w-full text-left px-4 py-3 border-b border-border hover:bg-accent/50 flex items-center gap-2 transition-colors ${selected?.id === lesson.id ? 'bg-accent border-l-2 border-l-primary' : ''}`}>
+                  <PlayCircle size={14} className="text-muted-foreground shrink-0" />
+                  <p className="text-sm truncate">{seq != null ? `${seq}. ` : ''}{lesson.title}</p>
+                </button>
+              )
+            })
+          }
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 flex flex-col">
+        {!selected ? (
+          <div className="flex-1 flex flex-col items-center justify-center gap-3 text-muted-foreground">
+            <GraduationCap size={32} className="opacity-30" />
+            <p className="text-sm">{selectedCourse ? 'Select a lesson' : 'Select a course to get started'}</p>
+          </div>
+        ) : (
+          <>
+            <div className="px-6 py-3 border-b border-border shrink-0 flex items-center justify-between">
+              <div>
+                <h2 className="text-base font-semibold">{selected.title}</h2>
+                {selected.description && <p className="text-xs text-muted-foreground mt-0.5">{selected.description}</p>}
+              </div>
+            </div>
+            <ScrollArea className="flex-1 border-b border-border">
+              <div className="px-6 py-5 max-w-2xl space-y-4">
+                {selected.data?.video_url && (
+                  <div className="aspect-video bg-muted rounded-lg flex items-center justify-center border border-border">
+                    <a href={selected.data.video_url as string} target="_blank" rel="noopener noreferrer" className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground">
+                      <PlayCircle size={40} /><span className="text-sm">Watch Video</span>
+                    </a>
+                  </div>
+                )}
+                {selected.data?.content && <><Separator /><div className="text-sm leading-relaxed whitespace-pre-wrap">{selected.data.content as string}</div></>}
+                {!selected.data?.video_url && !selected.data?.content && <p className="text-sm text-muted-foreground italic">No content available.</p>}
+              </div>
+            </ScrollArea>
+            <DiscussionPanel lesson={selected} />
+          </>
+        )}
+      </div>
+    </div>
+  )
+}