feat: update app cards to list in new item modal

src/components/item/form/AppForm.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { ChangeEventHandler, useState } from 'react';
 
 import { ArrowBack } from '@mui/icons-material';
 import { Alert, Stack, TextField } from '@mui/material';
@@ -20,21 +20,29 @@ import NameForm from './NameForm';
 type AppGridProps = {
   currentUrl: string;
   handleSelection: (value: null | { name: string; url: string }) => void;
+  searchQuery?: string;
 };
 
 const AppGrid = ({
   currentUrl,
   handleSelection,
+  searchQuery,
 }: AppGridProps): JSX.Element | JSX.Element[] => {
   const { useApps } = hooks;
   const { data, isLoading } = useApps();
 
   const { t: translateBuilder } = useBuilderTranslation();
 
   if (data) {
+    // filter out with search query
+    let dataToShow = searchQuery
+      ? data.filter((d) => d.name.includes(searchQuery))
+      : data;
+    dataToShow = dataToShow.sortBy((d) => d.name);
+
     return (
       <>
-        {data.map((ele) => (
+        {dataToShow.map((ele) => (
           <AppCard
             key={ele.name}
             name={ele.name}
@@ -77,6 +85,14 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
   const { t: translateBuilder } = useBuilderTranslation();
   const [isCustomApp, setIsCustomApp] = useState<boolean>(false);
 
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const searchAnApp: ChangeEventHandler<
+    HTMLInputElement | HTMLTextAreaElement
+  > = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
   const handleAppSelection = (
     newValue: null | { url: string; name: string },
   ) => {
@@ -147,19 +163,35 @@ const AppForm = ({ onChange, updatedProperties = {} }: Props): JSX.Element => {
           />
         </Stack>
       ) : (
-        <Grid2 container spacing={2} alignItems="stretch" overflow="scroll">
-          <AppGrid
-            currentUrl={currentUrl}
-            handleSelection={handleAppSelection}
-          />
-          <AppCard
-            name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
-            description={translateBuilder(
-              BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
-            )}
-            onClick={addCustomApp}
+        <>
+          <TextField
+            fullWidth
+            placeholder={translateBuilder('Search for an app')}
+            variant="outlined"
+            size="small"
+            onChange={searchAnApp}
           />
-        </Grid2>
+          <Grid2
+            container
+            spacing={2}
+            maxHeight={400}
+            alignItems="stretch"
+            overflow="auto"
+          >
+            <AppGrid
+              currentUrl={currentUrl}
+              handleSelection={handleAppSelection}
+              searchQuery={searchQuery}
+            />
+            <AppCard
+              name={translateBuilder(BUILDER.CREATE_CUSTOM_APP)}
+              description={translateBuilder(
+                BUILDER.CREATE_CUSTOM_APP_DESCRIPTION,
+              )}
+              onClick={addCustomApp}
+            />
+          </Grid2>
+        </>
       )}
       <NameForm setChanges={onChange} updatedProperties={updatedProperties} />
     </Stack>

src/components/item/form/NameForm.tsx

@@ -24,8 +24,6 @@ const NameForm = ({
   const handleNameInput = (event: ChangeEvent<{ value: string }>) => {
     setChanges({ name: event.target.value });
   };
-  // eslint-disable-next-line no-console
-  console.log('name input', updatedProperties?.name ?? item?.name);
 
   return (
     <TextField

src/components/main/AppCard.tsx

@@ -2,8 +2,8 @@ import {
   Card,
   CardActionArea,
   CardContent,
-  CardMedia,
   Skeleton,
+  Stack,
   Typography,
   styled,
 } from '@mui/material';
@@ -20,13 +20,6 @@ const StyledCardActionArea = styled(CardActionArea)({
   width: '100%',
 });
 
-const StyledAppBackground = styled(CardMedia)({
-  height: 100,
-  width: '100%',
-  backgroundColor: '#5050d2',
-  backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28' width='56' height='28'%3E%3Cpath fill='%239cc4d7' fill-opacity='0.28' d='M56 26v2h-7.75c2.3-1.27 4.94-2 7.75-2zm-26 2a2 2 0 1 0-4 0h-4.09A25.98 25.98 0 0 0 0 16v-2c.67 0 1.34.02 2 .07V14a2 2 0 0 0-2-2v-2a4 4 0 0 1 3.98 3.6 28.09 28.09 0 0 1 2.8-3.86A8 8 0 0 0 0 6V4a9.99 9.99 0 0 1 8.17 4.23c.94-.95 1.96-1.83 3.03-2.63A13.98 13.98 0 0 0 0 0h7.75c2 1.1 3.73 2.63 5.1 4.45 1.12-.72 2.3-1.37 3.53-1.93A20.1 20.1 0 0 0 14.28 0h2.7c.45.56.88 1.14 1.29 1.74 1.3-.48 2.63-.87 4-1.15-.11-.2-.23-.4-.36-.59H26v.07a28.4 28.4 0 0 1 4 0V0h4.09l-.37.59c1.38.28 2.72.67 4.01 1.15.4-.6.84-1.18 1.3-1.74h2.69a20.1 20.1 0 0 0-2.1 2.52c1.23.56 2.41 1.2 3.54 1.93A16.08 16.08 0 0 1 48.25 0H56c-4.58 0-8.65 2.2-11.2 5.6 1.07.8 2.09 1.68 3.03 2.63A9.99 9.99 0 0 1 56 4v2a8 8 0 0 0-6.77 3.74c1.03 1.2 1.97 2.5 2.79 3.86A4 4 0 0 1 56 10v2a2 2 0 0 0-2 2.07 28.4 28.4 0 0 1 2-.07v2c-9.2 0-17.3 4.78-21.91 12H30zM7.75 28H0v-2c2.81 0 5.46.73 7.75 2zM56 20v2c-5.6 0-10.65 2.3-14.28 6h-2.7c4.04-4.89 10.15-8 16.98-8zm-39.03 8h-2.69C10.65 24.3 5.6 22 0 22v-2c6.83 0 12.94 3.11 16.97 8zm15.01-.4a28.09 28.09 0 0 1 2.8-3.86 8 8 0 0 0-13.55 0c1.03 1.2 1.97 2.5 2.79 3.86a4 4 0 0 1 7.96 0zm14.29-11.86c1.3-.48 2.63-.87 4-1.15a25.99 25.99 0 0 0-44.55 0c1.38.28 2.72.67 4.01 1.15a21.98 21.98 0 0 1 36.54 0zm-5.43 2.71c1.13-.72 2.3-1.37 3.54-1.93a19.98 19.98 0 0 0-32.76 0c1.23.56 2.41 1.2 3.54 1.93a15.98 15.98 0 0 1 25.68 0zm-4.67 3.78c.94-.95 1.96-1.83 3.03-2.63a13.98 13.98 0 0 0-22.4 0c1.07.8 2.09 1.68 3.03 2.63a9.99 9.99 0 0 1 16.34 0z'%3E%3C/path%3E%3C/svg%3E")`,
-}) as typeof CardMedia;
-
 export type Props = {
   description?: string;
   name?: string;
@@ -51,33 +44,46 @@ const AppCard = ({
     id={buildItemFormAppOptionId(name)}
   >
     <StyledCardActionArea>
-      <StyledAppBackground
-        component={image ? 'img' : 'div'}
-        src={image}
-        alt={name}
-      />
-      <CardContent sx={{ width: '100%' }}>
-        <Typography gutterBottom variant="subtitle2" component="div">
-          {name ?? <Skeleton />}
-        </Typography>
-        <Typography
-          variant="body2"
-          color="text.secondary"
+      <Stack direction="row">
+        <Stack
           sx={{
-            display: '-webkit-box',
-            overflow: 'hidden',
-            WebkitBoxOrient: 'vertical',
-            WebkitLineClamp: 3,
+            height: { xs: 40, sm: 70 },
+            width: { xs: 40, sm: 70 },
+            background: 'black',
           }}
         >
-          {description ?? <Skeleton height={45} />}
-        </Typography>
-      </CardContent>
+          <img src={image} alt={name} width="100%" />
+        </Stack>
+        <Stack>
+          <CardContent
+            sx={{ width: '100%', pt: 1, paddingBottom: '0 !important' }}
+          >
+            <Typography
+              fontWeight="bold"
+              gutterBottom
+              variant="body1"
+              component="div"
+              noWrap
+            >
+              {name ?? <Skeleton />}
+            </Typography>
+            <Typography
+              variant="body2"
+              color="text.secondary"
+              sx={{
+                display: { xs: 'none', sm: 'block', md: 'block' },
+              }}
+            >
+              {description ?? <Skeleton height={20} />}
+            </Typography>
+          </CardContent>
+        </Stack>
+      </Stack>
     </StyledCardActionArea>
   </Card>
 );
 const AppCardWrapper = (props: Props): JSX.Element => (
-  <Grid2 xs={12} sm={6} md={4} display="flex">
+  <Grid2 xs={12} display="flex">
     <AppCard
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}