@stack-spot/portal-layout 0.0.3 → 0.0.5

package/dist/svg/ServerError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ServerError.js","sourceRoot":"","sources":["../../src/svg/ServerError.tsx"],"names":[],"mappings":";AAAA,4BAA4B;AAE5B,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAuD,EAAE,EAAE,CAAC,CACxG,eAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aACnI,eAAM,OAAO,EAAC,KAAK,EAAC,CAAC,EAAC,8HAA8H,EAAC,MAAM,EAAC,iCAAiC,EAAC,WAAW,EAAC,QAAQ,GAAG,EACrN,aAAG,OAAO,EAAC,KAAK,aACd,eAAM,EAAE,EAAC,2BAA2B,EAAC,IAAI,EAAC,OAAO,YAC/C,eAAM,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,CAAC,EAAC,wwBAAwwB,GAAG,GACpzB,EACP,eAAM,CAAC,EAAC,0jFAA0jF,EAAC,IAAI,EAAC,iCAAiC,EAAC,IAAI,EAAC,iCAAiC,GAAG,IACjpF,EACJ,eAAM,OAAO,EAAC,KAAK,EAAC,CAAC,EAAC,wDAAwD,EAAC,MAAM,EAAC,iCAAiC,EAAC,WAAW,EAAC,SAAS,GAAG,EAChJ,eAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,yXAAyX,EAAC,IAAI,EAAC,SAAS,GAAG,EACla,eAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,mYAAmY,EAAC,IAAI,EAAC,SAAS,GAAG,EAC5a,eAAM,OAAO,EAAC,MAAM,EAAC,CAAC,EAAC,6XAA6X,EAAC,IAAI,EAAC,SAAS,GAAG,EACta,eAAM,CAAC,EAAC,kCAAkC,EAAC,MAAM,EAAC,SAAS,EAAC,WAAW,EAAC,QAAQ,EAAC,aAAa,EAAC,OAAO,GAAG,EACzG,eAAM,CAAC,EAAC,kCAAkC,EAAC,MAAM,EAAC,SAAS,EAAC,WAAW,EAAC,QAAQ,EAAC,aAAa,EAAC,OAAO,GAAG,EACzG,2BACE,0BAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,aAAa,EAAC,gBAAgB,aAC/H,eAAM,SAAS,EAAC,SAAS,EAAC,WAAW,EAAC,GAAG,GAAG,EAC5C,eAAM,MAAM,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS,GAAG,IACxB,EACjB,0BAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,EAAE,EAAC,UAAU,EAAC,aAAa,EAAC,gBAAgB,aACjI,eAAM,SAAS,EAAC,SAAS,GAAG,EAC5B,eAAM,MAAM,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAC,WAAW,EAAC,MAAM,GAAG,IAClD,EACjB,0BAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,UAAU,EAAC,aAAa,EAAC,gBAAgB,aAChI,eAAM,SAAS,EAAC,SAAS,GAAG,EAC5B,eAAM,MAAM,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAC,WAAW,EAAC,MAAM,GAAG,IAClD,IACZ,IACH,CACP,CAAA"}

package/dist/svg/Unauthenticated.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Unauthenticated: ({ className, style }: {
+    className?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Unauthenticated.d.ts.map

package/dist/svg/Unauthenticated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unauthenticated.d.ts","sourceRoot":"","sources":["../../src/svg/Unauthenticated.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,eAAe;;;6CAa3B,CAAA"}

package/dist/svg/Unauthenticated.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable max-len */
+export const Unauthenticated = ({ className, style }) => (_jsxs("svg", { width: "178", height: "160", viewBox: "0 0 178 160", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, style: style, children: [_jsx("circle", { opacity: "0.16", cx: "89.6761", cy: "80.2113", r: "31.5629", fill: "#FAFAFB" }), _jsx("ellipse", { opacity: "0.16", cx: "89.6721", cy: "80.6057", rx: "22.094", ry: "21.6995", fill: "#FAFAFB" }), _jsx("ellipse", { opacity: "0.16", cx: "89.6759", cy: "80.6056", rx: "13.4142", ry: "13.0197", fill: "#FAFAFB" }), _jsx("path", { opacity: "0.5", fillRule: "evenodd", clipRule: "evenodd", d: "M44.7029 19.055C69.3231 -5.56521 109.24 -5.56521 133.861 19.055L177.651 62.8454C178.086 63.2808 178.086 63.9868 177.651 64.4222C177.215 64.8577 176.509 64.8577 176.074 64.4222L132.284 20.6319C108.534 -3.11747 70.0291 -3.11747 46.2798 20.6319C45.8443 21.0673 45.1383 21.0673 44.7029 20.6319C44.2675 20.1964 44.2675 19.4904 44.7029 19.055ZM161.243 79.8912L126.447 45.0949C105.747 24.3952 72.1863 24.3952 51.4866 45.0949L16.6903 79.8912L51.4866 114.687C72.1863 135.387 105.747 135.387 126.447 114.687L161.243 79.8912ZM128.024 43.518C106.453 21.9474 71.4803 21.9474 49.9097 43.5181L15.1135 78.3143L13.5366 79.8912L15.1135 81.468L49.9097 116.264C71.4803 137.835 106.453 137.835 128.024 116.264L162.82 81.468L164.397 79.8912L162.82 78.3143L128.024 43.518ZM44.7029 141.115C69.3231 165.736 109.24 165.736 133.861 141.115C134.296 140.68 134.296 139.974 133.861 139.538C133.425 139.103 132.719 139.103 132.284 139.538C108.534 163.288 70.0291 163.288 46.2798 139.538L2.48938 95.7481C2.05394 95.3126 1.34795 95.3126 0.912516 95.7481C0.477078 96.1835 0.477077 96.8895 0.912518 97.3249L44.7029 141.115Z", fill: "url(#paint0_linear_3383_243082)" }), _jsx("defs", { children: _jsxs("linearGradient", { id: "paint0_linear_3383_243082", x1: "-3.35603", y1: "94.0049", x2: "89.5555", y2: "212.99", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#BCBCCF" }), _jsx("stop", { offset: "0.766098", stopColor: "#353546", stopOpacity: "0.09" })] }) })] }));
+//# sourceMappingURL=Unauthenticated.js.map

package/dist/svg/Unauthenticated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unauthenticated.js","sourceRoot":"","sources":["../../src/svg/Unauthenticated.tsx"],"names":[],"mappings":";AAAA,4BAA4B;AAE5B,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAuD,EAAE,EAAE,CAAC,CAC5G,eAAK,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,aACnI,iBAAQ,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,CAAC,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAE,EAC7E,kBAAS,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,QAAQ,EAAC,EAAE,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAE,EAC3F,kBAAS,OAAO,EAAC,MAAM,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,GAAE,EAC5F,eAAM,OAAO,EAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,CAAC,EAAC,kkCAAkkC,EAAC,IAAI,EAAC,iCAAiC,GAAE,EACvqC,yBACE,0BAAgB,EAAE,EAAC,2BAA2B,EAAC,EAAE,EAAC,UAAU,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,SAAS,EAAC,EAAE,EAAC,QAAQ,EAAC,aAAa,EAAC,gBAAgB,aAC/H,eAAM,SAAS,EAAC,SAAS,GAAE,EAC3B,eAAM,MAAM,EAAC,UAAU,EAAC,SAAS,EAAC,SAAS,EAAC,WAAW,EAAC,MAAM,GAAE,IACjD,GACZ,IACH,CACP,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,10 +8,11 @@
     "@citric/core": "^5.3.1",
     "@citric/icons": "^5.3.1",
     "@citric/ui": "^5.3.1",
-    "@stack-spot/portal-theme": "0.0.3",
+    "@stack-spot/portal-theme": "^0.0.3",
+    "@stack-spot/portal-translate": "^0.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "styled-components": "6.1.1"
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.37",

package/src/Layout.tsx

@@ -1,10 +1,13 @@
 import { CSSToCitricAdapter, listToClass, WithStyle } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
 import { ReactElement, ReactNode } from 'react'
+import { ErrorBoundary } from './components/error/ErrorBoundary'
+import { DescriptionFn } from './components/error/ErrorDescriptor'
+import { SilentErrorBoundary } from './components/error/SilentErrorBoundary'
 import { Header, HeaderProps } from './components/Header'
-import { MenuContent } from './components/Menu/MenuContent'
-import { MenuSections } from './components/Menu/MenuSections'
-import { MenuProps } from './components/Menu/types'
+import { MenuContent } from './components/menu/MenuContent'
+import { MenuSections } from './components/menu/MenuSections'
+import { MenuProps } from './components/menu/types'
 import { Toaster } from './components/Toaster'
 import './layout.css'
 import { overlay } from './LayoutOverlayManager'
@@ -13,6 +16,7 @@ interface Props extends WithStyle {
   menu: MenuProps,
   header: HeaderProps,
   children: ReactNode,
+  errorDescriptor?: DescriptionFn,
 }
 
 interface RawProps extends WithStyle {
@@ -21,9 +25,12 @@ interface RawProps extends WithStyle {
   header: ReactElement,
   children: ReactNode,
   compactMenu?: boolean,
+  errorDescriptor?: DescriptionFn,
 }
 
-export const RawLayout = ({ menuSections, menuContent, header, compactMenu = true, children, className, style }: RawProps) => {
+export const RawLayout = (
+  { menuSections, menuContent, header, compactMenu = true, children, className, style }: RawProps,
+) => {
   // @ts-ignore
   const { bottomDialog, modal, rightPanel } = overlay.useOverlays()
   const classes = [
@@ -35,18 +42,18 @@ export const RawLayout = ({ menuSections, menuContent, header, compactMenu = tru
   return (
     <CSSToCitricAdapter>
       <div id="layout" className={listToClass(classes)} style={style}>
-        <header id="header">{header}</header>
-        <aside id="menu">
-          <nav id="menuContent">{menuContent}</nav>
-          <nav id="menuSections">{menuSections}</nav>
-        </aside>
         <div id="page">
-          <article id="content">{children}</article>
+          <article id="content"><ErrorBoundary>{children}</ErrorBoundary></article>
         </div>
-        <div id="rightPanel">{rightPanel}</div>
-        <div id="bottomDialog">{bottomDialog}</div>
+        <header id="header"><SilentErrorBoundary>{header}</SilentErrorBoundary></header>
+        <aside id="menu">
+          <nav id="menuContent"><SilentErrorBoundary>{menuContent}</SilentErrorBoundary></nav>
+          <nav id="menuSections"><SilentErrorBoundary>{menuSections}</SilentErrorBoundary></nav>
+        </aside>
+        <div id="rightPanel"><ErrorBoundary>{rightPanel}</ErrorBoundary></div>
+        <div id="bottomDialog"><ErrorBoundary>{bottomDialog}</ErrorBoundary></div>
         <div id="backdrop">
-          <div id="modal">{modal}</div>
+          <div id="modal"><ErrorBoundary>{modal}</ErrorBoundary></div>
         </div>
         <Toaster />
       </div>
@@ -59,7 +66,7 @@ const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'
   return <MenuContent {...menuContent} />
 }
 
-export const Layout = ({ menu, header, children, className, style }: Props) => (
+export const Layout = ({ menu, header, children, errorDescriptor, className, style }: Props) => (
   <RawLayout
     header={<Header {...header} />}
     menuSections={<MenuSections {...menu} />}
@@ -68,6 +75,7 @@ export const Layout = ({ menu, header, children, className, style }: Props) => (
       : undefined
     }
     compactMenu={menu.compact}
+    errorDescriptor={errorDescriptor}
     className={className}
     style={style}
   >

package/src/LayoutOverlayManager.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 
-import { Button, Flex } from '@citric/core'
+import { Button } from '@citric/core'
 import { ReactElement, useLayoutEffect, useState } from 'react'
 import { Dialog, DialogOptions } from './components/Dialog'
 import { OverlayContent, OverlayContentProps } from './components/OverlayContent'
+import { getDictionary } from './dictionary'
 import { ElementNotFound, LayoutError } from './errors'
 import { showToaster as showReactToaster } from './toaster'
 import { valueOfLayoutVar } from './utils'
@@ -115,24 +116,28 @@ class LayoutOverlayManager {
     })
   }
 
-  confirm({ confirm = 'OK', cancel = 'Cancel', ...options }: DialogOptions): Promise<boolean> {
-    return this.showDialog({ ...options, confirm, cancel })
+  confirm({ confirm, cancel, ...options }: DialogOptions): Promise<boolean> {
+    const t = getDictionary()
+    return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel })
   }
 
-  async alert({ confirm = 'OK', showButton = true, ...options }: AlertOptions): Promise<void> {
-    await this.showDialog({ ...options, confirm: showButton ? confirm : undefined })
+  async alert({ confirm, showButton = true, ...options }: AlertOptions): Promise<void> {
+    const t = getDictionary()
+    await this.showDialog({ ...options, confirm: showButton ? (confirm || t.confirm) : undefined })
   }
 
   showBottomDialog({ message, cancel, confirm }: BottomDialogOptions): Promise<boolean> {
     if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', BOTTOM_DIALOG_ID)
     if (!this.setContent.bottomDialog) throw new LayoutError('unable to show bottom dialog, because it has not been setup yet.')
     return new Promise((resolve) => {
-      this.setContent.bottomDialog!(
-        <Flex gap>
+      this.setContent.bottomDialog?.(
+        <>
           {message}
-          {cancel && <Button onClick={() => resolve(true)} colorScheme="inverse" appearance="outlined">{cancel}</Button>}
-          {confirm && <Button onClick={() => resolve(false)} colorScheme="inverse">{confirm}</Button>}
-        </Flex>,
+          <div className="btn-group">
+            {cancel && <Button onClick={() => resolve(false)} colorScheme="light" appearance="outlined">{cancel}</Button>}
+            {confirm && <Button onClick={() => resolve(true)} colorScheme="light">{confirm}</Button>}
+          </div>
+        </>,
       )
       this.elements?.bottomDialog?.setAttribute('class', 'visible')
     })

package/src/components/Dialog.tsx

@@ -1,5 +1,7 @@
 import { Button, Flex, Input, Text } from '@citric/core'
+import { interpolate } from '@stack-spot/portal-translate'
 import { ReactNode, useState } from 'react'
+import { useDictionary } from '../dictionary'
 import { OverlayContent } from './OverlayContent'
 
 interface Validation {
@@ -49,6 +51,7 @@ export const Dialog = ({
   buttonPlacement = type === 'panel' ? 'left' : 'right',
 }: Props,
 ) => {
+  const t = useDictionary()
   const [enabled, setEnabled] = useState(!validation)
 
   function renderValidation() {
@@ -56,7 +59,7 @@ export const Dialog = ({
     const value = typeof validation === 'string' ? validation : validation.value
     const label = typeof validation === 'object' && validation.label
       ? validation.label
-      : `Please, confirm the action by typing "${value}" below:`
+      : interpolate(t.validationLabel, value)
     const placeholder = typeof validation === 'object' ? validation.placeholder : undefined
     return (
       <div style={{ margin: '16px 0' }}>

package/src/components/Header.tsx

@@ -1,11 +1,12 @@
 import { Flex } from '@citric/core'
 import { ReactNode } from 'react'
-import { StackspotLogo } from './Logo'
+import { Logo } from '../svg/Logo'
 import { SelectionListProps } from './SelectionList'
 import { UserMenu } from './UserMenu'
 
 export interface HeaderProps {
   logo?: ReactNode,
+  logoHref?: string,
   userName?: string,
   email?: string,
   options?: SelectionListProps['items'],
@@ -13,9 +14,9 @@ export interface HeaderProps {
   right?: ReactNode,
 }
 
-export const Header = ({ logo, center, right, userName, email, options }: HeaderProps) => (
+export const Header = ({ logo, logoHref, center, right, userName, email, options }: HeaderProps) => (
   <>
-    {logo ?? <StackspotLogo title="stackspot" style={{ width: 130 }} />}
+    <a href={logoHref} title="Home">{logo ?? <Logo style={{ width: 130 }} />}</a>
     <Flex flex={1}>{center}</Flex>
     {right}
     {userName && <UserMenu userName={userName} email={email} options={options} />}

package/src/components/OverlayContent.tsx

@@ -4,6 +4,7 @@ import { IconButton } from '@citric/ui'
 import { WithStyle, listToClass, theme } from '@stack-spot/portal-theme'
 import { ReactNode } from 'react'
 import { styled } from 'styled-components'
+import { useDictionary } from '../dictionary'
 
 export interface OverlayContentProps extends WithStyle {
   title: string,
@@ -38,15 +39,18 @@ const ContentBox = styled.section`
   }
 `
 
-export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => (
-  <ContentBox style={style} className={listToClass([className, type])}>
-    <header>
-      <Flex flexDirection="column" flex={1}>
-        <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
-        {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
-      </Flex>
-      <IconButton onClick={onClose} title="close" aria-label="close"><TimesMini /></IconButton>
-    </header>
-    {children}
-  </ContentBox>
-)
+export const OverlayContent = ({ children, title, subtitle, className, style, onClose, type }: Props) => {
+  const t = useDictionary()
+  return (
+    <ContentBox style={style} className={listToClass([className, type])}>
+      <header>
+        <Flex flexDirection="column" flex={1}>
+          <Text appearance={type === 'modal' ? 'h3' : 'h4'}>{title}</Text>
+          {subtitle && <Text appearance="body2" colorScheme="light.700">{subtitle}</Text>}
+        </Flex>
+        <IconButton onClick={onClose} title={t.close} aria-label={t.close}><TimesMini /></IconButton>
+      </header>
+      {children}
+    </ContentBox>
+  )
+}

package/src/components/SelectionList.tsx

@@ -47,11 +47,12 @@ export interface SelectionListProps extends WithStyle {
   maxHeight?: string,
   before?: ReactElement,
   after?: ReactElement,
+  scroll?: boolean,
 }
 
-const SelectionBox = styled.div<{ $maxHeight: string }>`
+const SelectionBox = styled.div<{ $maxHeight: string, $scroll?: boolean }>`
   max-height: 0;
-  overflow-y: auto;
+  overflow-y: ${({ $scroll }) => $scroll ? 'auto' : 'hidden'};
   overflow-x: hidden;
   transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
   z-index: 1;
@@ -145,7 +146,7 @@ function renderItem(item: ListItem, setCurrent: (current: CurrentItemList) => vo
 }
 
 export const SelectionList = ({
-  items, className, style, visible = true, maxHeight = '300px', onHide, before, after,
+  items, className, style, visible = true, maxHeight = '300px', onHide, before, after, scroll,
 }: SelectionListProps) => {
   const wrapper = useRef<HTMLDivElement>(null)
   const itemsRef = useRef(items)
@@ -182,6 +183,7 @@ export const SelectionList = ({
       $maxHeight={maxHeight}
       style={style}
       className={listToClass(['selection-list', visible ? 'visible' : undefined, className])}
+      $scroll={scroll}
     >
       <div className="selection-list-content">
         {before}

package/src/components/Toaster.tsx

@@ -2,11 +2,15 @@ import { TimesMini } from '@citric/icons'
 import { IconButton } from '@citric/ui'
 import { CloseButtonProps, ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
+import { useDictionary } from '../dictionary'
 
-const CloseButton = ({ closeToast }: CloseButtonProps) => (
-  <IconButton onClick={() => closeToast(null as any)} title="Dismiss">
-    <TimesMini />
-  </IconButton>
-)
+const CloseButton = ({ closeToast }: CloseButtonProps) => {
+  const t = useDictionary()
+  return (
+    <IconButton onClick={() => closeToast(null as any)} title={t.dismiss}>
+      <TimesMini />
+    </IconButton>
+  )
+}
 
 export const Toaster = () => <ToastContainer closeButton={CloseButton} />

package/src/components/error/ErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import { Component } from 'react'
+import { ErrorDescription, ErrorDescriptor } from './ErrorDescriptor'
+import { ErrorFeedback } from './ErrorFeedback'
+
+interface State extends ErrorDescription {
+  hasError: boolean,
+}
+
+interface Props {
+  children: React.ReactNode,
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(error: any) {
+    return { hasError: true, ...ErrorDescriptor.describe(error) }
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // eslint-disable-next-line no-console
+    console.error(error, errorInfo)
+  }
+
+  render() {
+    return this.state.hasError
+      ? <ErrorFeedback code={this.state.code} message={this.state.message} debug={this.state.debug} />
+      : this.props.children
+  }
+}

package/src/components/error/ErrorDescriptor.ts

@@ -0,0 +1,21 @@
+export interface ErrorDescription {
+  code?: number,
+  message?: string,
+  debug?: boolean,
+}
+
+export type DescriptionFn = (error: any) => ErrorDescription
+
+export class ErrorDescriptor {
+  private static descriptionFunction: DescriptionFn = error => ({
+    message: error.message || `${error}`,
+  })
+
+  static setDescriptionFunction(fn: DescriptionFn) {
+    this.descriptionFunction = fn
+  }
+
+  static describe(error: any) {
+    return this.descriptionFunction(error)
+  }
+}

package/src/components/error/ErrorFeedback.tsx

@@ -0,0 +1,114 @@
+import { Box, Button, Container, Flex, LinkBox, Text } from '@citric/core'
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+import { useState } from 'react'
+import { Forbidden } from '../../svg/Forbidden'
+import { Logo } from '../../svg/Logo'
+import { NotFound } from '../../svg/NotFound'
+import { ServerError } from '../../svg/ServerError'
+import { Unauthenticated } from '../../svg/Unauthenticated'
+import { ErrorDescription } from './ErrorDescriptor'
+
+const imageStyle: React.CSSProperties = {
+  width: '200px',
+  height: '200px',
+}
+
+const imageMap: Record<number, React.ReactElement> = {
+  401: <Unauthenticated style={imageStyle} />,
+  403: <Forbidden style={imageStyle} />,
+  404: <NotFound style={imageStyle} />,
+}
+
+export const ErrorFeedback = ({ code = 0, message, debug }: ErrorDescription) => {
+  const t = useTranslate(dictionary) as Record<string, string>
+  const [showDetails, setShowDetails] = useState(false)
+
+  return (
+    <Box bg="light.400">
+      <Container>
+        <Flex alignItems="center" sx={{ padding: 12 }}>
+          <Box width={5} sx={{ display: ['block', 'none'] }}>
+            <Flex justifyContent="flex-end" pr={20}>
+              {imageMap[code] ?? <ServerError style={imageStyle} />}
+            </Flex>
+          </Box>
+          <Box width={[7, 12]}> 
+            <LinkBox href="/">
+              <Logo style={{ width: '130px', height: '30px' }} />
+            </LinkBox>
+            <Box w={[7, 12]}>
+              <Text appearance="h4" mt={5} colorScheme="inverse">
+                {code ? `${code}. ` : ''}
+                <Text appearance="h4" as="span" colorScheme="light.700">
+                  {t[`${code}.title`]}
+                </Text>
+              </Text>
+
+              <Text appearance="body1" mt={5} colorScheme="inverse">
+                {t[`${code}.description`]}
+              </Text>
+
+              <Text appearance="body1" colorScheme="light.700" mt={1}>
+                {t[`${code}.help`]}
+              </Text>
+              {debug && message && (
+                <Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
+                  {showDetails ? t.hideDetails : t.showDetails}
+                </Button>
+              )}
+              {showDetails && (
+                <Box bg="danger" mt={8} p={4} sx={{ borderRadius: '5px' }}>
+                  <Text appearance="microtext1" colorScheme="danger.contrastText">{message}</Text>
+                </Box>
+              )}
+            </Box>
+          </Box>
+        </Flex>
+      </Container>
+    </Box>
+  )
+}
+
+const dictionary = {
+  en: {
+    altLogo: 'Logo Stackspot',
+    '0.title': 'Unknown client error',
+    '0.description': 'An unknown error happened while trying to load the resource.',
+    '0.help': 'Reload the page and, if it still doesn\'t work, report the error the Stackspot team.',
+    '401.title': 'Not authorized',
+    '401.description': 'There was a failure loading credentials for this page.',
+    '401.help': 'Check if the URL is correct or clear your cache and cookies from your browser and try again.',
+    '403.title': 'Private access',
+    '403.description': 'The page you have tried to visit is private.',
+    '403.help': 'Log in with another account or request access from the person who manages your organization.',
+    '404.title': 'Resource not found',
+    '404.description': 'This resource no longer exists.',
+    '404.help': 'Please try again or request a new URL from the person who manages your organization.',
+    '500.title': 'Server error',
+    '500.description':
+      "We have identified a problem with the server, but don't worry. We are already investigating what happened.",
+    '500.help': 'Please try again after a few minutes.',
+    showDetails: 'Show Details',
+    hideDetails: 'Hide Details',
+  },
+  pt: {
+    altLogo: 'Logo Stackspot',
+    '0.title': 'Erro desconhecido (cliente)',
+    '0.description': 'Um erro desconhecido aconteceu ao carregar o recurso',
+    '0.help': 'Recarregue a página e, se ainda não funcionar, reporte o problema para o time da Stackspot.',
+    '401.title': 'Não autorizado',
+    '401.description': 'Houve uma falha no carregamento de credenciais dessa página.',
+    '401.help': 'Verifique se a URL está correta ou limpe o cache e os cookies de seu navegador e tente novamente.',
+    '403.title': 'Acesso privado',
+    '403.description': '"A página que você tentou visualizar é particular."',
+    '403.help': 'Solicite acesso com o administrador da sua organização.',
+    '404.title': 'Recurso não encontrado',
+    '404.description': 'Este recurso não existe mais.',
+    '404.help': 'Tente novamente ou fale com o administrador da sua organização.',
+    '500.title': 'Erro ao exibir o recurso',
+    '500.description': 'Mas não se preocupe, já estamos investigando o que aconteceu.',
+    '500.help': 'Tente novamente após alguns minutos.',
+    showDetails: 'Ver Detalhes',
+    hideDetails: 'Esconder Detalhes',
+  },
+} satisfies Dictionary

package/src/components/error/SilentErrorBoundary.tsx

@@ -0,0 +1,31 @@
+import { Component } from 'react'
+
+interface State {
+  hasError: boolean,
+}
+
+interface Props {
+  children: React.ReactNode,
+}
+
+export class SilentErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: any, errorInfo: any) {
+    // eslint-disable-next-line no-console
+    console.error(error, errorInfo)
+  }
+
+  render() {
+    return this.state.hasError
+      ? null
+      : this.props.children
+  }
+}

package/src/components/{Menu → menu}/MenuContent.tsx

@@ -5,6 +5,7 @@ import { LoadingCircular } from '@citric/ui'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
+import { hideOverlayImmediately } from './MenuSections'
 import { PageSelector } from './PageSelector'
 import { MENU_CONTENT_ITEM_PADDING as ITEM_PADDING, MENU_CONTENT_PADDING as PADDING } from './constants'
 import { ItemGroup, MenuAction, MenuItem, MenuSectionContent } from './types'
@@ -128,18 +129,23 @@ const Title = styled.header`
   margin: ${PADDING}px 0 24px ${PADDING}px;
 `
 
-const ActionItem = ({ label, onClick, href, active, icon, overflow = 'wrap' }: MenuAction) => (
+const ActionItem = ({ label, onClick, href, active, icon, badge, overflow = 'wrap' }: MenuAction) => (
   <a
     href={active ? undefined : href}
-    onClick={active ? onClick : undefined}
+    onClick={() => {
+      if (active) return
+      if (onClick) onClick()
+      hideOverlayImmediately()
+    }}
     className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
   >
     {icon}
     <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
+    {badge}
   </a>
 )
 
-const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, overflow = 'wrap' }: ItemGroup) => {
+const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
   const items = useMemo(() => children?.map(renderOption), [children])
 
@@ -148,6 +154,7 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, ov
       <a onClick={() => setOpen(!open)} className="item-row">
         {icon}
         <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
+        {badge}
         <IconBox><ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} /></IconBox>
       </a>
       <MenuGroup className={open ? 'open' : undefined}>{items}</MenuGroup>
@@ -155,7 +162,7 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, ov
   )
 }
 
-const RootGroupItem = ({ label, children, icon, overflow = 'wrap' }: ItemGroup) => {
+const RootGroupItem = ({ label, children, icon, badge, overflow = 'wrap' }: ItemGroup) => {
   const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children])
 
   return (
@@ -163,6 +170,7 @@ const RootGroupItem = ({ label, children, icon, overflow = 'wrap' }: ItemGroup)
       <div className="item-row">
         {icon}
         <Text appearance="overheader2" colorScheme="light.700" className={`group-title label ${overflow}`}>{label}</Text>
+        {badge}
       </div>
       <MenuGroup className="open no-indentation">{items}</MenuGroup>
     </>