From d638ed888211159a6a11023abc9fa2ac805c855d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Thu, 20 Jun 2024 17:08:49 +0530
Subject: [PATCH] choe: icon list sectoin improvement (#4890)

---
 .../ui/src/emoji/emoji-icon-picker-new.tsx    |   2 +-
 packages/ui/src/emoji/emoji-icon-picker.tsx   |   2 +-
 packages/ui/src/emoji/icons-list.tsx          | 138 +++++++++---------
 packages/ui/src/emoji/lucide-icons-list.tsx   | 138 +++++++++---------
 4 files changed, 142 insertions(+), 138 deletions(-)

diff --git a/packages/ui/src/emoji/emoji-icon-picker-new.tsx b/packages/ui/src/emoji/emoji-icon-picker-new.tsx
index 557b39658..a8651b349 100644
--- a/packages/ui/src/emoji/emoji-icon-picker-new.tsx
+++ b/packages/ui/src/emoji/emoji-icon-picker-new.tsx
@@ -112,7 +112,7 @@ export const EmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                       }}
                     />
                   </Tab.Panel>
-                  <Tab.Panel className="h-80 w-full">
+                  <Tab.Panel className="h-80 w-full relative overflow-hidden overflow-y-auto">
                     <LucideIconsList
                       defaultColor={defaultIconColor}
                       onChange={(val) => {
diff --git a/packages/ui/src/emoji/emoji-icon-picker.tsx b/packages/ui/src/emoji/emoji-icon-picker.tsx
index c531dd168..ea3fcf002 100644
--- a/packages/ui/src/emoji/emoji-icon-picker.tsx
+++ b/packages/ui/src/emoji/emoji-icon-picker.tsx
@@ -112,7 +112,7 @@ export const CustomEmojiIconPicker: React.FC<TCustomEmojiPicker> = (props) => {
                       }}
                     />
                   </Tab.Panel>
-                  <Tab.Panel className="h-80 w-full">
+                  <Tab.Panel className="h-80 w-full relative overflow-hidden overflow-y-auto">
                     <IconsList
                       defaultColor={defaultIconColor}
                       onChange={(val) => {
diff --git a/packages/ui/src/emoji/icons-list.tsx b/packages/ui/src/emoji/icons-list.tsx
index 6575ae8f0..e0bb87b37 100644
--- a/packages/ui/src/emoji/icons-list.tsx
+++ b/packages/ui/src/emoji/icons-list.tsx
@@ -41,80 +41,82 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
 
   return (
     <>
-      <div className="flex items-center px-2 py-[15px] w-full ">
-        <div
-          className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
-          onFocus={() => setIsInputFocused(true)}
-          onBlur={() => setIsInputFocused(false)}
-        >
-          <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
-          <Input
-            placeholder="Search"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            className="text-[1rem] border-none p-0 h-full w-full "
-          />
-        </div>
-      </div>
-      <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
-        {showHexInput ? (
-          <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
-            <span
-              className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
-              style={{
-                backgroundColor: `#${hexValue}`,
-              }}
-            />
-            <span className="text-xs text-custom-text-300 flex-shrink-0">HEX</span>
-            <span className="text-xs text-custom-text-200 flex-shrink-0 -mr-1">#</span>
+      <div className="flex flex-col sticky top-0 bg-custom-background-100">
+        <div className="flex items-center px-2 py-[15px] w-full ">
+          <div
+            className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
+            onFocus={() => setIsInputFocused(true)}
+            onBlur={() => setIsInputFocused(false)}
+          >
+            <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
             <Input
-              type="text"
-              value={hexValue}
-              onChange={(e) => {
-                const value = e.target.value;
-                setHexValue(value);
-                if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
-              }}
-              className="flex-grow pl-0 text-xs text-custom-text-200"
-              mode="true-transparent"
-              autoFocus
+              placeholder="Search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="text-[1rem] border-none p-0 h-full w-full "
             />
           </div>
-        ) : (
-          DEFAULT_COLORS.map((curCol) => (
-            <button
-              key={curCol}
-              type="button"
-              className="grid place-items-center size-5"
-              onClick={() => {
-                setActiveColor(curCol);
-                setHexValue(curCol.slice(1, 7));
-              }}
-            >
-              <span className="h-4 w-4 cursor-pointer rounded-full" style={{ backgroundColor: curCol }} />
-            </button>
-          ))
-        )}
-        <button
-          type="button"
-          className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
-            "border-custom-border-400": !showHexInput,
-          })}
-          onClick={() => {
-            setShowHexInput((prevData) => !prevData);
-            setHexValue(activeColor.slice(1, 7));
-          }}
-        >
+        </div>
+        <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
           {showHexInput ? (
-            <span className="conical-gradient h-4 w-4 rounded-full" />
+            <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
+              <span
+                className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
+                style={{
+                  backgroundColor: `#${hexValue}`,
+                }}
+              />
+              <span className="text-xs text-custom-text-300 flex-shrink-0">HEX</span>
+              <span className="text-xs text-custom-text-200 flex-shrink-0 -mr-1">#</span>
+              <Input
+                type="text"
+                value={hexValue}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  setHexValue(value);
+                  if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
+                }}
+                className="flex-grow pl-0 text-xs text-custom-text-200"
+                mode="true-transparent"
+                autoFocus
+              />
+            </div>
           ) : (
-            <span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
+            DEFAULT_COLORS.map((curCol) => (
+              <button
+                key={curCol}
+                type="button"
+                className="grid place-items-center size-5"
+                onClick={() => {
+                  setActiveColor(curCol);
+                  setHexValue(curCol.slice(1, 7));
+                }}
+              >
+                <span className="h-4 w-4 cursor-pointer rounded-full" style={{ backgroundColor: curCol }} />
+              </button>
+            ))
           )}
-        </button>
-      </div>
-      <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
-        <InfoIcon className="h-3 w-3" />
-        <p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
+          <button
+            type="button"
+            className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
+              "border-custom-border-400": !showHexInput,
+            })}
+            onClick={() => {
+              setShowHexInput((prevData) => !prevData);
+              setHexValue(activeColor.slice(1, 7));
+            }}
+          >
+            {showHexInput ? (
+              <span className="conical-gradient h-4 w-4 rounded-full" />
+            ) : (
+              <span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
+            )}
+          </button>
+        </div>
+        <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
+          <InfoIcon className="h-3 w-3" />
+          <p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
+        </div>
       </div>
       <div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
         {filteredArray.map((icon) => (
diff --git a/packages/ui/src/emoji/lucide-icons-list.tsx b/packages/ui/src/emoji/lucide-icons-list.tsx
index 799f0919d..5ffda34e6 100644
--- a/packages/ui/src/emoji/lucide-icons-list.tsx
+++ b/packages/ui/src/emoji/lucide-icons-list.tsx
@@ -31,80 +31,82 @@ export const LucideIconsList: React.FC<TIconsListProps> = (props) => {
 
   return (
     <>
-      <div className="flex items-center px-2 py-[15px] w-full ">
-        <div
-          className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
-          onFocus={() => setIsInputFocused(true)}
-          onBlur={() => setIsInputFocused(false)}
-        >
-          <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
-          <Input
-            placeholder="Search"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            className="text-[1rem] border-none p-0 h-full w-full "
-          />
-        </div>
-      </div>
-      <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
-        {showHexInput ? (
-          <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
-            <span
-              className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
-              style={{
-                backgroundColor: `#${hexValue}`,
-              }}
-            />
-            <span className="text-xs text-custom-text-300 flex-shrink-0">HEX</span>
-            <span className="text-xs text-custom-text-200 flex-shrink-0 -mr-1">#</span>
+      <div className="flex flex-col sticky top-0 bg-custom-background-100">
+        <div className="flex items-center px-2 py-[15px] w-full ">
+          <div
+            className={`relative flex items-center gap-2 bg-custom-background-90 h-10 rounded-lg w-full px-[30px] border ${isInputFocused ? "border-custom-primary-100" : "border-transparent"}`}
+            onFocus={() => setIsInputFocused(true)}
+            onBlur={() => setIsInputFocused(false)}
+          >
+            <Search className="absolute left-2.5 bottom-3 h-3.5 w-3.5 text-custom-text-400" />
             <Input
-              type="text"
-              value={hexValue}
-              onChange={(e) => {
-                const value = e.target.value;
-                setHexValue(value);
-                if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
-              }}
-              className="flex-grow pl-0 text-xs text-custom-text-200"
-              mode="true-transparent"
-              autoFocus
+              placeholder="Search"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              className="text-[1rem] border-none p-0 h-full w-full "
             />
           </div>
-        ) : (
-          DEFAULT_COLORS.map((curCol) => (
-            <button
-              key={curCol}
-              type="button"
-              className="grid place-items-center size-5"
-              onClick={() => {
-                setActiveColor(curCol);
-                setHexValue(curCol.slice(1, 7));
-              }}
-            >
-              <span className="h-4 w-4 cursor-pointer rounded-full" style={{ backgroundColor: curCol }} />
-            </button>
-          ))
-        )}
-        <button
-          type="button"
-          className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
-            "border-custom-border-400": !showHexInput,
-          })}
-          onClick={() => {
-            setShowHexInput((prevData) => !prevData);
-            setHexValue(activeColor.slice(1, 7));
-          }}
-        >
+        </div>
+        <div className="grid grid-cols-9 gap-2 items-center justify-items-center px-2.5 py-1 h-9">
           {showHexInput ? (
-            <span className="conical-gradient h-4 w-4 rounded-full" />
+            <div className="col-span-8 flex items-center gap-1 justify-self-stretch ml-2">
+              <span
+                className="h-4 w-4 flex-shrink-0 rounded-full mr-1"
+                style={{
+                  backgroundColor: `#${hexValue}`,
+                }}
+              />
+              <span className="text-xs text-custom-text-300 flex-shrink-0">HEX</span>
+              <span className="text-xs text-custom-text-200 flex-shrink-0 -mr-1">#</span>
+              <Input
+                type="text"
+                value={hexValue}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  setHexValue(value);
+                  if (/^[0-9A-Fa-f]{6}$/.test(value)) setActiveColor(adjustColorForContrast(`#${value}`));
+                }}
+                className="flex-grow pl-0 text-xs text-custom-text-200"
+                mode="true-transparent"
+                autoFocus
+              />
+            </div>
           ) : (
-            <span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
+            DEFAULT_COLORS.map((curCol) => (
+              <button
+                key={curCol}
+                type="button"
+                className="grid place-items-center size-5"
+                onClick={() => {
+                  setActiveColor(curCol);
+                  setHexValue(curCol.slice(1, 7));
+                }}
+              >
+                <span className="h-4 w-4 cursor-pointer rounded-full" style={{ backgroundColor: curCol }} />
+              </button>
+            ))
           )}
-        </button>
-      </div>
-      <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
-        <InfoIcon className="h-3 w-3" />
-        <p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
+          <button
+            type="button"
+            className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
+              "border-custom-border-400": !showHexInput,
+            })}
+            onClick={() => {
+              setShowHexInput((prevData) => !prevData);
+              setHexValue(activeColor.slice(1, 7));
+            }}
+          >
+            {showHexInput ? (
+              <span className="conical-gradient h-4 w-4 rounded-full" />
+            ) : (
+              <span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
+            )}
+          </button>
+        </div>
+        <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
+          <InfoIcon className="h-3 w-3" />
+          <p className="text-xs"> Colors will be adjusted to ensure sufficient contrast.</p>
+        </div>
       </div>
       <div className="grid grid-cols-8 gap-1 px-2.5 justify-items-center mt-2">
         {filteredArray.map((icon) => (