From adb643eb44206e488a0853ad7a865224c805989a Mon Sep 17 00:00:00 2001
From: Andrii Blacksmith <coderpy4@proton.me>
Date: Tue, 9 Jul 2024 18:53:08 +0300
Subject: [PATCH 1/2] add to homepage comments their source

---
 components/comments/global-comment.tsx | 15 +++++++++++++++
 types/api.d.ts                         |  6 +++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/components/comments/global-comment.tsx b/components/comments/global-comment.tsx
index 9228f977..17f2ce35 100644
--- a/components/comments/global-comment.tsx
+++ b/components/comments/global-comment.tsx
@@ -2,6 +2,7 @@ import { formatDistance } from 'date-fns';
 import Link from 'next/link';
 import { FC } from 'react';
 import BxBxsUpvote from '~icons/bx/bxs-upvote';
+import MaterialSymbolsArticle from '~icons/material-symbols/article';
 
 import H5 from '@/components/typography/h5';
 import Small from '@/components/typography/small';
@@ -68,6 +69,20 @@ const GlobalComment: FC<Props> = ({ comment, href }) => {
                         {comment.text}
                     </MDViewer>
                 </Link>
+
+                <Link
+                    href={`/${comment.content_type === 'collection' ? 'collections' : comment.content_type}/${comment.preview.slug}`}
+                    className="flex items-center gap-1 text-xs font-medium text-primary hover:underline"
+                >
+                    <MaterialSymbolsArticle className="text-muted-foreground" />
+                    <p className="line-clamp-1">
+                        {comment.content_type === 'collection'
+                            ? `Колекція ${comment.preview.title}`
+                            : comment.content_type === 'edit'
+                              ? `Правка #${comment.preview.slug}`
+                              : comment.preview.title}
+                    </p>
+                </Link>
             </div>
         </div>
     );
diff --git a/types/api.d.ts b/types/api.d.ts
index 2dfd58d4..2a540519 100644
--- a/types/api.d.ts
+++ b/types/api.d.ts
@@ -408,7 +408,11 @@ declare global {
             is_editable: boolean;
             parent: string | null;
             content_type: API.ContentType;
-            preview: { slug: string; image?: string };
+            preview: {
+                title?: string;
+                slug: string;
+                image?: string;
+            };
         };
 
         type External = {

From f2f913f02afe1de29ec186160f87c1ad385a76bf Mon Sep 17 00:00:00 2001
From: olexh <typicaladmsky@gmail.com>
Date: Sun, 14 Jul 2024 15:54:23 +0300
Subject: [PATCH 2/2] refactor: improve links, remove redundant div container

---
 components/comments/global-comment.tsx | 117 ++++++++++++-------------
 1 file changed, 56 insertions(+), 61 deletions(-)

diff --git a/components/comments/global-comment.tsx b/components/comments/global-comment.tsx
index 17f2ce35..0cfea673 100644
--- a/components/comments/global-comment.tsx
+++ b/components/comments/global-comment.tsx
@@ -8,6 +8,8 @@ import H5 from '@/components/typography/h5';
 import Small from '@/components/typography/small';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 
+import { CONTENT_TYPE_LINKS } from '@/utils/constants';
+
 import MDViewer from '../markdown/viewer/MD-viewer';
 import { Label } from '../ui/label';
 
@@ -18,72 +20,65 @@ interface Props {
 
 const GlobalComment: FC<Props> = ({ comment, href }) => {
     return (
-        <div
-            className="flex w-full scroll-mt-20 flex-col gap-2"
-            id={comment.reference}
-        >
-            <div className="flex w-full flex-col items-start gap-2">
-                <div className="flex w-full gap-3">
-                    <Link href={`/u/${comment.author.username}`}>
-                        <Avatar className="w-10 rounded-md">
-                            <AvatarImage
-                                className="rounded-md"
-                                src={comment.author.avatar}
-                                alt="avatar"
-                            />
-                            <AvatarFallback className="rounded-md">
-                                {comment.author.username[0]}
-                            </AvatarFallback>
-                        </Avatar>
+        <div className="flex w-full flex-col items-start gap-4">
+            <div className="flex w-full gap-3">
+                <Link href={`/u/${comment.author.username}`}>
+                    <Avatar className="w-10 rounded-md">
+                        <AvatarImage
+                            className="rounded-md"
+                            src={comment.author.avatar}
+                            alt="avatar"
+                        />
+                        <AvatarFallback className="rounded-md">
+                            {comment.author.username[0]}
+                        </AvatarFallback>
+                    </Avatar>
+                </Link>
+                <div className="flex flex-1 flex-col justify-between">
+                    <Link
+                        href={`/u/${comment.author.username}`}
+                        className="w-fit"
+                    >
+                        <H5>{comment.author.username}</H5>
                     </Link>
-                    <div className="flex flex-1 flex-col justify-between">
-                        <Link
-                            href={`/u/${comment.author.username}`}
-                            className="w-fit"
-                        >
-                            <H5>{comment.author.username}</H5>
-                        </Link>
 
-                        <Small className="text-muted-foreground">
-                            {formatDistance(
-                                comment.created * 1000,
-                                Date.now(),
-                                { addSuffix: true },
-                            )}
-                        </Small>
-                    </div>
-                    {comment.vote_score > 0 && (
-                        <div className="flex flex-1 items-start justify-end">
-                            <div className="flex items-center gap-1">
-                                <BxBxsUpvote className="size-3 text-success" />
-                                <Label className="leading-none text-success">
-                                    {comment.vote_score}
-                                </Label>
-                            </div>
-                        </div>
-                    )}
+                    <Small className="text-muted-foreground">
+                        {formatDistance(comment.created * 1000, Date.now(), {
+                            addSuffix: true,
+                        })}
+                    </Small>
                 </div>
+                {comment.vote_score > 0 && (
+                    <div className="flex flex-1 items-start justify-end">
+                        <div className="flex items-center gap-1">
+                            <BxBxsUpvote className="size-3 text-success" />
+                            <Label className="leading-none text-success">
+                                {comment.vote_score}
+                            </Label>
+                        </div>
+                    </div>
+                )}
+            </div>
 
-                <Link href={href} className="hover:underline">
-                    <MDViewer className="line-clamp-2 text-sm">
-                        {comment.text}
-                    </MDViewer>
-                </Link>
+            <Link href={href} className="hover:underline">
+                <MDViewer className="line-clamp-2 text-sm">
+                    {comment.text}
+                </MDViewer>
+            </Link>
 
-                <Link
-                    href={`/${comment.content_type === 'collection' ? 'collections' : comment.content_type}/${comment.preview.slug}`}
-                    className="flex items-center gap-1 text-xs font-medium text-primary hover:underline"
-                >
-                    <MaterialSymbolsArticle className="text-muted-foreground" />
-                    <p className="line-clamp-1">
-                        {comment.content_type === 'collection'
-                            ? `Колекція ${comment.preview.title}`
-                            : comment.content_type === 'edit'
-                              ? `Правка #${comment.preview.slug}`
-                              : comment.preview.title}
-                    </p>
-                </Link>
-            </div>
+            <Link
+                href={`${CONTENT_TYPE_LINKS[comment.content_type]}/${comment.preview.slug}`}
+                className="flex items-center gap-1 text-primary hover:underline"
+            >
+                <MaterialSymbolsArticle className="text-muted-foreground" />
+                <Small className="line-clamp-1">
+                    {comment.content_type === 'collection'
+                        ? `Колекція ${comment.preview.title}`
+                        : comment.content_type === 'edit'
+                          ? `Правка #${comment.preview.slug}`
+                          : comment.preview.title}
+                </Small>
+            </Link>
         </div>
     );
 };