more homepage

kinode/packages/homepage/homepage/src/lib.rs

@@ -198,7 +198,7 @@ fn init(our: Address) {
                                         Some(HashMap::new()),
                                         vec![],
                                     );
-                                    return;
+                                    continue;
                                 };
                                 // POST of a list of package names.
                                 // go through the list and update each app in app_data to have the index of its name in the list as its order
@@ -208,7 +208,7 @@ fn init(our: Address) {
                                         Some(HashMap::new()),
                                         vec![],
                                     );
-                                    return;
+                                    continue;
                                 };
                                 let Ok(favorite_toggle) =
                                     serde_json::from_slice::<(String, u32, bool)>(&body.bytes)
@@ -218,7 +218,7 @@ fn init(our: Address) {
                                         Some(HashMap::new()),
                                         vec![],
                                     );
-                                    return;
+                                    continue;
                                 };
                                 if let Some(app) = app_data.get_mut(&favorite_toggle.0) {
                                     app.order = Some(favorite_toggle.1);

kinode/packages/homepage/ui/src/components/AppDisplay.tsx

@@ -10,16 +10,18 @@ const AppDisplay: React.FC<AppDisplayProps> = ({ app }) => {
 
   return <a
     id={app?.package_name}
-    href={app?.path}
+    href={app?.path || undefined}
     onMouseEnter={() => setIsHovered(true)}
     onMouseLeave={() => setIsHovered(false)}
     className="app-display"
+    title={isHovered ? (app?.label || app?.package_name) : (!app?.path ? "This app does not serve a UI" : undefined)}
   >
     {app?.base64_icon
       ? <img className="app-icon" src={app.base64_icon} />
       : <img className="app-icon" src='/bird-orange.svg' />
     }
     <h6>{app?.label || app?.package_name}</h6>
+    {isHovered && !app?.path && <p>This app does not serve a UI</p>}
     {app?.path && isHovered && <button className="app-fave-button"
       onClick={(e) => {
         e.preventDefault()
@@ -34,4 +36,3 @@ const AppDisplay: React.FC<AppDisplayProps> = ({ app }) => {
 }
 
 export default AppDisplay
-

kinode/packages/homepage/ui/src/components/Modal.tsx

@@ -1,4 +1,5 @@
 import { FaX } from "react-icons/fa6"
+import { useEffect } from 'react';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   title: string
@@ -6,6 +7,20 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export const Modal: React.FC<Props> = ({ title, onClose, children }) => {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
   return (
     <div className="modal">
       <div className="modal-inner">

kinode/packages/homepage/ui/src/components/WidgetsSettingsModal.tsx

@@ -18,23 +18,12 @@ const WidgetsSettingsModal = () => {
             <h4>{app.label}</h4>
             <div>
               <div>
-                <span>Show widget</span>
+                <span>Show widget<input
-                <div>
+                  type="checkbox"
-                  <input
+                  checked={!widgetSettings[app.id]?.hide}
-                    type="checkbox"
+                  onChange={() => toggleWidgetVisibility(app.id)}
-                    checked={!widgetSettings[app.id]?.hide}
+                  autoFocus
-                    onChange={() => toggleWidgetVisibility(app.id)}
+                /></span>
-                    autoFocus
-                  />
-                  {!widgetSettings[app.id]?.hide && (
-                    <span
-                      onClick={() => toggleWidgetVisibility(app.id)}
-                      className="checkmark"
-                    >
-                      &#10003;
-                    </span>
-                  )}
-                </div>
               </div>
               <div>
                 <span>Widget size</span>

kinode/packages/homepage/ui/src/index.css

@@ -1,9 +1,11 @@
 body {
-    width: 100%;
+    width: 90vw;
+    margin: 0 auto;
 }
 
 #homepage {
-    width: 100%;
+    max-width: 960px;
+    margin: 0 auto;
 }
 
 header {
@@ -32,7 +34,7 @@ header h1 {
     background-color: #4f000085;
     padding: 10px;
     border-radius: 10px;
-    max-width: 90%;
+    width: fit-content;
     margin: 0 auto;
     margin-bottom: 10px;
 }
@@ -63,6 +65,8 @@ header h1 {
     width: 100%;
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
     gap: 10px;
 }
 
@@ -72,7 +76,7 @@ header h1 {
     text-align: center;
     position: relative;
     max-width: 100%;
-    width: 400px;
+    width: 300px;
     height: 400px;
     overflow: hidden;
 }
@@ -93,18 +97,24 @@ header h1 {
 }
 
 footer {
-    position: absolute;
+    text-align: center;
+    position: fixed;
     bottom: 0;
-    width: 100%;
+    width: 90vw;
+    margin: 0 auto;
     max-height: 100vh;
+    max-width: 960px;
 }
 
 #all-apps {
-    border-top: 1px solid black;
+    border: 1px solid black;
     display: flex;
     flex-direction: row;
     gap: 10px;
+    justify-content: space-evenly;
+    padding: 10px;
     background-color: #4f000085;
+    border-radius: 5px 5px 0px 0px;
 }
 
 .app-icon {
@@ -119,18 +129,28 @@ footer {
     width: 100%;
     height: 100%;
     text-align: center;
+    background-color: #000000cc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .modal-inner {
-    background-color: #00000085;
+    width: fit-content;
+    text-align: center;
+    background-color: var(--gray);
     border-radius: 25px;
     border: 1px solid black;
+    padding: 25px;
+    margin: auto;
 }
 
 .modal-header {
-    margin-top: 20vh;
+    text-align: center;
     display: flex;
     flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: 2em;
 }
 
 .modal .widget-settings {

kinode/packages/homepage/ui/src/pages/Homepage.tsx

@@ -20,7 +20,6 @@ function Homepage() {
     ]).then(([appsData, version]) => {
       setVersion(version)
       setApps(appsData)
-      console.log(appsData)
     });
   }
 
@@ -38,6 +37,17 @@ function Homepage() {
       })
   }, [our])
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && allAppsExpanded) {
+        setAllAppsExpanded(false);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [allAppsExpanded]);
+
   return (
     <div id="homepage">
       <header>