v0.7.0 (#25)

index.html

@@ -20,6 +20,8 @@
   <meta name="msapplication-TileColor" content="#da532c">
 
   <link rel="dns-prefetch" href="https://cdn.discordapp.com" />
+  <link rel="preload" href="/assets/fonts/MPLUS2-VariableFont-latin.woff" as="font" type="font/woff" crossorigin>
+  <link rel="preload" href="/assets/fonts/Poppins-Regular.ttf" as="font" type="font/ttf" crossorigin>
   <link rel="preconnect" href="https://zrunner.me" crossorigin />
   <link rel="preconnect" href=%VITE_API_URL% />
   <link rel="manifest" href="/manifest.json" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "axobot-web",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "private": true,
   "dependencies": {
@@ -15,6 +15,7 @@
     "discord-api-types": "^0.37.92",
     "express": "^4.21.2",
     "express-rate-limit": "^7.4.0",
+    "markdown-it": "^14.1.0",
     "morgan": "^1.10.0",
     "mui-color-input": "^4.0.0",
     "react": "^18.3.0",
@@ -27,7 +28,7 @@
     "sirv": "^2.0.4",
     "typescript": "^5.6.2",
     "typia": "^6.10.0",
-    "vite": "^5.4.6",
+    "vite": "^5.4.14",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.1",
     "web-vitals": "^2.1.4"
@@ -60,6 +61,7 @@
   "devDependencies": {
     "@stylistic/eslint-plugin": "^2.9.0",
     "@types/jest": "^27.5.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.11.25",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",

server.js

@@ -68,7 +68,7 @@ const defaultSrcPolicy = isProduction ? "default-src https:" : "";
 const scriptSrcPolicy = isProduction ? `script-src-elem ${env.PUBLIC_URL} ${env.VITE_API_URL} https://static.cloudflareinsights.com https://zrunner.me` : "";
 const styleSrcPolicy = isProduction ? "style-src 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='" : "";
 const headers = {
-  "Content-Security-Policy": `frame-ancestors 'none'; upgrade-insecure-requests; ${defaultSrcPolicy}; ${scriptSrcPolicy}; ${styleSrcPolicy}; img-src 'self' https://cdn.discordapp.com`,
+  "Content-Security-Policy": `frame-ancestors 'none'; upgrade-insecure-requests; ${defaultSrcPolicy}; ${scriptSrcPolicy}; ${styleSrcPolicy}; img-src https:`,
   "Cross-Origin-Embedder-Policy": "credentialless",
   "Cross-Origin-Opener-Policy": "same-origin",
   "Cross-Origin-Resource-Policy": "same-site",

src/components/GuildDashboard/ConfigComponents/FloatConfigComponent.tsx

@@ -67,7 +67,7 @@ export default function FloatConfigComponent({ optionId, option }: FloatConfigCo
 
   return (
     <ComplexConfiguration optionId={optionId}>
-      <Stack direction="row" gap={2}>
+      <Stack direction="row" spacing={2}>
         <Slider
           aria-label={optionId}
           defaultValue={defaultValue}

src/components/GuildDashboard/ConfigComponents/LevelupChannelConfigComponent.tsx

@@ -63,7 +63,7 @@ export default function LevelupChannelConfigComponent({ optionId, option }: Leve
 
   return (
     <LargeConfiguration optionId={optionId}>
-      <Stack gap={1}>
+      <Stack spacing={1}>
         <StyledSelect
           value={currentEnumValue}
           onChange={(e) => onChange(e.target.value as string)}

src/components/GuildDashboard/ConfigComponents/shared/SharedConfigComponents.tsx

@@ -75,7 +75,7 @@ export function ComplexConfiguration({ optionId, children }: PropsWithChildren<S
 function EditedBadge() {
   return (
     <Tooltip title="This configuration has been edited and needs to be saved.">
-      <Stack direction="row" gap={0.5} component="span" display="inline-flex" sx={{ verticalAlign: "sub" }}>
+      <Stack direction="row" spacing={0.5} component="span" display="inline-flex" sx={{ verticalAlign: "sub" }}>
         <SyncProblemIcon color="warning" fontSize="small" />
         <Typography component="span" variant="caption" color="text.secondary" sx={{ display: "inline-block" }}>Edited</Typography>
       </Stack>

src/components/GuildDashboard/NavigationDrawer.tsx

@@ -4,14 +4,15 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import MenuIcon from "@mui/icons-material/Menu";
 import { Badge, Box, CSSObject, Divider, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, styled, Theme, Toolbar } from "@mui/material";
 import MuiDrawer from "@mui/material/Drawer";
-import { Fragment, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { getGuildDashboardTranslations } from "../../i18n/i18n";
 import { useGuildConfigEditionContext } from "../../repository/context/GuildConfigEditionContext";
 import { GuildConfigOptionCategory, GuildConfigOptionCategoryNames } from "../../repository/types/guild-config-types";
 import { useIsOnMobile } from "../../styles/useIsOnMobile";
+import UnsavedFeedsConfirmationDialog from "./SpecialCategoryComponents/RssFeeds/UnsavedFeedsConfirmationDialog";
 
 const drawerWidth = 240;
 
@@ -126,9 +127,7 @@ function getPageTitle(page: string) {
   return getGuildDashboardTranslations(`category_name.${page}`);
 }
 
-function TabContent({ page, isOpen }: { page: GuildConfigOptionCategory; isOpen: boolean }) {
-  const { getCategoriesWithUnsavedChanges } = useGuildConfigEditionContext();
-  const unsavedCategories = getCategoriesWithUnsavedChanges();
+function TabContent({ page, isOpen, isUnsaved }: { page: GuildConfigOptionCategory; isOpen: boolean; isUnsaved: boolean }) {
   const formatedTitle = getPageTitle(page);
 
   return (
@@ -141,7 +140,7 @@ function TabContent({ page, isOpen }: { page: GuildConfigOptionCategory; isOpen:
           justifyContent: "center",
         }}
       >
-        <Badge color="warning" variant="dot" invisible={!unsavedCategories.includes(page)}>
+        <Badge color="warning" variant="dot" invisible={!isUnsaved}>
           <TabIcon page={page} />
         </Badge>
       </ListItemIcon>
@@ -157,7 +156,36 @@ interface NavigationDrawerContentProps {
 }
 
 function NavigationDrawerContent({ open, activePage, toggleOpen }: NavigationDrawerContentProps) {
+  const { getCategoriesWithUnsavedChanges } = useGuildConfigEditionContext();
+  const unsavedCategories = getCategoriesWithUnsavedChanges();
   const isOnMobile = useIsOnMobile();
+  const navigate = useNavigate();
+
+  const [isUnsavedFeedsDialogOpen, setIsUnsavedFeedsDialogOpen] = useState(false);
+  const destinationPage = useRef<GuildConfigOptionCategory | null>(null);
+
+  function handleClickOnTab(page: GuildConfigOptionCategory) {
+    return async () => {
+      if (activePage === "rss" && unsavedCategories.includes("rss")) {
+        destinationPage.current = page;
+        setIsUnsavedFeedsDialogOpen(true);
+        return;
+      }
+      navigate(page);
+      if (isOnMobile) {
+        toggleOpen();
+      }
+    };
+  }
+
+  const closeUnsavedFeedsDialog = () => setIsUnsavedFeedsDialogOpen(false);
+  const closeUnsavedFeedsDialogAndNavigate = () => {
+    closeUnsavedFeedsDialog();
+    if (destinationPage.current) {
+      navigate(destinationPage.current);
+    }
+  };
+
   return (
     <Fragment>
       <Toolbar sx={{ display: { xs: "none", md: "initial" } }} />
@@ -174,16 +202,19 @@ function NavigationDrawerContent({ open, activePage, toggleOpen }: NavigationDra
               <PageTab
                 isOpen={open}
                 isSelected={activePage === page}
-                component={Link}
-                to={page}
-                onClick={isOnMobile ? toggleOpen : undefined}
+                onClick={handleClickOnTab(page)}
               >
-                <TabContent page={page} isOpen={open} />
+                <TabContent page={page} isOpen={open} isUnsaved={unsavedCategories.includes(page)} />
               </PageTab>
             </ListItem>
           ))}
         </List>
       </Box>
+      <UnsavedFeedsConfirmationDialog
+        open={isUnsavedFeedsDialogOpen}
+        onCancel={closeUnsavedFeedsDialog}
+        onConfirm={closeUnsavedFeedsDialogAndNavigate}
+      />
     </Fragment>
   );
 }

src/components/GuildDashboard/SaveConfigBanner.tsx

@@ -12,7 +12,7 @@ interface SaveConfigBannerProps {
 }
 
 export default function SaveConfigBanner({ guildId }: SaveConfigBannerProps) {
-  const { patchGuildConfigCommand, putRoleRewardsCommand, patchRssFeedsCommand, loading, success } = usePatchGuildConfig();
+  const { patchGuildConfigCommand, putRoleRewardsCommand, loading, success } = usePatchGuildConfig();
   const { state, hasAnyUnsavedChange, resetState } = useGuildConfigEditionContext();
   const isOnMobile = useIsOnMobile();
 
@@ -23,9 +23,6 @@ export default function SaveConfigBanner({ guildId }: SaveConfigBannerProps) {
     if (state.roleRewards !== undefined) {
       putRoleRewardsCommand(guildId, state.roleRewards);
     }
-    if (state.rssFeeds !== undefined) {
-      patchRssFeedsCommand(guildId, state.rssFeeds);
-    }
   }
 
   useEffect(() => {