From 7fafed3757df64da128a7b591e8118bce1a2ba77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ren=C3=A9=20Aaron?=
 <100827540+reneaaron@users.noreply.github.com>
Date: Thu, 6 Feb 2025 06:29:31 +0100
Subject: [PATCH] fix: improve recently used apps card (#1066)

fix: minor improvements for copy / app filtering for new installations
---
 .../components/home/widgets/LatestUsedAppsWidget.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx b/frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx
index d3c77784..2056d938 100644
--- a/frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx
+++ b/frontend/src/components/home/widgets/LatestUsedAppsWidget.tsx
@@ -12,17 +12,19 @@ import { useApps } from "src/hooks/useApps";
 
 export function LatestUsedAppsWidget() {
   const { data: apps } = useApps();
-  if (!apps?.length) {
+  const usedApps = apps?.filter((x) => x.lastEventAt);
+
+  if (!usedApps?.length) {
     return null;
   }
 
   return (
     <Card>
       <CardHeader>
-        <CardTitle>Latest Used Apps</CardTitle>
+        <CardTitle>Recently Used Apps</CardTitle>
       </CardHeader>
       <CardContent className="grid grid-cols-1 gap-4">
-        {apps
+        {usedApps
           .sort(
             (a, b) =>
               new Date(b.lastEventAt ?? 0).getTime() -
@@ -34,12 +36,12 @@ export function LatestUsedAppsWidget() {
               <div className="flex items-center justify-between w-full">
                 <div className="flex items-center justify-center gap-4">
                   <AppAvatar app={app} className="w-14 h-14 rounded-lg" />
-                  <p className="text-xl font-semibold">
+                  <p className="text-sm font-medium">
                     {app.name === "getalby.com" ? "Alby Account" : app.name}
                   </p>
                 </div>
                 <div className="flex items-center justify-center gap-4">
-                  <p className="text-sm text-muted-foreground">
+                  <p className="text-xs text-muted-foreground">
                     {app.lastEventAt
                       ? dayjs(app.lastEventAt).fromNow()
                       : "never"}