[masterbots.ai] refactor: prelaunch ux/ui changes (#336)

* refactor: replicate tooltip effect in desktop bot chatbot details

* fix: add guard and removed re-render

* fix: refactor mobile bot chatbot details

* refactor: make chatPannel bigger

* chore:add new bot card design + sidebar hover color

* chore: delete public and private sw + icons

* chore: include public + delete extra actions

* chore: add sidebar bg

* add sidebar new styles + lib fn

* feat: add select bot

* chore: cleaning

* fix: build - removing BotMessageSquareIcon

* fix: types/node version + node min ver req

---------

Co-authored-by: sheriffjimoh <sheriffjimoh88@gmail.com>
Co-authored-by: Roberto Lucas <andre.rlucas@outlook.com>

Author: 3 people

apps/masterbots.ai/.package.json.swp

@@ -0,0 +1 @@
+VSCODE/2687189850603de9a75d45adef99401a387e9d23250d09139755010b98886a50

apps/masterbots.ai/app/globals.css

@@ -48,6 +48,13 @@
     --tertiary: 288, 82%, 50%;
     --tertiary-foreground: 0 0% 98%;
     --font-size-base: 1rem;
+
+    --background-chat-gradient: linear-gradient(180deg, rgba(115, 201, 97, 0.2) 0%, rgba(122, 214, 104, 0.4) 100%);
+    --background-chat-hover-gradient: linear-gradient(-180deg, rgba(113, 199, 96, 0.1) 0%, rgba(117, 205, 99, 0.3) 100%);
+    
+    /* Public route gradients */
+    --background-public-gradient: linear-gradient(180deg, rgba(155, 22, 232, 0.2) 0%, rgba(190, 22, 232, 0.53) 100%);
+    --background-public-hover-gradient: linear-gradient(-180deg, rgba(166, 22, 232, 0.1) 0%, rgba(190, 22, 232, 0.3) 100%);
   }
 
   .dark {
@@ -93,6 +100,13 @@
 
     --tertiary: 120, 100%, 65%;
     --tertiary-foreground: 0 0% 98%;
+
+    --background-chat-gradient: linear-gradient(180deg, rgba(115, 201, 97, 0.2) 0%, rgba(122, 214, 104, 0.4) 100%);
+    --background-chat-hover-gradient: linear-gradient(-180deg, rgba(113, 199, 96, 0.1) 0%, rgba(117, 205, 99, 0.3) 100%);
+    
+    /* Public route gradients */
+    --background-public-gradient: linear-gradient(180deg, rgba(155, 22, 232, 0.2) 0%, rgba(190, 22, 232, 0.53) 100%);
+    --background-public-hover-gradient: linear-gradient(-180deg, rgba(166, 22, 232, 0.1) 0%, rgba(190, 22, 232, 0.3) 100%);
   }
 }
 
@@ -304,3 +318,29 @@
 .lucide {
   stroke-width: 1.25px;
 }
+
+/* Base sidebar gradient styles *//* Chat route styles */
+
+.sidebar-gradient {
+  transition: background-image 0.3s ease;
+}
+
+/* Chat route styles */
+[data-route="chat"] .sidebar-gradient:hover:not(.selected) {
+  background-image: var(--background-chat-hover-gradient);
+}
+
+[data-route="chat"] .sidebar-gradient.selected {
+  background-image: var(--background-chat-gradient);
+}
+
+/* Public route styles */
+[data-route="public"] .sidebar-gradient:hover:not(.selected) {
+  background-image: var(--background-public-hover-gradient);
+}
+
+[data-route="public"] .sidebar-gradient.selected {
+  background-image: var(--background-public-gradient);
+}
+
+

apps/masterbots.ai/components/layout/header/header.tsx

@@ -20,12 +20,8 @@ export function Header() {
         <div className="hidden lg:flex lg:items-center">
           <IconSeparator className="size-6 text-muted-foreground/50" />
           <HeaderLink href="/c" text="Chat" />
-          {appConfig.features.devMode && (
-            <>
-              <HeaderLink href="/c/p" text="Pro" />
-              <HeaderLink href="/wordware" text="Ww" />
-            </>
-          )}
+          <HeaderLink href="/" text="Public" />
+          {appConfig.features.devMode && <HeaderLink href="/c/p" text="Pro" />}
         </div>
       </div>
       <div className="flex items-center space-x-4">

apps/masterbots.ai/components/layout/sidebar/profile-sidebar.tsx

@@ -118,32 +118,31 @@ export function ProfileSidebar({ user }: ProfileSidebarProps) {
               Chat
             </Button>
 
-            {appConfig.features.devMode && (
-              <Button
-                variant="ghost"
-                className="justify-start w-full text-sm"
-                onClick={() => handleNavigation('/c/p')}
-              >
-                Pro
-              </Button>
-            )}
-
             <Button
               variant="ghost"
               className="justify-start w-full text-sm"
               onClick={() => handleNavigation('/')}
             >
-              Browse
+              Public
             </Button>
 
             {appConfig.features.devMode && (
-              <Button
-                variant="ghost"
-                className="justify-start w-full text-sm"
-                onClick={() => handleNavigation('/wordware')}
-              >
-                Ww
-              </Button>
+              <>
+                <Button
+                  variant="ghost"
+                  className="justify-start w-full text-sm"
+                  onClick={() => handleNavigation('/c/p')}
+                >
+                  Pro
+                </Button>
+                <Button
+                  variant="ghost"
+                  className="justify-start w-full text-sm"
+                  onClick={() => handleNavigation('/wordware')}
+                >
+                  Ww
+                </Button>
+              </>
             )}
           </nav>