feat:impr responsive

Author: Bran18

apps/masterbots.ai/app/auth/signin/page.tsx

@@ -45,7 +45,6 @@ export default function SignInPage() {
             <Link 
               href="/auth/signup" 
               className="underline transition-colors hover:text-primary" 
-              prefetch={false}
             >
               Sign up
             </Link>

apps/masterbots.ai/app/auth/signup/page.tsx

@@ -46,11 +46,11 @@ export default function SignUpPage() {
         {/* Optional: Add terms and conditions notice */}
         <p className="mt-6 text-xs text-center text-muted-foreground">
           By creating an account, you agree to our{' '}
-          <a href="/terms" className="underline hover:text-primary">
+          <a href="/terms#terms" className="underline hover:text-primary">
             Terms of Service
           </a>{' '}
           and{' '}
-          <a href="/privacy" className="underline hover:text-primary">
+          <a href="/terms#privacy" className="underline hover:text-primary">
             Privacy Policy
           </a>
         </p>

apps/masterbots.ai/components/layout/header/user-menu.tsx

@@ -21,8 +21,9 @@ function getUserInitials(name: string) {
   return lastName ? `${firstName[0]}${lastName[0]}` : firstName.slice(0, 2)
 }
 
-function truncateUsername(username: string) {
-  return username.length > 10 ? `${username.slice(0, 6)}..` : username
+function truncateUsername(username: string | null | undefined, maxLength = 10) {
+  if (!username) return '';
+  return username.length > maxLength ? `${username.slice(0, maxLength - 4)}...` : username;
 }
 
 export function UserMenu({ user }: UserMenuProps) {

apps/masterbots.ai/components/routes/browse/browse-accordion.tsx

@@ -35,6 +35,16 @@ import { ChevronDown } from 'lucide-react'
 import type { Thread } from 'mb-genql'
 import React from 'react'
 
+// Helper function to handle body scroll
+const toggleBodyScroll = (disable: boolean) => {
+  if (typeof window === 'undefined') return
+  
+  document.body.style.overflow = disable ? 'hidden' : 'auto'
+  // Prevent iOS Safari bouncing
+  document.body.style.position = disable ? 'fixed' : 'static'
+  document.body.style.width = disable ? '100%' : 'auto'
+}
+
 export function BrowseAccordion({
   thread = null,
   className,
@@ -83,6 +93,20 @@ export function BrowseAccordion({
     thread?.threadId !== activeThread?.threadId
   const shouldBeDisabled = disabled || isAnotherThreadOpen
 
+    //!!! Handle body scroll locking
+    React.useEffect(() => {
+      const isMobile = window.innerWidth < 640 // sm breakpoint
+      
+      if (isMobile && open && !isNestedThread) {
+        toggleBodyScroll(true)
+      } else {
+        toggleBodyScroll(false)
+      }
+  
+      // Cleanup on unmount
+      return () => toggleBodyScroll(false)
+    }, [open, isNestedThread])
+
   React.useEffect(() => {
     if (
       (thread?.threadId &&
@@ -164,7 +188,10 @@ export function BrowseAccordion({
         !open &&
         'opacity-50 pointer-events-none filter grayscale',
         !isNestedThread && shouldBeDisabled && 'cursor-not-allowed',
-        isNestedThread && 'my-2'
+        isNestedThread && 'my-2',
+        //! Add styles for mobile when open
+        !isNestedThread && open && 'sm:relative fixed inset-0 sm:inset-auto'
+
       )}
       id={`thread-${thread?.threadId}`}
       {...props}

apps/masterbots.ai/components/routes/browse/browse-list-item.tsx

@@ -65,6 +65,7 @@ export default function BrowseListItem({
     initialUrl = location.href
   })
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
   React.useEffect(() => {
     initialUrl = location.href
   }, [tab])
@@ -150,53 +151,61 @@ export default function BrowseListItem({
             'relative flex items-center font-normal md:text-lg transition-all w-full gap-3 pr-4'
           )}
         >
-          <div className="w-full flex justify-between items-center text-left">
-            <div className='flex items-center gap-4 w-[calc(100%-124px)] m:w-[calc(100%-58px)] '>
+          <div className="flex items-center justify-between w-full text-left">
+            {/* Main content area - adjusted width and spacing */}
+            <div className="flex items-center gap-2 sm:gap-4 w-[calc(100%-100px)] sm:w-[calc(100%-124px)]">
               {pageType !== 'bot' && <ChatbotAvatar thread={thread} />}
+
+              {/* Message content - adjusted spacing */}
               <div
                 className={cn('truncate-title', {
-                  'no-truncate max-h-40 !overflow-y-auto sm:max-h-none sm:overflow-visible': isAccordionOpen
+                  'no-truncate max-h-40 !overflow-y-auto sm:max-h-none sm:overflow-visible':
+                    isAccordionOpen
                 })}
               >
                 {thread.messages?.[0]?.content}
               </div>
 
-              <div className="flex gap-3 px-4 items-center">
-                {pageType !== 'user' && (
-                  <>
-                    <span className="opacity-50 text-sm"> by  </span>
-                    <Button
-                      onClick={goToProfile}
-                      title={thread.user?.username.replace('_', ' ')}
-                      variant="icon"
-                      size="icon"
-                    >
-                      <Image
-                        className="transition-opacity duration-300 rounded-full select-none hover:opacity-80"
-                        src={thread.user?.profilePicture || '/images/robohash1.png'}
-                        alt={thread.user?.username ?? 'Avatar'}
-                        height={40}
-                        width={40}
-                      />
-                    </Button>
-                  </>
-                )}
-              </div>
+              {/* User section with tighter spacing on mobile */}
+              {pageType !== 'user' && (
+                <div className="flex items-center gap-1 ml-2 sm:gap-3 sm:ml-4">
+                  <span className="hidden text-sm opacity-50 sm:inline"> by </span>
+                  <Button
+                    onClick={goToProfile}
+                    title={thread.user?.username.replace('_', ' ')}
+                    variant="icon"
+                    size="icon"
+                    className="w-8 h-8 sm:h-10 sm:w-10" // Smaller on mobile
+                  >
+                    <Image
+                      className="transition-opacity duration-300 rounded-full select-none hover:opacity-80"
+                      src={
+                        thread.user?.profilePicture || '/images/robohash1.png'
+                      }
+                      alt={thread.user?.username ?? 'Avatar'}
+                      height={40}
+                      width={40}
+                    />
+                  </Button>
+                </div>
+              )}
             </div>
             {/* Thread Options */}
-            <div className="pl-4 pr-8">
-              <ChatOptions threadId={thread.threadId} thread={thread} isBrowse />
+            <div className="pl-2 pr-4 sm:pl-4 sm:pr-8">
+              <ChatOptions
+                threadId={thread.threadId}
+                thread={thread}
+                isBrowse
+              />
             </div>
           </div>
-
-
         </div>
 
         {/* Thread Description */}
 
         <div className="overflow-hidden text-sm text-left opacity-50">
           {thread.messages?.[1]?.content &&
-            thread.messages?.[1]?.role !== 'user' ? (
+          thread.messages?.[1]?.role !== 'user' ? (
             <div className="flex-1 space-y-2 overflow-hidden">
               <ShortMessage content={thread.messages?.[1]?.content} />
             </div>

apps/masterbots.ai/components/shared/password-strength-meter.tsx

@@ -9,9 +9,7 @@ interface PasswordStrengthMeterProps {
   password: string
 }
 
-export const PasswordStrengthMeter: React.FC<PasswordStrengthMeterProps> = ({
-  password
-}) => {
+export function PasswordStrengthMeter({ password }: PasswordStrengthMeterProps) {
   const strength = calculatePasswordStrength(password)
   const color = getPasswordStrengthColor(strength)
   const label = getPasswordStrengthLabel(strength)

apps/masterbots.ai/lib/password.ts

@@ -1,10 +1,7 @@
 import type React from 'react'
 
-
-
 // * Valid password strength scores
-export type PasswordStrength = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
+export type PasswordStrength = 0 | 1 | 2 | 3 | 4 | 5 | 6
 
 //* Mapping of strength scores to labels
 export const strengthLabels: Record<PasswordStrength, string> = {
@@ -15,46 +12,46 @@ export const strengthLabels: Record<PasswordStrength, string> = {
   4: 'Good',
   5: 'Strong',
   6: 'Very Strong'
-} as const;
+} as const
 
 /**
  * Calculates password strength based on various criteria including Unicode characters.
- * Returns a score from 0 (weakest) to 6 (strongest). 
+ * Returns a score from 0 (weakest) to 6 (strongest).
  * @param password The password to evaluate
  */
 export function calculatePasswordStrength(password: string): PasswordStrength {
   // Early return for empty or very short passwords
-  if (!password || password.length < 4) return 0;
+  if (!password || password.length < 4) return 0
 
-  let strength = 0;
+  let strength = 0
 
   // Length checks
-  if (password.length > 7) strength += 1;
-  if (password.length > 10) strength += 1;
+  if (password.length > 7) strength += 1
+  if (password.length > 10) strength += 1
 
   // Unicode-aware regex patterns
   const patterns = {
     // Matches any uppercase letter, including non-ASCII uppercase
     uppercase: /\p{Lu}/u,
-    
+
     // Matches any lowercase letter, including non-ASCII lowercase
     lowercase: /\p{Ll}/u,
-    
+
     // Matches any decimal number
     numbers: /\p{Nd}/u,
-    
+
     // Matches symbols, punctuation, and other non-alphanumeric characters
     special: /[^\p{L}\p{Nd}]/u
-  };
+  }
 
   // Test each criteria
-  if (patterns.uppercase.test(password)) strength += 1;
-  if (patterns.lowercase.test(password)) strength += 1;
-  if (patterns.numbers.test(password)) strength += 1;
-  if (patterns.special.test(password)) strength += 1;
+  if (patterns.uppercase.test(password)) strength += 1
+  if (patterns.lowercase.test(password)) strength += 1
+  if (patterns.numbers.test(password)) strength += 1
+  if (patterns.special.test(password)) strength += 1
 
   // Ensure return value is within valid range
-  return Math.min(strength, 6) as PasswordStrength;
+  return Math.min(strength, 6) as PasswordStrength
 }
 
 /**
@@ -63,8 +60,11 @@ export function calculatePasswordStrength(password: string): PasswordStrength {
  */
 export function getPasswordStrengthLabel(strength: number): string {
   // Ensure strength is within valid range
-  const validStrength = Math.min(Math.max(Math.floor(strength), 0), 6) as PasswordStrength;
-  return strengthLabels[validStrength];
+  const validStrength = Math.min(
+    Math.max(Math.floor(strength), 0),
+    6
+  ) as PasswordStrength
+  return strengthLabels[validStrength]
 }
 
 export function getPasswordStrengthColor(strength: number): string {
@@ -83,15 +83,15 @@ export function getPasswordStrengthColor(strength: number): string {
   }
 }
 
-
 export function isPasswordStrong(password: string): boolean {
   const strength = calculatePasswordStrength(password)
   return strength >= 4 // Require at least a "Strong" password
 }
 
-export function validatePassword(e: React.FocusEvent<HTMLInputElement>): void {
-  const password = e.target.value
+export function validatePassword(e: React.FocusEvent<HTMLInputElement>,
+  t: (key: string) => string): void {
 
+  const password = e.target.value
   if (password.length < 8) {
     e.target.setCustomValidity('Password must be at least 8 characters long')
     e.target.reportValidity()