app_store UI: dropdown choose package and publisher

kinode/packages/app_store/ui/src/components/PackageSelector.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import useAppsStore from "../store";
+
+interface PackageSelectorProps {
+    onPackageSelect: (packageName: string, publisherId: string) => void;
+}
+
+const PackageSelector: React.FC<PackageSelectorProps> = ({ onPackageSelect }) => {
+    const { installed } = useAppsStore();
+    const [selectedPackage, setSelectedPackage] = useState<string>("");
+    const [customPackage, setCustomPackage] = useState<string>("");
+    const [isCustomPackageSelected, setIsCustomPackageSelected] = useState(false);
+
+    useEffect(() => {
+        if (selectedPackage && selectedPackage !== "custom") {
+            const [packageName, publisherId] = selectedPackage.split(':');
+            onPackageSelect(packageName, publisherId);
+        }
+    }, [selectedPackage, onPackageSelect]);
+
+    const handlePackageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        const value = e.target.value;
+        if (value === "custom") {
+            setIsCustomPackageSelected(true);
+        } else {
+            setSelectedPackage(value);
+            setIsCustomPackageSelected(false);
+            setCustomPackage("");
+        }
+    };
+
+    const handleSetCustomPackage = () => {
+        if (customPackage) {
+            const [packageName, publisherId] = customPackage.split(':');
+            if (packageName && publisherId) {
+                onPackageSelect(packageName, publisherId);
+                setSelectedPackage(customPackage);
+                setIsCustomPackageSelected(false);
+            } else {
+                alert("Please enter the package name and publisher ID in the format 'packageName:publisherId'");
+            }
+        }
+    };
+
+    return (
+        <div className="package-selector">
+            <select value={selectedPackage} onChange={handlePackageChange}>
+                <option value="">Select a package</option>
+                <option value="custom">Custom package</option>
+                {!isCustomPackageSelected && customPackage && (
+                    <option value={customPackage}>{customPackage}</option>
+                )}
+                {Object.keys(installed).map((packageFullName) => (
+                    <option key={packageFullName} value={packageFullName}>
+                        {packageFullName}
+                    </option>
+                ))}
+            </select>
+            {isCustomPackageSelected && (
+                <div className="custom-package-input">
+                    <input
+                        type="text"
+                        value={customPackage}
+                        onChange={(e) => setCustomPackage(e.target.value)}
+                        placeholder="Enter as packageName:publisherId"
+                        style={{ width: '100%', marginBottom: '10px' }}
+                    />
+                    <button onClick={handleSetCustomPackage} disabled={!customPackage}>
+                        Set Custom Package
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default PackageSelector;

kinode/packages/app_store/ui/src/components/index.ts

@@ -1,2 +1,3 @@
 export { default as Header } from './Header';
 export { default as MirrorSelector } from './MirrorSelector';
+export { default as PackageSelector } from './PackageSelector';

kinode/packages/app_store/ui/src/pages/PublishPage.tsx

@@ -6,10 +6,12 @@ import { keccak256, toBytes } from 'viem';
 import { mechAbi, KIMAP, encodeIntoMintCall, encodeMulticalls, kimapAbi, MULTICALL } from "../abis";
 import { kinohash } from '../utils/kinohash';
 import useAppsStore from "../store";
+import { PackageSelector } from "../components";
+
 
 export default function PublishPage() {
   const { openConnectModal } = useConnectModal();
-  const { ourApps, fetchOurApps } = useAppsStore();
+  const { ourApps, fetchOurApps, installed } = useAppsStore();
   const publicClient = usePublicClient();
 
   const { address, isConnected, isConnecting } = useAccount();
@@ -46,6 +48,11 @@ export default function PublishPage() {
     }
   }, [metadataUrl]);
 
+  const handlePackageSelection = (packageName: string, publisherId: string) => {
+    setPackageName(packageName);
+    setPublisherId(publisherId);
+  };
+
   const publishPackage = useCallback(
     async (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
@@ -187,26 +194,10 @@ export default function PublishPage() {
       ) : (
         <form className="publish-form" onSubmit={publishPackage}>
           <div className="form-group">
-            <label htmlFor="package-name">Package Name</label>
-            <input
-              id="package-name"
-              type="text"
-              required
-              placeholder="my-package"
-              value={packageName}
-              onChange={(e) => setPackageName(e.target.value)}
-            />
-          </div>
-          <div className="form-group">
-            <label htmlFor="publisher-id">Publisher ID</label>
-            <input
-              id="publisher-id"
-              type="text"
-              required
-              value={publisherId}
-              onChange={(e) => setPublisherId(e.target.value)}
-            />
+            <label htmlFor="package-select">Select Package</label>
+            <PackageSelector onPackageSelect={handlePackageSelection} />
           </div>
+
           <div className="form-group">
             <label htmlFor="metadata-url">Metadata URL</label>
             <input