From 483c32e3d56aa581dbac4d99ccd7c7f80da6b5ca Mon Sep 17 00:00:00 2001
From: Brandon Keepers <brandon@opensoul.org>
Date: Tue, 2 Sep 2025 16:11:29 -0400
Subject: [PATCH] style: Refresh design of app store list

---
 packages/server-admin-ui/package.json         |   1 +
 .../scss/_bootstrap-variables.scss            |   6 +-
 packages/server-admin-ui/scss/_custom.scss    |   6 +
 .../server-admin-ui/scss/core/_dropdown.scss  |   2 +-
 .../src/views/Webapps/Webapp.js               |  10 +-
 .../src/views/appstore/Apps/Apps.js           |  12 +-
 .../src/views/appstore/AppsList.js            | 128 ++++++++---------
 .../Grid/cell-renderers/ActionCellRenderer.js | 136 +++++++++++++-----
 .../Grid/cell-renderers/NameCellRenderer.js   |  22 ---
 .../Grid/cell-renderers/TypeCellRenderer.js   |  12 --
 .../cell-renderers/VersionCellRenderer.js     |  25 ----
 .../src/views/appstore/appStore.scss          | 135 +----------------
 src/interfaces/appstore.js                    |   1 +
 13 files changed, 185 insertions(+), 311 deletions(-)
 delete mode 100644 packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/NameCellRenderer.js
 delete mode 100644 packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/TypeCellRenderer.js
 delete mode 100644 packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/VersionCellRenderer.js

diff --git a/packages/server-admin-ui/package.json b/packages/server-admin-ui/package.json
index ef68d7270..e62d95e02 100644
--- a/packages/server-admin-ui/package.json
+++ b/packages/server-admin-ui/package.json
@@ -40,6 +40,7 @@
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^16.13.1",
     "react-html-parser": "^2.0.2",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-json-tree": "^0.20.0",
     "react-jsonschema-form-bs4": "^1.7.1",
     "react-redux": "^5.1.2",
diff --git a/packages/server-admin-ui/scss/_bootstrap-variables.scss b/packages/server-admin-ui/scss/_bootstrap-variables.scss
index a5da6e739..911578a52 100644
--- a/packages/server-admin-ui/scss/_bootstrap-variables.scss
+++ b/packages/server-admin-ui/scss/_bootstrap-variables.scss
@@ -45,12 +45,12 @@ $colors: (
 
 $theme-colors: (
   primary: $blue,
-  secondary: $gray-300,
+  secondary: $gray-700,
   success: $green,
   info: $cyan,
   warning: $yellow,
   danger: $red,
-  light: $gray-100,
+  light: $gray-200,
   dark: $gray-800
 );
 
@@ -59,7 +59,7 @@ $theme-colors: (
 // Quickly modify global styling by enabling or disabling optional features.
 
 $enable-transitions: true;
-$enable-rounded: false;
+$enable-rounded: true;
 
 // Body
 //
diff --git a/packages/server-admin-ui/scss/_custom.scss b/packages/server-admin-ui/scss/_custom.scss
index bfbaa757e..f8c3ac47b 100644
--- a/packages/server-admin-ui/scss/_custom.scss
+++ b/packages/server-admin-ui/scss/_custom.scss
@@ -28,3 +28,9 @@ form.rjsf div.row.array-item {
     margin: 0px;
   }
 }
+
+/** Utility class to attempt to wrap text in a more balanced way. **/
+.text-pretty {
+  text-wrap: balance; /* Fallback for older browsers */
+  text-wrap: pretty; /* Future spec */
+}
diff --git a/packages/server-admin-ui/scss/core/_dropdown.scss b/packages/server-admin-ui/scss/core/_dropdown.scss
index 564e4df20..20bd07d13 100644
--- a/packages/server-admin-ui/scss/core/_dropdown.scss
+++ b/packages/server-admin-ui/scss/core/_dropdown.scss
@@ -1,7 +1,7 @@
 // Links, buttons, and more within the dropdown menu
 .dropdown-item {
   position: relative;
-  padding: 10px 20px;
+  padding: 0.375rem 0.75rem;
   border-bottom: 1px solid $dropdown-border-color;
 
   &:last-child {
diff --git a/packages/server-admin-ui/src/views/Webapps/Webapp.js b/packages/server-admin-ui/src/views/Webapps/Webapp.js
index 64ae56dd5..23883549c 100644
--- a/packages/server-admin-ui/src/views/Webapps/Webapp.js
+++ b/packages/server-admin-ui/src/views/Webapps/Webapp.js
@@ -16,6 +16,12 @@ const propTypes = {
   children: PropTypes.node
 }
 
+export function urlToWebapp(webAppInfo) {
+  return webAppInfo.keywords.includes('signalk-embeddable-webapp')
+    ? `/admin/#/e/${toSafeModuleId(webAppInfo.name)}`
+    : `/${webAppInfo.name}`
+}
+
 class Webapp extends Component {
   render() {
     const { webAppInfo, ...attributes } = this.props
@@ -36,9 +42,7 @@ class Webapp extends Component {
       'text-capitalize'
     )
     const header = webAppInfo?.signalk?.displayName || webAppInfo.name
-    const url = webAppInfo.keywords.includes('signalk-embeddable-webapp')
-      ? `/admin/#/e/${toSafeModuleId(webAppInfo.name)}`
-      : `/${webAppInfo.name}`
+    const url = urlToWebapp(webAppInfo)
 
     const blockIcon = function (icon, appIcon = null) {
       const classes = classNames(
diff --git a/packages/server-admin-ui/src/views/appstore/Apps/Apps.js b/packages/server-admin-ui/src/views/appstore/Apps/Apps.js
index 97f481d9f..bb381a7ba 100644
--- a/packages/server-admin-ui/src/views/appstore/Apps/Apps.js
+++ b/packages/server-admin-ui/src/views/appstore/Apps/Apps.js
@@ -58,7 +58,7 @@ const Apps = function (props) {
     }
   }
 
-  /* 
+  /*
   Show different warning message
   whether the store is available or if an app was installed or removed
   */
@@ -103,19 +103,19 @@ const Apps = function (props) {
             <CardTitle>Apps & Plugins</CardTitle>
             <div className="button-wrapper">
               <Button
-                color={view === 'All' ? 'primary' : 'secondary'}
+                color={view === 'All' ? 'secondary' : 'light'}
                 onClick={() => setSelectedView('All')}
               >
                 All
               </Button>
               <Button
-                color={view === 'Installed' ? 'primary' : 'secondary'}
+                color={view === 'Installed' ? 'secondary' : 'light'}
                 onClick={() => setSelectedView('Installed')}
               >
                 Installed
               </Button>
               <Button
-                color={view === 'Updates' ? 'primary' : 'secondary'}
+                color={view === 'Updates' ? 'secondary' : 'light'}
                 onClick={() => setSelectedView('Updates')}
               >
                 Updates
@@ -128,7 +128,7 @@ const Apps = function (props) {
               {props.appStore.installing.length > 0 && (
                 <>
                   <Button
-                    color={view === 'Installing' ? 'primary' : 'secondary'}
+                    color={view === 'Installing' ? 'secondary' : 'light'}
                     onClick={() => setSelectedView('Installing')}
                   >
                     Installs & Removes
@@ -174,7 +174,7 @@ const Apps = function (props) {
             {props.appStore.categories?.map((item) => (
               <Button
                 key={item}
-                color="primary"
+                color="secondary"
                 className={category === item ? 'active' : undefined}
                 outline
                 onClick={() => setSelectedCategory(item)}
diff --git a/packages/server-admin-ui/src/views/appstore/AppsList.js b/packages/server-admin-ui/src/views/appstore/AppsList.js
index b4b59d2e9..329214cf3 100644
--- a/packages/server-admin-ui/src/views/appstore/AppsList.js
+++ b/packages/server-admin-ui/src/views/appstore/AppsList.js
@@ -1,75 +1,65 @@
-import React, { Component } from 'react'
-
-import { Table } from 'reactstrap'
-import NameCellRenderer from './Grid/cell-renderers/NameCellRenderer'
-import TypeCellRenderer from './Grid/cell-renderers/TypeCellRenderer'
+import React, { useEffect, useState } from 'react'
+import InfiniteScroll from 'react-infinite-scroll-component'
+import { ListGroup, ListGroupItem } from 'reactstrap'
 import ActionCellRenderer from './Grid/cell-renderers/ActionCellRenderer'
-import VersionCellRenderer from './Grid/cell-renderers/VersionCellRenderer'
-
-const XL_WIDTH = 1200
-const L_WIDTH = 992
-const M_WIDTH = 768
-const S_WIDTH = 576
 
-class AppsList extends Component {
-  render() {
-    return (
-      <Table>
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th
-              className={
-                'text-center ' + (window.innerWidth < S_WIDTH ? 'd-none' : '')
-              }
-            >
-              Version
-            </th>
-            <th className={window.innerWidth < L_WIDTH ? 'd-none' : ''}>
-              Description
-            </th>
-            <th className={window.innerWidth < XL_WIDTH ? 'd-none' : ''}>
-              Author
-            </th>
-            <th
-              className={
-                'text-center ' + (window.innerWidth < M_WIDTH ? 'd-none' : '')
-              }
-            >
-              <div>Type</div>
-            </th>
+export function AppListItem(app) {
+  return (
+    <ListGroupItem className="p-3">
+      <div className="d-md-flex align-items-center flex-grow-1">
+        <div className="flex-grow-1 mr-3">
+          <h5 className="text-dark mb-0">{app.name}</h5>
+          <div className="text-muted">
+            <span className="font-weight-bolder">
+              v{app.installedVersion || app.version}{' '}
+            </span>
+            {app.newVersion && (
+              <>
+                <span className="text-secondary"> → </span>
+                <span className="font-weight-bolder text-success font-italic">
+                  v{app.newVersion}
+                </span>{' '}
+              </>
+            )}
+            released by
+            <span className="text-nowrap font-weight-bolder">
+              {' '}
+              {app.author}
+            </span>{' '}
+            on
+            <span className="text-nowrap"> {app.updated.substring(0, 10)}</span>
+          </div>
+          <p className="text-pretty mb-0">{app.description}</p>
+        </div>
+        <div className="mt-3 mt-md-0">
+          <ActionCellRenderer data={app} />
+        </div>
+      </div>
+    </ListGroupItem>
+  )
+}
 
-            <th className="text-center">Action</th>
-          </tr>
-        </thead>
-        <tbody>
-          {this.props.apps.map((app) => (
-            <tr key={app.name}>
-              <td>
-                <NameCellRenderer data={app} value={app.name} />
-              </td>
-              <td className={window.innerWidth < S_WIDTH ? 'd-none' : ''}>
-                <VersionCellRenderer data={app} />
-              </td>
-              <td className={window.innerWidth < L_WIDTH ? 'd-none' : ''}>
-                {app.description}
-              </td>
-              <td className={window.innerWidth < XL_WIDTH ? 'd-none' : ''}>
-                {app.author}
-              </td>
-              <td className={window.innerWidth < M_WIDTH ? 'd-none' : ''}>
-                <TypeCellRenderer data={app} />
-              </td>
+export default function AppList(props) {
+  const [apps, setApps] = useState([])
 
-              <td>
-                <ActionCellRenderer data={app} />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    )
+  function loadMore() {
+    setApps(props.apps.slice(0, apps.length + 20))
   }
-}
 
-export default AppsList
+  // Load initial list of apps
+  useEffect(loadMore, [props.apps])
+
+  return (
+    <ListGroup>
+      <InfiniteScroll
+        dataLength={apps.length}
+        next={loadMore}
+        hasMore={apps.length != props.apps.length}
+      >
+        {apps.map((app) => (
+          <AppListItem key={app.name} {...app} />
+        ))}
+      </InfiniteScroll>
+    </ListGroup>
+  )
+}
diff --git a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/ActionCellRenderer.js b/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/ActionCellRenderer.js
index be4cf01b0..f4827712e 100644
--- a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/ActionCellRenderer.js
+++ b/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/ActionCellRenderer.js
@@ -1,16 +1,29 @@
 import React from 'react'
 import { Button, Progress } from 'reactstrap'
 import { connect } from 'react-redux'
-
+import { NavLink } from 'react-router-dom'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTrashCan, faCloudArrowDown } from '@fortawesome/free-solid-svg-icons'
+import {
+  faTrashCan,
+  faCloudArrowDown,
+  faGear,
+  faArrowUpRightFromSquare,
+  faLink
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem
+} from 'reactstrap'
+import { urlToWebapp } from '../../../Webapps/Webapp'
 
 function ActionCellRenderer(props) {
   const app = props.data
 
   const handleInstallClick = () => {
     fetch(
-      `${window.serverRoutesPrefix}/appstore/install/${props.data.name}/${props.data.version}`,
+      `${window.serverRoutesPrefix}/appstore/install/${app.name}/${app.version}`,
       {
         method: 'POST',
         credentials: 'include'
@@ -19,8 +32,8 @@ function ActionCellRenderer(props) {
   }
 
   const handleRemoveClick = () => {
-    if (confirm(`Are you sure you want to uninstall ${props.data.name}?`)) {
-      fetch(`${window.serverRoutesPrefix}/appstore/remove/${props.data.name}`, {
+    if (confirm(`Are you sure you want to uninstall ${app.name}?`)) {
+      fetch(`${window.serverRoutesPrefix}/appstore/remove/${app.name}`, {
         method: 'POST',
         credentials: 'include'
       })
@@ -61,47 +74,98 @@ function ActionCellRenderer(props) {
 
     content = (
       <div className="progress__wrapper">
-        <p className="progress__status">{status}</p>
+        <div className="progress__status p-1">{status}</div>
         {progress}
       </div>
     )
   } else {
-    content = props.data.installed ? (
+    content = (
       <>
-        {props.data.newVersion && (
-          <FontAwesomeIcon
-            className="icon__update"
-            icon={faCloudArrowDown}
-            onClick={handleInstallClick}
-          />
-        )}
+        <UncontrolledDropdown group className="w-100">
+          {app.installed ? (
+            app.newVersion ? (
+              <Button
+                className="text-left"
+                color="success"
+                onClick={handleInstallClick}
+              >
+                <FontAwesomeIcon
+                  className="icon__update mr-2"
+                  icon={faCloudArrowDown}
+                />
+                Update
+              </Button>
+            ) : app.isPlugin ? (
+              <NavLink
+                to={`/serverConfiguration/plugins/${app.id}`}
+                role="button"
+                className="btn btn-light text-left"
+              >
+                <FontAwesomeIcon className="mr-2" icon={faGear} />
+                Configure
+              </NavLink>
+            ) : (
+              <a
+                href={urlToWebapp(app)}
+                role="button"
+                className="btn btn-light text-left"
+              >
+                <FontAwesomeIcon className="mr-2" icon={faLink} />
+                Open
+              </a>
+            )
+          ) : (
+            <Button
+              className="text-left"
+              color="light"
+              onClick={handleInstallClick}
+            >
+              <FontAwesomeIcon className="mr-2" icon={faCloudArrowDown} />
+              Install
+            </Button>
+          )}
 
-        {/* TODO: Not implemented yet
-         <NavLink to={`/serverConfiguration/plugins/${props.data.name}`}>
-          <FontAwesomeIcon className="icon__config" icon={faGear} />
-        </NavLink> */}
+          <DropdownToggle
+            caret
+            color={app.newVersion ? 'success' : 'light'}
+            className="flex-grow-0"
+          />
+          <DropdownMenu right>
+            {app.installed && app.newVersion && (
+              <NavLink
+                to={`/serverConfiguration/plugins/${app.id}`}
+                className="dropdown-item"
+              >
+                <FontAwesomeIcon className="mr-2" icon={faGear} /> Configure
+              </NavLink>
+            )}
+            {app.npmUrl && (
+              <a
+                href={app.npmUrl}
+                target="_blank"
+                rel="noreferrer"
+                className="dropdown-item"
+              >
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mr-2"
+                />
+                View on NPM
+              </a>
+            )}
 
-        <FontAwesomeIcon
-          className="icon__remove"
-          icon={faTrashCan}
-          onClick={handleRemoveClick}
-        />
+            {app.installed && (
+              <DropdownItem onClick={handleRemoveClick} className="text-danger">
+                <FontAwesomeIcon className="mr-2" icon={faTrashCan} />
+                Remove
+              </DropdownItem>
+            )}
+          </DropdownMenu>
+        </UncontrolledDropdown>
       </>
-    ) : (
-      <Button
-        className="button__install"
-        color="primary"
-        onClick={handleInstallClick}
-      >
-        Install
-      </Button>
     )
   }
-  return (
-    <div className="cell__renderer cell-action center">
-      <div>{content}</div>
-    </div>
-  )
+  return <div className="cell__renderer cell-action">{content}</div>
 }
 
 const mapStateToProps = ({ appStore }) => ({ appStore })
diff --git a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/NameCellRenderer.js b/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/NameCellRenderer.js
deleted file mode 100644
index 063a695ea..000000000
--- a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/NameCellRenderer.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
-
-export default function NameCellRenderer(props) {
-  return (
-    <div className="cell__renderer cell-name">
-      <span className="name">{props.value}</span>
-      {props.data.npmUrl && (
-        <a
-          className="link"
-          href={props.data.npmUrl}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-        </a>
-      )}
-    </div>
-  )
-}
diff --git a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/TypeCellRenderer.js b/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/TypeCellRenderer.js
deleted file mode 100644
index 72f049cc9..000000000
--- a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/TypeCellRenderer.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-
-export default function TypeCellRenderer(props) {
-  return (
-    <div className="cell__renderer cell-type center">
-      {props.data.isPlugin && <span className="tag">Plugin</span>}
-      {(props.data.isWebapp || props.data.isEmbeddableWebapp) && (
-        <span className="tag">App</span>
-      )}
-    </div>
-  )
-}
diff --git a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/VersionCellRenderer.js b/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/VersionCellRenderer.js
deleted file mode 100644
index 4912fbd02..000000000
--- a/packages/server-admin-ui/src/views/appstore/Grid/cell-renderers/VersionCellRenderer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-
-export default function NameCellRenderer(props) {
-  return (
-    <div className="cell__renderer cell-version center">
-      <div className="version__container">
-        <span className="version">
-          v{props.data.installedVersion || props.data.version}
-        </span>
-
-        {/* 
-         // TODO: Maybe think about a better way to display this information
-        &nbsp; ({props.data.updated.substring(0, 10)}) */}
-        {props.data.newVersion && (
-          <span className="version version--update">
-            v{props.data.newVersion}
-          </span>
-        )}
-      </div>
-      <p className="last-update">({props.data.updated.substring(0, 10)})</p>
-
-      <div className="last-update"></div>
-    </div>
-  )
-}
diff --git a/packages/server-admin-ui/src/views/appstore/appStore.scss b/packages/server-admin-ui/src/views/appstore/appStore.scss
index 030d834ae..1743f9e41 100644
--- a/packages/server-admin-ui/src/views/appstore/appStore.scss
+++ b/packages/server-admin-ui/src/views/appstore/appStore.scss
@@ -1,47 +1,4 @@
 .appstore {
-  height: 100%;
-
-  .card {
-    height: 100%;
-  }
-
-  td[col-id='type'],
-  td[col-id='action'] {
-    height: 100%;
-    vertical-align: middle;
-  }
-
-  button {
-    border-radius: 5px;
-    margin: 5px 5px;
-
-    &.btn-outline-primary {
-      color: #26363e;
-      border-color: #26363e;
-
-      &:hover {
-        background-color: #26363e;
-        color: white;
-      }
-    }
-
-    &.active.btn.btn-outline-primary {
-      background-color: #26363e;
-    }
-    &.btn-primary {
-      background-color: #26363e;
-    }
-
-    &.btn.btn-secondary {
-      background-color: #d3d3d3;
-    }
-  }
-
-  .card-body {
-    display: flex;
-    flex-direction: column;
-  }
-
   &__warning {
     margin-bottom: 20px;
 
@@ -160,73 +117,8 @@
       justify-content: flex-end;
     }
 
-    .cell-type {
-      .tag {
-        font-size: 10px;
-        padding: 5px;
-        border: solid 1px grey;
-        border-radius: 10px;
-        margin: 3px;
-      }
-    }
-
-    .cell-name {
-      display: flex;
-
-      .name {
-        font-size: 14px;
-        color: black;
-      }
-      .link {
-        cursor: pointer;
-        color: blue;
-        margin-left: 5px;
-      }
-    }
-
-    .cell-description {
-      color: grey;
-      font-size: 14px;
-      white-space: normal;
-    }
-
-    .cell-version {
-      min-width: 80px;
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-
-      .version__container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        text-align: center;
-
-        .version--update {
-          color: #00cd79;
-          font-weight: 700;
-          font-style: italic;
-        }
-
-        .update__arrow {
-          height: 10px;
-          margin: 0 5px;
-        }
-      }
-
-      .last-update {
-        text-align: center;
-        font-size: 12px;
-        margin: 0;
-      }
-    }
-
     .cell-action {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
+      width: 160px;
 
       .proress__wrapper {
         display: flex;
@@ -236,36 +128,11 @@
       .progress__status {
         text-align: center;
         width: 100%;
-        margin: 10px 0;
       }
 
       .progress__bar {
         width: 100%;
       }
-
-      svg {
-        font-size: 15px;
-        cursor: pointer;
-        margin: 0 5px;
-      }
-
-      path {
-        color: grey;
-      }
-
-      .icon__update {
-        path {
-          color: #00cd79;
-        }
-      }
-    }
-
-    .cell__renderer.center {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
     }
   }
 }
diff --git a/src/interfaces/appstore.js b/src/interfaces/appstore.js
index d9995a242..d1c5e4703 100644
--- a/src/interfaces/appstore.js
+++ b/src/interfaces/appstore.js
@@ -265,6 +265,7 @@ module.exports = function (app) {
       const installedModule = existing(name)
 
       if (installedModule) {
+        pluginInfo.id = installedModule.id
         pluginInfo.installedVersion = installedModule.version
       }