From 551130f0e19c983440fc3b0f74fbc07f6379362b Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 25 Mar 2025 03:22:21 +0530
Subject: [PATCH] (feat:sources/tools) ui perfection for pop-ups

---
 frontend/src/components/SourcesPopup.tsx | 46 ++++++++-------
 frontend/src/components/ToolsPopup.tsx   | 71 ++++++++++++++++--------
 2 files changed, 75 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/SourcesPopup.tsx b/frontend/src/components/SourcesPopup.tsx
index 4f838a4e..611b7c81 100644
--- a/frontend/src/components/SourcesPopup.tsx
+++ b/frontend/src/components/SourcesPopup.tsx
@@ -94,9 +94,9 @@ export default function SourcesPopup({
     <div
       ref={popupRef}
       style={getPopupPosition()}
-      className="bg-lotion dark:bg-charleston-green-2 rounded-xl shadow-md w-full max-w-md flex flex-col z-50 absolute"
+      className="bg-lotion dark:bg-charleston-green-2 rounded-xl shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033] w-full max-w-[95vw] md:max-w-md flex flex-col z-50 fixed"
     >
-      <div className="px-6 py-4">
+      <div className="px-4 md:px-6 py-4">
         <h2 className="text-lg font-bold text-[#141414] dark:text-bright-gray mb-4 dark:text-[20px]">
           {t('conversation.sources.text')}
         </h2>
@@ -114,7 +114,11 @@ export default function SourcesPopup({
         />
       </div>
 
-      <div className="overflow-y-auto h-[488px] mx-4 border border-[#D9D9D9] dark:border-dim-gray rounded-md">
+      <div className="overflow-y-auto mx-4 border border-[#D9D9D9] dark:border-dim-gray rounded-md [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]"
+           style={{
+             height: 'min(488px, calc(100vh - 220px))',
+             maxHeight: 'calc(100vh - 220px)'
+           }}>
         {options ? (
           <>
             {filteredOptions?.map((option: any, index: number) => {
@@ -133,18 +137,20 @@ export default function SourcesPopup({
                       src={SourceIcon}
                       alt="Source"
                       width={14} height={14}
-                      className="mr-3"
+                      className="mr-3 flex-shrink-0"
                     />
-                    <span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap">
+                    <span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow overflow-hidden overflow-ellipsis whitespace-nowrap mr-3">
                       {option.name}
                     </span>
-                    {selectedDocs && selectedDocs.id === option.id && (
-                      <img
-                        src={CheckIcon}
-                        alt="Selected"
-                        className="h-3 w-3 mr-2"
-                      />
-                    )}
+                    <div className={`w-4 h-4 border flex-shrink-0 flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
+                      {selectedDocs && selectedDocs.id === option.id && (
+                        <img
+                          src={CheckIcon}
+                          alt="Selected"
+                          className="h-3 w-3"
+                        />
+                      )}
+                    </div>
                   </div>
                 );
               }
@@ -154,13 +160,15 @@ export default function SourcesPopup({
               className="flex cursor-pointer items-center p-3 hover:bg-gray-100 dark:hover:bg-[#2C2E3C] transition-colors border-b border-[#D9D9D9] dark:border-dim-gray border-opacity-80 dark:text-[14px]"
               onClick={handleEmptyDocumentSelect}
             >
-              <img width={14} height={14} src={SourceIcon} alt="Source" className="mr-3" />
-              <span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow">
+              <img width={14} height={14} src={SourceIcon} alt="Source" className="mr-3 flex-shrink-0" />
+              <span className="text-[#5D5D5D] dark:text-bright-gray font-medium flex-grow mr-3">
                 {t('none')}
               </span>
-              {selectedDocs === null && (
-                <img src={CheckIcon} alt="Selected" className="h-5 w-5 mr-2" />
-              )}
+              <div className={`w-4 h-4 border flex-shrink-0 flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
+                {selectedDocs === null && (
+                  <img src={CheckIcon} alt="Selected" className="h-3 w-3" />
+                )}
+              </div>
             </div>
           </>
         ) : (
@@ -170,7 +178,7 @@ export default function SourcesPopup({
         )}
       </div>
 
-      <div className="px-6 py-4 opacity-75 hover:opacity-100 transition-opacity duration-200">
+      <div className="px-4 md:px-6 py-4 opacity-75 hover:opacity-100 transition-opacity duration-200">
         <a 
           href="/settings/documents" 
           className="text-violets-are-blue text-base font-medium flex items-center gap-2"
@@ -181,7 +189,7 @@ export default function SourcesPopup({
         </a>
       </div>
 
-      <div className="px-6 py-3 flex justify-start">
+      <div className="px-4 md:px-6 py-3 flex justify-start">
         <button
           onClick={handleUploadClick}
           className="py-2 px-4 rounded-full border text-violets-are-blue hover:bg-violets-are-blue border-violets-are-blue hover:text-white transition-colors duration-200 text-[14px] font-medium w-auto"
diff --git a/frontend/src/components/ToolsPopup.tsx b/frontend/src/components/ToolsPopup.tsx
index b8961599..4e13aa2a 100644
--- a/frontend/src/components/ToolsPopup.tsx
+++ b/frontend/src/components/ToolsPopup.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, useLayoutEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { selectToken } from '../preferences/preferenceSlice';
@@ -29,6 +29,31 @@ export default function ToolsPopup({
   const [searchTerm, setSearchTerm] = useState('');
   const [isDarkTheme] = useDarkTheme();
   const popupRef = useRef<HTMLDivElement>(null);
+  const [popupPosition, setPopupPosition] = useState({ bottom: 0, left: 0 });
+
+  useLayoutEffect(() => {
+    if (!isOpen || !anchorRef.current) return;
+    
+    const updatePosition = () => {
+      if (!anchorRef.current) return;
+      
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPopupPosition({
+        bottom: Math.min(
+          window.innerHeight - rect.top + 10,
+          window.innerHeight - 20
+        ),
+        left: Math.min(
+          rect.left,
+          window.innerWidth - Math.min(462, window.innerWidth * 0.95) - 10
+        )
+      });
+    };
+    
+    updatePosition();
+    window.addEventListener('resize', updatePosition);
+    return () => window.removeEventListener('resize', updatePosition);
+  }, [isOpen, anchorRef]);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -91,16 +116,10 @@ export default function ToolsPopup({
   return (
     <div
       ref={popupRef}
-      className="absolute z-10 w-[462px] rounded-lg border border-light-silver dark:border-dim-gray bg-lotion dark:bg-charleston-green-2 shadow-lg"
+      className="absolute z-10 w-[462px] max-w-[95vw] rounded-lg border border-light-silver dark:border-dim-gray bg-lotion dark:bg-charleston-green-2 shadow-[0px_9px_46px_8px_#0000001F,0px_24px_38px_3px_#00000024,0px_11px_15px_-7px_#00000033]"
       style={{
-        bottom: anchorRef.current
-          ? window.innerHeight -
-            anchorRef.current.getBoundingClientRect().top +
-            10
-          : 0,
-        left: anchorRef.current
-          ? anchorRef.current.getBoundingClientRect().left
-          : 0,
+        bottom: popupPosition.bottom,
+        left: popupPosition.left,
         position: 'fixed',
         zIndex: 9999,
       }}
@@ -128,7 +147,10 @@ export default function ToolsPopup({
           </div>
         ) : (
           <div className="border border-[#D9D9D9] dark:border-dim-gray rounded-md overflow-hidden">
-            <div className="h-[440px] overflow-y-auto">
+            <div 
+              className="h-[calc(min(480px,100vh-220px))] overflow-y-auto [&::-webkit-scrollbar-thumb]:bg-[#888] [&::-webkit-scrollbar-thumb]:hover:bg-[#555] [&::-webkit-scrollbar-track]:bg-[#E2E8F0] dark:[&::-webkit-scrollbar-track]:bg-[#2C2E3C]"
+             
+            >
               {userTools.length === 0 ? (
                 <div className="flex flex-col items-center justify-center h-full py-8">
                   <img
@@ -153,26 +175,29 @@ export default function ToolsPopup({
                       onClick={() => updateToolStatus(tool.id, !tool.status)}
                       className="flex items-center justify-between p-3 border-b border-[#D9D9D9] dark:border-dim-gray hover:bg-gray-100 dark:hover:bg-charleston-green-3"
                     >
-                      <div className="flex items-center">
+                      <div className="flex items-center flex-grow mr-3">
                         <img
                           src={`/toolIcons/tool_${tool.name}.svg`}
                           alt={`${tool.displayName} icon`}
-                          className="h-6 w-6 mr-4"
+                          className="h-5 w-5 mr-4 flex-shrink-0"
                         />
-                        <div>
-                          <p className="text-sm font-medium text-gray-900 dark:text-white">
+                        <div className="overflow-hidden">
+                          <p className="text-xs font-medium text-gray-900 dark:text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
                             {tool.displayName}
                           </p>
                         </div>
                       </div>
-                      <div className="flex items-center">
-                        <img
-                          src={tool.status ? CheckmarkIcon : ''}
-                          alt="Tool enabled"
-                          width={14}
-                          height={14}
-                          className={`${!tool.status && 'hidden'}`}
-                        />
+                      <div className="flex items-center flex-shrink-0">
+                        <div className={`w-4 h-4 border flex items-center justify-center p-[0.5px] dark:border-[#757783] border-[#C6C6C6]`}>
+                          {tool.status && (
+                            <img
+                              src={CheckmarkIcon}
+                              alt="Tool enabled"
+                              width={12}
+                              height={12}
+                            />
+                          )}
+                        </div>
                       </div>
                     </div>
                   ))