Skip to content
This repository has been archived by the owner on Sep 2, 2024. It is now read-only.

feat: add expiry notices to connection cards #460

Merged
merged 4 commits into from
Jun 19, 2024
Merged

feat: add expiry notices to connection cards #460

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca82640
feat: add expiry notices to connection cards
rolznz Jun 18, 2024
d9cd4ab
chore: make "expires soon" button small
rolznz Jun 18, 2024
6f6580c
feat: badges
reneaaron Jun 18, 2024
b0693e8
fix: re-add last used to app card connection info
rolznz Jun 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions frontend/src/components/connections/AlbyConnectionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/connections/AppCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
49 changes: 13 additions & 36 deletions frontend/src/components/connections/AppCardConnectionInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -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
)}{" "}
Expand All @@ -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>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Last used was removed from the card, is this intentional?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@reneaaron I think it's useful information to have

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rolznz It definitely is, however the cards are already quite clogged with data. I wonder if it's really worth showing this info on the overview (we show it on the detail page anyway).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree the card is a bit cluttered, maybe we can find a better solution. But having to manually click all the cards to open them to see which ones were used recently is not so great in my opinion

</div>
<div>
{connection.maxAmount > 0 &&
connection.budgetRenewal !== "never" && (
<>Renews {connection.budgetRenewal}</>
)}
</div>
)}
</div>
</>
)}
</>
Expand Down
43 changes: 22 additions & 21 deletions frontend/src/components/connections/AppCardNotice.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/apps/AppList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
))}
Expand Down
Loading