feat: add unpublished article notice and draft byline support

- Integrated UnpublishedArticleNotice component to display a notice for unpublished articles.
- Added ArticleDraftBylineLabel for drafts, enhancing user awareness of article status.
- Updated Bengali translations for unpublished articles and related messages to improve localization.

Author: kingRayhan

src/app/[username]/[articleHandle]/_components/UnpublishedArticleNotice.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import { useTranslation } from "@/i18n/use-translation";
+import { useSession } from "@/store/session.atom";
+import { FileWarning } from "lucide-react";
+
+type Props = {
+  publishedAt: Date | null | undefined;
+  authorId: string;
+};
+
+/** Inline label next to the byline date when the article has no `published_at`. */
+export function ArticleDraftBylineLabel() {
+  const { _t } = useTranslation();
+  return (
+    <span className="font-medium text-amber-700 dark:text-amber-400">
+      {_t("Draft")}
+    </span>
+  );
+}
+
+export function UnpublishedArticleNotice({ publishedAt, authorId }: Props) {
+  const { _t } = useTranslation();
+  const session = useSession();
+
+  if (publishedAt) return null;
+
+  const viewerId = session?.session?.user_id;
+  const isAuthor = Boolean(viewerId) && viewerId === authorId;
+
+  return (
+    <div
+      role="alert"
+      className="mb-4 flex flex-col gap-2 rounded-lg border border-amber-500/45 bg-amber-500/12 px-4 py-3 text-sm dark:border-amber-400/40 dark:bg-amber-400/12"
+    >
+      <div className="flex flex-wrap items-center gap-2">
+        <FileWarning
+          className="size-4 shrink-0 text-amber-800 dark:text-amber-300"
+          aria-hidden
+        />
+        <Badge
+          variant="outline"
+          className="border-amber-700/45 text-amber-950 dark:border-amber-300/50 dark:text-amber-50"
+        >
+          {_t("Draft")}
+        </Badge>
+        <span className="font-semibold text-amber-950 dark:text-amber-50">
+          {_t("Unpublished article")}
+        </span>
+      </div>
+      <p className="text-pretty pl-6 text-amber-950/85 dark:text-amber-50/90">
+        {isAuthor
+          ? _t(
+              "This draft is not listed anywhere on the site. Only people with the link can open it. Publish from the editor when you want it on your profile and in feeds.",
+            )
+          : _t(
+              "This article is unpublished. It is not listed on the site; only people with this link can view it.",
+            )}
+      </p>
+    </div>
+  );
+}

src/app/[username]/[articleHandle]/page.tsx

@@ -24,6 +24,10 @@ import type { Article, WithContext } from "schema-dts";
 import { eq } from "sqlkit";
 import ArticleSidebar from "./_components/ArticleSidebar";
 import EditArticleButton from "./_components/EditArticleButton";
+import {
+  ArticleDraftBylineLabel,
+  UnpublishedArticleNotice,
+} from "./_components/UnpublishedArticleNotice";
 
 interface ArticlePageProps {
   params: Promise<{
@@ -136,6 +140,10 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
       >
         {/* {!article && <div>Article not found</div>} */}
         <div className="px-4 my-2 md:m-0">
+          <UnpublishedArticleNotice
+            publishedAt={article.published_at}
+            authorId={article.author_id}
+          />
           {article?.cover_image && (
             <div className="rounded-sm w-full overflow-hidden">
               <AppImage
@@ -173,16 +181,20 @@ const Page: NextPage<ArticlePageProps> = async ({ params }) => {
                 {article?.user?.name}
               </Link>
               <div className="flex items-center text-xs text-muted-foreground">
-                <time dateTime={article?.published_at?.toString()}>
-                  {new Date(article?.published_at!).toLocaleDateString(
-                    "bn-BD",
-                    {
-                      month: "long",
-                      day: "numeric",
-                      year: "numeric",
-                    },
-                  )}
-                </time>
+                {article?.published_at ? (
+                  <time dateTime={article.published_at.toISOString()}>
+                    {new Date(article.published_at).toLocaleDateString(
+                      "bn-BD",
+                      {
+                        month: "long",
+                        day: "numeric",
+                        year: "numeric",
+                      },
+                    )}
+                  </time>
+                ) : (
+                  <ArticleDraftBylineLabel />
+                )}
                 <span className="mx-1.5">·</span>
                 <span>{readingTime(article?.body ?? "")} min read</span>
               </div>

src/i18n/bn.json

@@ -52,6 +52,9 @@
   "Total post comments": "সর্বমোট কমেন্ট",
   "Articles": "আর্টিক্যাল সমূহ",
   "Draft": "খসড়া",
+  "Unpublished article": "অপ্রকাশিত লেখা",
+  "This draft is not listed anywhere on the site. Only people with the link can open it. Publish from the editor when you want it on your profile and in feeds.": "এই খসড়া সাইটের কোথাও তালিকাভুক্ত নয়। লিংক যাদের আছে শুধু তারাই এটি খুলতে পারবে। প্রোফাইল ও ফিডতে দেখাতে চাইলে এডিটর থেকে প্রকাশ করুন।",
+  "This article is unpublished. It is not listed on the site; only people with this link can view it.": "এই লেখাটি অপ্রকাশিত। সাইটে এটি তালিকাভুক্ত নয়; যাদের এই লিংক আছে শুধু তারাই দেখতে পারবে।",
   "Edit": "সম্পাদনা",
   "Sure to unpublish": "অপ্রকাশিত করতে চাচ্ছেন?",
   "If you unpublish the article, this will be excluded in home page and search results, however direct links to the article will still work": "আপনি যদি আর্টিকেলটি আনপাব্লিশ করেন তবে এটি হোম পেজে এবং সার্চ ফলাফলে দেখাবে না, তবে আর্টিকেলটির সরাসরি লিঙ্ক সব সময় কাজ করবে",