From ce9ab89c1c251ac2a3c8fa3a071407e1b3678966 Mon Sep 17 00:00:00 2001
From: web <web@ppanel.dev>
Date: Tue, 23 Sep 2025 05:46:21 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Update=20Empty=20componen?=
 =?UTF-8?q?t=20to=20support=20border=20prop=20and=20adjust=20usage=20in=20?=
 =?UTF-8?q?various=20pages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../user/app/(main)/(user)/announcement/page.tsx | 16 +---------------
 .../(main)/(user)/document/document-button.tsx   |  2 +-
 apps/user/app/(main)/(user)/document/page.tsx    |  9 ++++++++-
 .../(main)/(user)/document/tutorial-button.tsx   |  2 +-
 apps/user/components/empty.tsx                   |  7 +++++--
 packages/ui/src/custom-components/empty.tsx      | 12 ++++++++++--
 6 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/apps/user/app/(main)/(user)/announcement/page.tsx b/apps/user/app/(main)/(user)/announcement/page.tsx
index 38d9ee1..eeb711c 100644
--- a/apps/user/app/(main)/(user)/announcement/page.tsx
+++ b/apps/user/app/(main)/(user)/announcement/page.tsx
@@ -3,9 +3,6 @@
 import { Empty } from '@/components/empty';
 import { queryAnnouncement } from '@/services/user/announcement';
 import { useQuery } from '@tanstack/react-query';
-import { Timeline } from '@workspace/ui/components/timeline';
-import { Markdown } from '@workspace/ui/custom-components/markdown';
-import { formatDate } from '@workspace/ui/utils';
 
 export default function Page() {
   const { data } = useQuery({
@@ -20,16 +17,5 @@ export default function Page() {
       return data.data?.announcements || [];
     },
   });
-  return data && data.length > 0 ? (
-    <Timeline
-      data={
-        data.map((item) => ({
-          title: String(formatDate(item.created_at, false)),
-          content: <Markdown>{`### ${item.title}\n${item.content}`}</Markdown>,
-        })) || []
-      }
-    />
-  ) : (
-    <Empty />
-  );
+  return data && data.length > 0 ? <Empty border /> : <Empty border />;
 }
diff --git a/apps/user/app/(main)/(user)/document/document-button.tsx b/apps/user/app/(main)/(user)/document/document-button.tsx
index 26d80fa..659e79e 100644
--- a/apps/user/app/(main)/(user)/document/document-button.tsx
+++ b/apps/user/app/(main)/(user)/document/document-button.tsx
@@ -100,7 +100,7 @@ export function DocumentButton({ items }: { items: API.Document[] }) {
             layoutId={`card-${item.id}-${id}`}
             key={`card-${item.id}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.id}-${id}`}>
diff --git a/apps/user/app/(main)/(user)/document/page.tsx b/apps/user/app/(main)/(user)/document/page.tsx
index e34404e..99b0596 100644
--- a/apps/user/app/(main)/(user)/document/page.tsx
+++ b/apps/user/app/(main)/(user)/document/page.tsx
@@ -35,7 +35,14 @@ export default function Page() {
     },
     enabled: NEXT_PUBLIC_HIDDEN_TUTORIAL_DOCUMENT !== 'true',
   });
-  if (!DocumentList && !TutorialList) return <Empty />;
+
+  if (
+    (!DocumentList || DocumentList.length === 0) &&
+    (!TutorialList || TutorialList.length === 0)
+  ) {
+    return <Empty border />;
+  }
+
   return (
     <div className='space-y-4'>
       {DocumentList?.length > 0 && (
diff --git a/apps/user/app/(main)/(user)/document/tutorial-button.tsx b/apps/user/app/(main)/(user)/document/tutorial-button.tsx
index 8e667f3..6e9366a 100644
--- a/apps/user/app/(main)/(user)/document/tutorial-button.tsx
+++ b/apps/user/app/(main)/(user)/document/tutorial-button.tsx
@@ -121,7 +121,7 @@ export function TutorialButton({ items }: { items: Item[] }) {
             layoutId={`card-${item.title}-${id}`}
             key={`card-${item.title}-${id}`}
             onClick={() => setActive(item)}
-            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded border p-4'
+            className='bg-background hover:bg-accent flex cursor-pointer items-center justify-between rounded-xl border p-4'
           >
             <div className='flex flex-row items-center gap-4'>
               <motion.div layoutId={`image-${item.title}-${id}`}>
diff --git a/apps/user/components/empty.tsx b/apps/user/components/empty.tsx
index 6cf250f..0c18b20 100644
--- a/apps/user/components/empty.tsx
+++ b/apps/user/components/empty.tsx
@@ -4,7 +4,10 @@ import { default as _Empty } from '@workspace/ui/custom-components/empty';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 
-export function Empty() {
+interface EmptyProps {
+  border?: boolean;
+}
+export function Empty({ border }: EmptyProps) {
   const t = useTranslations('common');
 
   const [description, setDescription] = useState('');
@@ -14,5 +17,5 @@ export function Empty() {
     setDescription(t(`empty.${random}`));
   }, [t]);
 
-  return <_Empty description={description} />;
+  return <_Empty description={description} border={border} />;
 }
diff --git a/packages/ui/src/custom-components/empty.tsx b/packages/ui/src/custom-components/empty.tsx
index 83c9700..71d4022 100644
--- a/packages/ui/src/custom-components/empty.tsx
+++ b/packages/ui/src/custom-components/empty.tsx
@@ -1,6 +1,14 @@
-export default function Empty({ description }: { description?: React.ReactNode }) {
+export default function Empty({
+  description,
+  border,
+}: {
+  description?: React.ReactNode;
+  border?: boolean;
+}) {
   return (
-    <div className='flex flex-col items-center justify-center p-6 py-16'>
+    <div
+      className={`flex flex-col items-center justify-center p-6 py-16 ${border ? 'rounded-xl border' : ''}`}
+    >
       <svg
         width='64'
         height='41'