From 93e03c6733339d564ebb7ad94b4431c7a8205224 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sat, 12 Oct 2024 21:39:44 -0700
Subject: [PATCH] updating card item

---
 app/client/web/src/card/Card.module.css       | 22 +++++++++++++++++--
 app/client/web/src/card/Card.tsx              | 22 ++++++++++---------
 .../web/src/contacts/Contacts.module.css      | 14 ++++++------
 app/client/web/src/contacts/Contacts.tsx      |  7 +++---
 4 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/app/client/web/src/card/Card.module.css b/app/client/web/src/card/Card.module.css
index 4feef7b5..1342cfcf 100644
--- a/app/client/web/src/card/Card.module.css
+++ b/app/client/web/src/card/Card.module.css
@@ -2,11 +2,29 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: auto;
   height: 100%;
-  cursor: default;
   gap: 8px;
 
+  .cursor {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+    gap: 4px;
+    cursor: pointer;
+  }
+
+  .nocursor {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+    gap: 4px;
+    cursor: default;
+  }
+
   .details {
     display: flex;
     flex-direction: column;
diff --git a/app/client/web/src/card/Card.tsx b/app/client/web/src/card/Card.tsx
index 1732803d..0df42b54 100644
--- a/app/client/web/src/card/Card.tsx
+++ b/app/client/web/src/card/Card.tsx
@@ -2,20 +2,22 @@ import React, { ReactNode } from 'react'
 import { Image, Text } from '@mantine/core';
 import classes from './Card.module.css'
 
-export function Card({ imageUrl, name, placeholder, handle, node, actions, className }: { className: string, imageUrl: string, name: string, placeholder: string, handle: string, node: string, actions: ReactNode[] }) {
+export function Card({ imageUrl, name, placeholder, handle, node, select, actions, className }: { className: string, imageUrl: string, name: string, placeholder: string, handle: string, node: string, select?: () => void, actions: ReactNode[] }) {
 
   return (
     <div className={className}>
       <div className={classes.card}>
-        <Image radius="sm" className={classes.image} src={imageUrl} />
-        <div className={classes.details}>
-          { name && (
-            <Text className={classes.nameSet}>{ name }</Text>
-          )}
-          { !name && (
-            <Text className={classes.nameUnset}>{ placeholder }</Text>
-          )}
-          <Text className={classes.handle}>{ node ? `${handle}/${node}` : handle }</Text>
+        <div className={select ? classes.cursor : classes.nocursor} onClick={select ? select : ()=>{}}>
+          <Image radius="sm" className={classes.image} src={imageUrl} />
+          <div className={classes.details}>
+            { name && (
+              <Text className={classes.nameSet}>{ name }</Text>
+            )}
+            { !name && (
+              <Text className={classes.nameUnset}>{ placeholder }</Text>
+            )}
+            <Text className={classes.handle}>{ node ? `${handle}/${node}` : handle }</Text>
+          </div>
         </div>
         { actions }
       </div>
diff --git a/app/client/web/src/contacts/Contacts.module.css b/app/client/web/src/contacts/Contacts.module.css
index 41078418..1e1fa416 100644
--- a/app/client/web/src/contacts/Contacts.module.css
+++ b/app/client/web/src/contacts/Contacts.module.css
@@ -36,31 +36,31 @@
     overscroll-behavior: none;
 
     .requested {
-      border-right: 3px solid #aa44aa;
+      border-right: 5px solid #aa44aa;
     }
 
     .connecting {
-      border-right: 3px solid #22aacc;
+      border-right: 5px solid #22aacc;
     }
 
     .pending {
-      border-right: 3px solid #aaaa44;
+      border-right: 5px solid #aaaa44;
     }
 
     .connected {
-      border-right: 3px solid #44aa44;
+      border-right: 5px solid #44aa44;
     }
 
     .confirmed {
-      border-right: 3px solid #cccccc;
+      border-right: 5px solid #cccccc;
     }
 
     .unknown {
-      border-right: 3px solid #555555;
+      border-right: 5px solid #555555;
     }
 
     .offsync {
-      border-right: 3px solid #dd6633;
+      border-right: 5px solid #dd6633;
     }
 
     .card {
diff --git a/app/client/web/src/contacts/Contacts.tsx b/app/client/web/src/contacts/Contacts.tsx
index b657bbe3..6f0cecdd 100644
--- a/app/client/web/src/contacts/Contacts.tsx
+++ b/app/client/web/src/contacts/Contacts.tsx
@@ -9,11 +9,12 @@ export function Contacts() {
   const { state, actions } = useContacts();
 
   const cards = state.filtered.map((card) => {
-    const call = <ActionIcon variant="subtle"><IconPhone size={24} onClick={() => {console.log('calling')}} /></ActionIcon>
-    const message = <ActionIcon variant="subtle"><IconMessage2 size={24} onClick={() => {console.log('texting')}} /></ActionIcon>
+    const call = <ActionIcon variant="subtle"><IconPhone size={24} onClick={() => {console.log("CALL:", card.cardId)}} /></ActionIcon>
+    const message = <ActionIcon variant="subtle"><IconMessage2 size={24} onClick={() => {console.log("TEXT:", card.cardId)}} /></ActionIcon>
     const options = card.status === 'connected' && !card.offsync ? [message, call] : [];
+    const select = () => { console.log("SELECT:", card.cardId); }
     const status = card.offsync ? classes.offsync : classes[card.status];
-    return (<Card className={`${classes.card} ${status}`} key={card.cardId} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} actions={options} />)
+    return (<Card className={`${classes.card} ${status}`} key={card.cardId} imageUrl={card.imageUrl} name={card.name} handle={card.handle} node={card.node} placeholder={state.strings.name} select={select} actions={options} />)
   });
 
   return (