From 6f6580cc2f89f7c0191cb7ad03b875df519f069d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 19 Jun 2024 00:25:34 +0200
Subject: [PATCH] feat: badges

---
 .../connections/AlbyConnectionCard.tsx        | 14 ++++--
 .../src/components/connections/AppCard.tsx    |  2 +-
 .../connections/AppCardConnectionInfo.tsx     | 49 +++++--------------
 .../components/connections/AppCardNotice.tsx  | 43 ++++++++--------
 frontend/src/screens/apps/AppList.tsx         |  2 +-
 5 files changed, 48 insertions(+), 62 deletions(-)

diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx
index 3fd02970..164e6f89 100644
--- a/frontend/src/components/connections/AlbyConnectionCard.tsx
+++ b/frontend/src/components/connections/AlbyConnectionCard.tsx
@@ -1,10 +1,12 @@
 import {
   CheckCircle2,
   CircleX,
+  EditIcon,
   ExternalLinkIcon,
   Link2Icon,
   ZapIcon,
 } from "lucide-react";
+import { Link } from "react-router-dom";
 import ExternalLink from "src/components/ExternalLink";
 import Loading from "src/components/Loading";
 import UserAvatar from "src/components/UserAvatar";
@@ -42,14 +44,14 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
         </CardDescription>
       </CardHeader>
       <Separator />
-      <CardContent>
-        <div className="grid grid-cols-1 xl:grid-cols-2 mt-5 gap-3 items-center">
+      <CardContent className="group">
+        <div className="grid grid-cols-1 xl:grid-cols-2 mt-5 gap-3 items-center relative">
           <div className="flex flex-col gap-4">
             <div className="flex flex-row gap-4 ">
               <UserAvatar className="h-14 w-14" />
               <div className="flex flex-col">
                 <div className="text-xl font-semibold">{albyMe?.name}</div>
-                <div className="flex flex-row items-center gap-1 text-sm">
+                <div className="flex flex-row items-center gap-1 text-sm text-muted-foreground">
                   <ZapIcon className="w-4 h-4" />
                   {albyMe?.lightning_address}
                 </div>
@@ -91,6 +93,12 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
             </div>
           </div>
           <div>
+            <Link
+              to={`/apps/${connection?.nostrPubkey}`}
+              className="absolute top-0 right-0"
+            >
+              <EditIcon className="w-4 h-4 hidden group-hover:inline text-muted-foreground hover:text-card-foreground" />
+            </Link>
             {connection && <AppCardConnectionInfo connection={connection} />}
           </div>
         </div>
diff --git a/frontend/src/components/connections/AppCard.tsx b/frontend/src/components/connections/AppCard.tsx
index c6441307..7276e323 100644
--- a/frontend/src/components/connections/AppCard.tsx
+++ b/frontend/src/components/connections/AppCard.tsx
@@ -23,7 +23,7 @@ export default function AppCard({ app }: Props) {
   return (
     <>
       <Link className="h-full" to={`/apps/${app.nostrPubkey}`}>
-        <Card className="h-full flex flex-col">
+        <Card className="h-full flex flex-col group">
           <CardHeader>
             <CardTitle className="relative">
               <AppCardNotice app={app} />
diff --git a/frontend/src/components/connections/AppCardConnectionInfo.tsx b/frontend/src/components/connections/AppCardConnectionInfo.tsx
index e2736984..7026ab59 100644
--- a/frontend/src/components/connections/AppCardConnectionInfo.tsx
+++ b/frontend/src/components/connections/AppCardConnectionInfo.tsx
@@ -1,8 +1,5 @@
-import dayjs from "dayjs";
-import { Edit } from "lucide-react";
-import { Link } from "react-router-dom";
-import { Button } from "src/components/ui/button";
 import { Progress } from "src/components/ui/progress";
+import { formatAmount } from "src/lib/utils";
 import { App } from "src/types";
 
 type AppCardConnectionInfoProps = {
@@ -18,19 +15,10 @@ export function AppCardConnectionInfo({
         <>
           <div className="flex flex-row justify-between">
             <div className="mb-2">
-              <p className="text-xs text-secondary-foreground font-medium">
-                You've spent
-              </p>
-              <p className="text-xl font-medium">
-                {new Intl.NumberFormat().format(connection.budgetUsage)} sats
-              </p>
-            </div>
-            <div className="text-right">
-              {" "}
               <p className="text-xs text-secondary-foreground font-medium">
                 Left in budget
               </p>
-              <p className="text-xl font-medium text-muted-foreground">
+              <p className="text-xl font-medium">
                 {new Intl.NumberFormat().format(
                   connection.maxAmount - connection.budgetUsage
                 )}{" "}
@@ -42,30 +30,19 @@ export function AppCardConnectionInfo({
             className="h-4"
             value={(connection.budgetUsage * 100) / connection.maxAmount}
           />
-          <div className="flex flex-row justify-between text-xs items-center mt-2">
-            {connection.maxAmount > 0 &&
-            connection.budgetRenewal !== "never" ? (
-              <>Renews {connection.budgetRenewal}</>
-            ) : (
-              <div /> // force edit button to right hand side
-            )}
-            <div className="justify-self-end">
-              <Link to={`/apps/${connection.nostrPubkey}`}>
-                <Button variant="ghost" size="sm">
-                  <Edit className="w-4 h-4 mr-2" />
-                  Edit
-                </Button>
-              </Link>
+          <div className="flex flex-row justify-between text-xs items-center text-muted-foreground mt-2">
+            <div>
+              {connection.maxAmount && (
+                <>{formatAmount(connection.maxAmount * 1000)} sats</>
+              )}
             </div>
-          </div>
-          {connection.lastEventAt && (
-            <div className="flex flex-row justify-between text-xs items-center">
-              <div className="flex flex-row justify-between">
-                <div>Last used:&nbsp;</div>
-                <div>{dayjs(connection.lastEventAt).fromNow()}</div>
-              </div>
+            <div>
+              {connection.maxAmount > 0 &&
+                connection.budgetRenewal !== "never" && (
+                  <>Renews {connection.budgetRenewal}</>
+                )}
             </div>
-          )}
+          </div>
         </>
       )}
     </>
diff --git a/frontend/src/components/connections/AppCardNotice.tsx b/frontend/src/components/connections/AppCardNotice.tsx
index f3778c47..eb4f0aac 100644
--- a/frontend/src/components/connections/AppCardNotice.tsx
+++ b/frontend/src/components/connections/AppCardNotice.tsx
@@ -1,7 +1,8 @@
-import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween"; // Add this line
+import { CalendarClock } from "lucide-react";
 import { Link } from "react-router-dom";
-import { Button } from "src/components/ui/button";
+import { Badge } from "src/components/ui/badge";
 import {
   Tooltip,
   TooltipContent,
@@ -10,47 +11,47 @@ import {
 } from "src/components/ui/tooltip";
 import { App } from "src/types";
 
+dayjs.extend(isBetween); // Extend dayjs with the isBetween plugin
+
 type AppCardNoticeProps = {
   app: App;
 };
 
-const ONE_WEEK_IN_SECONDS = 8 * 24 * 60 * 60 * 1000;
-
 export function AppCardNotice({ app }: AppCardNoticeProps) {
+  const now = dayjs();
+  const expiresAt = dayjs(app.expiresAt);
+  const isExpired = expiresAt.isBefore(now);
+  const expiresSoon = expiresAt.isBetween(now, now.add(7, "days"));
+
   return (
     <div className="absolute top-0 right-0">
       {app.expiresAt ? (
-        new Date(app.expiresAt).getTime() < new Date().getTime() ? (
+        isExpired ? (
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Link to={`/apps/${app.nostrPubkey}`}>
-                  <Button variant="destructive">
-                    <ExclamationTriangleIcon className="w-4 h-4" />
-                    &nbsp; Expired
-                  </Button>
+                  <Badge variant="destructive">
+                    <CalendarClock className="w-3 h-3 mr-2" />
+                    Expired
+                  </Badge>
                 </Link>
               </TooltipTrigger>
-              <TooltipContent>
-                Expired {dayjs(app.expiresAt).fromNow()}
-              </TooltipContent>
+              <TooltipContent>Expired {expiresAt.fromNow()}</TooltipContent>
             </Tooltip>
           </TooltipProvider>
-        ) : new Date(app.expiresAt).getTime() - ONE_WEEK_IN_SECONDS <
-          new Date().getTime() ? (
+        ) : expiresSoon ? (
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Link to={`/apps/${app.nostrPubkey}`}>
-                  <Button variant="outline" size="sm">
-                    <ExclamationTriangleIcon className="w-4 h-4" />
-                    &nbsp; Expires Soon
-                  </Button>
+                  <Badge variant="outline">
+                    <CalendarClock className="w-3 h-3 mr-2" />
+                    Expires Soon
+                  </Badge>
                 </Link>
               </TooltipTrigger>
-              <TooltipContent>
-                Expires {dayjs(app.expiresAt).fromNow()}
-              </TooltipContent>
+              <TooltipContent>Expires {expiresAt.fromNow()}</TooltipContent>
             </Tooltip>
           </TooltipProvider>
         ) : null
diff --git a/frontend/src/screens/apps/AppList.tsx b/frontend/src/screens/apps/AppList.tsx
index 37ab383f..8d417669 100644
--- a/frontend/src/screens/apps/AppList.tsx
+++ b/frontend/src/screens/apps/AppList.tsx
@@ -52,7 +52,7 @@ function AppList() {
       )}
 
       {otherApps.length > 0 && (
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch">
           {otherApps.map((app, index) => (
             <AppCard key={index} app={app} />
           ))}