✨(frontend) refactor QuickSearch components

- Simplified QuickSearchProps by removing unused properties and
enhancing type definitions.
- Updated QuickSearch component to utilize children for rendering,
improving flexibility.
- Added separator prop to QuickSearchInput for better control over
layout.
- Removed data prop from DocSearchModal's QuickSearch to streamline the
component's usage.

src/frontend/apps/impress/src/components/quick-search/QuickSearch.tsx

@@ -1,9 +1,10 @@
 import { Command } from 'cmdk';
 import { ReactNode, useRef } from 'react';
 
+import { hasChildrens } from '@/utils/children';
+
 import { Box } from '../Box';
 
-import { QuickSearchGroup } from './QuickSearchGroup';
 import { QuickSearchInput } from './QuickSearchInput';
 import { QuickSearchStyle } from './QuickSearchStyle';
 
@@ -21,11 +22,8 @@ export type QuickSearchData<T> = {
   showWhenEmpty?: boolean;
 };
 
-export type QuickSearchProps<T> = {
+export type QuickSearchProps = {
-  data?: QuickSearchData<T>[];
   onFilter?: (str: string) => void;
-  renderElement?: (element: T) => ReactNode;
-  onSelect?: (element: T) => void;
   inputValue?: string;
   inputContent?: ReactNode;
   showInput?: boolean;
@@ -35,19 +33,16 @@ export type QuickSearchProps<T> = {
   children?: ReactNode;
 };
 
-export const QuickSearch = <T,>({
+export const QuickSearch = ({
-  onSelect,
   onFilter,
   inputContent,
   inputValue,
   loading,
   showInput = true,
-  data,
-  renderElement,
   label,
   placeholder,
   children,
-}: QuickSearchProps<T>) => {
+}: QuickSearchProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
 
   return (
@@ -58,6 +53,7 @@ export const QuickSearch = <T,>({
           {showInput && (
             <QuickSearchInput
               loading={loading}
+              withSeparator={hasChildrens(children)}
               inputValue={inputValue}
               onFilter={onFilter}
               placeholder={placeholder}
@@ -66,20 +62,7 @@ export const QuickSearch = <T,>({
             </QuickSearchInput>
           )}
           <Command.List>
-            <Box>
+            <Box>{children}</Box>
-              {!loading &&
-                data?.map((group) => {
-                  return (
-                    <QuickSearchGroup
-                      key={group.groupName}
-                      group={group}
-                      onSelect={onSelect}
-                      renderElement={renderElement}
-                    />
-                  );
-                })}
-              {children}
-            </Box>
           </Command.List>
         </Command>
       </div>

src/frontend/apps/impress/src/components/quick-search/QuickSearchGroup.tsx

@@ -1,14 +1,15 @@
 import { Command } from 'cmdk';
+import { ReactNode } from 'react';
 
 import { Box } from '../Box';
 
-import { QuickSearchData, QuickSearchProps } from './QuickSearch';
+import { QuickSearchData } from './QuickSearch';
 import { QuickSearchItem } from './QuickSearchItem';
 
 type Props<T> = {
   group: QuickSearchData<T>;
-  onSelect?: QuickSearchProps<T>['onSelect'];
+  renderElement?: (element: T) => ReactNode;
-  renderElement: QuickSearchProps<T>['renderElement'];
+  onSelect?: (element: T) => void;
 };
 
 export const QuickSearchGroup = <T,>({
@@ -16,7 +17,6 @@ export const QuickSearchGroup = <T,>({
   onSelect,
   renderElement,
 }: Props<T>) => {
-  console.log('group', group, group.emptyString && group.elements.length === 0);
   return (
     <Box $margin={{ top: 'base' }}>
       <Command.Group

src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx

@@ -15,6 +15,7 @@ type Props = {
   onFilter?: (str: string) => void;
   placeholder?: string;
   children?: ReactNode;
+  withSeparator?: boolean;
 };
 export const QuickSearchInput = ({
   loading,
@@ -22,6 +23,7 @@ export const QuickSearchInput = ({
   onFilter,
   placeholder,
   children,
+  withSeparator: separator = true,
 }: Props) => {
   const { t } = useTranslation();
   const { spacingsTokens } = useCunninghamTheme();
@@ -31,7 +33,7 @@ export const QuickSearchInput = ({
     return (
       <>
         {children}
-        <HorizontalSeparator />
+        {separator && <HorizontalSeparator />}
       </>
     );
   }
@@ -61,7 +63,7 @@ export const QuickSearchInput = ({
           onValueChange={onFilter}
         />
       </Box>
-      <HorizontalSeparator $withPadding={false} />
+      {separator && <HorizontalSeparator $withPadding={false} />}
     </>
   );
 };

src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx

@@ -72,7 +72,6 @@ export const DocSearchModal = ({ ...modalProps }: DocSearchModalProps) => {
         <QuickSearch
           placeholder={t('Type the name of a document')}
           loading={loading}
-          data={[]}
           onFilter={handleInputSearch}
         >
           <Box $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}>

src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx

@@ -1,8 +1,9 @@
-import { Button } from '@openfun/cunningham-react';
+import { Button, useModal } from '@openfun/cunningham-react';
 import { DateTime } from 'luxon';
 import { css } from 'styled-components';
 
 import { Box, Icon, StyledLink, Text } from '@/components';
+import { DocShareModal } from '@/features/docs/doc-share/component/DocShareModal';
 import { useResponsiveStore } from '@/stores';
 
 import { Doc, LinkReach } from '../../doc-management';
@@ -16,13 +17,19 @@ type DocsGridItemProps = {
 export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
   const { isDesktop } = useResponsiveStore();
 
+  const shareModal = useModal();
   const isPublic = doc.link_reach === LinkReach.PUBLIC;
   const isAuthenticated = doc.link_reach === LinkReach.AUTHENTICATED;
   const isRestricted = doc.link_reach === LinkReach.RESTRICTED;
   const sharedCount = doc.nb_accesses - 1;
   const isShared = sharedCount > 0;
 
+  const handleShareClick = () => {
+    shareModal.open();
+  };
+
   return (
+    <>
       <Box
         $direction="row"
         $width="100%"
@@ -38,7 +45,10 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
           }
         `}
       >
-      <StyledLink $css="flex: 7; align-items: center;" href={`/docs/${doc.id}`}>
+        <StyledLink
+          $css="flex: 7; align-items: center;"
+          href={`/docs/${doc.id}`}
+        >
           <Box
             data-testid={`docs-grid-name-${doc.id}`}
             $flex={6}
@@ -66,6 +76,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
               onClick={(event) => {
                 event.preventDefault();
                 event.stopPropagation();
+                handleShareClick();
               }}
               size="nano"
               icon={<Icon $variation="000" iconName="public" />}
@@ -78,6 +89,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
               onClick={(event) => {
                 event.preventDefault();
                 event.stopPropagation();
+                handleShareClick();
               }}
               color="tertiary"
               size="nano"
@@ -91,6 +103,7 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
               onClick={(event) => {
                 event.preventDefault();
                 event.stopPropagation();
+                handleShareClick();
               }}
               size="nano"
               icon={<Icon $variation="000" iconName="corporate_fare" />}
@@ -101,5 +114,9 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => {
           <DocsGridActions doc={doc} />
         </Box>
       </Box>
+      {shareModal.isOpen && (
+        <DocShareModal doc={doc} onClose={shareModal.close} />
+      )}
+    </>
   );
 };