move ErrorBar styles to CSS module + new component

Author: severo

src/components/ErrorBar.tsx

@@ -0,0 +1,35 @@
+import { CSSProperties, useState } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/ErrorBar.module.css'
+
+interface ErrorBarProps {
+  error?: Error
+}
+
+export default function ErrorBar({ error }: ErrorBarProps) {
+  const [showError, setShowError] = useState(error !== undefined)
+  const [prevError, setPrevError] = useState(error)
+  const { customClass } = useConfig()
+
+  if (error) console.error(error)
+  /// Reset error visibility when error prop changes
+  if (error !== prevError) {
+    setPrevError(error)
+    setShowError(error !== undefined)
+  }
+
+  return <div
+    className={cn(styles.errorBar, customClass?.errorBar)}
+    style={{ '--error-bar-visibility': showError ? 'visible' : 'hidden' } as CSSProperties}
+  >
+    <div>
+      <span>{error?.toString()}</span>
+      <button
+        aria-label='Close error message'
+        onClick={() => { setShowError(false) }}>
+        &times;
+      </button>
+    </div>
+  </div>
+}

src/components/Layout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react'
 import { cn } from '../lib/utils.js'
+import ErrorBar from './ErrorBar.js'
 import SideBar from './SideBar.js'
 import Welcome from './Welcome.js'
 
@@ -58,27 +59,3 @@ export default function Layout({ children, className, progress, error, title }:
     {showWelcome && <Welcome onClose={handleCloseWelcome} />}
   </main>
 }
-
-export function ErrorBar({ error }: { error?: Error }) {
-  const [showError, setShowError] = useState(error !== undefined)
-  const [prevError, setPrevError] = useState(error)
-
-  if (error) console.error(error)
-  /// Reset error visibility when error prop changes
-  if (error !== prevError) {
-    setPrevError(error)
-    setShowError(error !== undefined)
-  }
-
-  return <div className={cn('error-bar', showError && 'show-error')}>
-    <div className='error-content'>
-      <span>{error?.toString()}</span>
-      <button
-        aria-label='Close error message'
-        className='close-button'
-        onClick={() => { setShowError(false) }}>
-      &times;
-      </button>
-    </div>
-  </div>
-}

src/components/index.ts

@@ -1,8 +1,9 @@
 import Breadcrumb from './Breadcrumb.js'
 import Cell from './Cell.js'
+import ErrorBar from './ErrorBar.js'
 import File from './File.js'
 import Folder from './Folder.js'
-import Layout, { ErrorBar } from './Layout.js'
+import Layout from './Layout.js'
 import Markdown from './Markdown.js'
 import Page from './Page.js'
 import Spinner from './Spinner.js'

src/hooks/useConfig.ts

@@ -11,6 +11,7 @@ export interface Config {
   customClass?: {
     brand?: string
     contentWrapper?: string
+    errorBar?: string
     highTable?: string
     imageView?: string
     markdownView?: string

src/styles/ErrorBar.module.css

@@ -0,0 +1,48 @@
+.errorBar {
+  visibility: var(--error-bar-visibility, hidden);
+  max-height: 30%;
+  padding: 0;
+  background-color: #dd111199;
+  overflow: hidden;
+  transition: max-height 0.3s;
+  white-space: pre-wrap;
+  font-family: monospace;
+
+  & > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 100%;
+    overflow-y: auto;
+    padding: 10px 10px 10px 20px;
+  }
+
+  /* close button */
+  button,
+  button:active,
+  button:focus,
+  button:focus-visible,
+  button:hover {
+    background: none;
+    border: none;
+    border-radius: 4px;
+    padding: 0 8px;
+    cursor: pointer;
+    color: #333;
+    font-size: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s;
+  }
+  button:active {
+    background-color: rgba(0, 0, 0, 0.2);
+  }
+  button:focus {
+    background-color: rgba(0, 0, 0, 0.1);
+    outline: 2px solid #a44;
+  }
+  button:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}

src/styles/app.css

@@ -205,59 +205,6 @@ input.search:focus {
   background-color: #3a4;
 }
 
-/* error bar */
-.error-bar {
-  max-height: 0;
-  padding: 0;
-  background-color: #dd111199;
-  overflow: hidden;
-  transition: max-height 0.3s;
-  white-space: pre-wrap;
-}
-.error-bar * {
-  font-family: monospace;
-}
-.show-error {
-  max-height: 30%;
-}
-.error-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 100%;
-  overflow-y: auto;
-  padding: 10px 10px 10px 20px;
-}
-
-/* error bar close button */
-.close-button,
-.close-button:active,
-.close-button:focus,
-.close-button:focus-visible,
-.close-button:hover {
-  background: none;
-  border: none;
-  border-radius: 4px;
-  padding: 0 8px;
-  cursor: pointer;
-  color: #333;
-  font-size: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s;
-}
-button.close-button:active {
-  background-color: rgba(0, 0, 0, 0.2);
-}
-button.close-button:focus {
-  background-color: rgba(0, 0, 0, 0.1);
-  outline: 2px solid #a44;
-}
-button.close-button:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
 /* file list */
 .file-list {
   flex: 1;