Adding Future Gachas/Future Events to a new tab for EN, KR, and TW ease of access

README.md

@@ -1,4 +1,5 @@
 # Sekai Viewer
+![alt text](public/images/thumbnail.jpg)
 
 ![GitHub Repo stars](https://img.shields.io/github/stars/Sekai-World/sekai-viewer?style=social)
 ![GitHub forks](https://img.shields.io/github/forks/Sekai-World/sekai-viewer?style=social)
@@ -11,6 +12,12 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 
 ## Available Scripts
 
+To get started, use
+
+### `pnpm i`
+
+to install packages
+
 In the project directory, you can run:
 
 ### `npm start`

src/pages/App.tsx

@@ -103,6 +103,9 @@ const HomeView = lazy(() => import("./Home"));
 const MusicList = lazy(() => import("./music/MusicList"));
 const GachaList = lazy(() => import("./gacha/GachaList"));
 const EventList = lazy(() => import("./event/EventList"));
+const FutureGachaList = lazy(() => import("./future/FutureGachaList"));
+const FutureEventList = lazy(() => import("./future/FutureEventList"));
+const FutureEventDetail = lazy(() => import("./future/FutureEventDetail"));
 const GachaDetail = lazy(() => import("./gacha/GachaDetail"));
 const CardDetail = lazy(() => import("./card/CardDetail"));
 const MusicDetail = lazy(() => import("./music/MusicDetail"));
@@ -391,7 +394,9 @@ const DrawerContent: React.FC<{
   onFoldButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({ open, onFoldButtonClick }) => {
   const { t } = useTranslation();
-
+  const {
+    settings: { isShowSpoiler },
+  } = useRootStore();
   const leftBtns: IListItemLinkProps[][] = React.useMemo(
     () => [
       [
@@ -441,6 +446,24 @@ const DrawerContent: React.FC<{
           text: t("common:gacha"),
           to: "/gacha",
         },
+        {
+          children: [
+            {
+              disabled: false,
+              text: t("common:futureevent"),
+              to: "/futureevent",
+            },
+            {
+              disabled: false,
+              text: t("common:futuregacha"),
+              to: "/futuregacha",
+            },
+          ],
+          disabled: !isShowSpoiler,
+          icon: <CalendarText></CalendarText>,
+          text: t("common:futures"),
+          to: "/futureevent",
+        },
         {
           disabled: false,
           icon: <CalendarText></CalendarText>,
@@ -1140,6 +1163,15 @@ const AppInner = observer((props: { theme: Theme }) => {
               <Route path="/gacha/:gachaId">
                 <GachaDetail />
               </Route>
+              <Route path="/futuregacha" exact>
+                <FutureGachaList />
+              </Route>
+              <Route path="/futureevent" exact>
+                <FutureEventList />
+              </Route>
+              <Route path="/futureevent/:eventId">
+                <FutureEventDetail />
+              </Route>
               <Route path="/event" exact>
                 <EventList />
               </Route>

src/pages/Home.tsx

@@ -336,6 +336,19 @@ const Home: React.FC = () => {
                 </Grid>
               </LinkNoDecoration>
             </Grid>
+            <Grid item>
+              <LinkNoDecoration
+                to="/futuregacha"
+                style={{ color: theme.palette.primary.main }}
+              >
+                <Grid container direction="row" alignContent="center">
+                  <Grid item>
+                    <MoveToInbox fontSize="small"></MoveToInbox>
+                  </Grid>
+                  <Grid item>{t("common:futuregacha")}</Grid>
+                </Grid>
+              </LinkNoDecoration>
+            </Grid>
             <Grid item>
               <LinkNoDecoration
                 to="/gacha"
@@ -349,6 +362,19 @@ const Home: React.FC = () => {
                 </Grid>
               </LinkNoDecoration>
             </Grid>
+            <Grid item>
+              <LinkNoDecoration
+                to="/futureevent"
+                style={{ color: theme.palette.primary.main }}
+              >
+                <Grid container direction="row" alignContent="center">
+                  <Grid item>
+                    <MoveToInbox fontSize="small"></MoveToInbox>
+                  </Grid>
+                  <Grid item>{t("common:futureevent")}</Grid>
+                </Grid>
+              </LinkNoDecoration>
+            </Grid>
             <Grid item>
               <LinkNoDecoration
                 to="/event"