Merge pull request #651 from kinode-dao/dr/improve-register-flow

visual improvements to register

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

@@ -146,14 +146,11 @@ fn init(our: Address) {
         )
         .expect("failed to bind /bird-plain.svg");
 
+    // because boot uses this path to check if homepage is served yet,
+    // it's best to respond dynamically and only serve this path once
+    // all of the apps/widgets have populated.
     http_server
-        .bind_http_static_path(
-            "/version",
-            true,
-            false,
-            Some("text/plain".to_string()),
-            version_from_cargo_toml().into(),
-        )
+        .bind_http_path("/version", http_config.clone())
         .expect("failed to bind /version");
 
     http_server
@@ -196,6 +193,19 @@ fn init(our: Address) {
                                     .unwrap(),
                                 )),
                             ),
+                            "/version" => {
+                                if app_data.len() >= 4 {
+                                    (
+                                        server::HttpResponse::new(http::StatusCode::OK),
+                                        Some(LazyLoadBlob::new(
+                                            Some("text/plain"),
+                                            version_from_cargo_toml().as_bytes().to_vec(),
+                                        )),
+                                    )
+                                } else {
+                                    (server::HttpResponse::new(http::StatusCode::TOO_EARLY), None)
+                                }
+                            }
                             "/favorite" => {
                                 let Ok(http::Method::POST) = incoming.method() else {
                                     return (

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

@@ -25,14 +25,12 @@ const AllApps: React.FC = () => {
 
   // Sort apps based on persisted order
   const sortedApps = useMemo(() => {
-    if (!orderedApps.length) {
-      setOrderedApps(apps);
-    }
-    const o = [...orderedApps].sort((a, b) => {
-      return a.order - b.order;
-    });
-    return o.filter(app => app.path !== null);
-  }, [orderedApps, apps]);
+    // Use orderedApps if we have them, otherwise fall back to apps
+    const appsToSort = orderedApps.length ? orderedApps : apps;
+    return [...appsToSort]
+      .sort((a, b) => a.order - b.order)
+      .filter(app => app.path !== null);
+  }, [apps, orderedApps]);
 
   const displayedApps = expanded
     ? sortedApps
@@ -74,6 +72,8 @@ const AllApps: React.FC = () => {
 
     setOrderedApps(updatedApps);
 
+    handleDragEnd();
+
     // Sync the order with the backend
     fetch('/order', {
       method: 'POST',
@@ -83,8 +83,6 @@ const AllApps: React.FC = () => {
       credentials: 'include',
       body: JSON.stringify(newSortedApps.map((app, index) => [app.id, index]))
     });
-
-    handleDragEnd();
   };
 
   return (

kinode/src/register-ui/src/index.css

@@ -7,6 +7,7 @@
 .form-label {
   margin-bottom: 0.5rem;
   font-weight: bold;
+  text-align: center;
 }
 
 .form-input {
@@ -241,6 +242,12 @@
   color: var(--off-white);
 }
 
+summary {
+  font-family: var(--font-family-main);
+  color: light-dark(var(--off-black), var(--off-white));
+  margin-bottom: 10px;
+}
+
 button.secondary {
   width: 100%;
 }
@@ -250,6 +257,7 @@ button.back {
   width: auto !important;
   padding: 5px !important;
   border: none !important;
+  background-color: var(--orange) !important;
 }
 
 /* Progress Bar Styles */

kinode/src/register-ui/src/pages/CommitDotOsName.tsx

@@ -109,7 +109,10 @@ function CommitDotOsName({
                                     </Tooltip>
                                 </h3>
                                 <EnterKnsName {...enterOsNameProps} />
-                                <DirectCheckbox {...{ direct, setDirect }} />
+                                <details>
+                                    <summary>Advanced Options</summary>
+                                    <DirectCheckbox {...{ direct, setDirect }} />
+                                </details>
                                 <div className="button-group">
                                     <button
                                         disabled={nameValidities.length !== 0 || isPending || isConfirming}
@@ -118,7 +121,6 @@ function CommitDotOsName({
                                     >
                                         Register name
                                     </button>
-                                    <p>This will confirm availability of the name and reserve it, then on the next screen you will be prompted to mint.</p>
                                     <Link to="/reset" className="button secondary">
                                         Already have a node?
                                     </Link>

kinode/src/register-ui/src/pages/KinodeHome.tsx

@@ -32,7 +32,7 @@ function KinodeHome({ knsName }: OsHomeProps) {
                         ) : (
                             <>
                                 <h2 className="text-center mb-2">Welcome to Kinode</h2>
-                                <h4 className="text-center mb-2">New here? Register a name to get started</h4>
+                                <h4 className="text-center mb-2">New here? Register a node to get started:</h4>
                                 <div className="button-group">
                                     <button onClick={registerRedir} className="button">
                                         Register .os Name