From 3021fe25d3cea723188ef197d7037716804e0f63 Mon Sep 17 00:00:00 2001
From: Dakota Kallas <kallas.dakota@gmail.com>
Date: Mon, 18 Nov 2024 10:27:33 -0600
Subject: [PATCH] Updated App Details page

---
 .../renderer/src/overlays/apps/AppDetails.tsx | 110 ++++++++++++------
 DeskThingServer/src/shared/types/app.ts       |   1 +
 2 files changed, 78 insertions(+), 33 deletions(-)

diff --git a/DeskThingServer/src/renderer/src/overlays/apps/AppDetails.tsx b/DeskThingServer/src/renderer/src/overlays/apps/AppDetails.tsx
index 7f13a61d..afa22e3d 100644
--- a/DeskThingServer/src/renderer/src/overlays/apps/AppDetails.tsx
+++ b/DeskThingServer/src/renderer/src/overlays/apps/AppDetails.tsx
@@ -1,40 +1,32 @@
 import React from 'react'
 import { AppSettingProps } from './AppsOverlay'
+import deskThingIcon from '../../../../../resources/icon2.png'
+import { IconCheck, IconX } from '@renderer/assets/icons'
 
 const AppDetails: React.FC<AppSettingProps> = ({ app }: AppSettingProps) => {
   if (!app.manifest) return null
 
   return (
-    <div className="w-full h-full p-4 flex flex-col divide-y-2 divide-gray-500">
-      <div className="w-full bg-black shadow-2xl rounded-2xl p-5">
-        <div className="">
-          <AppDetail title="Requires" value={app.manifest.requires.join(', ')}>
-            <div className="flex flex-col gap-2">
-              {app.manifest.requires.map((required, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  <p>{required}</p>
-                </div>
-              ))}
-            </div>
-          </AppDetail>
-          <AppDetail title="Description" value={app.manifest.description} />
-          <AppDetail title="Version" value={app.manifest.version} />
-          <AppDetail title="Author" value={app.manifest.author} />
-          <AppDetail title="ID" value={app.manifest.id} />
-          <AppDetail title="Webapp" value={app.manifest.isWebApp ? 'Yes' : 'No'} />
-          <AppDetail title="Screensaver" value={app.manifest.isScreenSaver ? 'Yes' : 'No'} />
-          <AppDetail title="Local App" value={app.manifest.isLocalApp ? 'Yes' : 'No'} />
-          <AppDetail title="Is Audio Source" value={app.manifest.isAudioSource ? 'Yes' : 'No'} />
-          <AppDetail title="Supported Platforms" value={app.manifest.platforms.join(', ')}>
-            <div className="flex flex-col gap-2">
-              {app.manifest.platforms.map((platform, index) => (
-                <div key={index} className="flex items-center gap-2">
-                  <p>{platform}</p>
-                </div>
-              ))}
-            </div>
-          </AppDetail>
-          <AppDetail title="Homepage" value={app.manifest.homepage}>
+    <div className="p-4 flex flex-col gap-4 w-full h-full justify-between">
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row gap-4">
+          <img
+            src={app.manifest.iconUrl ?? deskThingIcon}
+            alt="Icon"
+            className="w-24 h-24 rounded-lg"
+          />
+          <div>
+            <h2 className="text-3xl">{app.manifest.label}</h2>
+            <p className="text-gray-400">{app.manifest.author}</p>
+          </div>
+        </div>
+        <div>{app.manifest.description}</div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        {app.manifest.homepage && (
+          <div className="flex gap-2">
+            <label>Home Page:</label>
             <a
               href={app.manifest.homepage}
               target="_blank"
@@ -43,8 +35,11 @@ const AppDetails: React.FC<AppSettingProps> = ({ app }: AppSettingProps) => {
             >
               {app.manifest.homepage}
             </a>
-          </AppDetail>
-          <AppDetail title="Repository" value={app.manifest.repository}>
+          </div>
+        )}
+        {app.manifest.repository && (
+          <div className="flex gap-2">
+            <label>Repository:</label>
             <a
               href={app.manifest.repository}
               target="_blank"
@@ -53,7 +48,56 @@ const AppDetails: React.FC<AppSettingProps> = ({ app }: AppSettingProps) => {
             >
               {app.manifest.repository}
             </a>
-          </AppDetail>
+          </div>
+        )}
+        {app.manifest.platforms?.length > 0 && (
+          <div className="flex gap-4">
+            <label>Supported Platforms:</label>
+            {app.manifest.platforms.map((platform, index) => (
+              <p className="text-gray-400" key={index}>
+                {platform}
+              </p>
+            ))}
+          </div>
+        )}
+        <div className="flex gap-4">
+          <div className="flex gap-1">
+            <label>Web Application</label>
+            {app.manifest.isWebApp ? (
+              <IconCheck className="w-6 h-6 text-green-500" />
+            ) : (
+              <IconX className="w-6 h-6 text-red-500" />
+            )}
+          </div>
+          <div className="flex gap-1">
+            <label>Local Application</label>
+            {app.manifest.isLocalApp ? (
+              <IconCheck className="w-6 h-6 text-green-500" />
+            ) : (
+              <IconX className="w-6 h-6 text-red-500" />
+            )}
+          </div>
+          <div className="flex gap-1">
+            <label>Screen Saver</label>
+            {app.manifest.isScreenSaver ? (
+              <IconCheck className="w-6 h-6 text-green-500" />
+            ) : (
+              <IconX className="w-6 h-6 text-red-500" />
+            )}
+          </div>
+          <div className="flex gap-1">
+            <label>Audio Source</label>
+            {app.manifest.isAudioSource ? (
+              <IconCheck className="w-6 h-6 text-green-500" />
+            ) : (
+              <IconX className="w-6 h-6 text-red-500" />
+            )}
+          </div>
+        </div>
+
+        <div className="flex justify-between">
+          <p className="text-gray-400">Version {app.manifest.version}</p>
+          <p className="text-gray-400">ID: {app.manifest.id}</p>
         </div>
       </div>
     </div>
diff --git a/DeskThingServer/src/shared/types/app.ts b/DeskThingServer/src/shared/types/app.ts
index 571d1dca..91768f87 100644
--- a/DeskThingServer/src/shared/types/app.ts
+++ b/DeskThingServer/src/shared/types/app.ts
@@ -72,6 +72,7 @@ export interface Manifest {
   isLocalApp: boolean
   platforms: Array<string>
   homepage?: string
+  iconUrl: string
   repository?: string
 }