Enable url to collection tab

src/App.tsx

@@ -60,6 +60,10 @@ const App = () => {
               <Routes>
                 <Route path="/" element={<Navigate to={`/${language}`} />} />
                 <Route path="/:lang" element={<Main />}>
+                  <Route
+                    path={`collections/:collectionName`}
+                    element={<Home />}
+                  />
                   <Route path={`route/:id`} element={<RouteEta />} />
                   <Route path={`route/:id/:panel`} element={<RouteEta />} />
                   <Route path={`settings`} element={<Settings />} />

src/components/home/HomeTabbar.tsx

@@ -7,6 +7,7 @@ import {
 } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import AppContext from "../../AppContext";
+import { RouteCollection } from "../../typing";
 
 interface HomeTabbarProps {
   homeTab: HomeTabType;
@@ -50,7 +51,7 @@ const HomeTabbar = ({ homeTab, onChangeTab }: HomeTabbarProps) => {
         <Tab
           key={`collection-${idx}`}
           label={collection.name}
-          value={`collection-${idx}`}
+          value={collection.name}
           disableRipple
         />
       ))}
@@ -64,13 +65,13 @@ export type HomeTabType = "saved" | "nearby" | "collections";
 
 export const isHomeTab = (
   input: unknown,
-  collectionLength: number
+  collections: RouteCollection[]
 ): input is HomeTabType => {
   if (input === "saved" || input === "nearby" || input === "collections") {
     return true;
   }
-  for (let i = 0; i < collectionLength; ++i) {
-    if (input === `collection-${i}`) {
+  for (let i = 0; i < collections.length; ++i) {
+    if (input === collections[i].name) {
       return true;
     }
   }
@@ -81,6 +82,7 @@ const tabbarSx: SxProps<Theme> = {
   background: (theme) => theme.palette.background.default,
   minHeight: "36px",
   [`& .MuiTab-root`]: {
+    textTransform: "none",
     alignItems: "center",
     justifyContent: "center",
     paddingTop: 0,

src/components/home/SwipeableList.tsx

@@ -205,7 +205,7 @@ const SwipeableList = React.forwardRef<SwipeableListRef, SwipeableListProps>(
       let ret = HOME_TAB.indexOf(defaultHometab.current);
       if (ret !== -1) return ret;
       for (let i = 0; i < collections.length; ++i) {
-        if (`collection-${i}` === defaultHometab.current) {
+        if (collections[i].name === defaultHometab.current) {
           return i + HOME_TAB.length;
         }
       }
@@ -220,7 +220,7 @@ const SwipeableList = React.forwardRef<SwipeableListRef, SwipeableListProps>(
             onChangeTab(
               idx < HOME_TAB.length
                 ? HOME_TAB[idx]
-                : `collection-${idx - HOME_TAB.length}`
+                : collections[idx - HOME_TAB.length].name
             );
           }}
         >
@@ -233,6 +233,7 @@ const SwipeableList = React.forwardRef<SwipeableListRef, SwipeableListProps>(
       [
         onChangeTab,
         getViewIdx,
+        collections,
         SavedRouteList,
         NearbyRouteList,
         SmartCollectionRouteList,

src/pages/Home.tsx

@@ -12,15 +12,17 @@ import type { HomeTabType } from "../components/home/HomeTabbar";
 import BadWeatherCard from "../components/layout/BadWeatherCard";
 import SwipeableList from "../components/home/SwipeableList";
 import DbRenewReminder from "../components/layout/DbRenewReminder";
+import { useParams } from "react-router-dom";
 
 const Home = () => {
   const { AppTitle, geolocation, collections } = useContext(AppContext);
   const { t, i18n } = useTranslation();
+  const { collectionName } = useParams();
 
   const swipeableList = useRef(null);
-  const _homeTab = localStorage.getItem("homeTab");
+  const _homeTab = collectionName ?? localStorage.getItem("homeTab");
   const [homeTab, setHomeTab] = useState<HomeTabType>(
-    isHomeTab(_homeTab, collections.length) ? _homeTab : "nearby"
+    isHomeTab(_homeTab, collections) ? _homeTab : "nearby"
   );
 
   useEffect(() => {