Added clearer links; Fixed some notification grouping ui stuff again

homebase-id · Jan 3, 2024 · 1d4c51b · 1d4c51b
1 parent c1d3a7c
commit 1d4c51b
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 9 deletions.
diff --git a/packages/chat-app/src/components/Chat/Detail/ChatInfo.tsx b/packages/chat-app/src/components/Chat/Detail/ChatInfo.tsx
@@ -69,7 +69,7 @@ export const ChatInfo = ({
                     href={`https://${recipient}`}
                     rel="noreferrer noopener"
                     target="_blank"
-                    className="text-primary"
+                    className="text-primary hover:underline"
                   >
                     {recipient}
                   </a>

diff --git a/packages/owner-app/src/components/Connection/ConnectionCard/ConnectionCard.tsx b/packages/owner-app/src/components/Connection/ConnectionCard/ConnectionCard.tsx
@@ -18,7 +18,7 @@ const ConnectionCard = (props: PersonCardProps) => {
   return (
     <>
       <PersonCard {...props}>
-        <h2 className="font-thiner mb-6 flex flex-col dark:text-white">
+        <h2 className="font-thiner flex flex-col dark:text-white">
           <span>{fullName ?? props.odinId}</span>
           {fullName ? (
             <small className="d-block break-words text-sm text-slate-500 dark:text-slate-400">

diff --git a/packages/owner-app/src/components/Connection/ContactInfo/ContactInfo.tsx b/packages/owner-app/src/components/Connection/ContactInfo/ContactInfo.tsx
@@ -1,4 +1,4 @@
-import { Envelope, t } from '@youfoundation/common-app';
+import { Envelope, t, useDotYouClient } from '@youfoundation/common-app';
 import { useContact } from '../../../hooks/contacts/useContact';
 import { ErrorNotification } from '@youfoundation/common-app';
 import { ActionButton } from '@youfoundation/common-app';
@@ -7,6 +7,7 @@ import Section from '../../ui/Sections/Section';
 import ContactImage from '../ContactImage/ContactImage';
 import { DriveSearchResult } from '@youfoundation/js-lib/core';
 import { ContactFile } from '@youfoundation/js-lib/network';
+import { useConnection } from '../../../hooks/connections/useConnection';
 
 interface ContactInfoProps {
   odinId?: string;
@@ -18,16 +19,37 @@ const ContactInfo = ({ odinId, contactId }: ContactInfoProps) => {
     fetch: { data: contact },
     refresh: { mutate: refresh, status: refreshState, error: refreshError },
   } = useContact(odinId ? { odinId: odinId } : { id: contactId });
+  const {
+    fetch: { data: connectionInfo },
+  } = useConnection({ odinId: odinId });
+  const { getIdentity } = useDotYouClient();
 
   if (!contact) return null;
 
   const contactContent = contact?.fileMetadata.appData.content;
 
+  const isConnected = connectionInfo?.status === 'connected';
+  const identity = getIdentity();
+
   return (
     <>
       <ErrorNotification error={refreshError} />
       <Section
-        title={t('Details')}
+        title={
+          <>
+            {t('Details')}
+            <a
+              href={`https://${odinId}${
+                isConnected && identity ? '?youauth-logon=' + identity : ''
+              }`}
+              rel="noopener noreferrer"
+              target="_blank"
+              className="block text-sm text-primary hover:underline"
+            >
+              {odinId}
+            </a>
+          </>
+        }
         actions={
           odinId &&
           contact?.fileMetadata.appData.uniqueId && (

diff --git a/packages/owner-app/src/components/Connection/DomainCard/DomainCard.tsx b/packages/owner-app/src/components/Connection/DomainCard/DomainCard.tsx
@@ -3,7 +3,7 @@ import CompanyCard, { CompanyCardProps } from '../CompanyCard/CompanyCard';
 const DomainCard = (props: CompanyCardProps) => {
   return (
     <CompanyCard {...props}>
-      <h2 className="font-thiner mb-6 flex flex-col dark:text-white">
+      <h2 className="font-thiner flex flex-col dark:text-white">
         <span className="break-words">{props.domain}</span>
       </h2>
       {props.children}

diff --git a/packages/owner-app/src/templates/Notifications/Notifications.tsx b/packages/owner-app/src/templates/Notifications/Notifications.tsx
@@ -2,6 +2,7 @@ import {
   ActionButton,
   Bubble,
   Cog,
+  ellipsisAtMaxChar,
   ErrorNotification,
   SubtleMessage,
   t,
@@ -224,9 +225,7 @@ const NotificationGroup = ({
               {sliced.map((notification, index) => (
                 <div
                   key={notification.id}
-                  className={
-                    index === 0 ? 'relative z-10' : 'absolute w-full overflow-hidden rounded-lg'
-                  }
+                  className={index === 0 ? 'relative z-10' : 'absolute w-full rounded-lg'}
                   style={
                     index === 0
                       ? undefined
@@ -242,7 +241,11 @@ const NotificationGroup = ({
                 >
                   <Toast
                     title={titleFormer(appName)}
-                    body={bodyFormer(notification, false, appName)}
+                    // Keeping the hidden ones short
+                    body={ellipsisAtMaxChar(
+                      bodyFormer(notification, false, appName),
+                      index === 0 ? 120 : 40
+                    )}
                     timestamp={notification.created}
                     onDismiss={() => remove(typeGroup.map((n) => n.id))}
                     onOpen={() => markAsRead(typeGroup.map((n) => n.id))}