Fix: correctly handle direct tab navigation with encoded chars (#3172)

src/components/tab.jsx

@@ -3,13 +3,19 @@ import classNames from "classnames";
 
 import { TabContext } from "utils/contexts/tab";
 
-export function slugify(tabName) {
-  return tabName !== undefined ? encodeURIComponent(tabName.toString().replace(/\s+/g, "-").toLowerCase()) : "";
+function slugify(tabName) {
+  return tabName.toString().replace(/\s+/g, "-").toLowerCase();
+}
+
+export function slugifyAndEncode(tabName) {
+  return tabName !== undefined ? encodeURIComponent(slugify(tabName)) : "";
 }
 
 export default function Tab({ tab }) {
   const { activeTab, setActiveTab } = useContext(TabContext);
 
+  const matchesTab = decodeURI(activeTab) === slugify(tab);
+
   return (
     <li
       key={tab}
@@ -21,16 +27,14 @@ export default function Tab({ tab }) {
         type="button"
         role="tab"
         aria-controls={`#${tab}`}
-        aria-selected={activeTab === slugify(tab) ? "true" : "false"}
+        aria-selected={matchesTab ? "true" : "false"}
         className={classNames(
           "w-full rounded-md m-1",
-          activeTab === slugify(tab)
-            ? "bg-theme-300/20 dark:bg-white/10"
-            : "hover:bg-theme-100/20 dark:hover:bg-white/5",
+          matchesTab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
         )}
         onClick={() => {
-          setActiveTab(slugify(tab));
-          window.location.hash = `#${slugify(tab)}`;
+          setActiveTab(slugifyAndEncode(tab));
+          window.location.hash = `#${slugifyAndEncode(tab)}`;
         }}
       >
         {tab}

src/pages/index.jsx

@@ -10,7 +10,7 @@ import { BiError } from "react-icons/bi";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useRouter } from "next/router";
 
-import Tab, { slugify } from "components/tab";
+import Tab, { slugifyAndEncode } from "components/tab";
 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
 import Widget from "components/widgets/widget";
@@ -258,13 +258,13 @@ function Home({ initialSettings }) {
 
   useEffect(() => {
     if (!activeTab) {
-      const initialTab = decodeURI(asPath.substring(asPath.indexOf("#") + 1));
-      setActiveTab(initialTab === "/" ? slugify(tabs["0"]) : initialTab);
+      const initialTab = asPath.substring(asPath.indexOf("#") + 1);
+      setActiveTab(initialTab === "/" ? slugifyAndEncode(tabs["0"]) : initialTab);
     }
   });
 
   const servicesAndBookmarksGroups = useMemo(() => {
-    const tabGroupFilter = (g) => g && [activeTab, ""].includes(slugify(settings.layout?.[g.name]?.tab));
+    const tabGroupFilter = (g) => g && [activeTab, ""].includes(slugifyAndEncode(settings.layout?.[g.name]?.tab));
     const undefinedGroupFilter = (g) => settings.layout?.[g.name] === undefined;
 
     const layoutGroups = Object.keys(settings.layout ?? {})