From 899047d9a21ca7085e6dc08858e8dbf90ad0a4ff Mon Sep 17 00:00:00 2001
From: Nathan Panchout <nathanpanchout@hotmail.com>
Date: Mon, 23 Dec 2024 10:29:44 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20enhance=20QuickSearch=20c?=
 =?UTF-8?q?omponents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Updated QuickSearchItemContent to ensure full width for better layout
consistency.
- Adjusted padding in QuickSearchStyle for improved spacing and visual
hierarchy.
- Refactored DocSearchItem to utilize Box component for consistent
styling and layout.
- Removed unused imports in DocSearchItem to streamline the codebase.
---
 .../quick-search/QuickSearchItemContent.tsx     |  7 ++++++-
 .../quick-search/QuickSearchStyle.tsx           |  6 +++---
 .../doc-search/components/DocSearchItem.tsx     | 17 ++++-------------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
index fd167d1d..94dc5efc 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchItemContent.tsx
@@ -29,7 +29,12 @@ export const QuickSearchItemContent = ({
       $justify="space-between"
       $width="100%"
     >
-      <Box $direction="row" $align="center" $gap={spacings['2xs']}>
+      <Box
+        $direction="row"
+        $align="center"
+        $gap={spacings['2xs']}
+        $width="100%"
+      >
         {left}
       </Box>
 
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
index 0b636ec6..7738f2cb 100644
--- a/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
+++ b/src/frontend/apps/impress/src/components/quick-search/QuickSearchStyle.tsx
@@ -65,8 +65,8 @@ export const QuickSearchStyle = createGlobalStyle`
 
   [cmdk-list] {
   
-    padding: 0 var(--c--theme--spacings--sm) var(--c--theme--spacings--sm)
-      var(--c--theme--spacings--sm);
+    padding: 0 var(--c--theme--spacings--base) var(--c--theme--spacings--base)
+      var(--c--theme--spacings--base);
   
     flex:1;
     overflow-y: auto;
@@ -114,7 +114,7 @@ export const QuickSearchStyle = createGlobalStyle`
 
     display: flex;
     align-items: center;
-    margin-bottom: var(--c--theme--spacings--base);
+    margin-bottom: var(--c--theme--spacings--xs);
   }
 
   [cmdk-empty] {
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
index c931878f..e066193a 100644
--- a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
+++ b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchItem.tsx
@@ -1,6 +1,4 @@
-import { DateTime } from 'luxon';
-
-import { Box, Icon, Text } from '@/components';
+import { Box, Icon } from '@/components';
 import { QuickSearchItemContent } from '@/components/quick-search/QuickSearchItemContent';
 import { Doc } from '@/features/docs/doc-management';
 import { SimpleDocItem } from '@/features/docs/docs-grid/components/SimpleDocItem';
@@ -13,26 +11,19 @@ type DocSearchItemProps = {
 export const DocSearchItem = ({ doc }: DocSearchItemProps) => {
   const { isDesktop } = useResponsiveStore();
   return (
-    <div data-testid={`doc-search-item-${doc.id}`}>
+    <Box data-testid={`doc-search-item-${doc.id}`} $width="100%">
       <QuickSearchItemContent
         left={
-          <Box $direction="row" $align="center" $gap="10px">
+          <Box $direction="row" $align="center" $gap="10px" $width="100%">
             <Box $flex={isDesktop ? 9 : 1}>
               <SimpleDocItem doc={doc} showAccesses />
             </Box>
-            {isDesktop && (
-              <Box $flex={2} $justify="center" $align="center">
-                <Text $variation="500" $align="right" $size="xs">
-                  {DateTime.fromISO(doc.updated_at).toRelative()}
-                </Text>
-              </Box>
-            )}
           </Box>
         }
         right={
           <Icon iconName="keyboard_return" $theme="primary" $variation="800" />
         }
       />
-    </div>
+    </Box>
   );
 };