add dismissable banners

src/stores/banner/BannerLocation.tsx

@@ -10,6 +10,7 @@ export function Banner(props: {
   id: string;
 }) {
   const [ref] = useRegisterBanner<HTMLDivElement>(props.id);
+  const hideBanner = useBannerStore((s) => s.hideBanner);
   const styles = {
     error: "bg-[#C93957] text-white",
   };
@@ -29,6 +30,12 @@ export function Banner(props: {
           <Icon icon={icons[props.type]} />
           <div>{props.children}</div>
         </div>
+        <span
+          className="absolute right-4 hover:cursor-pointer"
+          onClick={() => hideBanner(props.id, true)}
+        >
+          <Icon icon={Icons.X} />
+        </span>
       </div>
     </div>
   );
@@ -38,6 +45,7 @@ export function BannerLocation(props: { location?: string }) {
   const { t } = useTranslation();
   const isOnline = useBannerStore((s) => s.isOnline);
   const setLocation = useBannerStore((s) => s.setLocation);
+  const ignoredBannerIds = useBannerStore((s) => s.ignoredBannerIds);
   const currentLocation = useBannerStore((s) => s.location);
   const loc = props.location ?? null;
 
@@ -53,7 +61,7 @@ export function BannerLocation(props: { location?: string }) {
 
   return (
     <div>
-      {!isOnline ? (
+      {!isOnline && !ignoredBannerIds.includes("offline") ? (
         <Banner id="offline" type="error">
           {t("navigation.banner.offline")}
         </Banner>

src/stores/banner/index.ts

@@ -13,9 +13,10 @@ interface BannerStore {
   isOnline: boolean;
   isTurnstile: boolean;
   location: string | null;
+  ignoredBannerIds: string[];
   updateHeight(id: string, height: number): void;
   showBanner(id: string): void;
-  hideBanner(id: string): void;
+  hideBanner(id: string, force?: boolean): void;
   setLocation(loc: string | null): void;
   updateOnline(isOnline: boolean): void;
   updateTurnstile(isTurnstile: boolean): void;
@@ -27,6 +28,7 @@ export const useBannerStore = create(
     isOnline: true,
     isTurnstile: false,
     location: null,
+    ignoredBannerIds: [],
     updateOnline(isOnline) {
       set((s) => {
         s.isOnline = isOnline;
@@ -45,14 +47,16 @@ export const useBannerStore = create(
     showBanner(id) {
       set((s) => {
         if (s.banners.find((v) => v.id === id)) return;
+        if (s.ignoredBannerIds.includes(id)) return;
         s.banners.push({
           id,
           height: 0,
         });
       });
     },
-    hideBanner(id) {
+    hideBanner(id, force = false) {
       set((s) => {
+        if (force) s.ignoredBannerIds.push(id);
         s.banners = s.banners.filter((v) => v.id !== id);
       });
     },