Fix: slugify tab names (#1994)

src/components/tab.jsx

@@ -3,6 +3,10 @@ import classNames from "classnames";
 
 import { TabContext } from "utils/contexts/tab";
 
+export function slugify(tabName) {
+  return tabName ? encodeURIComponent(tabName.toLowerCase()) : ''
+}
+
 export default function Tab({ tab }) {
   const { activeTab, setActiveTab } = useContext(TabContext);
 
@@ -12,12 +16,15 @@ export default function Tab({ tab }) {
         "text-theme-700 dark:text-theme-200 relative h-8 w-full rounded-md flex m-1",
         )}>
       <button id={`${tab}-tab`} type="button" role="tab"
-              aria-controls={`#${tab}`} aria-selected={activeTab === tab ? "true" : "false"}
+              aria-controls={`#${tab}`} aria-selected={activeTab === slugify(tab) ? "true" : "false"}
               className={classNames(
                 "h-full w-full rounded-md",
-                activeTab === tab ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
+                activeTab === slugify(tab) ? "bg-theme-300/20 dark:bg-white/10" : "hover:bg-theme-100/20 dark:hover:bg-white/5",
               )}
-              onClick={() => { setActiveTab(tab); window.location.hash = `#${tab}`; }}
+              onClick={() => { 
+                setActiveTab(slugify(tab));
+                window.location.hash = `#${slugify(tab)}`;
+              }}
       >{tab}</button>
     </li>
   );

src/pages/index.jsx

@@ -9,7 +9,7 @@ import { BiError } from "react-icons/bi";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { useRouter } from "next/router";
 
-import Tab from "components/tab";
+import Tab, { slugify } from "components/tab";
 import FileContent from "components/filecontent";
 import ServicesGroup from "components/services/group";
 import BookmarksGroup from "components/bookmarks/group";
@@ -256,7 +256,7 @@ function Home({ initialSettings }) {
   })
 
   const servicesAndBookmarksGroups = useMemo(() => {
-    const tabGroupFilter = g => g && [activeTab, undefined].includes(settings.layout?.[g.name]?.tab);
+    const tabGroupFilter = g => g && [activeTab, undefined].includes(slugify(settings.layout?.[g.name]?.tab));
     const undefinedGroupFilter = g => settings.layout?.[g.name] === undefined;
 
     const layoutGroups = Object.keys(settings.layout ?? {}).map(