feat: add support for displaying additional phone numbers in search results (#63)

Author: therockerline

public/locales/en/translations.json

@@ -82,7 +82,11 @@
     "Screen share dialog description": "This application requires permission to record the screen.\n\nClick 'Open Settings' and then select 'Privacy & Security' then 'Screen & System Audio Recording' from the list and enable the permission for 'NethLink'.",
     "Cancel button": "Cancel",
     "Open settings button": "Open Settings",
-    "Shortcut": "Define a keyboard shortcut"
+    "Shortcut": "Define a keyboard shortcut",
+    "PlusOther_one": "+ {{count}} other",
+    "PlusOther_other": "+ {{count}} others",
+    "Copy": "Copy",
+    "Copied": "Copied"
   },
   "Login": {
     "Welcome": "Welcome",

public/locales/it/translations.json

@@ -82,7 +82,11 @@
     "Screen share dialog description": "Questa applicazione richiede il permesso di registrare lo schermo.\n\nClicca su 'Apri Impostazioni', poi seleziona 'Privacy & Sicurezza' poi 'Registrazione Schermo e Audio di Sistema' dalla lista e abilita il permesso per 'NethLink'.",
     "Cancel button": "Annulla",
     "Open settings button": "Apri Impostazioni",
-    "Shortcut": "Scegli una combinazione di tasti"
+    "Shortcut": "Scegli una combinazione di tasti",
+    "PlusOther_one": "+ {{count}} altro",
+    "PlusOther_other": "+ {{count}} altri",
+    "Copy": "Copia",
+    "Copied": "Copiato"
   },
   "Login": {
     "Welcome": "Benvenuto",

src/main/lib/ipcEvents.ts

@@ -9,7 +9,7 @@ import { Log } from '@shared/utils/logger'
 import { NethLinkController } from '@/classes/controllers/NethLinkController'
 import { AppController } from '@/classes/controllers/AppController'
 import { store } from './mainStore'
-import { debouncer, getAccountUID, getPageFromQuery } from '@shared/utils/utils'
+import { debouncer, getAccountUID, getPageFromQuery, isDev } from '@shared/utils/utils'
 import { NetworkController } from '@/classes/controllers/NetworkController'
 import { useLogin } from '@shared/useLogin'
 import { PhoneIslandWindow } from '@/classes/windows'
@@ -212,8 +212,17 @@ export function registerIpcEvents() {
     shell.openExternal(join('https://' + account!.host, path))
   })
 
-  ipcMain.on(IPC_EVENTS.OPEN_EXTERNAL_PAGE, async (_, path) => {
-    shell.openExternal(join(path))
+  ipcMain.on(IPC_EVENTS.OPEN_EXTERNAL_PAGE, async (event, path) => {
+    if (isDev()) {
+      const window = BrowserWindow.fromWebContents(event.sender);
+      window?.loadURL(join(path))
+    } else {
+      shell.openExternal(join(path))
+    }
+  })
+
+  ipcMain.on(IPC_EVENTS.COPY_TO_CLIPBOARD, async (_, text) => {
+    clipboard.writeText(text)
   })
 
   ipcMain.on(IPC_EVENTS.PHONE_ISLAND_RESIZE, (_, size) => {

src/preload/index.ts

@@ -40,6 +40,7 @@ export interface IElectronAPI {
   exitNethLink(): void
   hidePhoneIsland(): void
   showPhoneIsland(size: Size): void
+  copyToClipboard(text: string): void
 
 }
 
@@ -98,6 +99,7 @@ const api: IElectronAPI = {
   exitNethLink: setEmitter(IPC_EVENTS.CLOSE_NETH_LINK),
   hidePhoneIsland: setEmitter(IPC_EVENTS.HIDE_PHONE_ISLAND),
   showPhoneIsland: setEmitter(IPC_EVENTS.SHOW_PHONE_ISLAND),
+  copyToClipboard: setEmitter(IPC_EVENTS.COPY_TO_CLIPBOARD),
 
   //LISTENERS - receive data async
   onUpdateAppNotification: addListener(IPC_EVENTS.UPDATE_APP_NOTIFICATION),

src/renderer/public/locales/en/translations.json

@@ -82,7 +82,11 @@
     "Screen share dialog description": "This application requires permission to record the screen.\n\nClick 'Open Settings' and then select 'Privacy & Security' then 'Screen & System Audio Recording' from the list and enable the permission for 'NethLink'.",
     "Cancel button": "Cancel",
     "Open settings button": "Open Settings",
-    "Shortcut": "Define a keyboard shortcut"
+    "Shortcut": "Define a keyboard shortcut",
+    "PlusOther_one": "+ {{count}} other",
+    "PlusOther_other": "+ {{count}} others",
+    "Copy": "Copy",
+    "Copied": "Copied"
   },
   "Login": {
     "Welcome": "Welcome",

src/renderer/public/locales/it/translations.json

@@ -82,7 +82,11 @@
     "Screen share dialog description": "Questa applicazione richiede il permesso di registrare lo schermo.\n\nClicca su 'Apri Impostazioni', poi seleziona 'Privacy & Sicurezza' poi 'Registrazione Schermo e Audio di Sistema' dalla lista e abilita il permesso per 'NethLink'.",
     "Cancel button": "Annulla",
     "Open settings button": "Apri Impostazioni",
-    "Shortcut": "Scegli una combinazione di tasti"
+    "Shortcut": "Scegli una combinazione di tasti",
+    "PlusOther_one": "+ {{count}} altro",
+    "PlusOther_other": "+ {{count}} altri",
+    "Copy": "Copia",
+    "Copied": "Copiato"
   },
   "Login": {
     "Welcome": "Benvenuto",

src/renderer/src/components/ModuleTitle.tsx

@@ -3,29 +3,44 @@ import { Button } from "./Nethesis"
 import { IconProp } from "@fortawesome/fontawesome-svg-core"
 import { DefaultTFuncReturn } from "i18next"
 import { ReactNode } from "react"
+import { ClassNames } from "@renderer/utils"
+import { Tooltip } from 'react-tooltip'
 
 export interface ModuleTitleProps {
-  title: string | DefaultTFuncReturn,
+  title?: string | DefaultTFuncReturn | ReactNode,
   action?: () => void,
   actionText?: string | DefaultTFuncReturn,
   actionIcon?: IconProp
-  actionComponent?: ReactNode
+  actionComponent?: ReactNode,
+  className?: string
 
 }
 export const ModuleTitle = ({
   title,
   action,
   actionText,
   actionIcon,
-  actionComponent
+  actionComponent,
+  className
 }: ModuleTitleProps) => {
 
   return (
     <div className="px-5">
-      <div className="flex justify-between items-center pb-1 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight h-[28px]">
-        <h1 className="font-medium text-[14px] leading-5 dark:text-titleDark text-titleLight">
+      <div className={ClassNames("flex justify-between items-center pb-1 border border-t-0 border-r-0 border-l-0 dark:border-borderDark border-borderLight h-[28px]", className)}>
+        {title && <h1
+          className="font-medium text-base leading-5 dark:text-titleDark text-titleLight truncate"
+          data-tooltip-id={`tooltip-module-title`}
+          data-tooltip-content={title as string}
+        >
           {title}
-        </h1>
+        </h1>}
+        <Tooltip
+          id={`tooltip-module-title`}
+          place="bottom"
+          className="z-10"
+          opacity={1}
+          noArrow={false}
+        />
         {action && (
           <Button
             variant="ghost"
@@ -37,7 +52,7 @@ export const ModuleTitle = ({
               className="text-base dark:text-textBlueDark text-textBlueLight"
               icon={actionIcon}
             />}
-            {actionText && <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px] leading-5">
+            {actionText && <p className="dark:text-textBlueDark text-textBlueLight font-medium text-[14px]] leading-5">
               {actionText}
             </p>
             }

src/renderer/src/components/Modules/NethVoice/BaseModule/ContactNameAndAction.tsx

@@ -16,19 +16,23 @@ export const ContactNameAndActions = ({
   number,
   isHighlight,
   displayedNumber,
+  otherNumber,
   avatarDim,
   username,
   isFavourite,
-  isSearchData
+  isSearchData,
+  onOpenDetail
 }: {
   contact: ContactType
   number: string
   isHighlight: boolean
   displayedNumber: string | ReactNode[]
+  otherNumber?: string
   avatarDim: 'small' | 'base' | 'extra_small' | 'large' | 'extra_large'
   username: string | undefined
   isFavourite: boolean
-  isSearchData: boolean
+  isSearchData: boolean,
+  onOpenDetail?: () => void
 }) => {
   const { isCallsEnabled } = useAccount()
   const [operators] = useNethlinkData('operators')
@@ -37,6 +41,23 @@ export const ContactNameAndActions = ({
 
   const isOperator = username && !!operators?.operators?.[username]
 
+  const onClick = (e) => {
+    if (onOpenDetail) {
+      e.stopPropagation()
+      e.preventDefault()
+      onOpenDetail()
+    }
+  }
+
+  const displayName = isFavourite
+    ? contact.company && contact.company !== ' '
+      ? contact.company : `${t('Common.Unknown')}`
+    : contact.name && contact.name !== ' '
+      ? contact.name
+      : contact.company && contact.company !== ' '
+        ? contact.company
+        : `${t('Common.Unknown')}`
+
   return (
     <div
       className={classNames(
@@ -56,14 +77,18 @@ export const ContactNameAndActions = ({
               ? 'company'
               : 'person'
         }
+        className={classNames('border-[1px]', onOpenDetail ? 'cursor-pointer dark:hover:border-bgLight hover:border-bgDark' : '')}
+        onClick={onClick}
       />
       <div className="relative w-full h-[44px] ">
         <div className="absolute top-0 left-0 flex flex-col gap-1 w-full ">
           <div className="flex flex-row gap-2 w-full overflow-hidden">
-            <div className="dark:text-titleDark text-titleLight font-medium text-[14px] leading-5 truncate break-all whitespace-nowrap ">
-              {isFavourite
-                ? contact.company || `${t('Common.Unknown')}`
-                : contact.name || contact.company || `${t('Common.Unknown')}`}
+            <div className={classNames("dark:text-titleDark text-titleLight font-medium text-[14px] leading-5 truncate break-all whitespace-nowrap ",
+              onOpenDetail ? 'cursor-pointer hover:underline' : ''
+            )}
+              onClick={onClick}
+            >
+              {displayName}
               {isDev() && (
                 <span
                   onClick={() => {
@@ -100,19 +125,23 @@ export const ContactNameAndActions = ({
                 }}
               />
             )}
-            <NumberCaller
-              number={number}
-              disabled={displayedNumber?.length === 0 || !isCallsEnabled}
-              className={`${displayedNumber?.length === 0 ? '' : 'dark:text-textBlueDark text-textBlueLight'}font-normal hover:underline`}
-              isNumberHiglighted={isHighlight}
-            >
-              {displayedNumber !== ' ' &&
-                displayedNumber !== '' &&
-                displayedNumber !== null &&
-                (!Array.isArray(displayedNumber) || displayedNumber.length > 0)
-                ? displayedNumber
-                : '-'}
-            </NumberCaller>
+            <div className='flex flex-row'>
+
+              <NumberCaller
+                number={number}
+                disabled={displayedNumber?.length === 0 || !isCallsEnabled}
+                className={`${displayedNumber?.length === 0 ? '' : 'dark:text-textBlueDark text-textBlueLight'} font-normal hover:underline`}
+                isNumberHiglighted={isHighlight}
+              >
+                {displayedNumber !== ' ' &&
+                  displayedNumber !== '' &&
+                  displayedNumber !== null &&
+                  (!Array.isArray(displayedNumber) || displayedNumber.length > 0)
+                  ? displayedNumber
+                  : '-'}
+              </NumberCaller>
+              <span onClick={onClick} className='ml-2 cursor-pointer hover:underline dark:text-textBlueDark text-textBlueLight'>{otherNumber}</span>
+            </div>
           </div>
         </div>
       </div>

src/renderer/src/components/Modules/NethVoice/BaseModule/Sidebar.tsx

@@ -69,7 +69,7 @@ export function Sidebar({ onChangeMenu }: SidebarProps): JSX.Element {
   }, [parkedCalls, selectedSidebarMenu])
 
   return (
-    <div className="flex flex-col h-full max-w-[50px] justify-between pt-3 pb-2 px-2 border-0 border-l-[1px] dark:border-borderDark border-borderLight">
+    <div className="flex flex-col h-full max-w-[50px] justify-between pt-3 pb-2 px-2 border-0 border-l-[1px] dark:border-borderDark border-borderLight bg-bgLight dark:bg-bgDark z-10">
       <div className="flex flex-col items-center gap-6">
         {/* FAVOURITE */}
         <SidebarButton

src/renderer/src/components/Modules/NethVoice/SearchResults/PhoneBookSearchModule.tsx

@@ -4,6 +4,8 @@ import { useEffect, useState } from "react"
 import { usePhonebookSearchModule } from "./hook/usePhoneBookSearchModule"
 import { SearchData } from "@shared/types"
 import { useNethlinkData } from "@renderer/store"
+import { SearchNumberDetail } from "./SearchNumberDetail"
+import classNames from "classnames"
 
 export const PhoneBookSearchModule = () => {
 
@@ -13,6 +15,10 @@ export const PhoneBookSearchModule = () => {
   const [searchResult, setSearchResult] = useState<SearchData[]>()
   const [, setShowPhonebookSearchModule] = useNethlinkData('showPhonebookSearchModule')
   const [, setShowAddContactModule] = useNethlinkData('showAddContactModule')
+  const [contactDetail, setContactDetail] = useState<{
+    contact: SearchData,
+    primaryNumber: string | null
+  }>()
 
   useEffect(() => {
     if ((searchText?.length || 0) >= 3) {
@@ -31,12 +37,21 @@ export const PhoneBookSearchModule = () => {
 
   return (
     <>
-      <SearchNumberBox searchResult={searchResult}
+      <SearchNumberBox
+        className={classNames(contactDetail ? 'hidden' : 'visible')}
+        searchResult={searchResult}
         showContactForm={() => {
           setShowAddContactModule(true)
           setShowPhonebookSearchModule(false)
         }}
+        showContactDetail={(contact, primaryNumber) => {
+          setShowAddContactModule(false)
+          setContactDetail(() => ({ contact, primaryNumber }))
+        }}
       />
+      <SearchNumberDetail contactDetail={contactDetail} onBack={() => {
+        setContactDetail(() => undefined)
+      }} />
     </>
   )
 }