From efdb468703e45a058a9cf66e5d16f409990b30e3 Mon Sep 17 00:00:00 2001
From: pdelfan <pdelfan@gmail.com>
Date: Fri, 17 Apr 2026 14:23:54 -0700
Subject: [PATCH] feat: show on card action if you've connected a card

---
 .../activityCard/Skeleton.ActivityCard.tsx    | 36 +++++++++----------
 .../components/urlCard/Skeleton.UrlCard.tsx   | 11 +++---
 .../cards/components/urlCard/UrlCard.tsx      |  2 ++
 .../urlCardActions/UrlCardActions.tsx         |  4 ++-
 .../Skeleton.UrlCardContent.tsx               | 11 +++---
 .../CardsContainerContent.tsx                 |  1 +
 .../Skeleton.CollectionCard.tsx               |  2 +-
 .../CollectionContainerContent.tsx            |  1 +
 .../connectionCard/ConnectionCard.tsx         |  2 ++
 .../connectionItem/ConnectionItem.tsx         |  1 +
 .../feeds/components/feedItem/FeedItem.tsx    |  1 +
 .../components/recentCards/RecentCards.tsx    |  1 +
 .../notificationItem/NotificationItem.tsx     |  1 +
 .../blueskyPost/Skeleton.BlueskyPost.tsx      |  6 ++--
 .../profileContainer/ProfileContainer.tsx     |  1 +
 .../Skeleton.SearchProfileCard.tsx            |  4 +--
 .../similarUrlCard/SimilarUrlCard.tsx         |  1 +
 17 files changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/webapp/components/landing/activityCard/Skeleton.ActivityCard.tsx b/src/webapp/components/landing/activityCard/Skeleton.ActivityCard.tsx
index 09eb17e1..f938c834 100644
--- a/src/webapp/components/landing/activityCard/Skeleton.ActivityCard.tsx
+++ b/src/webapp/components/landing/activityCard/Skeleton.ActivityCard.tsx
@@ -9,34 +9,23 @@ import {
 
 export default function ActivityCardSkeleton() {
   return (
-    <Stack gap={'xs'} align="stretch" h={'100%'}>
-      <Card p={0}>
-        <Group gap={'xs'} wrap="nowrap" justify="space-between" align="center">
-          <Group gap={'xs'} wrap="nowrap" w={'100%'}>
-            <Avatar size={'sm'} />
-            <Skeleton w={'30%'} h={18} />
-          </Group>
-          <Skeleton w={'10%'} h={15} />
-        </Group>
-      </Card>
-
-      <Card radius={'lg'} p={'sm'} flex={1} h={'100%'} withBorder>
-        <Stack justify="space-between" gap={'sm'} flex={1}>
+    <Stack component="article" gap={5} justify="stretch" h={'100%'}>
+      <Card withBorder radius={'lg'} p={'sm'} flex={1}>
+        <Stack justify="space-between" flex={1}>
           <Group justify="space-between" align="start" gap={'lg'}>
             <Stack gap={'xs'} flex={1}>
               <Stack gap={5}>
                 {/* Domain */}
-                <Skeleton w={80} h={14} />
+                <Skeleton w={80} h={21} />
                 {/* Title */}
-                <Skeleton w={'100%'} h={14} />
-                <Skeleton w={'100%'} h={14} />
+                <Skeleton w={'100%'} h={25} />
               </Stack>
 
               {/* Description */}
               <Stack gap={5}>
-                <Skeleton w={'100%'} h={10} />
-                <Skeleton w={'100%'} h={10} />
-                <Skeleton w={'100%'} h={10} />
+                <Skeleton w={'100%'} h={16} />
+                <Skeleton w={'100%'} h={16} />
+                <Skeleton w={'100%'} h={16} />
               </Stack>
             </Stack>
 
@@ -44,6 +33,15 @@ export default function ActivityCardSkeleton() {
               <Skeleton w={75} h={75} />
             </AspectRatio>
           </Group>
+
+          {/* Url card actions */}
+          <Group justify="space-between">
+            <Group gap={'xs'}>
+              <Skeleton w={60} h={26} radius={'xl'} />
+              <Skeleton w={54} h={26} radius={'xl'} />
+            </Group>
+            <Skeleton w={26} h={26} circle />
+          </Group>
         </Stack>
       </Card>
     </Stack>
diff --git a/src/webapp/features/cards/components/urlCard/Skeleton.UrlCard.tsx b/src/webapp/features/cards/components/urlCard/Skeleton.UrlCard.tsx
index 12f0ecab..b76a5a1d 100644
--- a/src/webapp/features/cards/components/urlCard/Skeleton.UrlCard.tsx
+++ b/src/webapp/features/cards/components/urlCard/Skeleton.UrlCard.tsx
@@ -9,17 +9,16 @@ export default function UrlCardSkeleton() {
             <Stack gap={'xs'} flex={1}>
               <Stack gap={5}>
                 {/* Domain */}
-                <Skeleton w={80} h={14} />
+                <Skeleton w={80} h={21} />
                 {/* Title */}
-                <Skeleton w={'100%'} h={14} />
-                <Skeleton w={'100%'} h={14} />
+                <Skeleton w={'100%'} h={25} />
               </Stack>
 
               {/* Description */}
               <Stack gap={5}>
-                <Skeleton w={'100%'} h={10} />
-                <Skeleton w={'100%'} h={10} />
-                <Skeleton w={'100%'} h={10} />
+                <Skeleton w={'100%'} h={16} />
+                <Skeleton w={'100%'} h={16} />
+                <Skeleton w={'100%'} h={16} />
               </Stack>
             </Stack>
 
diff --git a/src/webapp/features/cards/components/urlCard/UrlCard.tsx b/src/webapp/features/cards/components/urlCard/UrlCard.tsx
index 8263bcf2..447b5fee 100644
--- a/src/webapp/features/cards/components/urlCard/UrlCard.tsx
+++ b/src/webapp/features/cards/components/urlCard/UrlCard.tsx
@@ -26,6 +26,7 @@ interface Props {
   urlLibraryCount: number;
   urlIsInLibrary?: boolean;
   urlConnectionCount: number;
+  urlIsConnected?: boolean;
   authorHandle?: string;
   cardAuthor?: User;
   viaCardId?: string;
@@ -163,6 +164,7 @@ export default function UrlCard(props: Props) {
             urlLibraryCount={props.urlLibraryCount}
             urlIsInLibrary={props.urlIsInLibrary ?? false}
             urlConnectionCount={props.urlConnectionCount}
+            urlIsConnected={props.urlIsConnected}
             viaCardId={props.viaCardId}
             analyticsContext={props.analyticsContext}
           />
diff --git a/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx b/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx
index 499d4343..7a291ab5 100644
--- a/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx
+++ b/src/webapp/features/cards/components/urlCardActions/UrlCardActions.tsx
@@ -35,6 +35,7 @@ interface Props {
   currentCollection?: Collection;
   urlLibraryCount: number;
   urlIsInLibrary: boolean;
+  urlIsConnected?: boolean;
   urlConnectionCount: number;
   viaCardId?: string;
   analyticsContext?: CardSaveAnalyticsContext;
@@ -111,7 +112,8 @@ export default function UrlCardActions(props: Props) {
           </Button>
           <Button
             variant="light"
-            color={'gray'}
+            color="gray"
+            c={props.urlIsConnected ? 'green' : 'gray'}
             size="xs"
             radius={'xl'}
             leftSection={
diff --git a/src/webapp/features/cards/components/urlCardContent/Skeleton.UrlCardContent.tsx b/src/webapp/features/cards/components/urlCardContent/Skeleton.UrlCardContent.tsx
index 62babbe3..bf41a48e 100644
--- a/src/webapp/features/cards/components/urlCardContent/Skeleton.UrlCardContent.tsx
+++ b/src/webapp/features/cards/components/urlCardContent/Skeleton.UrlCardContent.tsx
@@ -7,17 +7,16 @@ export default function UrlCardContentSkeleton() {
         <Stack gap={'xs'} flex={1}>
           <Stack gap={5}>
             {/* Domain */}
-            <Skeleton w={80} h={14} />
+            <Skeleton w={80} h={21} />
             {/* Title */}
-            <Skeleton w={'100%'} h={14} />
-            <Skeleton w={'100%'} h={14} />
+            <Skeleton w={'100%'} h={25} />
           </Stack>
 
           {/* Description */}
           <Stack gap={5}>
-            <Skeleton w={'100%'} h={10} />
-            <Skeleton w={'100%'} h={10} />
-            <Skeleton w={'100%'} h={10} />
+            <Skeleton w={'100%'} h={16} />
+            <Skeleton w={'100%'} h={16} />
+            <Skeleton w={'100%'} h={16} />
           </Stack>
         </Stack>
 
diff --git a/src/webapp/features/cards/containers/cardsContainerContent/CardsContainerContent.tsx b/src/webapp/features/cards/containers/cardsContainerContent/CardsContainerContent.tsx
index cc6dc475..fd3bd88c 100644
--- a/src/webapp/features/cards/containers/cardsContainerContent/CardsContainerContent.tsx
+++ b/src/webapp/features/cards/containers/cardsContainerContent/CardsContainerContent.tsx
@@ -102,6 +102,7 @@ export default function CardsContainerContent(props: Props) {
                 urlLibraryCount={card.urlLibraryCount}
                 urlIsInLibrary={card.urlInLibrary}
                 urlConnectionCount={card.urlConnectionCount ?? 0}
+                urlIsConnected={card.urlIsConnected}
                 viaCardId={card.id}
                 analyticsContext={{
                   saveSource: CardSaveSource.PROFILE,
diff --git a/src/webapp/features/collections/components/collectionCard/Skeleton.CollectionCard.tsx b/src/webapp/features/collections/components/collectionCard/Skeleton.CollectionCard.tsx
index b7a69bc3..9f68549f 100644
--- a/src/webapp/features/collections/components/collectionCard/Skeleton.CollectionCard.tsx
+++ b/src/webapp/features/collections/components/collectionCard/Skeleton.CollectionCard.tsx
@@ -29,7 +29,7 @@ export default function CollectionCardSkeleton() {
           </Grid>
         </Stack>
         {/* Collection metadata */}
-        <Skeleton w={'80%'} h={10} />
+        <Skeleton w={'80%'} h={16} />
       </Stack>
     </Card>
   );
diff --git a/src/webapp/features/collections/containers/collectionContainerContent/CollectionContainerContent.tsx b/src/webapp/features/collections/containers/collectionContainerContent/CollectionContainerContent.tsx
index da3b4ad1..e33acaa8 100644
--- a/src/webapp/features/collections/containers/collectionContainerContent/CollectionContainerContent.tsx
+++ b/src/webapp/features/collections/containers/collectionContainerContent/CollectionContainerContent.tsx
@@ -99,6 +99,7 @@ export default function CollectionContainerContent(props: Props) {
                     urlLibraryCount={card.urlLibraryCount}
                     urlIsInLibrary={card.urlInLibrary}
                     urlConnectionCount={card.urlConnectionCount ?? 0}
+                    urlIsConnected={card.urlIsConnected}
                     currentCollection={firstPage}
                     viaCardId={card.id}
                     showAuthor={props.handle !== card.author.handle}
diff --git a/src/webapp/features/connections/components/connectionCard/ConnectionCard.tsx b/src/webapp/features/connections/components/connectionCard/ConnectionCard.tsx
index 1ba89cfc..d5d3b098 100644
--- a/src/webapp/features/connections/components/connectionCard/ConnectionCard.tsx
+++ b/src/webapp/features/connections/components/connectionCard/ConnectionCard.tsx
@@ -25,6 +25,7 @@ export default function ConnectionCard(props: Props) {
           urlLibraryCount={sourceUrlView.urlLibraryCount}
           urlIsInLibrary={sourceUrlView.urlInLibrary ?? false}
           urlConnectionCount={sourceUrlView.urlConnectionCount ?? 0}
+          urlIsConnected={sourceUrlView.urlIsConnected}
         />
       </Grid.Col>
 
@@ -87,6 +88,7 @@ export default function ConnectionCard(props: Props) {
           urlLibraryCount={targetUrlView.urlLibraryCount}
           urlIsInLibrary={targetUrlView.urlInLibrary ?? false}
           urlConnectionCount={targetUrlView.urlConnectionCount ?? 0}
+          urlIsConnected={targetUrlView.urlIsConnected}
         />
       </Grid.Col>
     </Grid>
diff --git a/src/webapp/features/connections/components/connectionItem/ConnectionItem.tsx b/src/webapp/features/connections/components/connectionItem/ConnectionItem.tsx
index 5fbcfeaa..be3a4a7a 100644
--- a/src/webapp/features/connections/components/connectionItem/ConnectionItem.tsx
+++ b/src/webapp/features/connections/components/connectionItem/ConnectionItem.tsx
@@ -31,6 +31,7 @@ export default function ConnectionItem(props: Props) {
         urlLibraryCount={urlView.urlLibraryCount}
         urlIsInLibrary={urlView.urlInLibrary ?? false}
         urlConnectionCount={urlView.urlConnectionCount ?? 0}
+        urlIsConnected={urlView.urlIsConnected}
       />
     </Stack>
   );
diff --git a/src/webapp/features/feeds/components/feedItem/FeedItem.tsx b/src/webapp/features/feeds/components/feedItem/FeedItem.tsx
index 21d55321..b4df63d1 100644
--- a/src/webapp/features/feeds/components/feedItem/FeedItem.tsx
+++ b/src/webapp/features/feeds/components/feedItem/FeedItem.tsx
@@ -35,6 +35,7 @@ export default function FeedItem(props: Props) {
         urlLibraryCount={props.item.card.urlLibraryCount}
         urlIsInLibrary={props.item.card.urlInLibrary}
         urlConnectionCount={props.item.card.urlConnectionCount ?? 0}
+        urlIsConnected={props.item.card.urlIsConnected}
         authorHandle={props.item.user.handle}
         viaCardId={props.item.card.id}
         analyticsContext={props.analyticsContext}
diff --git a/src/webapp/features/home/components/recentCards/RecentCards.tsx b/src/webapp/features/home/components/recentCards/RecentCards.tsx
index 4f7e13ff..a2aa5769 100644
--- a/src/webapp/features/home/components/recentCards/RecentCards.tsx
+++ b/src/webapp/features/home/components/recentCards/RecentCards.tsx
@@ -73,6 +73,7 @@ export default function RecentCards() {
                   urlLibraryCount={card.urlLibraryCount}
                   urlIsInLibrary={card.urlInLibrary}
                   urlConnectionCount={card.urlConnectionCount ?? 0}
+                  urlIsConnected={card.urlIsConnected}
                   cardAuthor={card.author}
                   viaCardId={card.id}
                 />
diff --git a/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx b/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
index 4a0fa948..134e4bce 100644
--- a/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
+++ b/src/webapp/features/notifications/components/notificationItem/NotificationItem.tsx
@@ -127,6 +127,7 @@ export default function NotificationItem(props: Props) {
             urlLibraryCount={notification.item.card.urlLibraryCount}
             urlIsInLibrary={notification.item.card.urlInLibrary}
             urlConnectionCount={notification.item.card.urlConnectionCount ?? 0}
+            urlIsConnected={notification.item.card.urlIsConnected}
             authorHandle={notification.item.user.handle}
             viaCardId={notification.item.card.id}
             analyticsContext={props.analyticsContext}
diff --git a/src/webapp/features/platforms/bluesky/components/blueskyPost/Skeleton.BlueskyPost.tsx b/src/webapp/features/platforms/bluesky/components/blueskyPost/Skeleton.BlueskyPost.tsx
index 53c21462..2726b9b6 100644
--- a/src/webapp/features/platforms/bluesky/components/blueskyPost/Skeleton.BlueskyPost.tsx
+++ b/src/webapp/features/platforms/bluesky/components/blueskyPost/Skeleton.BlueskyPost.tsx
@@ -12,9 +12,9 @@ export default function BlueskyPostSkeleton() {
         <Skeleton h={18} w={18} radius="xl" />
       </Group>
       <Stack w={'100%'} gap={5}>
-        <Skeleton w={'100%'} h={10} />
-        <Skeleton w={'100%'} h={10} />
-        <Skeleton w={'100%'} h={10} />
+        <Skeleton w={'100%'} h={16} />
+        <Skeleton w={'100%'} h={16} />
+        <Skeleton w={'100%'} h={16} />
       </Stack>
     </Stack>
   );
diff --git a/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx b/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx
index f385abc5..87c5724f 100644
--- a/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx
+++ b/src/webapp/features/profile/containers/profileContainer/ProfileContainer.tsx
@@ -84,6 +84,7 @@ export default function ProfileContainer(props: Props) {
                       urlLibraryCount={card.urlLibraryCount}
                       urlIsInLibrary={card.urlInLibrary}
                       urlConnectionCount={card.urlConnectionCount ?? 0}
+                      urlIsConnected={card.urlIsConnected}
                       viaCardId={card.id}
                       analyticsContext={{
                         saveSource: CardSaveSource.PROFILE,
diff --git a/src/webapp/features/search/components/profileCard/Skeleton.SearchProfileCard.tsx b/src/webapp/features/search/components/profileCard/Skeleton.SearchProfileCard.tsx
index 65ee6661..07f4508b 100644
--- a/src/webapp/features/search/components/profileCard/Skeleton.SearchProfileCard.tsx
+++ b/src/webapp/features/search/components/profileCard/Skeleton.SearchProfileCard.tsx
@@ -13,8 +13,8 @@ export default function SearchProfileCardSkeleton() {
           </Stack>
         </Group>
         <Stack gap={5}>
-          <Skeleton w={'100%'} h={10} />
-          <Skeleton w={'100%'} h={10} />
+          <Skeleton w={'100%'} h={16} />
+          <Skeleton w={'100%'} h={16} />
         </Stack>
       </Stack>
     </Card>
diff --git a/src/webapp/features/semble/components/similarUrlCard/SimilarUrlCard.tsx b/src/webapp/features/semble/components/similarUrlCard/SimilarUrlCard.tsx
index 03beb70c..2d7e3a48 100644
--- a/src/webapp/features/semble/components/similarUrlCard/SimilarUrlCard.tsx
+++ b/src/webapp/features/semble/components/similarUrlCard/SimilarUrlCard.tsx
@@ -18,6 +18,7 @@ export default function SimilarUrlCard(props: Props) {
       urlLibraryCount={props.urlView.urlLibraryCount}
       urlIsInLibrary={props.urlView.urlInLibrary ?? false}
       urlConnectionCount={props.urlView.urlConnectionCount ?? 0}
+      urlIsConnected={props.urlView.urlIsConnected}
       analyticsContext={props.analyticsContext}
     />
   );
-- 
2.51.2