small fixes

2026-06-28 23:06:54 +00:00 · 2025-08-01 16:11:36 +01:00
parent d15f2fb399
commit a470caee03
4 changed files with 107 additions and 50 deletions
--- a/apps/mail/app/(routes)/mail/subscriptions/page.tsx
+++ b/apps/mail/app/(routes)/mail/subscriptions/page.tsx
@@ -18,6 +18,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { RefreshCcw, Mail, MailOpen, Search, Trash2 } from 'lucide-react';
 import { EmptyStateIcon } from '@/components/icons/empty-state-svg';
 import { SidebarToggle } from '@/components/ui/sidebar-toggle';
+import { Separator } from '@/components/ui/separator';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Button } from '@/components/ui/button';
 import { Avatar } from '@/components/ui/avatar';
@@ -117,7 +118,7 @@ function SubscriptionItemComponent({
 export default function SubscriptionsPage() {
  const {
    subscriptions,
-    stats,
+    // stats,
    selectedIds,
    isLoading,
    isUnsubscribing,
@@ -135,18 +136,18 @@ export default function SubscriptionsPage() {
    refetch,
  } = useSubscriptions();

-  // const stats = {
-  //   overall: {
-  //     total: 0,
-  //     active: 0,
-  //     inactive: 0,
-  //   },
-  // };
+  const stats = {
+    overall: {
+      total: 0,
+      active: 0,
+      inactive: 0,
+    },
+  };

  return (
-    <div className="rounded-inherit relative z-[5] flex p-0 md:mr-1 md:mt-1">
+    <div className="rounded-inherit relative z-[5] flex p-0 md:my-1 md:mr-1">
      <div className="rounded-inherit h-full w-full overflow-hidden">
-        <div className="bg-panelLight dark:bg-panelDark mb-1 block w-full shadow-sm md:mr-[3px] md:rounded-2xl lg:flex lg:h-[calc(100dvh-8px)] lg:shadow-sm">
+        <div className="bg-panelLight dark:bg-panelDark block w-full shadow-sm md:mr-[3px] md:rounded-2xl lg:flex lg:h-[calc(100dvh-8px)] lg:shadow-sm">
          <div className="w-full md:h-[calc(100dvh-10px)]">
            <div className="relative z-[1] h-[calc(100dvh-(2px+2px))] w-full overflow-hidden pt-0">
              <div>
@@ -164,12 +165,12 @@ export default function SubscriptionsPage() {

                      <div className="flex gap-2">
                        <div className="relative flex-1">
-                          <Search className="text-muted-foreground absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2" />
+                          <Search className="text-muted-foreground absolute left-3 top-1/2 h-3 w-3 -translate-y-1/2" />
                          <Input
                            placeholder="Search subscriptions..."
                            value={searchQuery}
                            onChange={(e) => setSearchQuery(e.target.value)}
-                            className="pl-9"
+                            className="p-1 pl-9"
                          />
                        </div>

@@ -216,10 +217,7 @@ export default function SubscriptionsPage() {
                          </Button>
                        )}
                        <Button
-                          onClick={() => {
-                            // refetchThreads();
-                            refetch();
-                          }}
+                          onClick={() => refetch()}
                          variant="ghost"
                          className="md:h-fit md:px-2"
                        >
@@ -229,39 +227,39 @@ export default function SubscriptionsPage() {
                    </div>
                  </div>
                </div>
-
-                {stats && (
-                  <div className="mb-4 grid grid-cols-3 gap-4 p-2 px-3">
-                    <Card>
-                      <CardHeader className="p-3">
-                        <CardTitle className="text-sm font-medium">Total</CardTitle>
-                        <CardDescription className="text-2xl font-bold">
-                          {stats?.overall?.total || 0}
-                        </CardDescription>
-                      </CardHeader>
-                    </Card>
-                    <Card>
-                      <CardHeader className="p-3">
-                        <CardTitle className="text-sm font-medium">Active</CardTitle>
-                        <CardDescription className="text-2xl font-bold text-green-600">
-                          {stats?.overall?.active || 0}
-                        </CardDescription>
-                      </CardHeader>
-                    </Card>
-                    <Card>
-                      <CardHeader className="p-3">
-                        <CardTitle className="text-sm font-medium">Unsubscribed</CardTitle>
-                        <CardDescription className="text-2xl font-bold text-red-600">
-                          {stats?.overall?.inactive || 0}
-                        </CardDescription>
-                      </CardHeader>
-                    </Card>
-                  </div>
-                )}
              </div>

-              {/* List */}
-              <div className="h-[calc(100dvh-150px)] overflow-auto p-4">
+              {stats && (
+                <div className="mb-4 grid grid-cols-3 gap-4 p-4">
+                  <Card>
+                    <CardHeader className="p-3">
+                      <CardTitle className="text-sm font-medium">Total</CardTitle>
+                      <CardDescription className="text-2xl font-bold">
+                        {stats?.overall?.total || 0}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                  <Card>
+                    <CardHeader className="p-3">
+                      <CardTitle className="text-sm font-medium">Active</CardTitle>
+                      <CardDescription className="text-2xl font-bold text-green-600">
+                        {stats?.overall?.active || 0}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                  <Card>
+                    <CardHeader className="p-3">
+                      <CardTitle className="text-sm font-medium">Unsubscribed</CardTitle>
+                      <CardDescription className="text-2xl font-bold text-red-600">
+                        {stats?.overall?.inactive || 0}
+                      </CardDescription>
+                    </CardHeader>
+                  </Card>
+                </div>
+              )}
+              <Separator className="mb-4" />
+
+              <div className="flex h-[calc(100dvh-62px)] flex-col overflow-auto p-4">
                {isLoading ? (
                  <div className="space-y-3">
                    {[...Array(5)].map((_, i) => (
@@ -285,7 +283,7 @@ export default function SubscriptionsPage() {
                    </div>
                  </div>
                ) : (
-                  <VList className="w-full">
+                  <VList className="w-full flex-1">
                    {subscriptions.map((subscription: SubscriptionItem) => (
                      <SubscriptionItemComponent
                        key={subscription.id}
--- a/apps/mail/components/icons/icons.tsx
+++ b/apps/mail/components/icons/icons.tsx
@@ -657,6 +657,8 @@ export const Bell = ({ className }: { className?: string }) => (
      fillRule="evenodd"
      clipRule="evenodd"
      d="M9.5 4.375C9.5 2.442 7.933 0.875 6 0.875C4.067 0.875 2.5 2.442 2.5 4.375V6.45634C2.5 6.80444 2.36172 7.13828 2.11558 7.38442L1.00628 8.49372C0.842187 8.65781 0.75 8.88037 0.75 9.11244V9.625C0.75 10.1082 1.14175 10.5 1.625 10.5H3.375C3.375 11.9497 4.55025 13.125 6 13.125C7.44975 13.125 8.625 11.9497 8.625 10.5H10.375C10.8582 10.5 11.25 10.1082 11.25 9.625V9.11244C11.25 8.88037 11.1578 8.65781 10.9937 8.49372L9.88442 7.38442C9.63828 7.13828 9.5 6.80444 9.5 6.45634V4.375ZM4.6875 10.5C4.6875 11.2249 5.27513 11.8125 6 11.8125C6.72487 11.8125 7.3125 11.2249 7.3125 10.5H4.6875Z"
+      fill="var(--icon-color)"
+      fillOpacity="0.5"
    />
  </svg>
 );
--- a/apps/mail/config/navigation.ts
+++ b/apps/mail/config/navigation.ts
@@ -14,6 +14,7 @@ import {
  Plane2,
  LockIcon,
  Clock,
+  Bell,
 } from '@/components/icons/icons';
 import { BellIcon, MessageSquareIcon } from 'lucide-react';
 import { m } from '@/paraglide/messages';
@@ -74,7 +75,7 @@ export const navigationConfig: Record<string, NavConfig> = {
            id: 'subscriptions',
            title: m['navigation.sidebar.subscriptions'](),
            url: '/mail/subscriptions',
-            icon: BellIcon,
+            icon: Bell,
            shortcut: 'g + s',
          },
        ],
--- a/apps/mail/hooks/use-subscriptions.ts
+++ b/apps/mail/hooks/use-subscriptions.ts
@@ -187,9 +187,65 @@ export const useSubscriptions = () => {
    setSelectedIds(new Set());
  }, []);

+  const subscriptions = useMemo(() => {
+    const subscriptions: SubscriptionItem[] = [
+      {
+        id: '1',
+        senderEmail: 'test@test.com',
+        senderName: 'Test',
+        senderDomain: 'test.com',
+        category: 'general',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+      {
+        id: '2',
+        senderEmail: 'test2@test.com',
+        senderName: 'Test 2',
+        senderDomain: 'test2.com',
+        category: 'newsletter',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+      {
+        id: '3',
+        senderEmail: 'test3@test.com',
+        senderName: 'Test 3',
+        senderDomain: 'test3.com',
+        category: 'promotional',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+      {
+        id: '4',
+        senderEmail: 'test4@test.com',
+        senderName: 'Test 4',
+        senderDomain: 'test4.com',
+        category: 'social',
+        lastEmailReceivedAt: new Date(),
+        emailCount: 10,
+        isActive: true,
+        autoArchive: false,
+        createdAt: new Date(),
+      },
+    ];
+
+    return subscriptions;
+  }, [filteredSubscriptions]);
+
  return {
    // Data
-    subscriptions: filteredSubscriptions,
+    // subscriptions: filteredSubscriptions,
+    subscriptions,
    stats: statsQuery.data as
      | {
          overall: {