feat: make Zapplanner settings managment easier

frontend/src/components/connections/ConnectedApps.tsx

@@ -1,4 +1,4 @@
-import { CableIcon, TrashIcon } from "lucide-react";
+import { CableIcon, ExternalLinkIcon, TrashIcon } from "lucide-react";
 import { useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import { CustomPagination } from "src/components/CustomPagination";
@@ -7,6 +7,7 @@ import Loading from "src/components/Loading";
 import ResponsiveButton from "src/components/ResponsiveButton";
 import AlbyConnectionCard from "src/components/connections/AlbyConnectionCard";
 import AppCard from "src/components/connections/AppCard";
+import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
 import {
   ALBY_ACCOUNT_APP_NAME,
   LIST_APPS_LIMIT,
@@ -100,7 +101,20 @@ function ConnectedApps() {
           className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch app-list"
         >
           {otherApps.map((app, index) => (
-            <AppCard key={index} app={app} />
+            <AppCard
+              key={index}
+              app={app}
+              actions={
+                app.metadata?.zapplanner_subscription_id ? (
+                  <ExternalLinkButton
+                    to={`https://zapplanner.albylabs.com/subscriptions/${app.metadata.zapplanner_subscription_id}`}
+                    size="sm"
+                  >
+                    View <ExternalLinkIcon className="size-4 ml-2" />
+                  </ExternalLinkButton>
+                ) : undefined
+              }
+            />
           ))}
         </div>
       )}

frontend/src/screens/apps/AppDetails.tsx

@@ -15,6 +15,7 @@ import {
   CheckCircleIcon,
   ChevronDownIcon,
   EllipsisIcon,
+  ExternalLinkIcon,
   InfoIcon,
   PlusIcon,
   SquarePenIcon,
@@ -190,6 +191,8 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
   const appStoreApp = getAppStoreApp(app);
   const connectedApps = useAppsForAppStoreApp(appStoreApp);
 
+  const subscriptionId = app?.metadata?.zapplanner_subscription_id;
+
   return (
     <>
       <div className="w-full">
@@ -265,6 +268,20 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
                             </DropdownMenuGroup>
                           )}
                         <DropdownMenuGroup>
+                          {typeof subscriptionId === "string" &&
+                            subscriptionId && (
+                              <DropdownMenuItem asChild>
+                                <Link
+                                  target="_blank"
+                                  to={`https://zapplanner.albylabs.com/subscriptions/${subscriptionId}`}
+                                  className="flex flex-1 items-center gap-2"
+                                >
+                                  <ExternalLinkIcon className="size-4" />
+                                  View
+                                </Link>
+                              </DropdownMenuItem>
+                            )}
+
                           {appStoreApp && (
                             <DropdownMenuItem asChild>
                               <Link
@@ -276,6 +293,7 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
                               </Link>
                             </DropdownMenuItem>
                           )}
+
                           <DropdownMenuItem asChild>
                             <div
                               className="flex items-center gap-2"
@@ -284,6 +302,7 @@ function AppInternal({ app, refetchApp, capabilities }: AppInternalProps) {
                               <InfoIcon className="size-4" /> Connection Details
                             </div>
                           </DropdownMenuItem>
+
                           <DropdownMenuSeparator />
                           <DropdownMenuItem variant="destructive" asChild>
                             <div

frontend/src/screens/internal-apps/ZapPlanner.tsx

@@ -16,7 +16,7 @@ import {
   getSatoshiValue,
   LightningAddress,
 } from "@getalby/lightning-tools";
-import { ExternalLinkIcon, PlusCircleIcon } from "lucide-react";
+import { PlusCircleIcon } from "lucide-react";
 import { toast } from "sonner";
 import alby from "src/assets/suggested-apps/alby.png";
 import bitcoinbrink from "src/assets/zapplanner/bitcoinbrink.png";
@@ -26,7 +26,6 @@ import { AppStoreDetailHeader } from "src/components/connections/AppStoreDetailH
 import { appStoreApps } from "src/components/connections/SuggestedAppData";
 import ExternalLink from "src/components/ExternalLink";
 import { Button } from "src/components/ui/button";
-import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
 import { LoadingButton } from "src/components/ui/custom/loading-button";
 import {
   Dialog,
@@ -552,20 +551,7 @@ export function ZapPlanner() {
           <h2 className="font-semibold text-xl">Recurring Payments</h2>
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch app-list">
             {zapplannerApps.map((app, index) => (
-              <AppCard
-                key={index}
-                app={app}
-                actions={
-                  app.metadata?.zapplanner_subscription_id ? (
-                    <ExternalLinkButton
-                      to={`https://zapplanner.albylabs.com/subscriptions/${app.metadata.zapplanner_subscription_id}`}
-                      size="sm"
-                    >
-                      View <ExternalLinkIcon className="size-4 ml-2" />
-                    </ExternalLinkButton>
-                  ) : undefined
-                }
-              />
+              <AppCard key={index} app={app} />
             ))}
           </div>
         </>