From cbaffa7513777a5e82fa64c1ad9c5f7dd683ec02 Mon Sep 17 00:00:00 2001
From: dr-frmr <docterformer@protonmail.com>
Date: Mon, 13 Jan 2025 18:34:02 -0500
Subject: [PATCH] fix app details, rearrange buttons

---
 kinode/packages/app-store/ui/src/index.css    |  3 +-
 .../app-store/ui/src/pages/AppPage.tsx        | 60 +++++++++-------
 .../app-store/ui/src/pages/MyAppsPage.tsx     | 69 +++++++++++--------
 3 files changed, 78 insertions(+), 54 deletions(-)

diff --git a/kinode/packages/app-store/ui/src/index.css b/kinode/packages/app-store/ui/src/index.css
index ee8c62ad7..5e09f6351 100644
--- a/kinode/packages/app-store/ui/src/index.css
+++ b/kinode/packages/app-store/ui/src/index.css
@@ -376,7 +376,8 @@ div.app-header {
 .app-warning {
     background: var(--orange) !important;
     color: var(--text-light);
-    padding: 1em;
+    padding: 1rem;
+    margin-bottom: 1rem;
 }
 
 .app-description {
diff --git a/kinode/packages/app-store/ui/src/pages/AppPage.tsx b/kinode/packages/app-store/ui/src/pages/AppPage.tsx
index d8bd6f6a6..42d7f09c9 100644
--- a/kinode/packages/app-store/ui/src/pages/AppPage.tsx
+++ b/kinode/packages/app-store/ui/src/pages/AppPage.tsx
@@ -13,7 +13,7 @@ export default function AppPage() {
   const [installedApp, setInstalledApp] = useState<PackageState | null>(null);
   const [currentVersion, setCurrentVersion] = useState<string | null>(null);
   const [latestVersion, setLatestVersion] = useState<string | null>(null);
-  const [upToDate, setUpToDate] = useState(true);
+  const [upToDate, setUpToDate] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [isUninstalling, setIsUninstalling] = useState(false);
@@ -133,23 +133,41 @@ export default function AppPage() {
   return (
     <section className="app-page">
       <div className="app-header">
-        {app.metadata?.image && (
-          <img src={app.metadata.image} alt={app.metadata?.name || app.package_id.package_name} className="app-icon" />
-        )}
-        <div className="app-title">
-          <h2>{app.metadata?.name || app.package_id.package_name}</h2>
-          <p className="app-id">{`${app.package_id.package_name}:${app.package_id.publisher_node}`}</p>
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
+          <img
+            src={app.metadata?.image || '/bird-orange.svg'}
+            alt={app.metadata?.name || app.package_id.package_name}
+            className="app-icon"
+          />
+          <div className="app-title">
+            <h2>{app.metadata?.name || app.package_id.package_name}</h2>
+          </div>
         </div>
         <ul className="detail-list">
           <li>
             <span>Installed:</span>
-            <span className="status-icon">{installedApp ? <FaCheck className="installed" /> : <FaTimes className="not-installed" />}</span>
+            <span className="status-icon">
+              {installedApp ? <FaCheck className="installed" /> : <FaTimes className="not-installed" />}
+            </span>
           </li>
-          {currentVersion && (
-            <li><span>Current Version:</span> <span>{currentVersion}</span></li>
-          )}
+          {installedApp && <li>
+            <span>Auto Update:</span>
+            <span className="status-icon">
+              {app.auto_update ? <FaCheck className="installed" /> : <FaTimes className="not-installed" />}
+            </span>
+          </li>}
           {latestVersion && (
-            <li><span>Latest Version:</span> <span>{latestVersion}</span></li>
+            <>
+              <li><span>Version:</span> <span>{latestVersion}</span></li>
+            </>
+          )}
+          {currentVersion && latestVersion && currentVersion !== latestVersion && (
+            <li><span>Installed Version:</span> <span>{currentVersion}</span></li>
+          )}
+          {currentVersion && latestVersion && currentVersion === latestVersion && (
+            <li><span>Up to date:</span> <span className="status-icon">
+              {upToDate ? <FaCheck className="installed" /> : <FaTimes className="not-installed" />}
+            </span></li>
           )}
           {installedApp?.pending_update_hash && (
             <li className="warning">
@@ -158,17 +176,13 @@ export default function AppPage() {
             </li>
           )}
           <li><span>Publisher:</span> <span>{app.package_id.publisher_node}</span></li>
-          {app.metadata?.properties?.license ? <li><span>License:</span> <span>app.metadata?.properties?.license</span></li> : <></>}
-          <li>
-            <span>Auto Update:</span>
-            <span className="status-icon">
-              {app.auto_update ? <FaCheck className="installed" /> : <FaTimes className="not-installed" />}
-            </span>
-          </li>
+          {app.metadata?.properties?.license
+            ? <li><span>License:</span> <span>{app.metadata?.properties?.license}</span></li>
+            : <></>}
         </ul>
       </div>
 
-      {valid_wit_version ? <></> : <div className="app-warning">THIS APP MUST BE UPDATED TO 1.0</div>}
+      {valid_wit_version ? <></> : <div className="app-warning">This app must be updated to 1.0</div>}
 
       <div className="app-actions">
         {installedApp && (
@@ -187,9 +201,9 @@ export default function AppPage() {
             </button>
           </>
         )}
-        <button onClick={handleDownload} className="primary">
-          <FaDownload /> Download Latest Version
-        </button>
+        {valid_wit_version && !upToDate && <button onClick={handleDownload} className="primary">
+          <FaDownload /> Download
+        </button>}
       </div>
 
       {app.metadata?.properties?.screenshots && (
diff --git a/kinode/packages/app-store/ui/src/pages/MyAppsPage.tsx b/kinode/packages/app-store/ui/src/pages/MyAppsPage.tsx
index 10fede162..a3c797597 100644
--- a/kinode/packages/app-store/ui/src/pages/MyAppsPage.tsx
+++ b/kinode/packages/app-store/ui/src/pages/MyAppsPage.tsx
@@ -308,36 +308,45 @@ export default function MyAppsPage() {
 
             <table className="apps-table">
                 <tbody>
-                    {Object.values(installed).map((app) => {
-                        const packageId = `${app.package_id.package_name}:${app.package_id.publisher_node}`;
-                        const listing = listings?.[packageId];
-                        const isCore = CORE_PACKAGES.includes(packageId);
-
-                        if (isCore) return null;
-
-                        return (
-                            <tr key={packageId}>
-                                <td>
-                                    {listing ? (
-                                        <a href={`/main:app-store:sys/app/${packageId}`}>
-                                            {listing.metadata?.name || packageId}
-                                        </a>
-                                    ) : (
-                                        packageId
-                                    )}
-                                </td>
-                                <td>
-                                    <button
-                                        onClick={() => initiateUninstall(app)}
-                                        disabled={isUninstalling}
-                                    >
-                                        {isUninstalling ? <FaSpinner className="fa-spin" /> : <FaTrash />}
-                                        Uninstall
-                                    </button>
-                                </td>
-                            </tr>
-                        );
-                    })}
+                    {(() => {
+                        const userspaceApps = Object.values(installed).filter(app => !CORE_PACKAGES.includes(`${app.package_id.package_name}:${app.package_id.publisher_node}`));
+                        if (userspaceApps.length === 0) {
+                            return (
+                                <tr>
+                                    <td colSpan={2} style={{ textAlign: 'center' }}>
+                                        No apps installed yet!
+                                    </td>
+                                </tr>
+                            );
+                        }
+                        return userspaceApps.map((app) => {
+                            const packageId = `${app.package_id.package_name}:${app.package_id.publisher_node}`;
+                            const listing = listings?.[packageId];
+
+                            return (
+                                <tr key={packageId}>
+                                    <td>
+                                        {listing ? (
+                                            <a href={`/main:app-store:sys/app/${packageId}`}>
+                                                {listing.metadata?.name || packageId}
+                                            </a>
+                                        ) : (
+                                            packageId
+                                        )}
+                                    </td>
+                                    <td>
+                                        <button
+                                            onClick={() => initiateUninstall(app)}
+                                            disabled={isUninstalling}
+                                        >
+                                            {isUninstalling ? <FaSpinner className="fa-spin" /> : <FaTrash />}
+                                            Uninstall
+                                        </button>
+                                    </td>
+                                </tr>
+                            );
+                        });
+                    })()}
                 </tbody>
             </table>