Merge branch 'dev' of github.com:indexnetwork/index into dev

indexnetwork · Jul 1, 2024 · 84818a6 · 84818a6
2 parents 8c864b4 + 5982707
commit 84818a6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/web-app/src/app/landing.css b/web-app/src/app/landing.css
@@ -22,6 +22,29 @@
   7. Disable tap highlights on iOS
   */
 
+.no-scrollbar {
+  /* For Firefox */
+  scrollbar-color: #666 transparent; /* Thumb color #666 and track color transparent */
+  scrollbar-width: auto; /* Default scrollbar width */
+}
+
+/* For WebKit browsers */
+.no-scrollbar::-webkit-scrollbar {
+  width: 12px; /* Default width */
+  height: 12px; /* Default height for horizontal scrollbars */
+}
+
+.no-scrollbar::-webkit-scrollbar-track {
+  background: transparent; /* Transparent track */
+}
+
+.no-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #666; /* Thumb color */
+  border-radius: 10px; /* Roundness of scrollbar thumb */
+  border: 3px solid transparent; /* Space around thumb */
+  background-clip: padding-box; /* Ensures the thumb's color doesn't extend into the border */
+}
+
 html#landing {
   line-height: 1.5; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */

diff --git a/web-app/src/components/sections/IndexList.tsx b/web-app/src/components/sections/IndexList.tsx
@@ -21,13 +21,30 @@ const IndexListSection: FC = () => {
   const router = useRouter();
   const query = useSearchParams();
   const indexes = useAppSelector(selectIndexes);
+  const scrollPosition = useRef(0);
 
   const { setLeftTabKey, leftTabKey } = useApp();
 
   const { data: did } = useAppSelector(selectDID);
   const { data: viewedConversation } = useAppSelector(selectConversation);
 
   const prevProfileID = useRef(did?.id);
+  useEffect(() => {
+    const container = document.querySelector(".index-list");
+    const pos = localStorage.getItem("indexListScrollPosition");
+    container?.scrollTo(0, JSON.parse(pos || "0"));
+  }, [id]);
+
+  useEffect(() => {
+    const container = document.querySelector(".index-list");
+    container?.addEventListener("scroll", () => {
+      scrollPosition.current = container?.scrollTop || 0;
+      localStorage.setItem(
+        "indexListScrollPosition",
+        (container?.scrollTop || 0).toString(),
+      );
+    });
+  }, []);
 
   const leftSectionIndexes = useMemo(
     () =>