@ahmd-sh/hntui 0.3.0

package/src/views/MessageView.tsx

@@ -0,0 +1,34 @@
+import { TextAttributes } from "@opentui/core"
+import { selectionColors, useTheme } from "../theme"
+
+interface Props {
+  art: string
+  title: string
+  subtitle?: string
+  hint?: string
+}
+
+// Full-body centered state: not-found, network failure, and friends.
+export function MessageView({ art, title, subtitle, hint }: Props) {
+  const t = useTheme()
+  return (
+    <box flexGrow={1} flexDirection="column" alignItems="center" justifyContent="center" gap={1}>
+      <text fg={t.accent} {...selectionColors(t)}>
+        {art}
+      </text>
+      <text fg={t.text} {...selectionColors(t)} attributes={TextAttributes.BOLD}>
+        {title}
+      </text>
+      {subtitle ? (
+        <text fg={t.statusHint} {...selectionColors(t)}>
+          {subtitle}
+        </text>
+      ) : null}
+      {hint ? (
+        <text fg={t.statusHint} {...selectionColors(t)}>
+          {hint}
+        </text>
+      ) : null}
+    </box>
+  )
+}

package/src/views/StoryDetailView.tsx

@@ -0,0 +1,116 @@
+import { forwardRef, useEffect } from "react"
+import type { ScrollBoxRenderable } from "@opentui/core"
+import { TextAttributes } from "@opentui/core"
+import { CommentNode } from "../components/CommentNode"
+import { Loader } from "../components/Loader"
+import type { FlatComment } from "../hooks/useCommentTree"
+import type { Item } from "../api/types"
+import { hostname, htmlToText, relativeTime } from "../utils/format"
+import { openUrl } from "../utils/openUrl"
+import { selectionColors, useTheme } from "../theme"
+
+interface Props {
+  story: Item
+  flat: FlatComment[]
+  cursor: number
+  collapsed: Set<number>
+  loading: boolean
+  saved?: boolean
+  emptyMessage?: string
+  onSelectComment: (idx: number) => void
+  onToggleComment: (id: number) => void
+  onOpenLinks: (id: number) => void
+}
+
+export const StoryDetailView = forwardRef<ScrollBoxRenderable, Props>(function StoryDetailView(
+  { story, flat, cursor, collapsed, loading, saved, emptyMessage, onSelectComment, onToggleComment, onOpenLinks },
+  ref,
+) {
+  const t = useTheme()
+  useEffect(() => {
+    const sb = (ref as React.RefObject<ScrollBoxRenderable>)?.current
+    if (!sb || flat.length === 0) return
+    const target = flat[cursor]
+    if (!target) return
+    sb.scrollChildIntoView(`comment-${target.node.item.id}`)
+  }, [cursor, flat])
+
+  const host = hostname(story.url)
+  const text = htmlToText(story.text)
+
+  return (
+    <box flexDirection="column" flexGrow={1}>
+      <box
+        flexDirection="column"
+        flexShrink={0}
+        paddingLeft={1}
+        paddingRight={1}
+        paddingTop={1}
+        paddingBottom={1}
+        backgroundColor={t.strip}
+        border={["bottom"]}
+        borderStyle="single"
+        borderColor={t.border}
+      >
+        <text fg={t.text} {...selectionColors(t)} attributes={TextAttributes.BOLD} wrapMode="word">
+          {saved ? "★ " : ""}
+          {story.title ?? "(untitled)"}
+        </text>
+        <text {...selectionColors(t)}>
+          <span fg={t.stripAccent}>▲ {story.score ?? 0}</span>
+          <span fg={t.textDim}>{` by `}</span>
+          <span fg={t.textMuted}>{story.by ?? "?"}</span>
+          <span fg={t.textDim}>{`  ${relativeTime(story.time)}  | `}</span>
+          <span fg={t.textMuted}>{`${story.descendants ?? 0} comments`}</span>
+          {host ? <span fg={t.textDim}>{`  · ${host}`}</span> : null}
+        </text>
+        {story.url ? (
+          <text fg={t.link} {...selectionColors(t)} onMouseDown={() => openUrl(story.url!)}>
+            {story.url}
+          </text>
+        ) : null}
+      </box>
+      <scrollbox
+        ref={ref}
+        flexGrow={1}
+        scrollY={true}
+        scrollX={false}
+        verticalScrollbarOptions={{
+          trackOptions: { backgroundColor: t.scrollTrack, foregroundColor: t.scrollThumb },
+        }}
+      >
+        {text ? (
+          <box paddingLeft={1} paddingRight={1} paddingTop={1}>
+            <text fg={t.textBody} {...selectionColors(t)} wrapMode="word">
+              {text}
+            </text>
+          </box>
+        ) : null}
+        <box paddingLeft={1} paddingRight={1} paddingTop={1}>
+          {loading ? (
+            <box flexDirection="row" alignItems="center" gap={1}>
+              <Loader />
+              <text fg={t.statusHint} {...selectionColors(t)}>Loading comments…</text>
+            </box>
+          ) : flat.length === 0 ? (
+            <text fg={t.statusHint} {...selectionColors(t)}>{emptyMessage ?? "No comments yet."}</text>
+          ) : (
+            flat.map((fc, idx) => (
+              <CommentNode
+                key={fc.node.item.id}
+                node={fc.node}
+                depth={fc.depth}
+                collapsed={collapsed.has(fc.node.item.id)}
+                selected={idx === cursor}
+                hiddenChildren={fc.hiddenChildren}
+                onSelect={() => onSelectComment(idx)}
+                onToggle={() => onToggleComment(fc.node.item.id)}
+                onOpenLinks={() => onOpenLinks(fc.node.item.id)}
+              />
+            ))
+          )}
+        </box>
+      </scrollbox>
+    </box>
+  )
+})

package/src/views/StoryListView.tsx

@@ -0,0 +1,83 @@
+import { forwardRef, useEffect } from "react"
+import type { MouseEvent, ScrollBoxRenderable } from "@opentui/core"
+import { StoryRow } from "../components/StoryRow"
+import { Loader } from "../components/Loader"
+import type { Item } from "../api/types"
+import { selectionColors, useTheme } from "../theme"
+
+interface Props {
+  items: Item[]
+  cursor: number
+  loading: boolean
+  savedIds?: Set<number>
+  viewedIds?: Set<number>
+  emptyMessage?: string
+  loadingMessage?: string
+  onSelect: (idx: number) => void
+  onActivate: (idx: number) => void
+  onContextMenu?: (idx: number, ev: MouseEvent) => void
+}
+
+export const StoryListView = forwardRef<ScrollBoxRenderable, Props>(function StoryListView(
+  {
+    items,
+    cursor,
+    loading,
+    savedIds,
+    viewedIds,
+    emptyMessage,
+    loadingMessage,
+    onSelect,
+    onActivate,
+    onContextMenu,
+  },
+  ref,
+) {
+  const t = useTheme()
+  useEffect(() => {
+    const sb = (ref as React.RefObject<ScrollBoxRenderable>)?.current
+    if (!sb || items.length === 0) return
+    sb.scrollChildIntoView(`row-${cursor + 1}`)
+  }, [cursor, items.length])
+
+  if (items.length === 0) {
+    return (
+      <box flexGrow={1} flexDirection="column" alignItems="center" justifyContent="center" gap={1}>
+        {loading ? (
+          <>
+            <Loader />
+            <text fg={t.statusHint} {...selectionColors(t)}>{loadingMessage ?? "Loading stories…"}</text>
+          </>
+        ) : (
+          <text fg={t.statusHint} {...selectionColors(t)}>{emptyMessage ?? "No stories"}</text>
+        )}
+      </box>
+    )
+  }
+
+  return (
+    <scrollbox
+      ref={ref}
+      flexGrow={1}
+      scrollY={true}
+      scrollX={false}
+      verticalScrollbarOptions={{
+        trackOptions: { backgroundColor: t.scrollTrack, foregroundColor: t.scrollThumb },
+      }}
+    >
+      {items.map((item, idx) => (
+        <StoryRow
+          key={item.id}
+          rank={idx + 1}
+          item={item}
+          selected={idx === cursor}
+          saved={savedIds?.has(item.id)}
+          visited={viewedIds?.has(item.id)}
+          onSelect={() => onSelect(idx)}
+          onActivate={() => onActivate(idx)}
+          onContextMenu={(ev) => onContextMenu?.(idx, ev)}
+        />
+      ))}
+    </scrollbox>
+  )
+})