refactor: convert to bun workspaces monorepo
- Move web app into apps/web/ - Create packages/shared/ with shared types - Create plugins/decky-vault/ scaffold - Root package.json manages workspaces only
This commit is contained in:
@@ -0,0 +1,350 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback } from "react"
|
||||
import Image from "next/image"
|
||||
import {
|
||||
ThumbsUpIcon,
|
||||
ReplyIcon,
|
||||
MoreHorizontalIcon,
|
||||
TrashIcon,
|
||||
ChevronDownIcon,
|
||||
ChevronUpIcon,
|
||||
} from "lucide-react"
|
||||
import { useSession } from "@/lib/auth-client"
|
||||
import { TiptapRenderer } from "@/components/tiptap-renderer"
|
||||
import { TiptapEditor } from "@/components/tiptap-editor"
|
||||
|
||||
const MAX_DEPTH = 3
|
||||
|
||||
export interface CommentData {
|
||||
id: string
|
||||
gameId: string
|
||||
userId: string
|
||||
parentId: string | null
|
||||
content: Record<string, unknown>
|
||||
upvotes: number
|
||||
createdAt: string
|
||||
updatedAt: string
|
||||
userName: string | null
|
||||
userImage: string | null
|
||||
}
|
||||
|
||||
function formatDate(value: string | null | undefined): string {
|
||||
if (!value) return ""
|
||||
return new Date(value).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
})
|
||||
}
|
||||
|
||||
function getInitial(name: string | null | undefined): string {
|
||||
return name?.charAt(0)?.toUpperCase() || "?"
|
||||
}
|
||||
|
||||
interface CommentItemProps {
|
||||
comment: CommentData
|
||||
depth?: number
|
||||
onReplyPosted: () => void
|
||||
gameId: string
|
||||
}
|
||||
|
||||
export function CommentItem({
|
||||
comment,
|
||||
depth = 0,
|
||||
onReplyPosted,
|
||||
gameId,
|
||||
}: CommentItemProps) {
|
||||
const { data: session } = useSession()
|
||||
const [upvotes, setUpvotes] = useState(comment.upvotes)
|
||||
const [hasUpvoted, setHasUpvoted] = useState(false)
|
||||
const [isReplying, setIsReplying] = useState(false)
|
||||
const [replyContent, setReplyContent] = useState<Record<string, unknown> | null>(null)
|
||||
const [replySubmitting, setReplySubmitting] = useState(false)
|
||||
const [showReplies, setShowReplies] = useState(false)
|
||||
const [replies, setReplies] = useState<CommentData[]>([])
|
||||
const [loadingReplies, setLoadingReplies] = useState(false)
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const [isDeleted, setIsDeleted] = useState(false)
|
||||
|
||||
const isOwner = session?.user?.id === comment.userId
|
||||
const isAdmin = session?.user?.role === "admin"
|
||||
const canModerate = isOwner || isAdmin
|
||||
|
||||
const handleUpvote = useCallback(async () => {
|
||||
if (!session) return
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/games/${gameId}/comments/${comment.id}/upvote`,
|
||||
{ method: "POST" },
|
||||
)
|
||||
if (res.ok) {
|
||||
setUpvotes((prev) => (hasUpvoted ? prev - 1 : prev + 1))
|
||||
setHasUpvoted((prev) => !prev)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to upvote comment:", err)
|
||||
}
|
||||
}, [session, gameId, comment.id, hasUpvoted])
|
||||
|
||||
const handleReplySubmit = useCallback(async () => {
|
||||
if (!replyContent || !session) return
|
||||
setReplySubmitting(true)
|
||||
try {
|
||||
const res = await fetch(`/api/games/${gameId}/comments`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ parentId: comment.id, content: replyContent }),
|
||||
})
|
||||
if (res.ok) {
|
||||
setIsReplying(false)
|
||||
setReplyContent(null)
|
||||
onReplyPosted()
|
||||
if (showReplies) {
|
||||
// Refresh replies
|
||||
setLoadingReplies(true)
|
||||
const repliesRes = await fetch(
|
||||
`/api/games/${gameId}/comments/${comment.id}/replies`,
|
||||
)
|
||||
if (repliesRes.ok) {
|
||||
const data = (await repliesRes.json()) as CommentData[]
|
||||
setReplies(data)
|
||||
}
|
||||
setLoadingReplies(false)
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to post reply:", err)
|
||||
} finally {
|
||||
setReplySubmitting(false)
|
||||
}
|
||||
}, [replyContent, session, gameId, comment.id, onReplyPosted, showReplies])
|
||||
|
||||
const handleDelete = useCallback(async () => {
|
||||
if (!canModerate) return
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/games/${gameId}/comments/${comment.id}`,
|
||||
{ method: "DELETE" },
|
||||
)
|
||||
if (res.ok) {
|
||||
setIsDeleted(true)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to delete comment:", err)
|
||||
}
|
||||
}, [canModerate, gameId, comment.id])
|
||||
|
||||
const handleLoadReplies = useCallback(async () => {
|
||||
if (showReplies) {
|
||||
setShowReplies(false)
|
||||
return
|
||||
}
|
||||
setLoadingReplies(true)
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/games/${gameId}/comments/${comment.id}/replies`,
|
||||
)
|
||||
if (res.ok) {
|
||||
const data = (await res.json()) as CommentData[]
|
||||
setReplies(data)
|
||||
setShowReplies(true)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load replies:", err)
|
||||
} finally {
|
||||
setLoadingReplies(false)
|
||||
}
|
||||
}, [showReplies, gameId, comment.id])
|
||||
|
||||
if (isDeleted) {
|
||||
return (
|
||||
<div className="py-3 text-sm text-text/40 italic">
|
||||
Comment removed
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={depth > 0 ? "ml-4 border-l border-border pl-3" : ""}>
|
||||
<div className="flex gap-3 py-3">
|
||||
{/* Avatar */}
|
||||
<div className="shrink-0">
|
||||
{comment.userImage ? (
|
||||
<Image
|
||||
src={comment.userImage}
|
||||
alt={comment.userName || "User"}
|
||||
width={36}
|
||||
height={36}
|
||||
className="h-9 w-9 rounded-full object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
) : (
|
||||
<div className="h-9 w-9 rounded-full bg-text/10 flex items-center justify-center text-sm font-medium text-text/70">
|
||||
{getInitial(comment.userName)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-semibold text-text">
|
||||
{comment.userName || "Unknown"}
|
||||
</span>
|
||||
<span className="text-xs text-text/40">
|
||||
{formatDate(comment.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="mt-1">
|
||||
<TiptapRenderer content={JSON.stringify(comment.content)} />
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-4 mt-2">
|
||||
<button
|
||||
onClick={handleUpvote}
|
||||
className={`flex items-center gap-1 text-xs transition-colors cursor-pointer ${
|
||||
hasUpvoted
|
||||
? "text-primary"
|
||||
: "text-text/50 hover:text-text/80"
|
||||
}`}
|
||||
title="Upvote"
|
||||
>
|
||||
<ThumbsUpIcon className="h-3.5 w-3.5" />
|
||||
<span>{upvotes}</span>
|
||||
</button>
|
||||
|
||||
{session && depth < MAX_DEPTH && (
|
||||
<button
|
||||
onClick={() => setIsReplying((prev) => !prev)}
|
||||
className="flex items-center gap-1 text-xs text-text/50 hover:text-text/80 transition-colors cursor-pointer"
|
||||
title="Reply"
|
||||
>
|
||||
<ReplyIcon className="h-3.5 w-3.5" />
|
||||
<span>Reply</span>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{canModerate && (
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setMenuOpen((prev) => !prev)}
|
||||
className="flex items-center gap-1 text-xs text-text/50 hover:text-text/80 transition-colors cursor-pointer"
|
||||
title="More options"
|
||||
>
|
||||
<MoreHorizontalIcon className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
{menuOpen && (
|
||||
<>
|
||||
<div
|
||||
className="fixed inset-0 z-10"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
/>
|
||||
<div className="absolute right-0 z-20 mt-1 w-32 rounded-md border border-border bg-background shadow-lg overflow-hidden">
|
||||
<button
|
||||
onClick={() => {
|
||||
setMenuOpen(false)
|
||||
handleDelete()
|
||||
}}
|
||||
className="w-full flex items-center gap-2 px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
|
||||
>
|
||||
<TrashIcon className="h-3.5 w-3.5" />
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Reply form */}
|
||||
{isReplying && (
|
||||
<div className="mt-3 flex flex-col gap-2">
|
||||
<TiptapEditor
|
||||
placeholder="Write a reply..."
|
||||
onChange={(json) => setReplyContent(json)}
|
||||
className="min-h-[100px]"
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={handleReplySubmit}
|
||||
disabled={!replyContent || replySubmitting}
|
||||
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{replySubmitting ? "Posting..." : "Post Reply"}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsReplying(false)
|
||||
setReplyContent(null)
|
||||
}}
|
||||
className="px-3 py-1.5 rounded-md text-xs font-medium bg-text/5 text-text/70 hover:bg-text/10 transition-colors cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Load replies */}
|
||||
{depth < MAX_DEPTH && (
|
||||
<div className="mt-2">
|
||||
{replies.length > 0 && !showReplies && (
|
||||
<button
|
||||
onClick={() => setShowReplies(true)}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors cursor-pointer"
|
||||
>
|
||||
<ChevronDownIcon className="h-3.5 w-3.5" />
|
||||
Show {replies.length} replies
|
||||
</button>
|
||||
)}
|
||||
{showReplies && replies.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowReplies(false)}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors cursor-pointer"
|
||||
>
|
||||
<ChevronUpIcon className="h-3.5 w-3.5" />
|
||||
Hide replies
|
||||
</button>
|
||||
)}
|
||||
{replies.length === 0 && !showReplies && (
|
||||
<button
|
||||
onClick={handleLoadReplies}
|
||||
disabled={loadingReplies}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors cursor-pointer disabled:opacity-50"
|
||||
>
|
||||
{loadingReplies ? (
|
||||
"Loading..."
|
||||
) : (
|
||||
<>
|
||||
<ChevronDownIcon className="h-3.5 w-3.5" />
|
||||
Load replies
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Replies list */}
|
||||
{depth < MAX_DEPTH && showReplies && replies.length > 0 && (
|
||||
<div className="mt-2">
|
||||
{replies.map((reply) => (
|
||||
<CommentItem
|
||||
key={reply.id}
|
||||
comment={reply}
|
||||
depth={depth + 1}
|
||||
onReplyPosted={onReplyPosted}
|
||||
gameId={gameId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { MessageSquareIcon, Loader2 } from "lucide-react"
|
||||
import { useSession } from "@/lib/auth-client"
|
||||
import { TiptapEditor } from "@/components/tiptap-editor"
|
||||
import { CommentItem, CommentData } from "./comment-item"
|
||||
|
||||
interface CommentSectionProps {
|
||||
gameId: string
|
||||
initialCount: number
|
||||
}
|
||||
|
||||
interface CommentsApiResponse {
|
||||
data: CommentData[]
|
||||
total: number
|
||||
limit: number
|
||||
offset: number
|
||||
}
|
||||
|
||||
export function CommentSection({ gameId, initialCount }: CommentSectionProps) {
|
||||
const { data: session } = useSession()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const [comments, setComments] = useState<CommentData[]>([])
|
||||
const [total, setTotal] = useState(initialCount)
|
||||
const [offset, setOffset] = useState(0)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [commentContent, setCommentContent] = useState<Record<string, unknown> | null>(null)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const limit = 20
|
||||
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
async function fetchInitial() {
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/games/${gameId}/comments?limit=${limit}&offset=0`,
|
||||
)
|
||||
if (!cancelled && res.ok) {
|
||||
const json = (await res.json()) as CommentsApiResponse
|
||||
setComments(json.data)
|
||||
setTotal(json.total)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load comments:", err)
|
||||
} finally {
|
||||
if (!cancelled) setLoading(false)
|
||||
}
|
||||
}
|
||||
fetchInitial()
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [gameId])
|
||||
|
||||
const refreshComments = useCallback(async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/games/${gameId}/comments?limit=${limit}&offset=0`,
|
||||
)
|
||||
if (res.ok) {
|
||||
const json = (await res.json()) as CommentsApiResponse
|
||||
setComments(json.data)
|
||||
setTotal(json.total)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to refresh comments:", err)
|
||||
}
|
||||
}, [gameId])
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
if (!commentContent || !session) return
|
||||
setSubmitting(true)
|
||||
try {
|
||||
const res = await fetch(`/api/games/${gameId}/comments`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ content: commentContent }),
|
||||
})
|
||||
if (res.ok) {
|
||||
setCommentContent(null)
|
||||
await refreshComments()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to post comment:", err)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}, [commentContent, session, gameId, refreshComments])
|
||||
|
||||
const handleLoadMore = useCallback(async () => {
|
||||
const newOffset = offset + limit
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/games/${gameId}/comments?limit=${limit}&offset=${newOffset}`,
|
||||
)
|
||||
if (res.ok) {
|
||||
const json = (await res.json()) as CommentsApiResponse
|
||||
setComments((prev) => [...prev, ...json.data])
|
||||
setTotal(json.total)
|
||||
setOffset(newOffset)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load more comments:", err)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [offset, gameId])
|
||||
|
||||
const handleReplyPosted = useCallback(() => {
|
||||
refreshComments()
|
||||
}, [refreshComments])
|
||||
|
||||
const hasMore = comments.length < total
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquareIcon className="h-5 w-5 text-text/70" />
|
||||
<h2 className="text-lg font-semibold text-text">Comments</h2>
|
||||
<span className="text-sm text-text/50">({total})</span>
|
||||
</div>
|
||||
|
||||
{/* Compose — suppress until mounted to avoid hydration mismatch */}
|
||||
{mounted && session ? (
|
||||
<div className="flex flex-col gap-2">
|
||||
<TiptapEditor
|
||||
placeholder="Leave a comment..."
|
||||
onChange={(json) => setCommentContent(json)}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!commentContent || submitting}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
Posting...
|
||||
</>
|
||||
) : (
|
||||
"Post Comment"
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : mounted ? (
|
||||
<div className="p-4 rounded-lg border border-border bg-text/3 text-center">
|
||||
<p className="text-sm text-text/70">
|
||||
<Link
|
||||
href="/auth/sign-in"
|
||||
className="text-primary hover:text-primary/80 transition-colors"
|
||||
>
|
||||
Sign in
|
||||
</Link>{" "}
|
||||
to leave a comment
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[72px] rounded-lg border border-border bg-text/[0.02] animate-pulse" />
|
||||
)}
|
||||
|
||||
{/* Comment list */}
|
||||
<div className="flex flex-col">
|
||||
{loading && comments.length === 0 ? (
|
||||
<div className="py-8 text-center text-sm text-text/50">
|
||||
<Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />
|
||||
Loading comments...
|
||||
</div>
|
||||
) : comments.length === 0 ? (
|
||||
<div className="py-8 text-center text-sm text-text/50">
|
||||
No comments yet. Be the first to share your thoughts!
|
||||
</div>
|
||||
) : (
|
||||
comments.map((comment) => (
|
||||
<CommentItem
|
||||
key={comment.id}
|
||||
comment={comment}
|
||||
depth={0}
|
||||
onReplyPosted={handleReplyPosted}
|
||||
gameId={gameId}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Load more */}
|
||||
{hasMore && !loading && (
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={handleLoadMore}
|
||||
className="px-4 py-2 rounded-lg text-sm font-medium bg-text/5 text-text/70 hover:bg-text/10 transition-colors cursor-pointer"
|
||||
>
|
||||
Load more comments
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && comments.length > 0 && (
|
||||
<div className="py-4 text-center text-sm text-text/50">
|
||||
<Loader2 className="h-5 w-5 animate-spin mx-auto" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user