homepage: fixes & glow up

Author: nick1udwig

hyperdrive/packages/homepage/ui/src/components/Chat/Message.css

@@ -21,6 +21,25 @@
   }
 }
 
+/* Own message "rise from input" animation */
+@keyframes message-send {
+  0% {
+    opacity: 0;
+    transform: translateY(40px) scale(0.92);
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.message.own:not(.no-animate) {
+  animation: message-send 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+}
+
 /* Disable animation for messages already in view on load */
 .message.no-animate {
   animation: none;

hyperdrive/packages/homepage/ui/src/components/Chat/MessageInput.css

@@ -218,6 +218,17 @@
   box-shadow: none;
 }
 
+/* Send pulse on input container */
+@keyframes input-send-pulse {
+  0% { transform: scale(1); }
+  30% { transform: scale(0.97); }
+  100% { transform: scale(1); }
+}
+
+.message-input-container.just-sent {
+  animation: input-send-pulse 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+
 /* Recording state */
 .message-input-container.recording .message-input {
   border-color: #ff4444;

hyperdrive/packages/homepage/ui/src/components/Chat/MessageInput.tsx

@@ -16,6 +16,7 @@ const MessageInput: React.FC<MessageInputProps> = ({ chatId, onSendMessage }) =>
   const [showVoiceNote, setShowVoiceNote] = useState(false);
   const { sendMessage, replyingTo, setReplyingTo, editingMessage, setEditingMessage, editMessage } = useChatStore();
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   // Detect if user is on mobile device (avoid touch-enabled laptops)
   const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
@@ -55,6 +56,11 @@ const MessageInput: React.FC<MessageInputProps> = ({ chatId, onSendMessage }) =>
         setReplyingTo(null);
         await sendMessage(chatId, messageText, replyToId);
         onSendMessage?.();
+        // Trigger send pulse animation on input container
+        if (containerRef.current) {
+          containerRef.current.classList.add('just-sent');
+          setTimeout(() => containerRef.current?.classList.remove('just-sent'), 350);
+        }
       }
       inputRef.current?.focus();
     }
@@ -119,7 +125,7 @@ const MessageInput: React.FC<MessageInputProps> = ({ chatId, onSendMessage }) =>
         </div>
       )}
 
-      <div className={`message-input-container ${editingMessage ? 'editing' : ''}`}>
+      <div ref={containerRef} className={`message-input-container ${editingMessage ? 'editing' : ''}`}>
         {!editingMessage && (
           <div className="message-actions">
             <button

hyperdrive/packages/homepage/ui/src/components/Settings/ProfileSettings.css

@@ -12,7 +12,7 @@
 
 .save-button {
   background: var(--primary-color);
-  color: white;
+  color: #000;
   border: none;
   padding: 12px 24px;
   border-radius: 8px;

hyperdrive/packages/homepage/ui/src/components/Settings/SettingsModal.css

@@ -7,6 +7,8 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  align-self: flex-start;
+  margin-top: 10vh;
 }
 
 .settings-header {

hyperdrive/packages/homepage/ui/src/components/SplashScreen/SplashScreen.tsx

@@ -20,9 +20,7 @@ const SplashScreen: React.FC<SplashScreenProps> = ({
       <div className="splash-header">
         <ProfileButton onClick={() => setShowSettings(true)} />
         <h1 className="app-title">Chats</h1>
-        <button className="header-action" aria-label="New chat">
-          <span className="material-symbols-outlined">edit_square</span>
-        </button>
+        <div style={{ width: 40 }} />
       </div>
 
       <div className="splash-content">

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

@@ -4,7 +4,7 @@ import { useAppStore } from '../stores/appStore';
 import { useNavigationStore } from '../stores/navigationStore';
 import { usePersistenceStore } from '../stores/persistenceStore';
 import { AppIcon } from './AppIcon';
-import { BsSearch, BsX } from 'react-icons/bs';
+import ChatSearch from '../../components/Chats/ChatSearch';
 import classNames from 'classnames';
 
 interface AppDrawerProps {
@@ -56,22 +56,7 @@ export const AppDrawer: React.FC<AppDrawerProps> = ({
       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 ${zIndexClass} ${dockedClass} flex flex-col animate-modal-backdrop`}
       onClick={handleBackdropClick}
     >
-      <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-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 !p-0"
-            autoFocus={!isMobile}
-          />
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto p-4">
+      <div className="flex-1 overflow-y-auto overflow-x-hidden pt-16 px-6">
         <div className={classNames(`
           grid
           gap-4 md:gap-6 lg:gap-8
@@ -98,7 +83,7 @@ export const AppDrawer: React.FC<AppDrawerProps> = ({
               {!homeScreenApps.includes(app.id) && (
                 <button
                   onClick={() => handleAddToHome(app)}
-                  className="absolute -top-3 -right-3 w-8 h-8 rounded-full thin"
+                  className="absolute -top-1 -right-1 w-6 h-6 rounded-full thin text-xs"
                 >
                   +
                 </button>
@@ -125,6 +110,14 @@ export const AppDrawer: React.FC<AppDrawerProps> = ({
           )}
         </div>
       </div>
+
+      <div className="px-4 py-4 flex-shrink-0">
+        <ChatSearch
+          value={searchQuery}
+          onChange={setSearchQuery}
+          placeholder="Search apps..."
+        />
+      </div>
     </div>
   );
 };