Implement Gabi feedback

css/hyperware.css

@@ -2654,6 +2654,10 @@
             left: calc(var(--spacing)*2)
         }
 
+        .right-2 {
+            right: calc(var(--spacing)*2)
+        }
+
         .z-0 {
             z-index: 0
         }
@@ -2666,6 +2670,86 @@
             z-index: 20
         }
 
+        .bg-white {
+            background-color: var(--color-white);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .dark\:bg-black {
+                background-color: var(--color-black);
+            }
+
+            .dark\:shadow-white\/10 {
+                box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
+            }
+        }
+
+        .shadow-lg {
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+        }
+
+        .p-4 {
+            padding: calc(var(--spacing)*4);
+        }
+
+        .rounded-lg {
+            border-radius: var(--radius-lg);
+        }
+
+        .relative {
+            position: relative;
+        }
+
+        .w-full {
+            width: 100%;
+        }
+
+        .max-w-md {
+            max-width: var(--container-md);
+        }
+
+        .min-h-0 {
+            min-height: 0;
+        }
+
+        .max-h-screen {
+            max-height: 100vh;
+        }
+
+        .overflow-y-auto {
+            overflow-y: auto;
+        }
+
+        .backdrop-blur-sm {
+            backdrop-filter: blur(4px);
+        }
+
+        .items-center {
+            align-items: center;
+        }
+
+        .justify-center {
+            justify-content: center;
+        }
+
+        .z-50 {
+            z-index: 50;
+        }
+
+        .hidden {
+            display: none;
+        }
+
+        .fixed {
+            position: fixed;
+        }
+
+        .inset-0 {
+            inset: 0;
+        }
+
+
+
         .container {
             width: 100%
         }
@@ -2946,6 +3030,11 @@
             line-height: var(--tw-leading, var(--text-5xl--line-height))
         }
 
+        .text-lg {
+            font-size: var(--text-lg);
+            line-height: var(--tw-leading, var(--text-lg--line-height))
+        }
+
         .text-sm {
             font-size: var(--text-sm);
             line-height: var(--tw-leading, var(--text-sm--line-height))

hyperdrive/packages/app-store/ui/src/components/ResetButton.tsx

@@ -3,8 +3,12 @@ import { FaExclamationTriangle } from 'react-icons/fa';
 import useAppsStore from '../store';
 import { BsArrowClockwise } from 'react-icons/bs';
 import { Modal } from './Modal';
+import classNames from 'classnames'
 
-const ResetButton: React.FC = () => {
+interface ResetButtonProps {
+    className?: string
+}
+const ResetButton: React.FC<ResetButtonProps> = ({ className }) => {
     const resetStore = useAppsStore(state => state.resetStore);
     const [isOpen, setIsOpen] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
@@ -26,10 +30,11 @@ const ResetButton: React.FC = () => {
         <>
             <button
                 onClick={() => setIsOpen(true)}
-                className="button grow md:grow-0 self-stretch md:self-center !bg-red-500 !text-white"
+                className={classNames(className, {
+                    '!bg-red-500 !text-white grow md:grow-0 self-stretch md:self-center ': !className
+                })}
             >
-                <span>Reset Store</span>
-                <BsArrowClockwise className="text-xl" />
+                <span>Reset store</span>
             </button>
 
             {isOpen && (

hyperdrive/packages/app-store/ui/src/pages/StorePage.tsx

@@ -6,6 +6,7 @@ import { ResetButton } from "../components";
 import { AppCard } from "../components/AppCard";
 import { BsSearch } from "react-icons/bs";
 import classNames from "classnames";
+import { useLocation } from "react-router-dom";
 const mockApps: AppListing[] = [
   {
     package_id: {
@@ -102,6 +103,17 @@ export default function StorePage() {
   const [currentPage, setCurrentPage] = useState<number>(1);
   const [pageSize, setPageSize] = useState<number>(10);
 
+  // if we have ?search=something, set the search query to that
+  const location = useLocation();
+  useEffect(() => {
+    console.log({ location })
+    const search = new URLSearchParams(location.search).get("search");
+    if (search) {
+      setSearchQuery(search);
+      setCurrentPage(1);
+    }
+  }, [location]);
+
   const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     console.log(e.target.value, searchQuery);
     setSearchQuery(e.target.value);
@@ -161,6 +173,7 @@ export default function StorePage() {
           value={searchQuery}
           onChange={onInputChange}
           className="grow  text-sm !bg-transparent"
+          autoFocus
         />
       </div>
 
@@ -233,9 +246,9 @@ export default function StorePage() {
           </button>
         </div>
       )}
-      <div className="flex flex-col items-center justify-center text-center gap-2">
-        <p className="text-sm font-bold uppercase">Can't find the app you're looking for?</p>
-        <ResetButton />
+      <div className="flex items-center justify-center text-center gap-2">
+        <p className="text-xs">Can't find the app?</p>
+        <ResetButton className="thin clear !text-red-500 !text-xs" />
       </div>
     </div>
   );

hyperdrive/packages/homepage/ui/src/components/AndroidHomescreen/components/AppDrawer.tsx

@@ -5,6 +5,7 @@ import { useNavigationStore } from '../../../stores/navigationStore';
 import { usePersistenceStore } from '../../../stores/persistenceStore';
 import { AppIcon } from './AppIcon';
 import { BsSearch, BsX } from 'react-icons/bs';
+import classNames from 'classnames';
 
 export const AppDrawer: React.FC = () => {
   const { apps } = useAppStore();
@@ -28,28 +29,46 @@ export const AppDrawer: React.FC = () => {
 
   if (!isAppDrawerOpen) return null;
 
+  const isMobile = window.innerWidth < 768;
+
   return (
-    <div className="app-drawer fixed inset-0 bg-gradient-to-b from-gray-100/20 to-white/20 dark:from-gray-900/20 dark:to-black/20 backdrop-blur-xl z-50 flex flex-col">
-      <div className="p-4 self-stretch flex items-center gap-2">
+    <div
+    className="app-drawer fixed inset-0 bg-gradient-to-b from-gray-100/20 to-white/20 dark:from-gray-900/20 dark:to-black/20 backdrop-blur-xl z-50 flex flex-col"
+    onClick={toggleAppDrawer}
+    >
+      <div className="px-2 py-1 self-stretch flex items-center gap-2">
         <h2 className="prose">My Apps</h2>
-        <div className="bg-black/10 dark:bg-white/10 flex items-center gap-2 ml-auto max-w-md grow self-stretch rounded-lg pl-2">
-          <BsSearch className="opacity-50 text-lg" />
+        <div className="bg-black/10 dark:bg-white/10 flex items-center gap-2 ml-auto max-w-sm grow self-stretch rounded-lg pl-2">
+          <BsSearch className="opacity-50" />
           <input
             type="text"
             placeholder="Search apps..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="grow self-stretch bg-transparent"
-            autoFocus
+            className="grow self-stretch !bg-transparent !p-0"
+            autoFocus={!isMobile}
           />
         </div>
       </div>
 
       <div className="flex-1 overflow-y-auto p-4">
-        <div className="grid grid-cols-4 md:grid-cols-6 gap-6">
+        <div className={classNames(`
+          grid
+          gap-4 md:gap-6 lg:gap-8
+          `, {
+            'grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6': filteredApps.length > 0,
+            'grid-cols-2': filteredApps.length === 0,
+          })}>
           {filteredApps.map(app => (
-            <div key={app.id} className="relative group" data-app-id={app.id}>
-              <div onClick={() => openApp(app)}>
+            <div
+            key={app.id}
+            className="relative group"
+            data-app-id={app.id}
+            >
+              <div onClick={(e) => {
+                e.stopPropagation();
+                openApp(app);
+              }}>
                 <AppIcon app={app} isEditMode={false} />
               </div>
               {!homeScreenApps.includes(app.id) && (
@@ -62,16 +81,26 @@ export const AppDrawer: React.FC = () => {
               )}
             </div>
           ))}
+          {filteredApps.length === 0 && (
+              <div
+                className={classNames('bg-neon text-black rounded-lg px-2 py-1 text-xs flex flex-wrap items-center justify-center col-span-full')}
+              >
+                <span>No installed apps found.</span>
+                <span
+                  // href={`/main:app-store:sys/?search=${searchQuery}`}
+                  className="underline text-iris font-bold cursor-pointer"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSearchQuery('')
+                    openApp(apps.find(a => a.id === 'main:app-store:sys')!, `?search=${searchQuery}`)
+                  }}
+                >
+                  Search the app store
+                </span>
+              </div>
+            )}
         </div>
       </div>
-
-      <button
-        onClick={toggleAppDrawer}
-        className="m-4 p-4 text-center rounded-xl md:ml-auto"
-      >
-        <BsX className="text-lg" />
-        <span>Close</span>
-      </button>
     </div>
   );
 };

hyperdrive/packages/homepage/ui/src/components/AndroidHomescreen/components/AppIcon.tsx

@@ -6,14 +6,14 @@ import classNames from 'classnames';
 interface AppIconProps {
   app: HomepageApp;
   isEditMode: boolean;
-  showLabel?: boolean;
+  isUndocked?: boolean;
   isFloating?: boolean;
 }
 
 export const AppIcon: React.FC<AppIconProps> = ({
   app,
   isEditMode,
-  showLabel = true,
+  isUndocked = true,
   isFloating = false
 }) => {
   const { openApp } = useNavigationStore();
@@ -33,7 +33,7 @@ export const AppIcon: React.FC<AppIconProps> = ({
         'animate-wiggle': isEditMode && isFloating,
         'hover:scale-110': !isEditMode && isFloating,
         'opacity-50': !app.path && !(app.process && app.publisher) && !app.base64_icon,
-        'p-2': showLabel,
+        'p-2': isUndocked,
       })}
       onMouseDown={() => setIsPressed(true)}
       onMouseUp={() => setIsPressed(false)}
@@ -45,8 +45,8 @@ export const AppIcon: React.FC<AppIconProps> = ({
       data-app-publisher={app.publisher}
     >
 
-      <div className={classNames("rounded-xl w-16 h-16 overflow-hidden flex items-center justify-center shadow-lg", {
-        'mb-1': showLabel,
+      <div className={classNames("rounded-xl w-14 h-14 md:w-16 md:h-16 overflow-hidden flex items-center justify-center shadow-lg relative", {
+        'mb-1': isUndocked,
       })}>
         {app.base64_icon ? (
           <img src={app.base64_icon} alt={app.label} className="w-full h-full object-cover" />
@@ -57,11 +57,13 @@ export const AppIcon: React.FC<AppIconProps> = ({
         )}
       </div>
 
-      {showLabel && (
-        <span className="text-xs text-center max-w-full truncate px-2 py-1 bg-black/5 dark:bg-white/5 rounded-full backdrop-blur-xl">
-          {app.label}
-        </span>
-      )}
+      <span
+        className={classNames(" text-center max-w-full self-stretch truncate", {
+          'text-xs px-2 py-1 bg-black/5 dark:bg-white/5 rounded-full backdrop-blur-xl': isUndocked,
+          'text-[10px]': !isUndocked,
+        })}>
+        {app.label}
+      </span>
     </div>
   );
-};
+};