From bb398d6db5ea38ee345d6d4cba35e30be042fbd7 Mon Sep 17 00:00:00 2001
From: lily-de <119957291+lily-de@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:31:27 -0800
Subject: [PATCH] feat: make settings pages visible  (#690)

---
 ui/desktop/src/components/BottomMenu.tsx | 122 +++++++++++------------
 ui/desktop/src/components/MoreMenu.tsx   |  21 ++--
 2 files changed, 70 insertions(+), 73 deletions(-)

diff --git a/ui/desktop/src/components/BottomMenu.tsx b/ui/desktop/src/components/BottomMenu.tsx
index ba61031577..794bc7e02f 100644
--- a/ui/desktop/src/components/BottomMenu.tsx
+++ b/ui/desktop/src/components/BottomMenu.tsx
@@ -64,70 +64,68 @@ export default function BottomMenu({ hasMessages }) {
       </span>
 
       {/* Model Selector Dropdown - Only in development */}
-      {process.env.NODE_ENV === "development" && (
-        <div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>
-          <div
-            className="flex items-center cursor-pointer"
-            onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
-          >
-            <span>{currentModel?.name || "Select Model"}</span>
-            {isModelMenuOpen ? (
-              <ChevronUp className="w-4 h-4 ml-1" />
-            ) : (
-              <ChevronDown className="w-4 h-4 ml-1" />
-            )}
-          </div>
-
-          {/* Dropdown Menu */}
-          {isModelMenuOpen && (
-            <div className="absolute bottom-[30px] right-0 w-[300px] bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg">
-              <div className="p-2">
-                <ModelRadioList 
-                  className="divide-y divide-gray-100 dark:divide-gray-700"
-                  renderItem={({ model, isSelected, onSelect }) => (
-                    <label key={model.name} className="block cursor-pointer">
-                      <div className="flex items-center justify-between p-3 transition-colors
-                        hover:text-gray-900 dark:hover:text-white"
-                        onClick={onSelect}>
-                        <div>
-                          <p className="text-sm font-semibold">{model.name}</p>
-                          <p className="text-xs text-muted-foreground">{model.provider}</p>
-                        </div>
-                        <div className="relative">
-                          <input
-                            type="radio"
-                            name="recentModels"
-                            value={model.name}
-                            checked={isSelected}
-                            onChange={onSelect}
-                            className="peer sr-only"
-                          />
-                          <div className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
-                            peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
-                            peer-checked:bg-white dark:peer-checked:bg-black
-                            transition-all duration-200 ease-in-out">
-                          </div>
-                        </div>
-                      </div>
-                    </label>
-                  )}
-                />
-                <div
-                  className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
-                    border-t-2 border-gray-200 dark:border-gray-600"
-                  onClick={() => {
-                    setIsModelMenuOpen(false);
-                    navigate("/settings");
-                  }}
-                >
-                  <span className="text-sm">Tools and Settings</span>
-                  <Sliders className="w-5 h-5 ml-2 rotate-90" />
-                </div>
-              </div>
-            </div>
+      <div className="relative flex items-center ml-auto mr-4" ref={dropdownRef}>
+        <div
+          className="flex items-center cursor-pointer"
+          onClick={() => setIsModelMenuOpen(!isModelMenuOpen)}
+        >
+          <span>{currentModel?.name || "Select Model"}</span>
+          {isModelMenuOpen ? (
+            <ChevronUp className="w-4 h-4 ml-1" />
+          ) : (
+            <ChevronDown className="w-4 h-4 ml-1" />
           )}
         </div>
-      )}
+
+        {/* Dropdown Menu */}
+        {isModelMenuOpen && (
+          <div className="absolute bottom-[30px] right-0 w-[300px] bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg shadow-lg">
+            <div className="p-2">
+              <ModelRadioList
+                className="divide-y divide-gray-100 dark:divide-gray-700"
+                renderItem={({ model, isSelected, onSelect }) => (
+                  <label key={model.name} className="block cursor-pointer">
+                    <div className="flex items-center justify-between p-3 transition-colors
+                      hover:text-gray-900 dark:hover:text-white"
+                      onClick={onSelect}>
+                      <div>
+                        <p className="text-sm font-semibold">{model.name}</p>
+                        <p className="text-xs text-muted-foreground">{model.provider}</p>
+                      </div>
+                      <div className="relative">
+                        <input
+                          type="radio"
+                          name="recentModels"
+                          value={model.name}
+                          checked={isSelected}
+                          onChange={onSelect}
+                          className="peer sr-only"
+                        />
+                        <div className="h-4 w-4 rounded-full border border-gray-400 dark:border-gray-500
+                          peer-checked:border-[6px] peer-checked:border-black dark:peer-checked:border-white
+                          peer-checked:bg-white dark:peer-checked:bg-black
+                          transition-all duration-200 ease-in-out">
+                        </div>
+                      </div>
+                    </div>
+                  </label>
+                )}
+              />
+              <div
+                className="flex items-center justify-between p-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
+                  border-t-2 border-gray-200 dark:border-gray-600"
+                onClick={() => {
+                  setIsModelMenuOpen(false);
+                  navigate("/settings");
+                }}
+              >
+                <span className="text-sm">Tools and Settings</span>
+                <Sliders className="w-5 h-5 ml-2 rotate-90" />
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/ui/desktop/src/components/MoreMenu.tsx b/ui/desktop/src/components/MoreMenu.tsx
index 9097be3136..589b6b937f 100644
--- a/ui/desktop/src/components/MoreMenu.tsx
+++ b/ui/desktop/src/components/MoreMenu.tsx
@@ -206,17 +206,16 @@ export default function MoreMenu() {
             )}
 
             {/* Settings Menu */}
-            {process.env.NODE_ENV === "development" && (
-              <button
-                onClick={() => {
-                  setOpen(false);
-                  navigate("/settings");
-                }}
-                className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700"
-              >
-                Settings
-              </button>
-            )}
+            <button
+              onClick={() => {
+                setOpen(false);
+                navigate("/settings");
+              }}
+              className="w-full text-left px-2 py-1.5 text-sm hover:bg-gray-700"
+            >
+              Settings
+            </button>
+
 
             <button
               onClick={() => {