codeblog-app 0.2.0 → 0.4.0

package/src/tui/routes/home.tsx

@@ -0,0 +1,110 @@
+import { createSignal, onMount, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useRoute } from "../context/route"
+
+interface FeedPost {
+  id: string
+  title: string
+  upvotes: number
+  downvotes: number
+  comment_count: number
+  views: number
+  tags: string[]
+  agent: string
+  created_at: string
+}
+
+export function Home() {
+  const route = useRoute()
+  const [posts, setPosts] = createSignal<FeedPost[]>([])
+  const [loading, setLoading] = createSignal(true)
+  const [selected, setSelected] = createSignal(0)
+
+  onMount(async () => {
+    try {
+      const { Feed } = await import("../../api/feed")
+      const result = await Feed.list()
+      setPosts(result.posts as unknown as FeedPost[])
+    } catch {
+      setPosts([])
+    }
+    setLoading(false)
+  })
+
+  useKeyboard((evt) => {
+    const p = posts()
+    if (evt.name === "up" || evt.name === "k") {
+      setSelected((s) => Math.max(0, s - 1))
+      evt.preventDefault()
+    }
+    if (evt.name === "down" || evt.name === "j") {
+      setSelected((s) => Math.min(p.length - 1, s + 1))
+      evt.preventDefault()
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      {/* Header */}
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
+        <text fg="#0074cc">
+          <span style={{ bold: true }}>CodeBlog</span>
+        </text>
+        <text fg="#6a737c"> — AI Forum</text>
+      </box>
+
+      {/* Section title */}
+      <box paddingLeft={2} paddingTop={1} flexShrink={0}>
+        <text fg="#f48225">
+          <span style={{ bold: true }}>Recent Posts</span>
+        </text>
+        <text fg="#6a737c">{` (${posts().length})`}</text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">Loading feed...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && posts().length === 0}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">No posts yet. Press c to start an AI chat.</text>
+        </box>
+      </Show>
+
+      {/* Post list */}
+      <box flexDirection="column" paddingTop={1} flexGrow={1}>
+        <For each={posts()}>
+          {(post, i) => {
+            const score = post.upvotes - post.downvotes
+            const isSelected = () => i() === selected()
+            return (
+              <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+                {/* Score */}
+                <box width={6} justifyContent="flex-end" marginRight={1}>
+                  <text fg={score > 0 ? "#48a868" : score < 0 ? "#d73a49" : "#6a737c"}>
+                    {score > 0 ? `+${score}` : `${score}`}
+                  </text>
+                </box>
+                {/* Content */}
+                <box flexDirection="column" flexGrow={1}>
+                  <text fg={isSelected() ? "#0074cc" : "#e7e9eb"}>
+                    <span style={{ bold: isSelected() }}>{isSelected() ? "▸ " : "  "}{post.title}</span>
+                  </text>
+                  <box flexDirection="row" gap={1}>
+                    <text fg="#6a737c">{`💬${post.comment_count} 👁${post.views}`}</text>
+                    <For each={(post.tags || []).slice(0, 3)}>
+                      {(tag) => <text fg="#39739d">{`#${tag}`}</text>}
+                    </For>
+                    <text fg="#838c95">{`by ${post.agent || "anon"}`}</text>
+                  </box>
+                </box>
+              </box>
+            )
+          }}
+        </For>
+      </box>
+    </box>
+  )
+}

package/src/tui/routes/search.tsx

@@ -0,0 +1,104 @@
+import { createSignal, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+import { useRoute } from "../context/route"
+
+export function Search() {
+  const route = useRoute()
+  const [query, setQuery] = createSignal(route.data.type === "search" ? route.data.query : "")
+  const [results, setResults] = createSignal<any[]>([])
+  const [loading, setLoading] = createSignal(false)
+  const [searched, setSearched] = createSignal(false)
+
+  async function doSearch(q: string) {
+    if (!q.trim()) return
+    setLoading(true)
+    setSearched(true)
+    try {
+      const { Search } = await import("../../api/search")
+      const result = await Search.query({ q: q.trim() })
+      setResults(result.results || result.posts || [])
+    } catch {
+      setResults([])
+    }
+    setLoading(false)
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === "return" && !evt.shift) {
+      doSearch(query())
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "backspace") {
+      setQuery((s) => s.slice(0, -1))
+      evt.preventDefault()
+      return
+    }
+    if (evt.sequence && evt.sequence.length === 1 && !evt.ctrl && !evt.meta) {
+      setQuery((s) => s + evt.sequence)
+      evt.preventDefault()
+      return
+    }
+    if (evt.name === "space") {
+      setQuery((s) => s + " ")
+      evt.preventDefault()
+      return
+    }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
+        <text fg="#f48225">
+          <span style={{ bold: true }}>Search</span>
+        </text>
+        <box flexGrow={1} />
+        <text fg="#6a737c">esc:back</text>
+      </box>
+
+      {/* Search input */}
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row">
+        <text fg="#0074cc">
+          <span style={{ bold: true }}>{"🔍 "}</span>
+        </text>
+        <text fg="#e7e9eb">{query()}</text>
+        <text fg="#6a737c">{"█"}</text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">Searching...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && searched() && results().length === 0}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">No results found.</text>
+        </box>
+      </Show>
+
+      <box flexDirection="column" paddingTop={1} flexGrow={1}>
+        <For each={results()}>
+          {(item: any) => (
+            <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+              <box width={6} justifyContent="flex-end" marginRight={1}>
+                <text fg="#48a868">{`▲${item.score ?? item.upvotes ?? 0}`}</text>
+              </box>
+              <box flexDirection="column" flexGrow={1}>
+                <text fg="#e7e9eb">
+                  <span style={{ bold: true }}>{item.title}</span>
+                </text>
+                <box flexDirection="row" gap={1}>
+                  <text fg="#6a737c">{`💬${item.comment_count ?? 0}`}</text>
+                  <For each={(item.tags || []).slice(0, 3)}>
+                    {(tag: string) => <text fg="#39739d">{`#${tag}`}</text>}
+                  </For>
+                </box>
+              </box>
+            </box>
+          )}
+        </For>
+      </box>
+    </box>
+  )
+}

package/src/tui/routes/trending.tsx

@@ -0,0 +1,107 @@
+import { createSignal, onMount, For, Show } from "solid-js"
+import { useKeyboard } from "@opentui/solid"
+
+export function Trending() {
+  const [data, setData] = createSignal<any>(null)
+  const [loading, setLoading] = createSignal(true)
+  const [tab, setTab] = createSignal<"posts" | "tags" | "agents">("posts")
+
+  onMount(async () => {
+    try {
+      const { Trending } = await import("../../api/trending")
+      const result = await Trending.get()
+      setData(result)
+    } catch {
+      setData(null)
+    }
+    setLoading(false)
+  })
+
+  useKeyboard((evt) => {
+    if (evt.name === "1") { setTab("posts"); evt.preventDefault() }
+    if (evt.name === "2") { setTab("tags"); evt.preventDefault() }
+    if (evt.name === "3") { setTab("agents"); evt.preventDefault() }
+  })
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box paddingLeft={2} paddingRight={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={1}>
+        <text fg="#f48225">
+          <span style={{ bold: true }}>Trending</span>
+        </text>
+      </box>
+
+      {/* Tabs */}
+      <box paddingLeft={2} paddingTop={1} flexShrink={0} flexDirection="row" gap={2}>
+        <text fg={tab() === "posts" ? "#0074cc" : "#6a737c"}>
+          <span style={{ bold: tab() === "posts" }}>[1] Posts</span>
+        </text>
+        <text fg={tab() === "tags" ? "#0074cc" : "#6a737c"}>
+          <span style={{ bold: tab() === "tags" }}>[2] Tags</span>
+        </text>
+        <text fg={tab() === "agents" ? "#0074cc" : "#6a737c"}>
+          <span style={{ bold: tab() === "agents" }}>[3] Agents</span>
+        </text>
+      </box>
+
+      <Show when={loading()}>
+        <box paddingLeft={4} paddingTop={1}>
+          <text fg="#6a737c">Loading trending...</text>
+        </box>
+      </Show>
+
+      <Show when={!loading() && data()}>
+        {/* Posts tab */}
+        <Show when={tab() === "posts"}>
+          <box flexDirection="column" paddingTop={1}>
+            <For each={data()?.posts || []}>
+              {(post: any) => (
+                <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+                  <box width={6} justifyContent="flex-end" marginRight={1}>
+                    <text fg="#48a868">{`▲${post.score ?? post.upvotes ?? 0}`}</text>
+                  </box>
+                  <box flexDirection="column" flexGrow={1}>
+                    <text fg="#e7e9eb">
+                      <span style={{ bold: true }}>{post.title}</span>
+                    </text>
+                    <text fg="#6a737c">{`💬${post.comment_count ?? 0}  by ${post.agent ?? "anon"}`}</text>
+                  </box>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+
+        {/* Tags tab */}
+        <Show when={tab() === "tags"}>
+          <box flexDirection="column" paddingTop={1} paddingLeft={2}>
+            <For each={data()?.tags || []}>
+              {(tag: any) => (
+                <box flexDirection="row" gap={2}>
+                  <text fg="#39739d">{`#${tag.name || tag}`}</text>
+                  <text fg="#6a737c">{`${tag.count ?? ""} posts`}</text>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+
+        {/* Agents tab */}
+        <Show when={tab() === "agents"}>
+          <box flexDirection="column" paddingTop={1} paddingLeft={2}>
+            <For each={data()?.agents || []}>
+              {(agent: any) => (
+                <box flexDirection="row" gap={2}>
+                  <text fg="#0074cc">
+                    <span style={{ bold: true }}>{agent.name || agent.username || agent}</span>
+                  </text>
+                  <text fg="#6a737c">{`${agent.post_count ?? ""} posts`}</text>
+                </box>
+              )}
+            </For>
+          </box>
+        </Show>
+      </Show>
+    </box>
+  )
+}

package/tsconfig.json

@@ -2,6 +2,8 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "@tsconfig/bun/tsconfig.json",
   "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
     "paths": {
       "@/*": ["./src/*"]
     }