Add empty icon on the Invite page

app/src/components/InviteScreen.tsx

@@ -13,8 +13,10 @@ import {
   processIfNotEmptyOrNil,
 } from "@app/utility";
 import { Snowflake } from "@app/utility/types";
+import Empty from "@architus/facade/components/Empty";
 import Spinner from "@architus/facade/components/Spinner";
 import { color } from "@architus/facade/theme/color";
+import { up } from "@architus/facade/theme/media";
 import { scrollBarAuto } from "@architus/facade/theme/mixins";
 import { shadow } from "@architus/facade/theme/shadow";
 import { gap } from "@architus/facade/theme/spacing";
@@ -26,10 +28,10 @@ const Styled = {
     flex-direction: column;
     align-items: stretch;
     padding-top: ${appVerticalPadding};
-    padding-left: ${appHorizontalPadding};
   `,
   Header: styled.div`
     flex-grow: 0;
+    padding-left: ${appHorizontalPadding};
     padding-right: ${appHorizontalPadding};
     margin-bottom: ${gap.micro};
   `,
@@ -43,6 +45,7 @@ const Styled = {
     color: ${color("textFade")};
     font-weight: 300;
     margin-bottom: ${gap.nano};
+    font-size: 1.35rem;
   `,
   LoadingWrapper: styled.div`
     display: flex;
@@ -56,11 +59,22 @@ const Styled = {
     overflow-y: auto;
     overflow-x: hidden;
     ${scrollBarAuto()}
-    border-top-left-radius: 12px;
     flex-grow: 1;
     min-height: 400px;
     box-shadow: ${shadow("inner")(color("shadowHeavy"))};
     padding: ${gap.pico};
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+
+    ${up("md")} {
+      border-top-left-radius: 12px;
+      margin-left: ${appHorizontalPadding};
+    }
+  `,
+  Empty: styled(Empty)`
+    flex-grow: 1;
   `,
 };
 
@@ -114,6 +128,9 @@ const InviteScreen: React.FC<InviteScreenProps> = () => {
               href={inviteUrl(guild.id)}
             />
           ))}
+        {guildsLoaded && guilds.length === 0 && (
+          <Styled.Empty message={"No eligible servers found"} size="large" />
+        )}
         {!guildsLoaded && (
           // Show a spinner if the pool hasn't been completely loaded
           <Styled.LoadingWrapper>

app/src/data/path-prefix.ts

@@ -1,6 +1,6 @@
 import { graphql, useStaticQuery } from "gatsby";
 
-import { Option } from "@architus/lib/option";
+import { Option, None, Some } from "@architus/lib/option";
 
 /**
  * Gets the site's `pathPrefix` if it is set, else None
@@ -14,5 +14,7 @@ export function usePathPrefix(): Option<string> {
     }
   `);
 
-  return Option.from(queryResult.site?.pathPrefix);
+  return Option.from(queryResult.site?.pathPrefix).flatMap((prefix) =>
+    prefix.trim().length === 0 ? None : Some(prefix)
+  );
 }

app/src/layout.ts

@@ -9,7 +9,8 @@ export const sitePaddingVariable = `--site-padding`;
 export const contentWidthVariable = `--content-width`;
 export const sitePadding = `var(${sitePaddingVariable})`;
 export const contentWidth = `var(${contentWidthVariable})`;
-export const appHorizontalPadding = gap.milli;
+export const appHorizontalPaddingVariable = "--app-horizontal-padding";
+export const appHorizontalPadding = `var(${appHorizontalPaddingVariable})`;
 export const appVerticalPadding = gap.milli;
 export const minimizeBreakpoint: BreakpointKey = "md";
 
@@ -18,6 +19,7 @@ export const layoutGlobal = css`
     :root {
       ${sitePaddingVariable}: ${gap.milli};
       ${contentWidthVariable}: 1180px;
+      ${appHorizontalPaddingVariable}: ${gap.milli};
 
       ${down("xl")} {
         ${contentWidthVariable}: 960px;
@@ -29,6 +31,7 @@ export const layoutGlobal = css`
 
       ${down("md")} {
         ${sitePaddingVariable}: ${gap.micro};
+        ${appHorizontalPaddingVariable}: ${sitePadding};
       }
 
       ${down("vs")} {

app/src/pages/app.tsx

@@ -19,6 +19,7 @@ import tabs from "@app/tabs/definitions";
 import { TabDefinition, TabProps, BaseAppProps } from "@app/tabs/types";
 import { useInitialRender } from "@app/utility";
 import { Snowflake } from "@app/utility/types";
+import { up } from "@architus/facade/theme/media";
 import { gap } from "@architus/facade/theme/spacing";
 import { withPathPrefix } from "@architus/lib/path";
 
@@ -29,8 +30,10 @@ const headerClass = css`
 
 const Styled = {
   Layout: styled(Layout)`
-    /* Correct the global site padding */
-    ${sitePaddingVariable}: ${gap.nano} !important;
+    ${up("md")} {
+      /* Correct the global site padding */
+      ${sitePaddingVariable}: ${gap.nano} !important;
+    }
   `,
 };
 

app/src/store/saga/index.ts

@@ -1,6 +1,5 @@
 import { SagaIterator } from "@redux-saga/core";
-import { delay } from "@redux-saga/core/effects";
-import { takeEvery, put, fork } from "redux-saga/effects";
+import { takeEvery, put, fork, delay } from "redux-saga/effects";
 
 import { navigate } from "@app/components/Router";
 import {
@@ -48,9 +47,22 @@ function* autoHideNotification(
  * Upon sign out, clears session storage, shows a toast, and navigates to the home
  */
 function* handleSignOut(action: ReturnType<typeof signOut>): SagaIterator {
-  navigate("/");
   setLocalStorage(LOCAL_STORAGE_KEY, "");
   if (!action.payload.silent) {
     yield put(showToast({ message: "Signed out" }));
   }
+
+  const retries = 8;
+  for (let i = 0; i < retries; ++i) {
+    try {
+      navigate("/");
+    } catch (ex) {
+      if (i === retries - 1) {
+        // eslint-disable-next-line no-console
+        console.error(ex);
+        return;
+      }
+      yield delay(250);
+    }
+  }
 }

app/src/tabs/AutoResponses/AutoResponses.tsx

@@ -6,6 +6,7 @@ import MigrationAlert from "./MigrationAlert";
 import { AuthorData, Author } from "./types";
 import PageTitle from "@app/components/PageTitle";
 import { getAvatarUrl } from "@app/components/UserDisplay";
+import { appHorizontalPadding, appVerticalPadding } from "@app/layout";
 import { useDispatch } from "@app/store";
 import { useCurrentUser } from "@app/store/actions";
 import { usePool, usePoolEntities } from "@app/store/slices/pools";
@@ -25,10 +26,10 @@ const Styled = {
     flex-direction: column;
     height: 100%;
 
-    padding-top: ${gap.milli};
+    padding-top: ${appVerticalPadding};
   `,
   Header: styled.div`
-    padding: 0 ${gap.milli};
+    padding: 0 ${appHorizontalPadding};
 
     p {
       margin-bottom: ${gap.micro};

design/src/components/Empty.tsx

@@ -0,0 +1,86 @@
+import { styled } from "linaria/react";
+import React from "react";
+
+import EmptyIcon from "../assets/empty.svg";
+import { gap } from "../theme/spacing";
+import { MergeProps, Nil } from "@architus/lib/types";
+import { isDefined } from "@architus/lib/utility";
+
+const Message = styled.p`
+  margin-bottom: 0;
+  color: currentColor;
+  text-align: center;
+`;
+
+const Styled = {
+  Container: styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+
+    svg {
+      opacity: 0.9;
+    }
+
+    &[data-size="normal"] {
+      svg {
+        width: 48px;
+      }
+
+      ${Message} {
+        margin-top: ${gap.pico};
+        font-size: 1rem;
+        max-width: 200px;
+      }
+    }
+
+    &[data-size="large"] {
+      svg {
+        width: 76px;
+      }
+
+      ${Message} {
+        margin-top: ${gap.nano};
+        font-size: 1.08rem;
+        max-width: 300px;
+      }
+    }
+  `,
+  Message,
+};
+
+export type Size = "normal" | "large";
+export type EmptyProps = MergeProps<
+  {
+    message?: React.ReactNode | Nil;
+    size?: Size;
+    className?: string;
+    style?: React.CSSProperties;
+  },
+  React.HTMLAttributes<HTMLDivElement>
+>;
+
+/**
+ * Empty placeholder content, including an icon and an optional message
+ */
+const Empty: React.FC<EmptyProps> = ({
+  message,
+  size = "normal",
+  className,
+  style,
+  ...rest
+}) => (
+  <Styled.Container
+    className={className}
+    style={style}
+    data-size={size}
+    {...rest}
+  >
+    <EmptyIcon />
+    {isDefined(message) && <Styled.Message>{message}</Styled.Message>}
+  </Styled.Container>
+);
+
+export default Empty;

lib/src/types.ts

@@ -4,3 +4,5 @@ export type Mutable<T> = {
   -readonly [K in keyof T]: T[K];
 };
 export type MutableArray<T> = T extends readonly (infer I)[] ? I[] : never;
+
+export type MergeProps<A, B> = A & Omit<B, keyof A>;