bloby-bot 0.37.1 → 0.39.1

package/workspace/client/src/components/Layout/MobileNav.tsx

@@ -1,30 +1,127 @@
 import { useState } from 'react';
-import { Menu } from 'lucide-react';
+import { NavLink } from 'react-router';
+import { Menu, LayoutDashboard, StickyNote, MessageCircle, Heart, Settings, Bitcoin, X } from 'lucide-react';
 import {
   Sheet,
   SheetContent,
   SheetTitle,
 } from '@/components/ui/sheet';
-import Sidebar from './Sidebar';
+import WallpaperPicker from '../Wallpaper/WallpaperPicker';
+import { cn } from '@/lib/utils';
 
-export default function MobileNav({ userName, botName, backendStatus }: { userName?: string; botName?: string; backendStatus?: 'healthy' | 'restarting' }) {
+interface Props {
+  userName?: string;
+  botName?: string;
+  backendStatus?: 'healthy' | 'restarting';
+}
+
+export default function MobileNav({ userName, botName = 'Bloby', backendStatus = 'healthy' }: Props) {
   const [open, setOpen] = useState(false);
+  const [pickerOpen, setPickerOpen] = useState(false);
+  const firstName = userName?.split(/\s+/)[0] || '';
+
+  const close = () => setOpen(false);
 
   return (
     <>
       <button
         onClick={() => setOpen(true)}
-        className="flex items-center justify-center h-10 w-10 rounded-lg text-muted-foreground hover:text-foreground transition-colors md:hidden"
+        className="flex items-center justify-center h-10 w-10 rounded-lg text-white/80 hover:text-white transition-colors md:hidden"
       >
         <Menu className="h-5 w-5" />
         <span className="sr-only">Open navigation</span>
       </button>
       <Sheet open={open} onOpenChange={setOpen}>
-        <SheetContent side="left" className="p-0 w-64" showCloseButton={false}>
+        <SheetContent side="left" className="p-0 w-72 bg-transparent border-none" showCloseButton={false}>
           <SheetTitle className="sr-only">Navigation</SheetTitle>
-          <Sidebar userName={userName} botName={botName} backendStatus={backendStatus} onNavigate={() => setOpen(false)} />
+          <div className="h-full p-3">
+            <div className="glass-card h-full p-5 flex flex-col" style={{ borderRadius: 24 }}>
+              <div className="flex items-center justify-between mb-6">
+                <div>
+                  <p className="text-xs text-white/60">Workspace</p>
+                  <p className="text-lg font-semibold tracking-tight">{botName}</p>
+                </div>
+                <button
+                  type="button"
+                  onClick={close}
+                  className="h-9 w-9 rounded-full glass-pill flex items-center justify-center text-white/80"
+                  aria-label="Close navigation"
+                >
+                  <X className="h-4 w-4" />
+                </button>
+              </div>
+
+              {firstName && (
+                <p className="text-sm text-white/70 mb-4">Hi, {firstName}.</p>
+              )}
+
+              <nav className="flex-1 space-y-1">
+                <Item to="/" icon={LayoutDashboard} label="Dashboard" onNavigate={close} />
+                <Item to="/sticky-notes" icon={StickyNote} label="Sticky Notes" onNavigate={close} />
+                <Item to="/aichat" icon={MessageCircle} label="AI Chat" onNavigate={close} />
+                <Item to="/wishlist" icon={Heart} label="Wishlist" onNavigate={close} />
+                <Item to="/crypto" icon={Bitcoin} label="Crypto" onNavigate={close} />
+
+                <button
+                  type="button"
+                  onClick={() => {
+                    setPickerOpen(true);
+                    close();
+                  }}
+                  className="w-full mt-2 flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-white/80 hover:text-white hover:bg-white/10 transition"
+                >
+                  <Settings className="h-[18px] w-[18px]" />
+                  <span>Wallpaper</span>
+                </button>
+              </nav>
+
+              <div className="rounded-xl glass-pill px-3.5 py-2.5 flex items-center gap-2 mt-4">
+                <span
+                  className={`h-2 w-2 rounded-full shrink-0 ${
+                    backendStatus === 'healthy' ? 'bg-emerald-400' : 'bg-orange-400 animate-pulse'
+                  }`}
+                />
+                <span className="text-xs text-white/70">
+                  Workspace: {backendStatus === 'healthy' ? 'Live' : 'Restarting'}
+                </span>
+              </div>
+            </div>
+          </div>
         </SheetContent>
       </Sheet>
+
+      <WallpaperPicker open={pickerOpen} onClose={() => setPickerOpen(false)} />
     </>
   );
 }
+
+function Item({
+  to,
+  icon: Icon,
+  label,
+  onNavigate,
+}: {
+  to: string;
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  onNavigate: () => void;
+}) {
+  return (
+    <NavLink
+      to={to}
+      end
+      onClick={onNavigate}
+      className={({ isActive }) =>
+        cn(
+          'flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition',
+          isActive
+            ? 'bg-white/15 text-white font-medium'
+            : 'text-white/70 hover:text-white hover:bg-white/10',
+        )
+      }
+    >
+      <Icon className="h-[18px] w-[18px]" />
+      <span>{label}</span>
+    </NavLink>
+  );
+}

package/workspace/client/src/components/Layout/Sidebar.tsx

@@ -1,9 +1,10 @@
 import { NavLink } from 'react-router';
 import {
   LayoutDashboard,
-  AppWindow,
-  Search,
-  CircleHelp,
+  StickyNote,
+  MessageCircle,
+  Heart,
+  Bitcoin,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 
@@ -26,9 +27,8 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
   return (
     <aside className="flex flex-col h-full w-64 bg-transparent p-5 pt-8">
       {/* Logo */}
-      <div className="flex items-center gap-2.5 mb-8">
-        <img src="/bloby.png" alt={botName} className="h-7 w-auto" />
-        <span className="font-bold text-lg" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>{botName}</span>
+      <div className="flex items-center mb-8">
+        <img src="/brand/blackrock.svg" alt="BlackRock" className="h-6 w-auto" />
       </div>
 
       {/* Greeting */}
@@ -40,7 +40,7 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
           <h2
             className="text-4xl font-bold mt-0.5 tracking-tight leading-[1.08] w-fit"
             style={{
-              backgroundImage: 'linear-gradient(to right, #4FF2FE, #BC20DE, #FE546B)',
+              backgroundImage: 'linear-gradient(to right, #ED1C24, #FF6B35, #C41E3A)',
               WebkitBackgroundClip: 'text',
               WebkitTextFillColor: 'transparent',
               backgroundClip: 'text',
@@ -54,9 +54,10 @@ export default function Sidebar({ userName, botName = 'Bloby', backendStatus = '
       {/* Navigation */}
       <nav className="flex-1 space-y-0.5">
         <NavItem to="/" icon={LayoutDashboard} label="Dashboard" onNavigate={onNavigate} />
-        <NavItem to="/app1" icon={AppWindow} label="App 1" sub="Ask Bloby to create your first app and remove this placeholder" onNavigate={onNavigate} />
-        <NavItem to="/research" icon={Search} label="Research" sub="Ask Bloby to research anything for you, maybe even daily" onNavigate={onNavigate} />
-        <NavItem to="/whatelse" icon={CircleHelp} label="What Else?" sub="The sky is the limit, just ask and Bloby will do it!" onNavigate={onNavigate} />
+        <NavItem to="/sticky-notes" icon={StickyNote} label="Sticky Notes" onNavigate={onNavigate} />
+        <NavItem to="/aichat" icon={MessageCircle} label="AI Chat" onNavigate={onNavigate} />
+        <NavItem to="/wishlist" icon={Heart} label="Wishlist" onNavigate={onNavigate} />
+        <NavItem to="/crypto" icon={Bitcoin} label="Crypto" onNavigate={onNavigate} />
       </nav>
 
       {/* Backend status */}

package/workspace/client/src/components/Lock/PinInput.tsx

@@ -0,0 +1,107 @@
+import { useRef, useState, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+
+interface PinInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onComplete?: (value: string) => void;
+  error?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  length?: number;
+}
+
+export function PinInput({
+  value,
+  onChange,
+  onComplete,
+  error = false,
+  disabled = false,
+  autoFocus = true,
+  length = 6,
+}: PinInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [focused, setFocused] = useState(false);
+
+  useEffect(() => {
+    if (autoFocus && inputRef.current) {
+      const t = setTimeout(() => inputRef.current?.focus(), 120);
+      return () => clearTimeout(t);
+    }
+  }, [autoFocus]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const raw = e.target.value.replace(/\D/g, '').slice(0, length);
+    onChange(raw);
+    if (raw.length === length && onComplete) {
+      setTimeout(() => onComplete(raw), 180);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (
+      !/^\d$/.test(e.key) &&
+      !['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'].includes(e.key) &&
+      !e.metaKey && !e.ctrlKey
+    ) {
+      e.preventDefault();
+    }
+  };
+
+  return (
+    <div
+      className={cn('relative cursor-text select-none', error && 'animate-shake')}
+      onClick={() => inputRef.current?.focus()}
+    >
+      {/* Hidden input — triggers mobile numeric keyboard */}
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        autoComplete="one-time-code"
+        maxLength={length}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        disabled={disabled}
+        className="absolute inset-0 w-full h-full opacity-0 cursor-text"
+        style={{ caretColor: 'transparent', fontSize: '16px' }}
+        aria-label="PIN input"
+      />
+
+      {/* Visual cells */}
+      <div className="flex gap-[6px] sm:gap-2.5">
+        {Array.from({ length }).map((_, i) => {
+          const isFilled = i < value.length;
+          const isCursor = focused && i === value.length && !disabled;
+
+          return (
+            <div
+              key={i}
+              className={cn(
+                'w-[38px] h-[48px] sm:w-[44px] sm:h-[54px] rounded-lg border-2 flex items-center justify-center transition-all duration-200',
+                'bg-[#161616]',
+                isCursor &&
+                  'border-[rgba(175,39,227,0.5)] shadow-[0_0_0_3px_rgba(175,39,227,0.1),0_0_24px_-6px_rgba(175,39,227,0.2)]',
+                isFilled && !isCursor && 'border-white/[0.12]',
+                !isFilled && !isCursor && 'border-[#252525]',
+                error && 'border-destructive/40',
+                disabled && 'opacity-40'
+              )}
+            >
+              {isFilled && (
+                <div className="w-2.5 h-2.5 rounded-full bg-foreground animate-scale-in" />
+              )}
+              {isCursor && (
+                <div className="w-[2px] h-5 rounded-full bg-white/30 animate-pulse" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}