Fixed double button dimension

.github/workflows/build-image.yml

@@ -16,13 +16,11 @@ jobs:
       IMAGETAG: ${{ github.ref_name }}
     steps:
       - uses: actions/checkout@v2
-      - id: update-podman
+      - id: install-podman
         run: |
-          # Update podman
-          echo 'deb http://download.opensuse.org/repositories/devel:/kubic:/libcontainers:/unstable/xUbuntu_22.04/ /' | sudo tee /etc/apt/sources.list.d/devel:kubic:libcontainers:unstable.list
-          curl -fsSL https://download.opensuse.org/repositories/devel:kubic:libcontainers:unstable/xUbuntu_22.04/Release.key | gpg --dearmor | sudo tee /etc/apt/trusted.gpg.d/devel_kubic_libcontainers_unstable.gpg > /dev/null
+          # Install podman
           sudo apt update
-          sudo apt install podman -y
+          sudo apt-get -y install --install-recommends podman
       - id: build
         run: |
           # Build the module image
@@ -35,7 +33,7 @@ jobs:
           echo "REPOBASE=$REPOBASE" >> $GITHUB_ENV
           echo "IMAGETAG=$IMAGETAG" >> $GITHUB_ENV
           echo "IMAGENAME=$IMAGENAME" >> $GITHUB_ENV
-          podman build --env ICONS_TOKEN="${{ secrets.ICONS_TOKEN }}" -t ${IMAGENAME}:${IMAGETAG} .
+          podman build -t ${IMAGENAME}:${IMAGETAG} .
       - id: publish
         run: |
           # Publish the branch

Dockerfile

@@ -6,9 +6,6 @@ WORKDIR /app
 
 # Install dependencies based on the preferred package manager
 COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-RUN sed -i "s#github:nethesis#git+https://${ICONS_TOKEN}:[email protected]/nethesis#g" package.json
-RUN sed -i "s#github:nethesis#git+https://${ICONS_TOKEN}:[email protected]/nethesis#g" package-lock.json
-RUN sed -i "s#git+ssh://[email protected]/nethesis/nethesis-icons#git+https://${ICONS_TOKEN}:[email protected]/nethesis/nethesis-icons#g" package-lock.json
 
 RUN \
   if [ -f yarn.lock ]; then yarn --frozen-lockfile; \

components/common/CopyComponent.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faClone } from '@fortawesome/free-solid-svg-icons'
+import { motion, AnimatePresence } from 'framer-motion'
+import { Tooltip } from 'react-tooltip'
+import { Button } from './Button'
+import { t } from 'i18next'
+
+interface CopyToClipboardProps {
+  number: string
+  id: string
+}
+
+const CopyToClipboard: React.FC<CopyToClipboardProps> = ({ number, id }) => {
+  const [showMessage, setShowMessage] = useState(false)
+
+  const handleCopy = (event: React.MouseEvent) => {
+    event.preventDefault()
+    event.stopPropagation()
+
+    navigator.clipboard.writeText(number).then(() => {
+      setShowMessage(true)
+      setTimeout(() => setShowMessage(false), 2000)
+    })
+  }
+
+  return (
+    <>
+      <div className='relative'>
+        <Button
+          variant='ghost'
+          className='ml-2 h-9 w-9'
+          data-tooltip-id={`tooltip-${id}`}
+          data-tooltip-content={t('Common.Copy to clipboard') || ''}
+          onClick={handleCopy}
+        >
+          <FontAwesomeIcon className='w-4 h-4 text-green-600' icon={faClone} aria-hidden='true' />
+        </Button>
+      </div>
+      <AnimatePresence>
+        {showMessage && (
+          <motion.div
+            initial={{ opacity: 0, y: 0 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className='ml-2 dark:bg-gray-100 bg-gray-800 dark:text-gray-900 text-gray-50 text-xs px-2 py-2 rounded shadow-lg w-40 text-center'
+          >
+            {t('Common.Copied in clipboard')}
+          </motion.div>
+        )}
+      </AnimatePresence>
+      <Tooltip id={`tooltip-${id}`} place='top' />
+    </>
+  )
+}
+
+export default CopyToClipboard

components/devices/DownloadDesktopLinkContent.tsx

@@ -77,8 +77,9 @@ export const DownloadDesktopLinkContent = forwardRef<
           </span>
         </div>
         <div className='grid grid-cols-1 gap-4 lg:grid-cols-2 xl:grid-cols-3 hover:cursor-pointer'>
+          {/* Hidden at the moment, but it will be back when it will be the support for Linux */}
           {/* Linux */}
-          <div
+          {/* <div
             className={`${
               selectedOS === 'linux'
                 ? 'border-primary dark:border-primaryDark border-2'
@@ -100,7 +101,7 @@ export const DownloadDesktopLinkContent = forwardRef<
                 </div>
               )}
             </div>
-          </div>
+          </div> */}
           {/* Apple */}
           <div
             className={`${

components/layout/GlobalSearch.tsx

@@ -1,7 +1,14 @@
 // Copyright (C) 2024 Nethesis S.r.l.
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import React, { ComponentProps, MutableRefObject, useEffect, useMemo, useRef } from 'react'
+import React, {
+  ComponentProps,
+  Fragment,
+  MutableRefObject,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
 import { FC, useState } from 'react'
 import classNames from 'classnames'
 import { Combobox, ComboboxInput, ComboboxOptions, ComboboxOption } from '@headlessui/react'
@@ -30,6 +37,7 @@ import { ContactSummary } from '../phonebook/ContactSummary'
 import { openAddToPhonebookDrawer } from '../../lib/history'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { useTranslation } from 'react-i18next'
+import clsx from 'clsx'
 
 interface GlobalSearchProps extends ComponentProps<'div'> {}
 
@@ -208,6 +216,31 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
   // global keyborad shortcut
   useHotkeys('ctrl+shift+f', () => focusGlobalSearch(), [])
 
+  const removeFocus = () => {
+    store.dispatch.globalSearch.setFocused(false)
+    store.dispatch.globalSearch.setOpen(false)
+    store.dispatch.globalSearch.setRightSideTitleClicked(false)
+  }
+
+  // remove focus on globals search
+  useHotkeys('esc', () => removeFocus(), [])
+
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        inputRef.current?.focus()
+      }
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange)
+    }
+  }, [])
+
   return (
     <>
       {globalSearchStore?.isFocused && !globalSearchStore?.isCustomerCardsRedirect && (
@@ -231,7 +264,7 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
         )}
       >
         <Combobox onChange={resultSelected}>
-          {({ open, activeOption }: any) => (
+          {({ activeOption }: any) => (
             <>
               <div className='relative flex items-center'>
                 <FontAwesomeIcon
@@ -293,11 +326,9 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
                             as='div'
                             key={index}
                             value={index}
-                            className={({ active }) =>
-                              classNames(
-                                'flex cursor-default select-none items-center rounded-md p-2 h-14',
-                              )
-                            }
+                            className={classNames(
+                              'flex cursor-default select-none items-center rounded-md p-2 h-14',
+                            )}
                           >
                             <div className='animate-pulse rounded-full h-8 w-8 bg-gray-300 dark:bg-gray-600'></div>
                             <div className='ml-2 animate-pulse h-3 rounded w-[40%] bg-gray-300 dark:bg-gray-600'></div>
@@ -307,12 +338,10 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
                       {isLoaded && !results.length && query.length > 2 && (
                         <ComboboxOption
                           as='div'
-                          value={'no-results'}
-                          className={({ active }) =>
-                            classNames(
-                              'flex justify-center cursor-default select-none items-center rounded-md p-2',
-                            )
-                          }
+                          value={''}
+                          className={classNames(
+                            'flex justify-center cursor-default select-none items-center rounded-md p-2',
+                          )}
                         >
                           <EmptyState
                             title={t('Phonebook.No results') || ''}
@@ -331,21 +360,16 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
                       {isLoaded &&
                         !!results?.length &&
                         results.map((result: any, index: number) => (
-                          <ComboboxOption
-                            as='div'
-                            key={'result-' + index}
-                            value={result}
-                            className={({ active }) =>
-                              classNames(
-                                'flex select-none items-center rounded-md p-2 h-14 cursor-pointer',
-                                active &&
-                                  'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
-                              )
-                            }
-                          >
-                            {({ active }) => (
-                              <>
-                                {/* call phone number */}
+                          <ComboboxOption as={Fragment} key={`result-${index}`} value={result}>
+                            {({ active }: any) => (
+                              <div
+                                className={clsx(
+                                  'flex select-none items-center rounded-md p-2 h-14 cursor-pointer',
+                                  active &&
+                                    'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100',
+                                )}
+                              >
+                                {/* Call phone number */}
                                 {result?.resultType === 'callPhoneNumber' && (
                                   <>
                                     <div className='w-10 text-center'>
@@ -359,7 +383,8 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
                                     </span>
                                   </>
                                 )}
-                                {/* add to phonebook */}
+
+                                {/* Add to phonebook */}
                                 {result?.resultType === 'addToPhonebook' && (
                                   <>
                                     <div className='w-10 text-center'>
@@ -373,7 +398,8 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
                                     </span>
                                   </>
                                 )}
-                                {/* operator */}
+
+                                {/* Operator */}
                                 {result?.resultType === 'operator' && (
                                   <>
                                     <Avatar
@@ -386,31 +412,29 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
                                     <span className='ml-2 flex-auto truncate'>{result?.name}</span>
                                   </>
                                 )}
-                                {/* phonebook contact */}
-                                {result.resultType === 'contact' && (
+
+                                {/* Phonebook contact */}
+                                {result?.resultType === 'contact' && (
                                   <>
                                     <Avatar placeholderType={result.kind} size='base' />
                                     <span className='ml-2 flex-auto truncate'>
-                                      {result?.displayName !== '' && result?.displayName !== ' '
-                                        ? result?.displayName
-                                        : result?.name !== '' && result?.name !== ' '
-                                        ? result?.name
-                                        : result?.company &&
-                                          result?.company !== '' &&
-                                          result?.company !== ' '
-                                        ? result?.company
-                                        : '-'}
+                                      {result?.displayName?.trim() ||
+                                        result?.name?.trim() ||
+                                        result?.company?.trim() ||
+                                        '-'}
                                     </span>
                                   </>
                                 )}
+
+                                {/* Icon when active */}
                                 {active && (
                                   <FontAwesomeIcon
                                     icon={faChevronRight}
                                     className='mr-2 h-3 w-3 flex-none text-gray-400 dark:text-gray-500'
                                     aria-hidden='true'
                                   />
                                 )}
-                              </>
+                              </div>
                             )}
                           </ComboboxOption>
                         ))}
@@ -437,6 +461,7 @@ export const GlobalSearch: FC<GlobalSearchProps> = () => {
                             contact={activeOption}
                             isShownContactMenu={false}
                             isShownSideDrawerLink={true}
+                            isGlobalSearch={true}
                           />
                         )}
                       </div>

components/layout/Layout.tsx

@@ -44,6 +44,7 @@ import { Tooltip } from 'react-tooltip'
 import { getJSONItem, setJSONItem } from '../../lib/storage'
 import { eventDispatch } from '../../lib/hooks/eventDispatch'
 import { setMainDevice } from '../../lib/devices'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 export const Layout: FC<LayoutProps> = ({ children }) => {
   const [openMobileMenu, setOpenMobileMenu] = useState<boolean>(false)
@@ -995,6 +996,12 @@ export const Layout: FC<LayoutProps> = ({ children }) => {
     }
   }, [phoneIslandThemePreference, theme])
 
+  const closePhoneIslandCall = () => {
+    eventDispatch('phone-island-call-end', {})
+  }
+   // global keyborad shortcut
+   useHotkeys('ctrl+alt+c', () => closePhoneIslandCall(), [])
+
   return (
     <>
       <div>