From fdd7d5adf85c3181df66a2690d529e310f9df0ee Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 18 Nov 2025 16:29:14 +0800
Subject: [PATCH] refactor: update notifications settings UI for improved
 layout and accessibility

- Removed unused imports and components to streamline the code.
- Enhanced the notifications section layout with improved spacing and styling.
- Updated the display of notification channels to use a more accessible design.
- Added loading and empty state indicators for better user experience.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../modules/settings/tabs/notifications.tsx   | 136 ++++++++++--------
 1 file changed, 77 insertions(+), 59 deletions(-)

diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/notifications.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/notifications.tsx
index 407c7db45..4953469a2 100644
--- a/apps/desktop/layer/renderer/src/modules/settings/tabs/notifications.tsx
+++ b/apps/desktop/layer/renderer/src/modules/settings/tabs/notifications.tsx
@@ -1,15 +1,6 @@
 import { Button } from "@follow/components/ui/button/index.js"
-import { Divider } from "@follow/components/ui/divider/index.js"
 import { LoadingCircle } from "@follow/components/ui/loading/index.jsx"
 import { ScrollArea } from "@follow/components/ui/scroll-area/index.js"
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@follow/components/ui/table/index.jsx"
 import {
   Tooltip,
   TooltipContent,
@@ -43,55 +34,82 @@ export const SettingNotifications = () => {
   }, [])
 
   return (
-    <section className="mt-4">
-      <div className="mb-4 space-y-2 text-sm">
-        <p>
-          <Trans
-            ns="settings"
-            i18nKey="notifications.info"
-            components={{
-              ActionsLink: (
-                <Link
-                  className="underline"
-                  to="/action"
-                  onClick={() => {
-                    dismiss()
-                  }}
-                />
-              ),
-            }}
-          />
-        </p>
-      </div>
-      <Divider className="mb-6 mt-8" />
-      <div className="flex flex-1 flex-col">
-        {isLoading && <LoadingCircle size="large" className="center absolute inset-0" />}
+    <section className="mt-4 space-y-6">
+      {/* Info Section */}
 
-        <ScrollArea.ScrollArea viewportClassName="max-h-[380px]">
-          <div className="overflow-auto">
-            <Table className="mt-4">
-              <TableHeader>
-                <TableRow className="[&_*]:!font-semibold">
-                  <TableHead size="sm">{t.settings("notifications.channel")}</TableHead>
-                  <TableHead size="sm">{t.settings("notifications.token")}</TableHead>
-                  <TableHead size="sm" className="center">
-                    {t.common("words.actions")}
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="border-t-[12px] border-transparent [&_td]:!px-3">
+      <p className="text-sm leading-relaxed text-text-secondary">
+        <Trans
+          ns="settings"
+          i18nKey="notifications.info"
+          components={{
+            ActionsLink: (
+              <Link
+                className="font-medium text-accent underline-offset-2 hover:text-accent/80 hover:underline"
+                to="/action"
+                onClick={() => {
+                  dismiss()
+                }}
+              />
+            ),
+          }}
+        />
+      </p>
+
+      {/* Channels Section */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="text-sm font-semibold text-text">{t.settings("notifications.channel")}</h3>
+          <span className="text-xs text-text-tertiary">
+            <span>{data?.data?.length || 0}</span> <span>{t.common("words.items")}</span>
+          </span>
+        </div>
+
+        <div className="relative min-h-[200px]">
+          {isLoading && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <LoadingCircle size="large" />
+            </div>
+          )}
+
+          {!isLoading && (!data?.data || data.data.length === 0) ? (
+            <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-border bg-material-medium py-12">
+              <i className="i-mgc-notification-cute-re mb-3 text-4xl text-text-quaternary" />
+              <p className="text-sm text-text-tertiary">No notification channels</p>
+            </div>
+          ) : (
+            <ScrollArea.ScrollArea viewportClassName="max-h-[400px]">
+              <div className="space-y-2">
                 {data?.data?.map((row) => (
-                  <TableRow key={row.channel} className="h-8">
-                    <TableCell size="sm">{row.channel}</TableCell>
-                    <TableCell size="sm" className="truncate">
-                      {row.token.slice(0, 6)}...{row.token.slice(-6)}
-                      {row.token === token && ` ${t.settings("notifications.current")}`}
-                    </TableCell>
-                    <TableCell size="sm" className="center">
+                  <div
+                    key={row.channel}
+                    className="group relative flex items-center gap-4 rounded-lg border border-border bg-background p-4 transition-all hover:border-border hover:bg-fill-secondary/30"
+                  >
+                    {/* Channel Info */}
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-text">{row.channel}</span>
+                        {row.token === token && (
+                          <span className="inline-flex items-center gap-1 rounded-full bg-accent/10 px-2 py-0.5 text-xs font-medium text-accent">
+                            <i className="i-mgc-check-cute-re text-[10px]" />
+                            {t.settings("notifications.current")}
+                          </span>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <code className="rounded bg-fill px-2 py-0.5 font-mono text-xs text-text-secondary">
+                          {row.token.slice(0, 8)}...{row.token.slice(-8)}
+                        </code>
+                      </div>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex items-center gap-2">
                       <Tooltip>
                         <TooltipTrigger asChild>
                           <Button
                             variant="ghost"
+                            size="sm"
+                            buttonClassName="size-8 p-0"
                             onClick={() =>
                               testMessaging.mutate(
                                 { channel: row.channel },
@@ -103,20 +121,20 @@ export const SettingNotifications = () => {
                               )
                             }
                           >
-                            <i className="i-mgc-finger-press-cute-re" />
+                            <i className="i-mgc-finger-press-cute-re text-base" />
                           </Button>
                         </TooltipTrigger>
                         <TooltipPortal>
                           <TooltipContent>{t.settings("notifications.test")}</TooltipContent>
                         </TooltipPortal>
                       </Tooltip>
-                    </TableCell>
-                  </TableRow>
+                    </div>
+                  </div>
                 ))}
-              </TableBody>
-            </Table>
-          </div>
-        </ScrollArea.ScrollArea>
+              </div>
+            </ScrollArea.ScrollArea>
+          )}
+        </div>
       </div>
     </section>
   )