Add reindexing banner

package.json

@@ -1,6 +1,6 @@
 {
   "name": "decent-interface",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": true,
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.1",

src/components/ui/page/Layout/index.tsx

@@ -1,6 +1,6 @@
-import { Box, Container, Grid, GridItem, Show } from '@chakra-ui/react';
+import { Box, Container, Grid, GridItem, Show, Text } from '@chakra-ui/react';
 import { useRef } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useMatches } from 'react-router-dom';
 import {
   MAX_CONTENT_WIDTH,
   SIDEBAR_WIDTH,
@@ -24,22 +24,50 @@ export function Layout() {
 
   useNavigationScrollReset();
 
+  const isReindexing = true;
+  const matches = useMatches();
+  const onDao = matches.some(
+    _match => _match.pathname !== '/' && !_match.pathname.startsWith('/create'),
+  );
+
+  const showReindexingBanner = isReindexing && onDao;
+
   return (
     <Grid
       templateAreas={{
-        base: `"header header"
+        base: `"banner banner"
+               "header header"
                "main main"`,
-        md: `"header header"
+        md: `"banner banner"
+             "header header"
              "nav main"
              "footer footer"`,
       }}
       gridTemplateColumns={`${SIDEBAR_WIDTH} 1fr`}
       gridTemplateRows={{
-        base: `${HEADER_HEIGHT} 100%`,
-        md: `${HEADER_HEIGHT} minmax(${CONTENT_HEIGHT}, 100%) ${FOOTER_HEIGHT}`,
+        base: `auto ${HEADER_HEIGHT} 100%`,
+        md: `auto ${HEADER_HEIGHT} minmax(${CONTENT_HEIGHT}, 100%) ${FOOTER_HEIGHT}`,
       }}
       position="relative"
     >
+      <GridItem area="banner">
+        {showReindexingBanner ? (
+          <Box
+            bg="lilac--2"
+            textAlign="center"
+            p={3}
+            position="fixed"
+            w="full"
+            zIndex="2"
+            fontWeight="bold"
+            transformOrigin="top"
+          >
+            <Text>
+              Decent&apos;s indexers are rebuilding. We are working to restore services soon.
+            </Text>
+          </Box>
+        ) : null}
+      </GridItem>
       <GridItem
         area="header"
         ref={headerContainerRef}
@@ -51,6 +79,7 @@ export function Layout() {
           w="full"
           maxW="100vw"
           zIndex="1"
+          mt={showReindexingBanner ? '48px' : '0px'}
         >
           <Header headerContainerRef={headerContainerRef} />
         </Box>
@@ -63,15 +92,19 @@ export function Layout() {
           flexDirection="column"
           position="fixed"
           ml={6}
-          top={HEADER_HEIGHT}
-          minHeight={{ base: undefined, md: `calc(100vh - ${HEADER_HEIGHT})` }}
+          top={showReindexingBanner ? `calc(${HEADER_HEIGHT} + 48px)` : HEADER_HEIGHT}
+          minHeight={{
+            base: undefined,
+            md: `calc(100vh - ${HEADER_HEIGHT} - ${showReindexingBanner ? '48px' : '0px'})`,
+          }}
         >
           <NavigationLinks />
         </GridItem>
       </Show>
       <GridItem
         area="main"
         mx={{ base: '0.5rem', md: '1.5rem' }}
+        mt={showReindexingBanner ? '48px' : '0px'}
       >
         <Container
           maxWidth={MAX_CONTENT_WIDTH}