From 577dba5def17032b4723672b09f8bbdcd11d71b2 Mon Sep 17 00:00:00 2001
From: Nithika Dias <nithikasdias@gmail.com>
Date: Wed, 5 Feb 2025 16:13:08 +0530
Subject: [PATCH 1/4] Improve Language Selector dropdowns

---
 src/components/LanguageSelector.tsx    | 72 +++++++++++++-------------
 src/components/SubLanguageSelector.tsx | 35 ++++++-------
 src/styles/main.css                    | 31 +++++++++--
 3 files changed, 79 insertions(+), 59 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index c7c1ecfd..e057a251 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -186,43 +186,41 @@ const LanguageSelector = () => {
         </div>
         <span className="selector__arrow" />
       </button>
-      {isOpen && (
-        <ul
-          className="selector__dropdown"
-          role="listbox"
-          onKeyDown={handleKeyDown}
-          tabIndex={-1}
-        >
-          {fetchedLanguages.map((lang, index) =>
-            lang.subLanguages.length > 0 ? (
-              <SubLanguageSelector
-                key={lang.name}
-                opened={openedLanguages.includes(lang)}
-                parentLanguage={lang}
-                onDropdownToggle={handleToggleSubLanguage}
-                handleParentSelect={handleSelect}
-                afterSelect={afterSelect}
-              />
-            ) : (
-              <li
-                key={lang.name}
-                role="option"
-                tabIndex={-1}
-                onClick={() => handleSelect(lang)}
-                className={`selector__item ${
-                  language.name === lang.name ? "selected" : ""
-                } ${focusedIndex === index ? "focused" : ""}`}
-                aria-selected={language.name === lang.name}
-              >
-                <label>
-                  <img src={lang.icon} alt="" />
-                  <span>{lang.name}</span>
-                </label>
-              </li>
-            )
-          )}
-        </ul>
-      )}
+      <ul
+        className={`selector__dropdown ${isOpen ? "" : " hidden"}`}
+        role="listbox"
+        onKeyDown={handleKeyDown}
+        tabIndex={-1}
+      >
+        {fetchedLanguages.map((lang, index) =>
+          lang.subLanguages.length > 0 ? (
+            <SubLanguageSelector
+              key={lang.name}
+              opened={openedLanguages.includes(lang)}
+              parentLanguage={lang}
+              onDropdownToggle={handleToggleSubLanguage}
+              handleParentSelect={handleSelect}
+              afterSelect={afterSelect}
+            />
+          ) : (
+            <li
+              key={lang.name}
+              role="option"
+              tabIndex={-1}
+              onClick={() => handleSelect(lang)}
+              className={`selector__item ${
+                language.name === lang.name ? "selected" : ""
+              } ${focusedIndex === index ? "focused" : ""}`}
+              aria-selected={language.name === lang.name}
+            >
+              <label>
+                <img src={lang.icon} alt="" />
+                <span>{lang.name}</span>
+              </label>
+            </li>
+          )
+        )}
+      </ul>
     </div>
   );
 };
diff --git a/src/components/SubLanguageSelector.tsx b/src/components/SubLanguageSelector.tsx
index 7b0d271c..3735a926 100644
--- a/src/components/SubLanguageSelector.tsx
+++ b/src/components/SubLanguageSelector.tsx
@@ -78,24 +78,23 @@ const SubLanguageSelector = ({
         </label>
       </li>
 
-      {opened &&
-        parentLanguage.subLanguages.map((sl) => (
-          <li
-            key={sl.name}
-            role="option"
-            tabIndex={-1}
-            className={`selector__item sublanguage__item ${
-              slugify(subLanguage) === slugify(sl.name) ? "selected" : ""
-            }`}
-            aria-selected={slugify(subLanguage) === slugify(sl.name)}
-            onClick={handleSubLanguageSelect(sl)}
-          >
-            <label>
-              <img src={sl.icon} alt={sl.name} />
-              <span>{sl.name}</span>
-            </label>
-          </li>
-        ))}
+      {parentLanguage.subLanguages.map((sl) => (
+        <li
+          key={sl.name}
+          role="option"
+          tabIndex={-1}
+          className={`selector__item sublanguage__item ${opened ? "" : "hidden"} ${
+            slugify(subLanguage) === slugify(sl.name) ? "selected" : ""
+          }`}
+          aria-selected={slugify(subLanguage) === slugify(sl.name)}
+          onClick={handleSubLanguageSelect(sl)}
+        >
+          <label>
+            <img src={sl.icon} alt={sl.name} />
+            <span>{sl.name}</span>
+          </label>
+        </li>
+      ))}
     </>
   );
 };
diff --git a/src/styles/main.css b/src/styles/main.css
index 843f8a88..3bd37b28 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -400,7 +400,7 @@ abbr {
   border-left: 7px solid transparent;
   border-right: 7px solid transparent;
   border-top: 7px solid var(--clr-text-primary); /* [1] */
-  transition: transform 100ms ease;
+  transition: transform 300ms ease;
 }
 
 .selector--open .selector__arrow {
@@ -413,7 +413,7 @@ abbr {
 
   position: absolute;
   width: 100%;
-  max-height: 20rem;
+  height: 20rem;
   overflow-y: auto;
 
   background-color: var(--clr-bg-secondary);
@@ -426,10 +426,15 @@ abbr {
 
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   z-index: 1;
+  transition: all 300ms ease;
 }
 
-.selector__dropdown:focus-within {
-  border-color: var(--clr-accent);
+.selector__dropdown.hidden {
+  border: none;
+  padding: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
 }
 
 .selector__item {
@@ -439,10 +444,19 @@ abbr {
   gap: 1rem;
   align-items: center;
   border-radius: var(--br-md);
+  transition: all 300ms ease;
 }
 
 .sublanguage__item {
+  height: 3rem;
   margin-left: 1.5rem;
+  transition: all 300ms ease;
+}
+
+.sublanguage__item.hidden {
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
 }
 
 .sublanguage__button{
@@ -462,6 +476,11 @@ abbr {
   transform: rotate(-90deg);
   transition: transform 100ms ease;
   cursor: pointer;
+  transition: all 200ms ease;
+}
+
+.sublanguage__arrow:hover {
+  border-top-color: var(--clr-accent);
 }
 
 [aria-expanded="true"] .sublanguage__arrow {
@@ -472,6 +491,10 @@ abbr {
   border-top-color: var(--clr-text-tertiary);
 }
 
+.selector__item.selected .sublanguage__arrow:hover {
+  border-top-color: var(--clr-text-primary);
+}
+
 .selector__item label {
   width: 100%;
   padding: 0.25em 0.75em;

From 9a892b432132452986a2ecfc142b96fa8cd80cdd Mon Sep 17 00:00:00 2001
From: Nithika Dias <nithikasdias@gmail.com>
Date: Thu, 6 Feb 2025 11:44:25 +0530
Subject: [PATCH 2/4] Fixed keyboard navigation bug

---
 src/components/LanguageSelector.tsx    | 12 ++++++------
 src/components/SubLanguageSelector.tsx |  5 +++--
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index e057a251..ade97987 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -152,10 +152,10 @@ const LanguageSelector = () => {
 
   useEffect(() => {
     if (isOpen && focusedIndex >= 0) {
-      const element = document.querySelector(
-        `.selector__item:nth-child(${focusedIndex + 1})`
-      ) as HTMLElement;
-      element?.focus();
+      const elements = Array.from(document.querySelectorAll('.selector__item')) as HTMLElement[];
+      const focusableElements = elements.filter(el => el.getAttribute('tabIndex') !== '-1');
+      const element = focusableElements[focusedIndex];
+      element?.focus();   
     }
   }, [isOpen, focusedIndex]);
 
@@ -190,7 +190,7 @@ const LanguageSelector = () => {
         className={`selector__dropdown ${isOpen ? "" : " hidden"}`}
         role="listbox"
         onKeyDown={handleKeyDown}
-        tabIndex={-1}
+        tabIndex={0}
       >
         {fetchedLanguages.map((lang, index) =>
           lang.subLanguages.length > 0 ? (
@@ -206,7 +206,7 @@ const LanguageSelector = () => {
             <li
               key={lang.name}
               role="option"
-              tabIndex={-1}
+              tabIndex={0}
               onClick={() => handleSelect(lang)}
               className={`selector__item ${
                 language.name === lang.name ? "selected" : ""
diff --git a/src/components/SubLanguageSelector.tsx b/src/components/SubLanguageSelector.tsx
index 3735a926..db104afc 100644
--- a/src/components/SubLanguageSelector.tsx
+++ b/src/components/SubLanguageSelector.tsx
@@ -47,7 +47,7 @@ const SubLanguageSelector = ({
     <>
       <li
         role="option"
-        tabIndex={-1}
+        tabIndex={0}
         className={`selector__item ${
           subLanguage === defaultSlugifiedSubLanguageName &&
           language.name === parentLanguage.name
@@ -82,7 +82,8 @@ const SubLanguageSelector = ({
         <li
           key={sl.name}
           role="option"
-          tabIndex={-1}
+          tabIndex={opened ? 0 : -1}
+          aria-disabled={!opened}
           className={`selector__item sublanguage__item ${opened ? "" : "hidden"} ${
             slugify(subLanguage) === slugify(sl.name) ? "selected" : ""
           }`}

From 8504a273b3a7650fc9d9fca9441a12dcb543c55f Mon Sep 17 00:00:00 2001
From: Nithika Dias <nithikasdias@gmail.com>
Date: Thu, 6 Feb 2025 11:46:39 +0530
Subject: [PATCH 3/4] Prettier change

---
 src/components/LanguageSelector.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/LanguageSelector.tsx b/src/components/LanguageSelector.tsx
index ade97987..b43d3916 100644
--- a/src/components/LanguageSelector.tsx
+++ b/src/components/LanguageSelector.tsx
@@ -152,10 +152,14 @@ const LanguageSelector = () => {
 
   useEffect(() => {
     if (isOpen && focusedIndex >= 0) {
-      const elements = Array.from(document.querySelectorAll('.selector__item')) as HTMLElement[];
-      const focusableElements = elements.filter(el => el.getAttribute('tabIndex') !== '-1');
+      const elements = Array.from(
+        document.querySelectorAll(".selector__item")
+      ) as HTMLElement[];
+      const focusableElements = elements.filter(
+        (el) => el.getAttribute("tabIndex") !== "-1"
+      );
       const element = focusableElements[focusedIndex];
-      element?.focus();   
+      element?.focus();
     }
   }, [isOpen, focusedIndex]);
 

From 26c60914163aeb570dc952bc8b1caeb8c54cde35 Mon Sep 17 00:00:00 2001
From: Nithika Dias <nithikasdias@gmail.com>
Date: Thu, 6 Feb 2025 15:14:18 +0530
Subject: [PATCH 4/4] Changed dropdown height to be more responsive and used
 same scrollbar as other components

---
 src/styles/main.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index 3bd37b28..42636d1e 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -413,7 +413,7 @@ abbr {
 
   position: absolute;
   width: 100%;
-  height: 20rem;
+  height: 50vh;
   overflow-y: auto;
 
   background-color: var(--clr-bg-secondary);
@@ -437,6 +437,19 @@ abbr {
   overflow: hidden;
 }
 
+.selector__dropdown::-webkit-scrollbar {
+  width: 8px;
+}
+
+.selector__dropdown::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 4px;
+}
+
+.selector__dropdown::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb);
+}
+
 .selector__item {
   position: relative;
   cursor: pointer;

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/quicksnip-dev/quicksnip/pull/254.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/quicksnip-dev/quicksnip/pull/254.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/quicksnip-dev/quicksnip/pull/254.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/quicksnip-dev/quicksnip/pull/254.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>