fix(masterbots.ai): mobile ui/ux responsive adjustments (#216)

* fix: adjust page layout responsive

* fix: adjust chat view responsive

* fix: add class for page layout

* fix: account detial card responsive

* fix: search input

* fix: thread heading on bot browse page

* fix: thread auto scroll on open/close and open only one thread

* fix: typo

* fix: sidebar responsive and header responsive

* fix: adjust the width of user name comonent

apps/masterbots.ai/app/(browse)/[category]/[threadId]/page.tsx

@@ -13,7 +13,7 @@ export default async function ThreadPage({ params }: ThreadPageProps) {
   const initialMessagePairs = await getMessagePairs(thread.threadId)
 
   return (
-    <div className="container">
+    <div className="fluid-container">
       <CategoryTabs categories={categories} />
       <SearchInput />
       <ThreadAccordion

apps/masterbots.ai/app/(browse)/[category]/page.tsx

@@ -42,7 +42,7 @@ export default async function CategoryPage({
   // const hasPreviousPage = page > 1
 
   return (
-    <div className="container">
+    <div className="fluid-container">
       <CategoryTabs categories={categories} initialCategory={params.category} />
       <SearchInput />
       <ThreadList filter={{ categoryId, query }} initialThreads={threads} />

apps/masterbots.ai/app/(browse)/page.tsx

@@ -23,10 +23,10 @@ export default async function HomePage({ searchParams }: HomePageProps) {
     offset: (page - 1) * limit,
     query
   })
-  console.log('Thereads', threads.length)
+  console.log('Threads', threads.length)
 
   return (
-    <div className="container">
+    <div className="fluid-container">
       <CategoryTabs categories={categories} />
       <SearchInput />
       {/* <div>Your query: {query}</div>

apps/masterbots.ai/app/b/[id]/page.tsx

@@ -44,7 +44,7 @@ export default async function BotThreadsPage({
         threadNum={threads.length}
         category={chatbot.categories[0]?.category.name}
       />
-      <div className="container">
+      <div className="fluid-container">
         <ThreadList isBot filter={{ chatbotName }} initialThreads={threads} />
       </div>
     </div>

apps/masterbots.ai/app/c/layout.tsx

@@ -24,8 +24,8 @@ export default async function ChatLayout({ children }: ChatLayoutProps) {
         // <div className="border border-green-500 border-dashed w-[300px]"></div>
       }
 
-      <div className="mx-5 flex grow w-full">
-        {children}
+      <div className="mx-5 flex flex-col grow w-full">
+        <div className="grow">{children}</div>
         <div className="block lg:hidden">
           <FooterCT />
         </div>

apps/masterbots.ai/app/globals.css

@@ -46,11 +46,9 @@
     --mirage: 217, 33%, 17%;
     --iron: 240, 6%, 90%;
 
-    --mb-gradient: linear-gradient(
-      21deg,
-      rgba(16, 171, 255, 0.7),
-      rgba(27, 234, 189, 0.6)
-    );
+    --mb-gradient: linear-gradient(21deg,
+        rgba(16, 171, 255, 0.7),
+        rgba(27, 234, 189, 0.6));
   }
 
   .dark {
@@ -100,9 +98,14 @@
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
+
+  .fluid-container {
+    @apply max-w-[1024px] px-4 pb-10 mx-auto w-full;
+  }
 }
 
 .scrollbar {
@@ -113,10 +116,12 @@
   width: 4px;
   height: 4px;
 }
+
 .scrollbar::-webkit-scrollbar-track,
 .scrollbar::-webkit-scrollbar-corner {
   background: var(--scrollbar-track);
 }
+
 .scrollbar::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 2px;
@@ -147,7 +152,7 @@
   text-overflow: clip;
 }
 
-.hide-buttons > button {
+.hide-buttons>button {
   display: none;
 }
 
@@ -175,13 +180,17 @@
 
 /* Input specific styles */
 .gradient-input {
-  position: relative; /* Set to relative for proper positioning of child elements */
+  position: relative;
+  /* Set to relative for proper positioning of child elements */
   background: var(--mb-gradient);
-  padding: 2px; /* Padding around the input for border effect */
-  display: inline-block; /* Default display to inline for inline fields */
-  border-radius: 9999em; /* Circular border radius */
-
-  > input {
+  padding: 2px;
+  /* Padding around the input for border effect */
+  display: inline-block;
+  /* Default display to inline for inline fields */
+  border-radius: 9999em;
+  /* Circular border radius */
+
+  >input {
     border-radius: inherit;
   }
-}
+}

apps/masterbots.ai/app/u/[slug]/page.tsx

@@ -31,7 +31,7 @@ export default async function BotThreadsPage({
         threadNum={threads.length} //TODO: get total number of thread. not the filter one
         username={user.username}
       />
-      <div className="container">
+      <div className="fluid-container">
         <ThreadList
           isUser
           filter={{ slug: params.slug }}

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

@@ -38,13 +38,15 @@ export function UserMenu() {
               </div>
             )}
 
-            <span className="ml-2"> {user.username}</span>
+            <span className="ml-2 truncate-title w-[calc(100vw-325px)] !max-w-min">
+              {user.username}
+            </span>
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="w-[180px]" sideOffset={8}>
           <DropdownMenuItem className="flex-col items-start">
-            <div className="text-xs font-medium">name</div>
-            <div className="text-xs text-zinc-500">email</div>
+            <div className="text-xs font-medium">{user.username}</div>
+            <div className="text-xs text-zinc-500">{user.email}</div>
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem className="text-xs" onClick={signout}>

apps/masterbots.ai/components/routes/c/sidebar/index.tsx

@@ -20,9 +20,7 @@ export function Sidebar({ className, children }: SidebarProps) {
       data-state={isSidebarOpen && !isLoading ? 'open' : 'closed'}
       ref={ref}
     >
-      <div className="overflow-y-auto scrollbar h-[calc(100%-113px)]">
-        {children}
-      </div>
+      <div className="overflow-y-auto scrollbar h-full">{children}</div>
     </aside>
   )
 }

apps/masterbots.ai/components/routes/c/sidebar/sidebar-responsive.tsx

@@ -9,7 +9,8 @@ export async function ResponsiveSidebar() {
     transition-all
     -translate-x-full duration-500 ease-in-out
     data-[state=open]:translate-x-0 data-[state=closed]:lg:translate-x-0
-    w-[300px] lg:w-[250px] xl:w-[300px]"
+    w-[300px] lg:w-[250px] xl:w-[300px]
+    lg:static absolute"
     >
       <SidebarGeneralCategory />
       {/* <h3>Chat history</h3>

apps/masterbots.ai/components/shared/account-details.tsx

@@ -20,7 +20,7 @@ export default function AccountDetails({
     <div className="flex bg-cover py-10 bg-gradient-to-l from-mirage via-[#2B5D91] to-[#388DE2]">
       <div
         className={cn(
-          'dark:bg-[#09090B] bg-white rounded-lg p-6 max-w-[600px] flex flex-column gap-3 relative mx-auto font-mono min-w-[700px]',
+          'dark:bg-[#09090B] bg-white rounded-lg p-6 max-w-[600px] flex flex-column gap-3 relative mx-auto font-mono md:min-w-[700px] md:w-full w-[85%]',
           chatbotName ? 'min-h-[300px]' : ''
         )}
       >

apps/masterbots.ai/components/shared/search-input.tsx

@@ -55,18 +55,16 @@ export function SearchInput() {
             <IconClose height={15} width={15} />
           </div>
         ) : null}
-        <div className="w-full bg-black gradient-input">
           <Input
-            className="bg-black border "
+            className="w-full py-6 border-solid"
             onChange={e => {
               setQuery(e.target.value)
             }}
-            placeholder="Search answers on all categories"
+            placeholder="Search any chat with any Bot"
             type="text"
             value={query || ''}
           />
           {/* <span></span> */}
-        </div>
       </div>
       {/* <Button type="submit">Search</Button> */}
       <div className="w-full text-center">

apps/masterbots.ai/components/shared/thread-accordion.tsx

@@ -63,8 +63,10 @@ export function ThreadAccordion({
     // Cleanup function to remove the query parameter on unmount
     return () => {
       const url = new URL(window.location.href)
-      url.searchParams.delete('threadId')
-      window.history.pushState({}, '', url.pathname + url.search)
+      if (url.searchParams.get('threadId') === thread.threadId) {
+        url.searchParams.delete('threadId')
+        window.history.pushState({}, '', url.pathname + url.search)
+      }
     }
   }, [thread.threadId, pathname])
 

apps/masterbots.ai/components/shared/thread-heading.tsx

@@ -54,7 +54,9 @@ export function ThreadHeading({
       </div>
 
       {response ? (
-        <div className="overflow-hidden text-sm text-left opacity-50 flex-1 space-y-2 mt-3 mx-10">
+        <div
+          className={`overflow-hidden text-sm text-left opacity-50 flex-1 space-y-2 mt-3 ${isBot ? '' : 'mx-10'}`}
+        >
           <ShortMessage content={response} />
         </div>
       ) : null}

apps/masterbots.ai/components/shared/thread-list-accordion.tsx

@@ -3,7 +3,7 @@
 import type { Thread } from '@repo/mb-genql'
 import { DialogProps } from '@radix-ui/react-dialog'
 import { useSetState } from 'react-use'
-import { cn } from '@/lib/utils'
+import { cn, sleep } from '@/lib/utils'
 import {
   Accordion,
   AccordionContent,
@@ -13,6 +13,8 @@ import {
 import { ThreadAccordion } from './thread-accordion'
 import { ThreadHeading } from './thread-heading'
 import { createMessagePairs } from '@/lib/threads'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useRef } from 'react'
 
 export function ThreadListAccordion({
   thread,
@@ -27,13 +29,29 @@ export function ThreadListAccordion({
     firstResponse:
       thread.messages.find(m => m.role === 'assistant')?.content || 'not found'
   })
+  const searchParams = useSearchParams();
+  const threadRef = useRef<HTMLDivElement>(null)
+  const handleThreadIdChange = async () => {
+    if (searchParams.get('threadId') === thread.threadId) {
+      await sleep(300) // animation time
+      threadRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    } else if (state.isOpen && searchParams.get('threadId')) {
+      setState({ isOpen: false })
+    }
+  }
+
+  useEffect(() => {
+    handleThreadIdChange()
+  }, [searchParams ])
 
   return (
     <Accordion
+      ref={threadRef}
       className="w-full"
       onValueChange={v => {
         setState({ isOpen: v[0] === 'pair-1' })
       }}
+      value={state.isOpen ? ['pair-1'] : []}
       type="multiple"
     >
       {/* Frist level question and excerpt visible  on lists */}

apps/masterbots.ai/lib/threads.ts

@@ -91,5 +91,5 @@ export function getThreadLink({
 }) {
   return chat
     ? `/c/${toSlug(thread.chatbot.name)}/${thread.threadId}`
-    : `/${toSlug(thread.chatbot.categories[0]?.category.name)}/${thread.threadId}}`
+    : `/${toSlug(thread.chatbot.categories[0]?.category.name)}/${thread.threadId}`
 }