[release] v0.8.9

changelog.md

@@ -1,6 +1,7 @@
-## version 0.8.1 -> 0.8.6
+## version 0.8.1 -> 0.8.9
  - Added new automatic Docker mapping feature (for people not using (sub)domains)
  - Added guardrails to prevent Let's Encrypt from failing to initialize when adding wrong domains
+ - Add search bar on the marketplace
  - App store image size issue
  - Fixed wrong x-forwarded-proto header 
  - Add installer option for hostname prefix/suffix

client/src/pages/home/index.jsx

@@ -348,6 +348,18 @@ const HomePage = () => {
                         </Link>
                     </Box>
                 </Grid2>
+                // return !skip && <Grid2 item xs={6} sm={4} md={3} lg={2} xl={2} xxl={2} key={route.Name}>
+                //     <Box className='app app-hover' style={{ padding: 18, borderRadius: 5, ...appColor }}>
+                //         <Link to={getFullOrigin(route)} target="_blank" style={{ textDecoration: 'none', ...appColor }}>
+                //             <Stack direction="column" spacing={2} alignItems="center">
+                //                 <ServAppIcon container={container} route={route} className="loading-image" width="70px" />
+                //                 <div style={{ minWidth: 0 }}>
+                //                     <h3 style={blockStyle}>{route.Name}</h3>
+                //                 </div>
+                //             </Stack>
+                //         </Link>
+                //     </Box>
+                // </Grid2>
             })}
 
             {config && routes.length === 0 && (

client/src/pages/market/listing.jsx

@@ -1,4 +1,4 @@
-import { Box, CircularProgress, Stack } from "@mui/material";
+import { Box, CircularProgress, Input, InputAdornment, Stack } from "@mui/material";
 import { HomeBackground, TransparentHeader } from "../home";
 import { useEffect, useState } from "react";
 import * as API from "../../api";
@@ -10,6 +10,7 @@ import { Paper, Button , Chip} from '@mui/material'
 import { Link } from "react-router-dom";
 import {Link as LinkMUI} from '@mui/material'
 import DockerComposeImport from '../servapps/containers/docker-compose';
+import { SearchOutlined } from "@ant-design/icons";
 
 function Screenshots({ screenshots }) {
   return screenshots.length > 1 ? (
@@ -107,6 +108,7 @@ const MarketPage = () => {
   const theme = useTheme();
   const isDark = theme.palette.mode === 'dark';
   const { appName, appStore } = useParams();
+  const [search, setSearch] = useState("");
 
   const backgroundStyle = isDark ? {
     backgroundColor: 'rgb(0,0,0)',
@@ -232,6 +234,18 @@ const MarketPage = () => {
         padding: '24px',
       }}>
         <h2>Applications</h2>
+        <Input placeholder="Search"
+          value={search}
+          style={{maxWidth: '400px'}}
+          startAdornment={
+            <InputAdornment position="start">
+              <SearchOutlined />
+            </InputAdornment>
+          }
+          onChange={(e) => {
+            setSearch(e.target.value);
+          }}
+        />
         {(!apps || !Object.keys(apps).length) && <Box style={{
           width: '100%',
           height: '100%',
@@ -247,7 +261,15 @@ const MarketPage = () => {
         </Box>}
 
         {apps && Object.keys(apps).length > 0 && <Grid2 container spacing={{ xs: 1, sm: 1, md: 2 }}>
-          {Object.keys(apps).map(appstore => apps[appstore].map((app) => {
+          {Object.keys(apps).map(appstore => apps[appstore]
+          .filter((app) => {
+            if (!search || search.length <= 2) {
+              return true;
+            }
+            return app.name.toLowerCase().includes(search.toLowerCase()) ||
+              app.tags.join(' ').toLowerCase().includes(search.toLowerCase());
+            })
+          .map((app) => {
             return <Grid2 style={{
               ...gridAnim,
               cursor: 'pointer',
@@ -267,7 +289,7 @@ const MarketPage = () => {
                     }}
                     >{app.description}</div>
                     <Stack direction={'row'} spacing={1}>
-                      <div style={{ fontStyle: "italic", opacity: 0.7 }}>{app.tags[0]}</div>
+                      <div style={{ fontStyle: "italic", opacity: 0.7 }}>{app.tags.slice(0,3).join(", ")}</div>
                     </Stack>
                   </Stack>
                 </Stack>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosmos-server",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "",
   "main": "test-server.js",
   "bugs": {