Merge branch 'master' of https://github.com/pawelmalak/flame

client/src/components/Apps/AppCard/AppCard.module.css

@@ -10,6 +10,10 @@
   text-transform: uppercase;
 }
 
+.AppHeader:hover {
+  cursor: pointer;
+}
+
 .AppIcon {
   width: 35px;
   height: 35px;

client/src/components/Apps/AppCard/AppCard.tsx

@@ -92,7 +92,7 @@ export const AppCard = (props: Props): JSX.Element => {
               {app.icon && iconEl}              
               <div className={classes.AppCardDetails}>
                   <h5>{app.name}</h5>
-                  <span>{displayUrl}</span>
+                  <span>{!app.description.length ? displayUrl : app.description}</span>
                 </div>
             </a>
           );

client/src/components/Apps/Form/AppsForm.tsx

@@ -143,7 +143,7 @@ export const AppsForm = ({
     <ModalForm modalHandler={modalHandler} formHandler={formSubmitHandler}>
       {/* NAME */}
       <InputGroup>
-        <label htmlFor="name">App Name</label>
+        <label htmlFor="name">App name</label>
         <input
           type="text"
           name="name"
@@ -189,12 +189,28 @@ export const AppsForm = ({
           })}
         </select>
       </InputGroup>
+      
+      {/* DESCRIPTION */}
+      <InputGroup>
+        <label htmlFor="description">App description</label>
+        <input
+          type="text"
+          name="description"
+          id="description"
+          placeholder="My self-hosted app"
+          value={formData.description}
+          onChange={(e) => inputChangeHandler(e)}
+        />
+        <span>
+          Optional - If description is not set, app URL will be displayed
+        </span>
+      </InputGroup>
 
       {/* ICON */}
       {!useCustomIcon ? (
         // mdi
         <InputGroup>
-          <label htmlFor="icon">App Icon (optional)</label>
+          <label htmlFor="icon">App icon</label>
           <input
             type="text"
             name="icon"