From bd4690ee6ef3a529853fce1e7148415a18d8135d Mon Sep 17 00:00:00 2001
From: saunter <68239231+stackingsaunter@users.noreply.github.com>
Date: Wed, 25 Mar 2026 02:12:04 +0100
Subject: [PATCH 1/3] feat: align App of the Day widget UI

Use a chevron row layout like Recently Used Apps and place the widget above
Alby Go in the left Home column without changing selection logic.

Made-with: Cursor
---
 .../home/widgets/AppOfTheDayWidget.tsx        | 46 +++++++++----------
 frontend/src/screens/Home.tsx                 |  2 +-
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx b/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
index af4858c71..adbe3edc8 100644
--- a/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
+++ b/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
@@ -1,14 +1,13 @@
-import { ExternalLinkIcon } from "lucide-react";
+import { ChevronRightIcon } from "lucide-react";
+import { Link } from "react-router-dom";
 import { appStoreApps } from "src/components/connections/SuggestedAppData";
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "src/components/ui/card";
-import { LinkButton } from "src/components/ui/custom/link-button";
 
 export function AppOfTheDayWidget() {
   function seededRandom(seed: number) {
@@ -26,32 +25,33 @@ export function AppOfTheDayWidget() {
   const app = apps[todayIndex];
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>App of the Day</CardTitle>
+    <Card className="overflow-hidden rounded-[14px] shadow-none">
+      <CardHeader className="px-6 pb-0">
+        <CardTitle className="text-base font-semibold">
+          App of the Day
+        </CardTitle>
       </CardHeader>
-      <CardContent>
-        <div className="flex gap-3 items-center">
+      <CardContent className="px-6 pt-0">
+        <Link
+          to={app.internal ? `/internal-apps/${app.id}` : `/appstore/${app.id}`}
+          className="group flex items-center gap-4 rounded-md"
+        >
           <img
             src={app.logo}
-            alt="logo"
-            className="inline rounded-lg w-12 h-12"
+            alt={`${app.title} logo`}
+            className="size-[60px] rounded-[9px] object-cover"
           />
-          <div className="grow">
-            <CardTitle>{app.title}</CardTitle>
-            <CardDescription>{app.description}</CardDescription>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-base font-semibold text-foreground">
+              {app.title}
+            </p>
+            <CardDescription className="line-clamp-2 text-sm leading-5 text-muted-foreground">
+              {app.description}
+            </CardDescription>
           </div>
-        </div>
+          <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+        </Link>
       </CardContent>
-      <CardFooter className="flex flex-row justify-end">
-        <LinkButton
-          to={app.internal ? `/internal-apps/${app.id}` : `/appstore/${app.id}`}
-          variant="outline"
-        >
-          <ExternalLinkIcon />
-          Open
-        </LinkButton>
-      </CardFooter>
     </Card>
   );
 }
diff --git a/frontend/src/screens/Home.tsx b/frontend/src/screens/Home.tsx
index e62e3480a..2b75cad87 100644
--- a/frontend/src/screens/Home.tsx
+++ b/frontend/src/screens/Home.tsx
@@ -71,6 +71,7 @@ function Home() {
           <OnboardingChecklist />
           <WhatsNewWidget />
           <SupportAlbyWidget />
+          <AppOfTheDayWidget />
           {info.albyAccountConnected && (
             <ExternalLink to="https://www.getalby.com/dashboard">
               <Card>
@@ -163,7 +164,6 @@ function Home() {
         <div className="grid gap-3">
           <LatestUsedAppsWidget />
           <LightningMessageboardWidget />
-          <AppOfTheDayWidget />
 
           <Link to="/internal-apps/zapplanner">
             <Card>

From 11f91c060e7144a8ce54e8ba233613cb5b9a1eaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 25 Mar 2026 22:24:18 +0100
Subject: [PATCH 2/3] fix: remove obsolete classes

---
 frontend/src/components/home/widgets/AppOfTheDayWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx b/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
index adbe3edc8..21cf79352 100644
--- a/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
+++ b/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
@@ -25,7 +25,7 @@ export function AppOfTheDayWidget() {
   const app = apps[todayIndex];
 
   return (
-    <Card className="overflow-hidden rounded-[14px] shadow-none">
+    <Card>
       <CardHeader className="px-6 pb-0">
         <CardTitle className="text-base font-semibold">
           App of the Day

From 0b335320b022ca7ccd3a91a5ec555eb4d9bcfb00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <rene@twentyuno.net>
Date: Wed, 25 Mar 2026 22:26:45 +0100
Subject: [PATCH 3/3] fix: use theme classes

---
 frontend/src/components/home/widgets/AppOfTheDayWidget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx b/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
index 21cf79352..5222507a1 100644
--- a/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
+++ b/frontend/src/components/home/widgets/AppOfTheDayWidget.tsx
@@ -39,7 +39,7 @@ export function AppOfTheDayWidget() {
           <img
             src={app.logo}
             alt={`${app.title} logo`}
-            className="size-[60px] rounded-[9px] object-cover"
+            className="size-15 rounded-lg object-cover"
           />
           <div className="min-w-0 flex-1">
             <p className="truncate text-base font-semibold text-foreground">