implement feature flags and improve UI consistency (#601)

* implement feature flags and improve UI consistency

* Additional updates to robot-hub

* Additional updates & resolved upload images bug

frontend/src/components/listing/ListingFeatureButton.tsx

@@ -72,7 +72,7 @@ const ListingFeatureButton = (props: Props) => {
     <div className="flex items-center gap-2 mt-2">
       <Button
         onClick={handleFeatureToggle}
-        variant="default"
+        variant="outline"
         disabled={isUpdating}
         title={
           currentFeaturedCount >= 3 && !isFeatured

frontend/src/components/listing/ListingRegisterRobot.tsx

@@ -2,6 +2,8 @@ import { useState } from "react";
 import { FaPlus } from "react-icons/fa";
 
 import { Button } from "@/components/ui/button";
+import { useAuthentication } from "@/hooks/useAuth";
+import { FEATURE_FLAGS } from "@/lib/utils/featureFlags";
 
 import { RegisterRobotModal } from "../modals/RegisterRobotModal";
 
@@ -11,6 +13,11 @@ interface Props {
 
 const ListingRegisterRobot = ({ listingId }: Props) => {
   const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
+  const { isAuthenticated } = useAuthentication();
+
+  if (!isAuthenticated || FEATURE_FLAGS.DEMO_ROBOT_ENABLED) {
+    return null;
+  }
 
   return (
     <div className="flex flex-col items-start gap-3 mt-2">
@@ -20,7 +27,7 @@ const ListingRegisterRobot = ({ listingId }: Props) => {
         onClick={() => setIsRegisterModalOpen(true)}
       >
         <FaPlus className="mr-2 h-4 w-4" />
-        <span className="mr-2">Register Robot</span>
+        <span className="mr-2">Create Robot Instance</span>
       </Button>
 
       <p className="text-xs text-gray-6">

frontend/src/components/modals/DeleteRobotModal.tsx

@@ -53,27 +53,27 @@ export function DeleteRobotModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[425px] bg-gray-1 text-gray-12 border border-gray-3 rounded-lg shadow-lg">
+      <DialogContent className="sm:max-w-[425px] bg-gray-12 border border-gray-3 rounded-lg shadow-lg">
         <DialogHeader>
           <DialogTitle>Delete Robot</DialogTitle>
-          <DialogDescription className="text-gray-11">
+          <DialogDescription>
             <div className="flex flex-col gap-2">
               <span>
                 Are you sure you want to delete robot{" "}
-                <span className="text-primary-9 font-medium">
+                <span className="text-gray-9 font-medium">
                   &quot;{robot.name}&quot;
                 </span>
                 ? This action cannot be undone.
               </span>
-              <span className="text-gray-11 font-light text-xs">
+              <span className="font-light text-xs">
                 Data associated with this robot will be deleted and no longer
                 accessible.
               </span>
             </div>
           </DialogDescription>
         </DialogHeader>
         {error && <div className="text-red-500 text-sm mt-2">{error}</div>}
-        <div className="flex justify-end gap-2">
+        <div className="flex justify-between gap-2">
           <Button onClick={onClose} variant="outline" disabled={isLoading}>
             Cancel
           </Button>

frontend/src/components/modals/RegisterRobotModal.tsx

@@ -69,13 +69,13 @@ export function RegisterRobotModal({
         onClose();
       }}
     >
-      <DialogContent className="sm:max-w-[425px] bg-gray-1 text-gray-12 border border-gray-3 rounded-lg shadow-lg">
+      <DialogContent className="sm:max-w-[425px] bg-gray-12 text-gray-2 border border-gray-3 rounded-lg shadow-lg">
         <DialogHeader>
-          <DialogTitle>Register New Robot</DialogTitle>
+          <DialogTitle>Create New Robot Instance</DialogTitle>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
-            <Label htmlFor="name" className="text-sm font-medium text-gray-12">
+            <Label htmlFor="name" className="text-sm font-medium text-gray-2">
               Name
             </Label>
             <Input
@@ -92,7 +92,7 @@ export function RegisterRobotModal({
           <div className="grid gap-2">
             <Label
               htmlFor="description"
-              className="text-sm font-medium text-gray-12"
+              className="text-sm font-medium text-gray-2"
             >
               Description
             </Label>
@@ -113,7 +113,7 @@ export function RegisterRobotModal({
           <Button
             onClick={handleAdd}
             disabled={!name || isLoading}
-            variant="default"
+            variant="outline"
             className="flex items-center"
           >
             {isLoading ? (

frontend/src/components/nav/Navbar.tsx

@@ -49,15 +49,15 @@ const Navbar = () => {
             </Button>
           </div>
           <div className="hidden lg:flex items-center flex-grow justify-between ml-4">
-            <div className="flex space-x-1 p-2 flex-grow">
-              <div className="flex-grow flex space-x-1">
+            <div className="flex space-x-4 p-2 flex-grow items-center">
+              <div className="flex-grow flex space-x-4 items-center">
                 {featuredListings?.map((listing) => (
                   <Button
                     key={listing.id}
                     onClick={() =>
                       handleFeaturedClick(listing.username, listing.slug)
                     }
-                    variant="ghost"
+                    variant="outline"
                     className="px-2 xl:px-3 py-2 text-sm tracking-widest text-gray-1"
                   >
                     {listing.name}
@@ -69,7 +69,7 @@ const Navbar = () => {
                   <Button
                     key={item.name}
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-2 xl:px-3 py-2 text-sm tracking-wide xl:tracking-widest text-gray-1"
                   >
                     <a
@@ -87,7 +87,7 @@ const Navbar = () => {
                     key={item.name}
                     asChild
                     variant={
-                      location.pathname === item.path ? "default" : "ghost"
+                      location.pathname === item.path ? "default" : "outline"
                     }
                     className="px-2 xl:px-3 py-2 text-sm tracking-widest"
                   >
@@ -98,19 +98,19 @@ const Navbar = () => {
                 ),
               )}
             </div>
-            <div className="flex items-center space-x-2 text-gray-1 p-2 ml-4 text-sm tracking-widest">
+            <div className="flex items-center space-x-4 text-gray-1 p-2 ml-4 text-sm tracking-widest">
               {isAuthenticated ? (
                 <>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.ACCOUNT.path}>Account</Link>
                   </Button>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.LOGOUT.path}>Logout</Link>
@@ -120,14 +120,14 @@ const Navbar = () => {
                 <>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.LOGIN.path}>Log In</Link>
                   </Button>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.SIGNUP.path}>Sign Up</Link>

frontend/src/components/nav/navigation.tsx

@@ -16,7 +16,7 @@ export interface NavItem extends BaseNavItem {
 
 export const DEFAULT_NAV_ITEMS: BaseNavItem[] = [
   {
-    name: "Bots",
+    name: "Robots Hub",
     path: ROUTES.BOTS.BROWSE.path,
     icon: <FaRobot />,
   },

frontend/src/components/pages/Profile.tsx

@@ -47,6 +47,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
   const [usernameError, setUsernameError] = useState<string | null>(null);
   const { addErrorAlert, addAlert } = useAlertQueue();
   const debouncedUsername = useDebounce(username, 500);
+  const [value, setValue] = useState("own");
 
   const formatJoinDate = (timestamp: number) => {
     const date = new Date(timestamp * 1000); // Convert seconds to milliseconds
@@ -121,12 +122,6 @@ export const RenderProfile = (props: RenderProfileProps) => {
     }
   };
 
-  const handleTabChange = (tab: string) => {
-    if (tab === "own") {
-      setUpvotedPage(1);
-    }
-  };
-
   useEffect(() => {
     const checkUsernameAvailability = async () => {
       if (debouncedUsername && debouncedUsername !== user.username) {
@@ -207,7 +202,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
                 </p>
               )}
             </div>
-            <p className="text-sm text-gray-6">
+            <p className="text-sm">
               Joined on{" "}
               {user.created_at
                 ? formatJoinDate(user.created_at)
@@ -218,7 +213,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
             <div className="flex flex-wrap gap-2 justify-center">
               <Button
                 onClick={() => navigate(ROUTES.KEYS.path)}
-                variant="default"
+                variant="outline"
               >
                 API Keys
               </Button>
@@ -267,7 +262,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
                 {user.bio ? (
                   <p>{user.bio}</p>
                 ) : (
-                  <p className="text-gray-6 text-sm">
+                  <p className="text-sm">
                     No bio set. Edit your profile to add a bio.
                   </p>
                 )}
@@ -301,7 +296,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
           <div className="flex gap-2 mb-8">
             <Button
               onClick={() => navigate(ROUTES.ORDERS.path)}
-              variant="default"
+              variant="outline"
             >
               Orders
             </Button>
@@ -341,21 +336,22 @@ export const RenderProfile = (props: RenderProfileProps) => {
             <Tabs
               defaultValue="own"
               className="w-full"
-              onValueChange={handleTabChange}
+              onValueChange={setValue}
+              value={value}
             >
               <TabsList className="flex justify-center space-x-4 mb-4">
-                <TabsTrigger
-                  value="own"
-                  className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-11 hover:text-gray-1 data-[state=active]:bg-gray-1 data-[state=active]:text-gray-12"
+                <Button
+                  variant={value === "own" ? "default" : "outline"}
+                  asChild
                 >
-                  Your Bot Listings
-                </TabsTrigger>
-                <TabsTrigger
-                  value="upvoted"
-                  className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-9 hover:text-gray-1 data-[state=active]:bg-gray-1 data-[state=active]:text-gray-12"
+                  <TabsTrigger value="own">Your Robot Listings</TabsTrigger>
+                </Button>
+                <Button
+                  variant={value === "upvoted" ? "default" : "outline"}
+                  asChild
                 >
-                  Upvoted Bots
-                </TabsTrigger>
+                  <TabsTrigger value="upvoted">Upvoted Robots</TabsTrigger>
+                </Button>
               </TabsList>
               <TabsContent value="own">
                 <MyListingGrid userId={user.id} />

frontend/src/components/pages/Terminal.tsx

@@ -8,6 +8,7 @@ import Spinner from "@/components/ui/Spinner";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
+import { FEATURE_FLAGS } from "@/lib/utils/featureFlags";
 
 import RequireAuthentication from "../auth/RequireAuthentication";
 
@@ -49,7 +50,21 @@ const TerminalInner = () => {
           if (error) {
             addErrorAlert(error);
           } else {
-            setRobots(data.robots);
+            if (FEATURE_FLAGS.DEMO_ROBOT_ENABLED && data.robots.length === 0) {
+              const demoRobot: SingleRobotResponse = {
+                robot_id: "d38afe50c9d6b936",
+                name: "K-Scale Demo",
+                description: "Click on the robot name to start the demo!",
+                listing_id: "3f26c2bc2c072f50",
+                user_id: "",
+                username: "K-Scale",
+                slug: "demo",
+                created_at: Date.now() / 1000,
+              };
+              setRobots([demoRobot]);
+            } else {
+              setRobots(data.robots);
+            }
           }
         } catch (error) {
           addErrorAlert(error);
@@ -61,6 +76,11 @@ const TerminalInner = () => {
   }, [api, currentUser, isAuthenticated]);
 
   const handleDeleteRobot = async (robotId: string) => {
+    if (FEATURE_FLAGS.DEMO_ROBOT_ENABLED && robotId === "3688c9a4af0b58e1") {
+      addErrorAlert("Demo robot cannot be deleted");
+      return;
+    }
+
     try {
       const { error } = await api.client.DELETE("/robots/delete/{robot_id}", {
         params: {
@@ -92,6 +112,11 @@ const TerminalInner = () => {
     robotId: string,
     updates: { name?: string; description?: string },
   ) => {
+    if (FEATURE_FLAGS.DEMO_ROBOT_ENABLED && robotId === "3688c9a4af0b58e1") {
+      addErrorAlert("Demo robot cannot be modified");
+      return;
+    }
+
     try {
       const { error } = await api.client.PUT("/robots/update/{robot_id}", {
         params: {