feat: comments
fix: use select instead of dropdown for filter on /market
This commit is contained in:
Face
parent
800b5d1a09
commit
bd05b269fe
22 changed files with 2715 additions and 97 deletions
261
website/src/lib/components/self/CommentSection.svelte
Normal file
261
website/src/lib/components/self/CommentSection.svelte
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Textarea } from '$lib/components/ui/textarea';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import * as Avatar from '$lib/components/ui/avatar';
|
||||
import * as HoverCard from '$lib/components/ui/hover-card';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
import { MessageCircle, Send, Loader2, Heart, CalendarDays } from 'lucide-svelte';
|
||||
import { USER_DATA } from '$lib/stores/user-data';
|
||||
import { toast } from 'svelte-sonner';
|
||||
import { goto } from '$app/navigation';
|
||||
import { formatTimeAgo, getPublicUrl } from '$lib/utils';
|
||||
import SignInConfirmDialog from '$lib/components/self/SignInConfirmDialog.svelte';
|
||||
|
||||
const { coinSymbol } = $props<{ coinSymbol: string }>();
|
||||
import type { Comment } from '$lib/types/comment';
|
||||
let comments = $state<Comment[]>([]);
|
||||
let newComment = $state('');
|
||||
let isSubmitting = $state(false);
|
||||
let isLoading = $state(true);
|
||||
let shouldSignIn = $state(false);
|
||||
|
||||
async function loadComments() {
|
||||
try {
|
||||
const response = await fetch(`/api/coin/${coinSymbol}/comments`);
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
comments = result.comments;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Failed to load comments:', e);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitComment() {
|
||||
if (!$USER_DATA) {
|
||||
shouldSignIn = true;
|
||||
return;
|
||||
}
|
||||
|
||||
if (!newComment.trim()) return;
|
||||
|
||||
isSubmitting = true;
|
||||
try {
|
||||
const response = await fetch(`/api/coin/${coinSymbol}/comments`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content: newComment.trim() })
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
comments = [result.comment, ...comments];
|
||||
newComment = '';
|
||||
} else {
|
||||
const error = await response.json();
|
||||
toast.error(error.message || 'Failed to post comment');
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error('Failed to post comment');
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
|
||||
e.preventDefault();
|
||||
submitComment();
|
||||
}
|
||||
}
|
||||
async function toggleLike(commentId: number) {
|
||||
if (!$USER_DATA) {
|
||||
goto('/');
|
||||
return;
|
||||
}
|
||||
|
||||
const commentIndex = comments.findIndex((c) => c.id === commentId);
|
||||
if (commentIndex === -1) return;
|
||||
|
||||
const comment = comments[commentIndex];
|
||||
const wasLiked = comment.isLikedByUser;
|
||||
|
||||
comments[commentIndex] = {
|
||||
...comment,
|
||||
isLikedByUser: !wasLiked,
|
||||
likesCount: wasLiked ? comment.likesCount - 1 : comment.likesCount + 1
|
||||
};
|
||||
|
||||
fetch(`/api/coin/${coinSymbol}/comments/${commentId}/like`, {
|
||||
method: wasLiked ? 'DELETE' : 'POST',
|
||||
headers: { 'Content-Type': 'application/json' }
|
||||
}).catch(() => {
|
||||
comments[commentIndex] = comment;
|
||||
});
|
||||
}
|
||||
|
||||
function handleLikeClick(commentId: number) {
|
||||
if (!$USER_DATA) {
|
||||
shouldSignIn = true;
|
||||
return;
|
||||
}
|
||||
toggleLike(commentId);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
loadComments();
|
||||
});
|
||||
</script>
|
||||
|
||||
<SignInConfirmDialog bind:open={shouldSignIn} />
|
||||
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title class="flex items-center gap-2">
|
||||
<MessageCircle class="h-5 w-5" />
|
||||
Comments ({comments.length})
|
||||
</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="space-y-4">
|
||||
<!-- Comment Form -->
|
||||
{#if $USER_DATA}
|
||||
<div class="space-y-3">
|
||||
<div class="relative">
|
||||
<Textarea
|
||||
bind:value={newComment}
|
||||
placeholder="Share your thoughts about this coin..."
|
||||
class="min-h-[80px] w-full break-words pb-8 pr-20"
|
||||
style="word-break: break-word; overflow-wrap: break-word;"
|
||||
maxlength={500}
|
||||
onkeydown={handleKeydown}
|
||||
/>
|
||||
<kbd
|
||||
class="bg-muted pointer-events-none absolute bottom-2 right-2 hidden h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-70 sm:flex"
|
||||
>
|
||||
<span class="text-xs">⌘</span>Enter
|
||||
</kbd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-muted-foreground text-xs">
|
||||
{newComment.length}/500 characters
|
||||
</span>
|
||||
<Button onclick={submitComment} disabled={!newComment.trim() || isSubmitting} size="sm">
|
||||
{#if isSubmitting}
|
||||
<Loader2 class="h-4 w-4 animate-spin" />
|
||||
Posting...
|
||||
{:else}
|
||||
<Send class="h-4 w-4" />
|
||||
Post
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="text-center">
|
||||
<p class="text-muted-foreground mb-3 text-sm">Sign in to join the discussion</p>
|
||||
<Button onclick={() => goto('/')} size="sm">Sign In</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Comments List -->
|
||||
{#if isLoading}
|
||||
<div class="py-8 text-center">
|
||||
<Loader2 class="mx-auto h-6 w-6 animate-spin" />
|
||||
<p class="text-muted-foreground mt-2 text-sm">Loading comments...</p>
|
||||
</div>
|
||||
{:else if comments.length === 0}
|
||||
<div class="py-8 text-center">
|
||||
<MessageCircle class="text-muted-foreground mx-auto h-12 w-12" />
|
||||
<p class="text-muted-foreground mt-2">
|
||||
No comments yet. Be the first to share your thoughts!
|
||||
</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-4">
|
||||
{#each comments as comment (comment.id)}
|
||||
<div class="border-border border-b pb-4 last:border-b-0">
|
||||
<div class="flex items-start gap-3">
|
||||
<button onclick={() => goto(`/user/${comment.userId}`)} class="cursor-pointer">
|
||||
<Avatar.Root class="h-8 w-8">
|
||||
<Avatar.Image src={getPublicUrl(comment.userImage)} alt={comment.userName} />
|
||||
<Avatar.Fallback>{comment.userName?.charAt(0) || '?'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</button>
|
||||
<div class="flex-1 space-y-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<HoverCard.Root>
|
||||
<HoverCard.Trigger
|
||||
class="cursor-pointer font-medium underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8"
|
||||
onclick={() => goto(`/user/${comment.userId}`)}
|
||||
>
|
||||
{comment.userName}
|
||||
</HoverCard.Trigger>
|
||||
<HoverCard.Content class="w-80" side="top" sideOffset={3}>
|
||||
<div class="flex justify-between space-x-4">
|
||||
<Avatar.Root class="h-14 w-14">
|
||||
<Avatar.Image
|
||||
src={getPublicUrl(comment.userImage)}
|
||||
alt={comment.userName}
|
||||
/>
|
||||
<Avatar.Fallback>{comment.userName?.charAt(0) || '?'}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div class="flex-1 space-y-1">
|
||||
<h4 class="text-sm font-semibold">{comment.userName}</h4>
|
||||
<p class="text-muted-foreground text-sm">@{comment.userUsername}</p>
|
||||
{#if comment.userBio}
|
||||
<p class="text-sm">{comment.userBio}</p>
|
||||
{/if}
|
||||
<div class="flex items-center pt-2">
|
||||
<CalendarDays class="mr-2 h-4 w-4 opacity-70" />
|
||||
<span class="text-muted-foreground text-xs">
|
||||
Joined {new Date(comment.userCreatedAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long'
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</HoverCard.Content>
|
||||
</HoverCard.Root>
|
||||
<button onclick={() => goto(`/user/${comment.userId}`)} class="cursor-pointer">
|
||||
<Badge variant="outline" class="text-xs">
|
||||
@{comment.userUsername}
|
||||
</Badge>
|
||||
</button>
|
||||
<span class="text-muted-foreground text-xs">
|
||||
{formatTimeAgo(comment.createdAt)}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
class="whitespace-pre-wrap break-words text-sm leading-relaxed"
|
||||
style="word-break: break-word; overflow-wrap: break-word;"
|
||||
>
|
||||
{comment.content}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onclick={() => handleLikeClick(comment.id)}
|
||||
class="flex h-auto items-center gap-1 p-2 {comment.isLikedByUser
|
||||
? 'text-red-500 hover:text-red-600'
|
||||
: 'text-muted-foreground hover:text-foreground'}"
|
||||
>
|
||||
<Heart class="h-4 w-4 {comment.isLikedByUser ? 'fill-current' : ''}" />
|
||||
{#if comment.likesCount > 0}
|
||||
<span class="text-xs">{comment.likesCount}</span>
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
34
website/src/lib/components/ui/select/index.ts
Normal file
34
website/src/lib/components/ui/select/index.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
|
||||
import Group from "./select-group.svelte";
|
||||
import Label from "./select-label.svelte";
|
||||
import Item from "./select-item.svelte";
|
||||
import Content from "./select-content.svelte";
|
||||
import Trigger from "./select-trigger.svelte";
|
||||
import Separator from "./select-separator.svelte";
|
||||
import ScrollDownButton from "./select-scroll-down-button.svelte";
|
||||
import ScrollUpButton from "./select-scroll-up-button.svelte";
|
||||
|
||||
const Root = SelectPrimitive.Root;
|
||||
|
||||
export {
|
||||
Root,
|
||||
Group,
|
||||
Label,
|
||||
Item,
|
||||
Content,
|
||||
Trigger,
|
||||
Separator,
|
||||
ScrollDownButton,
|
||||
ScrollUpButton,
|
||||
//
|
||||
Root as Select,
|
||||
Group as SelectGroup,
|
||||
Label as SelectLabel,
|
||||
Item as SelectItem,
|
||||
Content as SelectContent,
|
||||
Trigger as SelectTrigger,
|
||||
Separator as SelectSeparator,
|
||||
ScrollDownButton as SelectScrollDownButton,
|
||||
ScrollUpButton as SelectScrollUpButton,
|
||||
};
|
||||
40
website/src/lib/components/ui/select/select-content.svelte
Normal file
40
website/src/lib/components/ui/select/select-content.svelte
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import SelectScrollUpButton from "./select-scroll-up-button.svelte";
|
||||
import SelectScrollDownButton from "./select-scroll-down-button.svelte";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
sideOffset = 4,
|
||||
portalProps,
|
||||
children,
|
||||
...restProps
|
||||
}: WithoutChild<SelectPrimitive.ContentProps> & {
|
||||
portalProps?: SelectPrimitive.PortalProps;
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Portal {...portalProps}>
|
||||
<SelectPrimitive.Content
|
||||
bind:ref
|
||||
{sideOffset}
|
||||
data-slot="select-content"
|
||||
class={cn(
|
||||
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<SelectPrimitive.Viewport
|
||||
class={cn(
|
||||
"h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1"
|
||||
)}
|
||||
>
|
||||
{@render children?.()}
|
||||
</SelectPrimitive.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</SelectPrimitive.Content>
|
||||
</SelectPrimitive.Portal>
|
||||
7
website/src/lib/components/ui/select/select-group.svelte
Normal file
7
website/src/lib/components/ui/select/select-group.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
|
||||
let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Group data-slot="select-group" {...restProps} />
|
||||
38
website/src/lib/components/ui/select/select-item.svelte
Normal file
38
website/src/lib/components/ui/select/select-item.svelte
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<script lang="ts">
|
||||
import CheckIcon from "@lucide/svelte/icons/check";
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
value,
|
||||
label,
|
||||
children: childrenProp,
|
||||
...restProps
|
||||
}: WithoutChild<SelectPrimitive.ItemProps> = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Item
|
||||
bind:ref
|
||||
{value}
|
||||
data-slot="select-item"
|
||||
class={cn(
|
||||
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{#snippet children({ selected, highlighted })}
|
||||
<span class="absolute right-2 flex size-3.5 items-center justify-center">
|
||||
{#if selected}
|
||||
<CheckIcon class="size-4" />
|
||||
{/if}
|
||||
</span>
|
||||
{#if childrenProp}
|
||||
{@render childrenProp({ selected, highlighted })}
|
||||
{:else}
|
||||
{label || value}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</SelectPrimitive.Item>
|
||||
20
website/src/lib/components/ui/select/select-label.svelte
Normal file
20
website/src/lib/components/ui/select/select-label.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import { cn, type WithElementRef } from "$lib/utils.js";
|
||||
import type { HTMLAttributes } from "svelte/elements";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
...restProps
|
||||
}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={ref}
|
||||
data-slot="select-label"
|
||||
class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.ScrollDownButton
|
||||
bind:ref
|
||||
data-slot="select-scroll-down-button"
|
||||
class={cn("flex cursor-default items-center justify-center py-1", className)}
|
||||
{...restProps}
|
||||
>
|
||||
<ChevronDownIcon class="size-4" />
|
||||
</SelectPrimitive.ScrollDownButton>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<script lang="ts">
|
||||
import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.ScrollUpButton
|
||||
bind:ref
|
||||
data-slot="select-scroll-up-button"
|
||||
class={cn("flex cursor-default items-center justify-center py-1", className)}
|
||||
{...restProps}
|
||||
>
|
||||
<ChevronUpIcon class="size-4" />
|
||||
</SelectPrimitive.ScrollUpButton>
|
||||
18
website/src/lib/components/ui/select/select-separator.svelte
Normal file
18
website/src/lib/components/ui/select/select-separator.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<script lang="ts">
|
||||
import type { Separator as SeparatorPrimitive } from "bits-ui";
|
||||
import { Separator } from "$lib/components/ui/separator/index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
...restProps
|
||||
}: SeparatorPrimitive.RootProps = $props();
|
||||
</script>
|
||||
|
||||
<Separator
|
||||
bind:ref
|
||||
data-slot="select-separator"
|
||||
class={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
|
||||
{...restProps}
|
||||
/>
|
||||
29
website/src/lib/components/ui/select/select-trigger.svelte
Normal file
29
website/src/lib/components/ui/select/select-trigger.svelte
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<script lang="ts">
|
||||
import { Select as SelectPrimitive } from "bits-ui";
|
||||
import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
|
||||
import { cn, type WithoutChild } from "$lib/utils.js";
|
||||
|
||||
let {
|
||||
ref = $bindable(null),
|
||||
class: className,
|
||||
children,
|
||||
size = "default",
|
||||
...restProps
|
||||
}: WithoutChild<SelectPrimitive.TriggerProps> & {
|
||||
size?: "sm" | "default";
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<SelectPrimitive.Trigger
|
||||
bind:ref
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
class={cn(
|
||||
"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
{...restProps}
|
||||
>
|
||||
{@render children?.()}
|
||||
<ChevronDownIcon class="size-4 opacity-50" />
|
||||
</SelectPrimitive.Trigger>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { pgTable, text, timestamp, boolean, decimal, serial, varchar, integer, primaryKey, pgEnum } from "drizzle-orm/pg-core";
|
||||
import { pgTable, text, timestamp, boolean, decimal, serial, varchar, integer, primaryKey, pgEnum, index } from "drizzle-orm/pg-core";
|
||||
|
||||
export const transactionTypeEnum = pgEnum('transaction_type', ['BUY', 'SELL']);
|
||||
|
||||
|
|
@ -106,3 +106,29 @@ export const priceHistory = pgTable("price_history", {
|
|||
price: decimal("price", { precision: 20, scale: 8 }).notNull(),
|
||||
timestamp: timestamp("timestamp", { withTimezone: true }).notNull().defaultNow(),
|
||||
});
|
||||
|
||||
export const comment = pgTable("comment", {
|
||||
id: serial("id").primaryKey(),
|
||||
userId: integer("user_id").notNull().references(() => user.id, { onDelete: "cascade" }),
|
||||
coinId: integer("coin_id").notNull().references(() => coin.id, { onDelete: "cascade" }),
|
||||
content: varchar("content", { length: 500 }).notNull(),
|
||||
likesCount: integer("likes_count").notNull().default(0),
|
||||
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
|
||||
updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
|
||||
isDeleted: boolean("is_deleted").default(false).notNull(),
|
||||
}, (table) => {
|
||||
return {
|
||||
userIdIdx: index("comment_user_id_idx").on(table.userId),
|
||||
coinIdIdx: index("comment_coin_id_idx").on(table.coinId),
|
||||
};
|
||||
});
|
||||
|
||||
export const commentLike = pgTable("comment_like", {
|
||||
userId: integer("user_id").notNull().references(() => user.id, { onDelete: "cascade" }),
|
||||
commentId: integer("comment_id").notNull().references(() => comment.id, { onDelete: "cascade" }),
|
||||
createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
|
||||
}, (table) => {
|
||||
return {
|
||||
pk: primaryKey({ columns: [table.userId, table.commentId] }),
|
||||
};
|
||||
});
|
||||
|
|
|
|||
21
website/src/lib/types/comment.ts
Normal file
21
website/src/lib/types/comment.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
export interface Comment {
|
||||
id: number;
|
||||
content: string;
|
||||
likesCount: number;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
userId: number;
|
||||
userName: string;
|
||||
userUsername: string;
|
||||
userImage: string | null;
|
||||
isLikedByUser: boolean;
|
||||
|
||||
userBio: string | null;
|
||||
userCreatedAt: string;
|
||||
}
|
||||
|
||||
export interface CommentLike {
|
||||
userId: number;
|
||||
commentId: number;
|
||||
createdAt: string;
|
||||
}
|
||||
|
|
@ -93,7 +93,7 @@ export function formatRelativeTime(timestamp: string | Date): string {
|
|||
|
||||
if (seconds < 60) return `${seconds}s`;
|
||||
if (minutes < 60) return `${minutes}m`;
|
||||
|
||||
|
||||
if (hours < 24) {
|
||||
const extraMinutes = minutes % 60;
|
||||
return extraMinutes === 0 ? `${hours}hr` : `${hours}hr ${extraMinutes}m`;
|
||||
|
|
@ -125,4 +125,18 @@ export function formatRelativeTime(timestamp: string | Date): string {
|
|||
return remainingMonths === 0 ? `${years}y` : `${years}y ${remainingMonths}m`;
|
||||
}
|
||||
|
||||
export function formatTimeAgo(date: string) {
|
||||
const now = new Date();
|
||||
const commentDate = new Date(date);
|
||||
const diffMs = now.getTime() - commentDate.getTime();
|
||||
const diffMins = Math.floor(diffMs / (1000 * 60));
|
||||
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
||||
|
||||
if (diffMins < 1) return 'Just now';
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
return `${diffDays}d ago`;
|
||||
}
|
||||
|
||||
export const formatMarketCap = formatValue;
|
||||
|
|
|
|||
125
website/src/routes/api/coin/[coinSymbol]/comments/+server.ts
Normal file
125
website/src/routes/api/coin/[coinSymbol]/comments/+server.ts
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
import { auth } from '$lib/auth';
|
||||
import { error, json } from '@sveltejs/kit';
|
||||
import { db } from '$lib/server/db';
|
||||
import { comment, coin, user, commentLike } from '$lib/server/db/schema';
|
||||
import { eq, and, desc, sql } from 'drizzle-orm';
|
||||
|
||||
export async function GET({ params, request }) {
|
||||
const session = await auth.api.getSession({
|
||||
headers: request.headers
|
||||
});
|
||||
|
||||
const { coinSymbol } = params;
|
||||
const normalizedSymbol = coinSymbol.toUpperCase();
|
||||
|
||||
try {
|
||||
const [coinData] = await db
|
||||
.select({ id: coin.id })
|
||||
.from(coin)
|
||||
.where(eq(coin.symbol, normalizedSymbol))
|
||||
.limit(1);
|
||||
|
||||
if (!coinData) {
|
||||
return json({ message: 'Coin not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
const commentsQuery = db
|
||||
.select({
|
||||
id: comment.id,
|
||||
content: comment.content,
|
||||
likesCount: comment.likesCount,
|
||||
createdAt: comment.createdAt,
|
||||
updatedAt: comment.updatedAt,
|
||||
userId: user.id,
|
||||
userName: user.name,
|
||||
userUsername: user.username,
|
||||
userImage: user.image,
|
||||
userBio: user.bio,
|
||||
userCreatedAt: user.createdAt,
|
||||
isLikedByUser: session?.user ?
|
||||
sql<boolean>`EXISTS(SELECT 1 FROM ${commentLike} WHERE ${commentLike.userId} = ${session.user.id} AND ${commentLike.commentId} = ${comment.id})` :
|
||||
sql<boolean>`FALSE`
|
||||
})
|
||||
.from(comment)
|
||||
.innerJoin(user, eq(comment.userId, user.id))
|
||||
.where(and(eq(comment.coinId, coinData.id), eq(comment.isDeleted, false)))
|
||||
.orderBy(desc(comment.createdAt));
|
||||
|
||||
const comments = await commentsQuery;
|
||||
|
||||
return json({ comments });
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch comments:', err);
|
||||
return json({ message: 'Internal server error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST({ request, params }) {
|
||||
const session = await auth.api.getSession({
|
||||
headers: request.headers
|
||||
});
|
||||
|
||||
if (!session?.user) {
|
||||
throw error(401, 'Not authenticated');
|
||||
}
|
||||
|
||||
const { coinSymbol } = params;
|
||||
const { content } = await request.json();
|
||||
|
||||
if (!content || content.trim().length === 0) {
|
||||
throw error(400, 'Comment content is required');
|
||||
}
|
||||
|
||||
if (content.length > 500) {
|
||||
throw error(400, 'Comment must be 500 characters or less');
|
||||
}
|
||||
|
||||
const normalizedSymbol = coinSymbol.toUpperCase();
|
||||
const userId = Number(session.user.id);
|
||||
|
||||
try {
|
||||
const [coinData] = await db
|
||||
.select({ id: coin.id })
|
||||
.from(coin)
|
||||
.where(eq(coin.symbol, normalizedSymbol))
|
||||
.limit(1);
|
||||
|
||||
if (!coinData) {
|
||||
throw error(404, 'Coin not found');
|
||||
}
|
||||
|
||||
const [newComment] = await db
|
||||
.insert(comment)
|
||||
.values({
|
||||
userId,
|
||||
coinId: coinData.id,
|
||||
content: content.trim()
|
||||
})
|
||||
.returning();
|
||||
|
||||
const [commentWithUser] = await db
|
||||
.select({
|
||||
id: comment.id,
|
||||
content: comment.content,
|
||||
likesCount: comment.likesCount,
|
||||
createdAt: comment.createdAt,
|
||||
updatedAt: comment.updatedAt,
|
||||
userId: comment.userId,
|
||||
userName: user.name,
|
||||
userUsername: user.username,
|
||||
userImage: user.image,
|
||||
userBio: user.bio,
|
||||
userCreatedAt: user.createdAt,
|
||||
isLikedByUser: sql<boolean>`FALSE`
|
||||
})
|
||||
.from(comment)
|
||||
.innerJoin(user, eq(comment.userId, user.id))
|
||||
.where(eq(comment.id, newComment.id))
|
||||
.limit(1);
|
||||
|
||||
return json({ comment: commentWithUser });
|
||||
} catch (e) {
|
||||
console.error('Error creating comment:', e);
|
||||
throw error(500, 'Failed to create comment');
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
import { error, json } from '@sveltejs/kit';
|
||||
import { db } from '$lib/server/db';
|
||||
import { comment, commentLike, coin } from '$lib/server/db/schema';
|
||||
import { eq, and, sql } from 'drizzle-orm';
|
||||
import type { RequestHandler } from './$types';
|
||||
import { auth } from '$lib/auth';
|
||||
|
||||
export const POST: RequestHandler = async ({ request, params }) => {
|
||||
const session = await auth.api.getSession({
|
||||
headers: request.headers
|
||||
});
|
||||
|
||||
if (!session?.user) {
|
||||
return json({ message: 'Not authenticated' }, { status: 401 });
|
||||
}
|
||||
|
||||
const commentId = parseInt(params.id);
|
||||
const { coinSymbol } = params;
|
||||
const userId = Number(session.user.id);
|
||||
|
||||
if (isNaN(commentId)) {
|
||||
return json({ message: 'Invalid comment ID' }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
// Verify the comment exists and belongs to the specified coin
|
||||
const [commentData] = await db
|
||||
.select()
|
||||
.from(comment)
|
||||
.innerJoin(coin, eq(comment.coinId, coin.id))
|
||||
.where(and(eq(comment.id, commentId), eq(coin.symbol, coinSymbol)));
|
||||
|
||||
if (!commentData) {
|
||||
return json({ message: 'Comment not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Check if user already liked this comment
|
||||
const [existingLike] = await db
|
||||
.select()
|
||||
.from(commentLike)
|
||||
.where(and(eq(commentLike.userId, userId), eq(commentLike.commentId, commentId)));
|
||||
|
||||
if (existingLike) {
|
||||
return json({ message: 'Comment already liked' }, { status: 400 });
|
||||
}
|
||||
|
||||
// Add like and increment count
|
||||
await db.transaction(async (tx) => {
|
||||
await tx.insert(commentLike).values({ userId, commentId });
|
||||
|
||||
await tx
|
||||
.update(comment)
|
||||
.set({ likesCount: sql`${comment.likesCount} + 1` })
|
||||
.where(eq(comment.id, commentId));
|
||||
});
|
||||
|
||||
return json({ success: true });
|
||||
} catch (error) {
|
||||
console.error('Failed to like comment:', error);
|
||||
return json({ message: 'Internal server error' }, { status: 500 });
|
||||
}
|
||||
};
|
||||
|
||||
export const DELETE: RequestHandler = async ({ request, params }) => {
|
||||
const session = await auth.api.getSession({
|
||||
headers: request.headers
|
||||
});
|
||||
|
||||
if (!session?.user) {
|
||||
throw error(401, 'Not authenticated');
|
||||
}
|
||||
|
||||
const commentId = parseInt(params.id);
|
||||
const { coinSymbol } = params;
|
||||
const userId = Number(session.user.id);
|
||||
|
||||
if (isNaN(commentId)) {
|
||||
return json({ message: 'Invalid comment ID' }, { status: 400 });
|
||||
}
|
||||
|
||||
try {
|
||||
// Verify the comment exists and belongs to the specified coin
|
||||
const [commentData] = await db
|
||||
.select()
|
||||
.from(comment)
|
||||
.innerJoin(coin, eq(comment.coinId, coin.id))
|
||||
.where(and(eq(comment.id, commentId), eq(coin.symbol, coinSymbol)));
|
||||
|
||||
if (!commentData) {
|
||||
return json({ message: 'Comment not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Check if user has liked this comment
|
||||
const [existingLike] = await db
|
||||
.select()
|
||||
.from(commentLike)
|
||||
.where(and(eq(commentLike.userId, userId), eq(commentLike.commentId, commentId)));
|
||||
|
||||
if (!existingLike) {
|
||||
return json({ message: 'Comment not liked' }, { status: 400 });
|
||||
}
|
||||
|
||||
// Remove like and decrement count
|
||||
await db.transaction(async (tx) => {
|
||||
await tx
|
||||
.delete(commentLike)
|
||||
.where(and(eq(commentLike.userId, userId), eq(commentLike.commentId, commentId)));
|
||||
|
||||
await tx
|
||||
.update(comment)
|
||||
.set({ likesCount: sql`GREATEST(0, ${comment.likesCount} - 1)` })
|
||||
.where(eq(comment.id, commentId));
|
||||
});
|
||||
|
||||
return json({ success: true });
|
||||
} catch (error) {
|
||||
console.error('Failed to unlike comment:', error);
|
||||
return json({ message: 'Internal server error' }, { status: 500 });
|
||||
}
|
||||
};
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
import * as Avatar from '$lib/components/ui/avatar';
|
||||
import * as HoverCard from '$lib/components/ui/hover-card';
|
||||
import TradeModal from '$lib/components/self/TradeModal.svelte';
|
||||
import CommentSection from '$lib/components/self/CommentSection.svelte';
|
||||
import {
|
||||
TrendingUp,
|
||||
TrendingDown,
|
||||
|
|
@ -361,7 +362,7 @@
|
|||
<div class="flex items-center pt-2">
|
||||
<CalendarDays class="mr-2 h-4 w-4 opacity-70" />
|
||||
<span class="text-muted-foreground text-xs">
|
||||
Joined {new Date(coin.createdAt).toLocaleDateString('en-US', {
|
||||
Joined {new Date(coin.creatorCreatedAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long'
|
||||
})}
|
||||
|
|
@ -565,6 +566,9 @@
|
|||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
|
||||
<!-- Comments Section -->
|
||||
<CommentSection {coinSymbol} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
import * as Card from '$lib/components/ui/card';
|
||||
import * as Popover from '$lib/components/ui/popover';
|
||||
import * as Pagination from '$lib/components/ui/pagination';
|
||||
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
import { Input } from '$lib/components/ui/input';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { Badge } from '$lib/components/ui/badge';
|
||||
|
|
@ -18,11 +18,11 @@
|
|||
SlidersHorizontal,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
DollarSign,
|
||||
TrendingUp,
|
||||
ArrowUpDown
|
||||
} from 'lucide-svelte'; import { formatPrice, formatMarketCap, debounce, formatRelativeTime } from '$lib/utils';
|
||||
} from 'lucide-svelte';
|
||||
import { formatPrice, formatMarketCap, debounce, formatRelativeTime } from '$lib/utils';
|
||||
import { MediaQuery } from 'svelte/reactivity';
|
||||
import type { CoinData, FilterOption, VolatilityBadge, MarketResponse } from '$lib/types/market';
|
||||
|
||||
|
|
@ -165,8 +165,19 @@
|
|||
fetchMarketData();
|
||||
}
|
||||
|
||||
function handleSortOrderChange(newSortOrder: string) {
|
||||
sortOrder = newSortOrder;
|
||||
function handleSortOrderChange() {
|
||||
currentPage = 1;
|
||||
updateURL();
|
||||
fetchMarketData();
|
||||
}
|
||||
|
||||
function handlePriceFilterChange() {
|
||||
currentPage = 1;
|
||||
updateURL();
|
||||
fetchMarketData();
|
||||
}
|
||||
|
||||
function handleChangeFilterChange() {
|
||||
currentPage = 1;
|
||||
updateURL();
|
||||
fetchMarketData();
|
||||
|
|
@ -199,20 +210,6 @@
|
|||
return null;
|
||||
}
|
||||
|
||||
function handlePriceFilterChange(value: string) {
|
||||
priceFilter = value;
|
||||
currentPage = 1;
|
||||
updateURL();
|
||||
fetchMarketData();
|
||||
}
|
||||
|
||||
function handleChangeFilterChange(value: string) {
|
||||
changeFilter = value;
|
||||
currentPage = 1;
|
||||
updateURL();
|
||||
fetchMarketData();
|
||||
}
|
||||
|
||||
let hasActiveFilters = $derived(
|
||||
searchQuery !== '' ||
|
||||
priceFilter !== 'all' ||
|
||||
|
|
@ -316,89 +313,68 @@
|
|||
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium">Sort Order</Label>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger
|
||||
class="border-input bg-background ring-offset-background focus-visible:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<ArrowUpDown class="h-4 w-4" />
|
||||
<span>{currentSortOrderLabel}</span>
|
||||
</div>
|
||||
<ChevronDown class="h-4 w-4 opacity-50" />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56">
|
||||
{#each sortOrderOptions as option}
|
||||
<DropdownMenu.Item
|
||||
onclick={() => handleSortOrderChange(option.value)}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<ArrowUpDown class="h-4 w-4" />
|
||||
<span>{option.label}</span>
|
||||
{#if sortOrder === option.value}
|
||||
<div class="bg-primary ml-auto h-2 w-2 rounded-full"></div>
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
<Select.Root
|
||||
type="single"
|
||||
bind:value={sortOrder}
|
||||
onValueChange={handleSortOrderChange}
|
||||
>
|
||||
<Select.Trigger class="w-full">
|
||||
{currentSortOrderLabel}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Group>
|
||||
{#each sortOrderOptions as option}
|
||||
<Select.Item value={option.value} label={option.label}>
|
||||
{option.label}
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Group>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium">Price Range</Label>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger
|
||||
class="border-input bg-background ring-offset-background focus-visible:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<DollarSign class="h-4 w-4" />
|
||||
<span>{currentPriceFilterLabel}</span>
|
||||
</div>
|
||||
<ChevronDown class="h-4 w-4 opacity-50" />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56">
|
||||
{#each priceFilterOptions as option}
|
||||
<DropdownMenu.Item
|
||||
onclick={() => handlePriceFilterChange(option.value)}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<DollarSign class="h-4 w-4" />
|
||||
<span>{option.label}</span>
|
||||
{#if priceFilter === option.value}
|
||||
<div class="bg-primary ml-auto h-2 w-2 rounded-full"></div>
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
<Select.Root
|
||||
type="single"
|
||||
bind:value={priceFilter}
|
||||
onValueChange={handlePriceFilterChange}
|
||||
>
|
||||
<Select.Trigger class="w-full">
|
||||
{currentPriceFilterLabel}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Group>
|
||||
{#each priceFilterOptions as option}
|
||||
<Select.Item value={option.value} label={option.label}>
|
||||
{option.label}
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Group>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium">24h Change</Label>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger
|
||||
class="border-input bg-background ring-offset-background focus-visible:ring-ring flex h-9 w-full items-center justify-between rounded-md border px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<TrendingUp class="h-4 w-4" />
|
||||
<span>{currentChangeFilterLabel}</span>
|
||||
</div>
|
||||
<ChevronDown class="h-4 w-4 opacity-50" />
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-56">
|
||||
{#each changeFilterOptions as option}
|
||||
<DropdownMenu.Item
|
||||
onclick={() => handleChangeFilterChange(option.value)}
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<TrendingUp class="h-4 w-4" />
|
||||
<span>{option.label}</span>
|
||||
{#if changeFilter === option.value}
|
||||
<div class="bg-primary ml-auto h-2 w-2 rounded-full"></div>
|
||||
{/if}
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
<Select.Root
|
||||
type="single"
|
||||
bind:value={changeFilter}
|
||||
onValueChange={handleChangeFilterChange}
|
||||
>
|
||||
<Select.Trigger class="w-full">
|
||||
{currentChangeFilterLabel}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
<Select.Group>
|
||||
{#each changeFilterOptions as option}
|
||||
<Select.Item value={option.value} label={option.label}>
|
||||
{option.label}
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Group>
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 pt-2">
|
||||
|
|
|
|||
Reference in a new issue