From 406df07cbc5abdfda507d882700dadbef32fbf2e Mon Sep 17 00:00:00 2001
From: oiov <stacystayfine718@gmail.com>
Date: Sat, 6 Apr 2024 20:58:03 +0800
Subject: [PATCH] upd inbox msg style

---
 apps/remix/app/components/MailList.tsx | 15 ++++++++++-----
 packages/database/dao.ts               | 13 +++++++++++--
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/remix/app/components/MailList.tsx b/apps/remix/app/components/MailList.tsx
index e4660a0..6d57523 100644
--- a/apps/remix/app/components/MailList.tsx
+++ b/apps/remix/app/components/MailList.tsx
@@ -69,19 +69,24 @@ export function MailList(props: { mails: Email[] }) {
           <MailIcon className="size-6" />
           <div className="flex items-center font-bold text-lg font-mono">
             {t("INBOX")}
-            <span className="ml-1 text-base">
-              {data.length > 0 && <span>({data.length})</span>}
-            </span>
+            {data.length > 0 && (
+              <span className="inline-flex items-center justify-center w-[22px] h-[22px] ms-2 text-xs font-semibold text-white bg-zinc-600 rounded-full">
+                {data.length}
+              </span>
+            )}
           </div>
           <button
             className="rounded ml-auto p-1"
+            title="refresh"
             onClick={() =>
               queryClient.invalidateQueries({
                 queryKey: ["mails"],
               })
             }>
-            {data.length === 0 && <Lock className="size-6 " />}
-            {data.length > 0 && <Refresh className={`size-6 animate-spin`} />}
+            {data.length === 0 && <Lock className="size-6" />}
+            {data.length > 0 && (
+              <Refresh className="size-6 animate-spin hover:opacity-50 transition-all duration-300" />
+            )}
           </button>
         </div>
 
diff --git a/packages/database/dao.ts b/packages/database/dao.ts
index 42cf1dc..f9efbdd 100644
--- a/packages/database/dao.ts
+++ b/packages/database/dao.ts
@@ -1,4 +1,4 @@
-import { desc, eq, and } from "drizzle-orm";
+import { count, desc, eq, and } from "drizzle-orm";
 import { LibSQLDatabase } from "drizzle-orm/libsql";
 import { emails, InsertEmail } from "./schema";
 
@@ -36,7 +36,7 @@ export async function getEmail(db: LibSQLDatabase, id: string) {
 
 export async function getEmailsByMessageTo(
   db: LibSQLDatabase,
-  messageTo: string,
+  messageTo: string
 ) {
   try {
     return await db
@@ -49,3 +49,12 @@ export async function getEmailsByMessageTo(
     return [];
   }
 }
+
+export async function getEmailsCount(db: LibSQLDatabase) {
+  try {
+    const res = await db.select({ count: count() }).from(emails);
+    return res[0]?.count;
+  } catch (e) {
+    return 0;
+  }
+}