From 781d092a1d2861fd6e787e5a3f112d51770c48cb Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Wed, 19 Nov 2025 11:11:14 +0100
Subject: [PATCH 1/3] feat: enhance styling and structure of components with
 helper functions

---
 src/components/badge/Badge.stories.tsx   |  4 +--
 src/components/badge/Badge.style.scss    |  4 +--
 src/components/breadcrumb/Breadcrumb.tsx |  3 +-
 src/components/button/Button.style.scss  |  5 +---
 src/components/card/Card.style.scss      | 15 ++++++++--
 src/components/card/CardSection.tsx      |  9 +++++-
 src/components/menu/Menu.style.scss      |  6 ++--
 src/components/quote/Quote.tsx           | 36 +++++++++++-------------
 src/styles/_box.scss                     | 10 +++----
 src/styles/_helpers.scss                 |  2 +-
 10 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/src/components/badge/Badge.stories.tsx b/src/components/badge/Badge.stories.tsx
index e66d3981..24a3769c 100644
--- a/src/components/badge/Badge.stories.tsx
+++ b/src/components/badge/Badge.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import {Badge} from "./Badge";
 import {Button} from "../button/Button";
 import {IconGitBranch} from "@tabler/icons-react";
-import {Colors as BadgeVariants}  from "../../utils/types";
+import {Colors as BadgeVariants} from "../../utils/types";
 
 const meta: Meta = {
     title: "Badge",
@@ -26,7 +26,7 @@ export const Variants = () => {
 
 export const ButtonExample = () => {
     return <Button color={"primary"}>
-            <IconGitBranch/>
+        <IconGitBranch size={16}/>
         Merge Branch
         <Badge style={{marginLeft: ".5rem"}} color={"secondary"}>
             Badge
diff --git a/src/components/badge/Badge.style.scss b/src/components/badge/Badge.style.scss
index 33645f13..12fd871c 100644
--- a/src/components/badge/Badge.style.scss
+++ b/src/components/badge/Badge.style.scss
@@ -3,16 +3,16 @@
 @use "../../styles/variables";
 
 .badge {
-  padding: variables.$xxs / 2 variables.$xs;
+  padding: variables.$xxs / 3 variables.$xxs;
   display: inline-flex;
   font-size: variables.$xs;
   width: fit-content;
   align-items: center;
   gap: variables.$xxs;
+  border-radius: variables.$xxs;
 
   & {
     @include helpers.fontStyle();
-    @include helpers.borderRadius();
   }
 }
 
diff --git a/src/components/breadcrumb/Breadcrumb.tsx b/src/components/breadcrumb/Breadcrumb.tsx
index b144709a..44bdb829 100644
--- a/src/components/breadcrumb/Breadcrumb.tsx
+++ b/src/components/breadcrumb/Breadcrumb.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import {mergeCode0Props} from "../../utils/utils";
 import {Code0Component} from "../../utils/types";
 import "./Breadcrumb.style.scss"
+import {IconChevronRight} from "@tabler/icons-react";
 
 export interface BreadcrumbProps extends Code0Component<HTMLDivElement> {
     splitter?: React.ReactNode //defaults to slash (/)
@@ -10,7 +11,7 @@ export interface BreadcrumbProps extends Code0Component<HTMLDivElement> {
 
 export const Breadcrumb: React.FC<BreadcrumbProps> = props => {
 
-    const {splitter = "/", children, ...rest} = props
+    const {splitter = <IconChevronRight size={16}/>, children, ...rest} = props
 
     return <div {...mergeCode0Props(`breadcrumb`, rest)}>
         {
diff --git a/src/components/button/Button.style.scss b/src/components/button/Button.style.scss
index e834d773..ef437e02 100644
--- a/src/components/button/Button.style.scss
+++ b/src/components/button/Button.style.scss
@@ -14,10 +14,6 @@
   font-size: variables.$sm;
 
   @include helpers.disabled;
-
-  & {
-    @include helpers.borderRadius()
-  }
 }
 
 
@@ -48,5 +44,6 @@
 
   .button--#{$name} {
     padding: $size $next-size;
+    border-radius: $next-size;
   }
 }
\ No newline at end of file
diff --git a/src/components/card/Card.style.scss b/src/components/card/Card.style.scss
index 85fe742f..3ed8d37c 100644
--- a/src/components/card/Card.style.scss
+++ b/src/components/card/Card.style.scss
@@ -7,6 +7,7 @@
   display: block;
   position: relative;
   font-size: variables.$sm;
+  overflow: hidden;
 
   & {
     @include helpers.fontStyle();
@@ -18,12 +19,12 @@
     }
 
     &--border:first-child {
-      padding-top: 0;
+      margin-top: calc(-1 * var(--padding));
       border-top: none;
     }
 
     &--border:not(:has(~ .card__section)) {
-      padding-bottom: 0;
+      margin-bottom: calc(-1 * var(--padding));
       border-bottom: none;
     }
   }
@@ -36,6 +37,7 @@
 
   &__section {
     position: relative;
+    box-sizing: border-box;
 
     &--border {
       margin-right: calc(-1 * var(--padding));
@@ -50,6 +52,13 @@
 
       }
     }
+
+    &--hover {
+      cursor: pointer;
+      &:hover {
+        background: helpers.backgroundColor(variables.$secondary);
+      }
+    }
   }
 
 }
@@ -94,7 +103,7 @@
   }
 
   .card--border-#{$name} {
-    box-shadow: inset 0 0 0 1px helpers.borderColor($color);
+    box-shadow: 1px solid helpers.borderColor($color);
   }
 
   .card--border--dashed {
diff --git a/src/components/card/CardSection.tsx b/src/components/card/CardSection.tsx
index f8c37664..3cd289a0 100644
--- a/src/components/card/CardSection.tsx
+++ b/src/components/card/CardSection.tsx
@@ -8,6 +8,7 @@ export interface SectionType extends Code0Component<HTMLDivElement> {
     image?: boolean,
     //defaults to false
     border?: boolean
+    hover?: boolean
 }
 
 const CardSection: React.FC<SectionType> = (props) => {
@@ -15,12 +16,18 @@ const CardSection: React.FC<SectionType> = (props) => {
     const {
         image = false,
         border = false,
+        hover = false,
         children,
         ...args
     } = props;
 
     return <>
-        <div {...mergeCode0Props(`card__section ${border ? "card__section--border" : ""} ${image ? "card__section--image" : ""}`, args)}>
+        <div {...mergeCode0Props(`
+                                card__section 
+                                ${border ? "card__section--border" : ""} 
+                                ${image ? "card__section--image" : ""}
+                                ${hover ? "card__section--hover" : ""}
+        `, args)}>
             {children}
         </div>
     </>
diff --git a/src/components/menu/Menu.style.scss b/src/components/menu/Menu.style.scss
index adebd665..3f208d75 100644
--- a/src/components/menu/Menu.style.scss
+++ b/src/components/menu/Menu.style.scss
@@ -11,7 +11,7 @@
     box-sizing: border-box;
 
     & {
-      @include box.box(variables.$primary, variables.$primary, variables.$primary);
+      @include box.box(variables.$primary);
       @include helpers.borderRadius();
     }
   }
@@ -45,12 +45,12 @@
       @include helpers.noFocusStyle();
       @include helpers.fontStyle();
       @include helpers.disabled();
-      box-shadow: none;
+      border: none;
     }
 
     &:focus {
       @include box.box(variables.$white, variables.$white, variables.$white);
-      box-shadow: none;
+      border: none;
       width: 100%;
     }
   }
diff --git a/src/components/quote/Quote.tsx b/src/components/quote/Quote.tsx
index 2d4b787f..710e97ae 100644
--- a/src/components/quote/Quote.tsx
+++ b/src/components/quote/Quote.tsx
@@ -15,24 +15,22 @@ export interface QuoteType extends Omit<CardProps, "children"> {
 
 export const Quote: React.FC<QuoteType> = (props) => {
     const {logo, name, position, inlineBorder = true, children, ...args} = props;
-    return <Card {...args}>
-        <div className={"quote"}>
-            <CardSection border={inlineBorder}>
-                <div className={"quote__text"}>
-                    {children}
-                </div>
-            </CardSection>
-            <CardSection className={"quote__footer"}>
-                {
-                    !!logo ? <div>
-                        <img className={"quote__img"} src={logo} alt={"logo of quote"}/>
-                    </div> : null
-                }
-                <div>
-                    <Text size={"md"} hierarchy={"primary"} m={0}>{name}</Text>
-                    <Text size={"sm"}>{position}</Text>
-                </div>
-            </CardSection>
-        </div>
+    return <Card {...args} className={"quote"}>
+        <CardSection border>
+            <div className={"quote__text"}>
+                {children}
+            </div>
+        </CardSection>
+        <CardSection border className={"quote__footer"}>
+            {
+                !!logo ? <div>
+                    <img className={"quote__img"} src={logo} alt={"logo of quote"}/>
+                </div> : null
+            }
+            <div>
+                <Text size={"md"} hierarchy={"primary"} m={0}>{name}</Text>
+                <Text size={"sm"}>{position}</Text>
+            </div>
+        </CardSection>
     </Card>
 }
\ No newline at end of file
diff --git a/src/styles/_box.scss b/src/styles/_box.scss
index b90a4a15..5b4b7aae 100644
--- a/src/styles/_box.scss
+++ b/src/styles/_box.scss
@@ -1,5 +1,6 @@
 @use "variables";
 @use "sass:color";
+@use "helpers";
 
 @mixin box(
   $background: variables.$secondary,
@@ -10,12 +11,11 @@
   $mixedBorderWhite: color.mix($borderColor, variables.$white, 25%);
   $mixedBorderBlack: color.mix($borderColor, variables.$black, 25%);
 
-  border: none;
-  background: color.mix($background, variables.$primary, 10%);
+  background: helpers.backgroundColor($background);
+  border: 1px solid helpers.borderColor($borderColor);
   color: rgba($color, .75);
   position: relative;
   box-sizing: border-box;
-  box-shadow: inset 0 0 0 1px rgba($mixedBorderWhite, .1);
 
 }
 
@@ -28,7 +28,7 @@
   $mixedBorderBlack: color.mix($borderColor, variables.$black, 25%);
 
   &:hover {
-    box-shadow: inset 0 0 0 1px rgba($mixedBorderWhite, .25);
+    border-color: rgba($mixedBorderWhite, .25);
   }
 }
 
@@ -40,7 +40,7 @@
   $mixedBorderWhite: color.mix($borderColor, variables.$white, 25%);
   $mixedBorderBlack: color.mix($borderColor, variables.$black, 25%);
 
-  box-shadow: inset 0 0 0 1px rgba($mixedBorderWhite, .05), inset 0 0 3rem 0 rgba($mixedBorderWhite, .1);
+  border-color: rgba($mixedBorderWhite, .1);
   outline: none;
 }
 
diff --git a/src/styles/_helpers.scss b/src/styles/_helpers.scss
index 2654370a..f6f05d3c 100644
--- a/src/styles/_helpers.scss
+++ b/src/styles/_helpers.scss
@@ -33,7 +33,7 @@
 }
 
 @function backgroundColor($color: variables.$secondary) {
-  @return color.mix($color, variables.$primary, 10%);
+  @return color.mix($color, variables.$primary, 15%);
 }
 
 @mixin noFocusStyle() {

From 550877a976d14914b8cf860fa375bd8c65a9c5d1 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Wed, 19 Nov 2025 11:11:18 +0100
Subject: [PATCH 2/3] feat: enhance DOrganizationList and DOrganizationContent
 components with click handling

---
 src/components/d-organization/DOrganizationList.tsx   |  4 +++-
 src/components/d-organization/DOrganizatonContent.tsx | 11 ++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/d-organization/DOrganizationList.tsx b/src/components/d-organization/DOrganizationList.tsx
index 4a47feb3..412610c7 100644
--- a/src/components/d-organization/DOrganizationList.tsx
+++ b/src/components/d-organization/DOrganizationList.tsx
@@ -24,7 +24,9 @@ export const DOrganizationList: React.FC<DOrganizationListProps> = (props) => {
 
     return <Card {...rest}>
         {organizations.filter(filter).map((organization) => organization.id && (
-            <CardSection border key={organization.id}>
+            <CardSection border hover onClick={() => {
+                console.log("tets")
+            }} key={organization.id}>
                 <DOrganizationContent onLeave={onLeave} onSetting={onSetting} organizationId={organization?.id}/>
             </CardSection>
         ))}
diff --git a/src/components/d-organization/DOrganizatonContent.tsx b/src/components/d-organization/DOrganizatonContent.tsx
index 46394547..104f6480 100644
--- a/src/components/d-organization/DOrganizatonContent.tsx
+++ b/src/components/d-organization/DOrganizatonContent.tsx
@@ -21,7 +21,6 @@ export interface DOrganizationCardProps extends Code0Component<HTMLDivElement> {
     onLeave?: (organizationId: Scalars['OrganizationID']['output']) => void
 }
 
-//TODO: handle skeleton
 export const DOrganizationContent: React.FC<DOrganizationCardProps> = props => {
 
     const {
@@ -86,12 +85,18 @@ export const DOrganizationContent: React.FC<DOrganizationCardProps> = props => {
             </Flex>
             <Flex align={"center"} style={{gap: "0.35rem"}}>
                 {(organization?.userAbilities?.deleteOrganization || organization?.userAbilities?.updateOrganization) ? (
-                    <Button color={"secondary"} onClick={() => onSetting(organizationId)}>
+                    <Button color={"secondary"} onClick={(event) => {
+                        event.stopPropagation()
+                        onSetting(organizationId)
+                    }}>
                         <IconSettings size={16}/>
                     </Button>
                 ) : null}
                 {namespaceMember && namespaceMember.userAbilities?.deleteMember ? (
-                    <Button color={"error"} onClick={() => onLeave(organizationId)}>
+                    <Button color={"error"} onClick={(event) => {
+                        event.stopPropagation()
+                        onLeave(organizationId)
+                    }}>
                         <IconLogout size={16}/> Leave
                     </Button>
                 ) : null}

From 1c8e8c62560ed54a5939138cb1f6a1cf5d63c647 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Wed, 19 Nov 2025 14:45:26 +0100
Subject: [PATCH 3/3] feat: add onSelect prop to DNamespaceProjectList,
 DOrganizationList, DRuntimeList, and DUserList components for improved click
 handling

---
 src/components/d-organization/DOrganizationList.tsx | 13 +++++++------
 .../d-project/DNamespaceProjectContent.tsx          |  5 ++++-
 src/components/d-project/DNamespaceProjectList.tsx  |  9 ++++++---
 src/components/d-runtime/DRuntimeContent.tsx        |  5 ++++-
 src/components/d-runtime/DRuntimeList.tsx           |  9 ++++++---
 src/components/d-user/DUserContent.tsx              | 10 ++++++++--
 src/components/d-user/DUserList.tsx                 | 12 +++++++-----
 7 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/components/d-organization/DOrganizationList.tsx b/src/components/d-organization/DOrganizationList.tsx
index 412610c7..1fe1bbd2 100644
--- a/src/components/d-organization/DOrganizationList.tsx
+++ b/src/components/d-organization/DOrganizationList.tsx
@@ -7,12 +7,13 @@ import {DOrganizationReactiveService} from "./DOrganization.service";
 import CardSection from "../card/CardSection";
 import {DOrganizationContent} from "./DOrganizatonContent";
 import {DOrganizationView} from "./DOrganization.view";
-import {Scalars} from "@code0-tech/sagittarius-graphql-types";
+import {Organization, Scalars} from "@code0-tech/sagittarius-graphql-types";
 
-export interface DOrganizationListProps extends Omit<Card, "children"> {
+export interface DOrganizationListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (organizations: DOrganizationView, index: number) => boolean
-    onSetting?: (organizationId: Scalars['OrganizationID']['output']) => void
-    onLeave?: (organizationId: Scalars['OrganizationID']['output']) => void
+    onSetting?: (organizationId: Organization['id']) => void
+    onLeave?: (organizationId: Organization['id']) => void
+    onSelect?: (organizationId: Organization['id']) => void
 }
 
 export const DOrganizationList: React.FC<DOrganizationListProps> = (props) => {
@@ -20,12 +21,12 @@ export const DOrganizationList: React.FC<DOrganizationListProps> = (props) => {
     const organizationService = useService(DOrganizationReactiveService)
     const organizationStore = useStore(DOrganizationReactiveService)
     const organizations = React.useMemo(() => organizationService.values(), [organizationStore])
-    const {filter = () => true, onLeave, onSetting, ...rest} = props
+    const {filter = () => true, onLeave, onSetting, onSelect, ...rest} = props
 
     return <Card {...rest}>
         {organizations.filter(filter).map((organization) => organization.id && (
             <CardSection border hover onClick={() => {
-                console.log("tets")
+                if (onSelect) onSelect(organization.id)
             }} key={organization.id}>
                 <DOrganizationContent onLeave={onLeave} onSetting={onSetting} organizationId={organization?.id}/>
             </CardSection>
diff --git a/src/components/d-project/DNamespaceProjectContent.tsx b/src/components/d-project/DNamespaceProjectContent.tsx
index b572ddfa..4a05a8ac 100644
--- a/src/components/d-project/DNamespaceProjectContent.tsx
+++ b/src/components/d-project/DNamespaceProjectContent.tsx
@@ -88,7 +88,10 @@ export const DNamespaceProjectContent: React.FC<DNamespaceProjectContentProps> =
                     )}
                 </Flex>
                 {project?.userAbilities?.deleteNamespaceProject || project?.userAbilities?.updateNamespaceProject ? (
-                    <Button color={"secondary"} onClick={() => onSetting(projectId)}>
+                    <Button color={"secondary"} onClick={(event) => {
+                        event.stopPropagation()
+                        onSetting(projectId)
+                    }}>
                         <IconSettings size={16}/>
                     </Button>
                 ) : null}
diff --git a/src/components/d-project/DNamespaceProjectList.tsx b/src/components/d-project/DNamespaceProjectList.tsx
index 1e323265..a3c56d2c 100644
--- a/src/components/d-project/DNamespaceProjectList.tsx
+++ b/src/components/d-project/DNamespaceProjectList.tsx
@@ -7,13 +7,14 @@ import {DNamespaceProjectReactiveService} from "./DNamespaceProject.service";
 import CardSection from "../card/CardSection";
 import {DNamespaceProjectContent} from "./DNamespaceProjectContent";
 
-export interface DNamespaceProjectListProps extends Omit<Card, "children"> {
+export interface DNamespaceProjectListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (project: DNamespaceProjectView, index: number) => boolean
     onSetting?: (projectId: NamespaceProject["id"]) => void
+    onSelect?: (projectId: NamespaceProject["id"]) => void
 }
 
 export const DNamespaceProjectList: React.FC<DNamespaceProjectListProps> = (props) => {
-    const {filter = () => true, onSetting, ...rest} = props
+    const {filter = () => true, onSetting, onSelect, ...rest} = props
 
     const projectService = useService(DNamespaceProjectReactiveService)
     const projectStore = useStore(DNamespaceProjectReactiveService)
@@ -21,7 +22,9 @@ export const DNamespaceProjectList: React.FC<DNamespaceProjectListProps> = (prop
 
     return <Card {...rest}>
         {projects.filter(filter).map((project) => project.id && (
-            <CardSection border key={project.id}>
+            <CardSection border hover onClick={() => {
+                if (onSelect) onSelect(project.id)
+            }} key={project.id}>
                 <DNamespaceProjectContent onSetting={onSetting} projectId={project?.id}/>
             </CardSection>
         ))}
diff --git a/src/components/d-runtime/DRuntimeContent.tsx b/src/components/d-runtime/DRuntimeContent.tsx
index f9829638..33830538 100644
--- a/src/components/d-runtime/DRuntimeContent.tsx
+++ b/src/components/d-runtime/DRuntimeContent.tsx
@@ -43,7 +43,10 @@ export const DRuntimeContent: React.FC<DRuntimeContentProps> = (props) => {
                 )}
             </Flex>
             {runtime?.userAbilities?.deleteRuntime || runtime?.userAbilities?.updateRuntime || runtime?.userAbilities?.rotateRuntimeToken ? (
-                <Button color={"secondary"} onClick={() => onSetting(runtimeId)}>
+                <Button color={"secondary"} onClick={(event) => {
+                    event.stopPropagation()
+                    onSetting(runtimeId)
+                }}>
                     <IconSettings size={16}/>
                 </Button>
             ) : null}
diff --git a/src/components/d-runtime/DRuntimeList.tsx b/src/components/d-runtime/DRuntimeList.tsx
index 0fadab31..586708d3 100644
--- a/src/components/d-runtime/DRuntimeList.tsx
+++ b/src/components/d-runtime/DRuntimeList.tsx
@@ -7,14 +7,15 @@ import {DRuntimeReactiveService} from "./DRuntime.service";
 import CardSection from "../card/CardSection";
 import {DRuntimeContent} from "./DRuntimeContent";
 
-export interface DRuntimeListProps extends Omit<Card, "children"> {
+export interface DRuntimeListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (runtime: DRuntimeView, index: number) => boolean
+    onSelect?: (userId: Runtime['id']) => void
     onSetting?: (runtimeId: Runtime['id']) => void
 }
 
 export const DRuntimeList: React.FC<DRuntimeListProps> = (props) => {
 
-    const {filter = () => true, onSetting, ...rest} = props
+    const {filter = () => true, onSetting, onSelect, ...rest} = props
 
     const runtimeService = useService(DRuntimeReactiveService)
     const runtimeStore = useStore(DRuntimeReactiveService)
@@ -22,7 +23,9 @@ export const DRuntimeList: React.FC<DRuntimeListProps> = (props) => {
 
     return <Card {...rest}>
         {runtimes.filter(filter).map((runtime) => runtime.id && (
-            <CardSection border key={runtime.id}>
+            <CardSection border hover onClick={() => {
+                if (onSelect) onSelect(runtime.id)
+            }} key={runtime.id}>
                 <DRuntimeContent onSetting={onSetting} runtimeId={runtime?.id}/>
             </CardSection>
         ))}
diff --git a/src/components/d-user/DUserContent.tsx b/src/components/d-user/DUserContent.tsx
index e3ca53e6..77e60ef0 100644
--- a/src/components/d-user/DUserContent.tsx
+++ b/src/components/d-user/DUserContent.tsx
@@ -53,10 +53,16 @@ export const DUserContent: React.FC<DUserContentProps> = (props) => {
                     {
                         remove ? (
                             <Flex align={"center"} style={{gap: "0.35rem"}}>
-                                <Button color={"error"} onClick={() => onRemove(userId)}>
+                                <Button color={"error"} onClick={(event) => {
+                                    event.stopPropagation()
+                                    onRemove(userId)
+                                }}>
                                     Confirm remove
                                 </Button>
-                                <Button onClick={() => setRemove(false)} color={"success"}>
+                                <Button onClick={(event) => {
+                                    event.stopPropagation()
+                                    setRemove(false)
+                                }} color={"success"}>
                                     Cancel
                                 </Button>
                             </Flex>
diff --git a/src/components/d-user/DUserList.tsx b/src/components/d-user/DUserList.tsx
index 006045eb..56f49b2d 100644
--- a/src/components/d-user/DUserList.tsx
+++ b/src/components/d-user/DUserList.tsx
@@ -7,22 +7,24 @@ import {Card} from "../card/Card";
 import CardSection from "../card/CardSection";
 import {DUserContent} from "./DUserContent";
 
-export interface DUserListProps extends Omit<Card, "children"> {
+export interface DUserListProps extends Omit<Card, "children" | "onSelect"> {
     filter?: (user: DUserView, index: number) => boolean
+    onSelect?: (userId: User['id']) => void
     onRemove?: (userId: User['id']) => void
 }
 
 export const DUserList: React.FC<DUserListProps> = (props) => {
 
-    const {filter = () => true, onRemove, ...rest} = props
+    const {filter = () => true, onRemove, onSelect, ...rest} = props
     const userService = useService(DUserReactiveService)
     const userStore = useStore(DUserReactiveService)
     const users = React.useMemo(() => userService.values(), [userStore])
 
-
     return <Card {...rest}>
-        {users.filter(filter).map((user) => user.id && (
-            <CardSection border key={user.id}>
+        {users.filter(filter).map((user) => user && user.id && (
+            <CardSection border hover onClick={() => {
+                if (onSelect) onSelect(user.id)
+            }} key={user.id}>
                 <DUserContent onRemove={onRemove} userId={user?.id}/>
             </CardSection>
         ))}