[Experimental] Live AsciiDoc editor

app/components/AsciidocBlocks/Document.tsx

@@ -7,6 +7,8 @@
  */
 import { Content, type DocumentBlock } from '@oxide/react-asciidoc'
 
+// add styles for main
+// max-w-full flex-shrink overflow-hidden 800:overflow-visible 800:pr-10 1200:w-[calc(100%-var(--toc-width))] 1200:pr-16 print:p-0
 const CustomDocument = ({ document }: { document: DocumentBlock }) => (
   <div
     id="content"
@@ -16,4 +18,10 @@ const CustomDocument = ({ document }: { document: DocumentBlock }) => (
   </div>
 )
 
-export { CustomDocument }
+const MinimalDocument = ({ document }: { document: DocumentBlock }) => (
+  <div id="content" className="asciidoc-body max-w-[1040px]">
+    <Content blocks={document.blocks} />
+  </div>
+)
+
+export { CustomDocument, MinimalDocument }

app/components/Dropdown.tsx

@@ -19,18 +19,18 @@ export const dropdownInnerStyles = `focus:outline-0 focus:bg-hover px-3 py-2 pr-
 
 export const DropdownItem = ({
   children,
-  classNames,
+  className,
   onSelect,
 }: {
   children: ReactNode | string
-  classNames?: string
+  className?: string
   onSelect?: () => void
 }) => (
   <Dropdown.Item
     onSelect={onSelect}
     className={cn(
       dropdownOuterStyles,
-      classNames,
+      className,
       dropdownInnerStyles,
       !onSelect && 'cursor-default',
     )}
@@ -42,12 +42,12 @@ export const DropdownItem = ({
 
 export const DropdownSubTrigger = ({
   children,
-  classNames,
+  className,
 }: {
   children: JSX.Element | string
-  classNames?: string
+  className?: string
 }) => (
-  <Dropdown.SubTrigger className={cn(dropdownOuterStyles, classNames, dropdownInnerStyles)}>
+  <Dropdown.SubTrigger className={cn(dropdownOuterStyles, className, dropdownInnerStyles)}>
     {children}
     <Icon
       name="carat-down"
@@ -59,13 +59,13 @@ export const DropdownSubTrigger = ({
 
 export const DropdownLink = ({
   children,
-  classNames,
+  className,
   internal = false,
   to,
   disabled = false,
 }: {
   children: React.ReactNode
-  classNames?: string
+  className?: string
   internal?: boolean
   to: string
   disabled?: boolean
@@ -76,7 +76,7 @@ export const DropdownLink = ({
     className={cn(
       'block ',
       dropdownOuterStyles,
-      classNames,
+      className,
       disabled && 'pointer-events-none',
     )}
   >
@@ -88,18 +88,18 @@ export const DropdownLink = ({
 
 export const DropdownMenu = ({
   children,
-  classNames,
+  className,
   align = 'end',
 }: {
   children: React.ReactNode
-  classNames?: string
+  className?: string
   align?: 'end' | 'start' | 'center' | undefined
 }) => (
   <Dropdown.Portal>
     <Dropdown.Content
       className={cn(
         'menu overlay-shadow z-30 mt-2 min-w-[12rem] rounded border bg-raise border-secondary [&>*:last-child]:border-b-0',
-        classNames,
+        className,
       )}
       align={align}
     >
@@ -110,16 +110,16 @@ export const DropdownMenu = ({
 
 export const DropdownSubMenu = ({
   children,
-  classNames,
+  className,
 }: {
   children: JSX.Element[]
-  classNames?: string
+  className?: string
 }) => (
   <Dropdown.Portal>
     <Dropdown.SubContent
       className={cn(
         'menu overlay-shadow z-10 ml-2 max-h-[30vh] min-w-[12rem] overflow-y-auto rounded border bg-raise border-secondary [&>*:last-child]:border-b-0',
-        classNames,
+        className,
       )}
     >
       {children}

app/components/ErrorPage.tsx

@@ -0,0 +1,48 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { Error12Icon, PrevArrow12Icon } from '@oxide/design-system/icons/react'
+import { Link } from '@remix-run/react'
+import type { ReactNode } from 'react'
+
+const GradientBackground = () => (
+  <div
+    // negative z-index avoids covering MSW warning banner
+    className="fixed bottom-0 left-0 right-0 top-0 -z-10"
+    style={{
+      background:
+        'radial-gradient(200% 100% at 50% 100%, var(--surface-default) 0%, #161B1D 100%)',
+    }}
+  />
+)
+
+type Props = { children: ReactNode; backLink?: string }
+
+export function ErrorPage({ children, backLink }: Props) {
+  return (
+    <div className="flex w-full justify-center">
+      <GradientBackground />
+      <div className="relative flex w-full justify-between">
+        <Link
+          to={backLink ? backLink : '/'}
+          className="flex items-center p-6 text-mono-sm text-default hover:text-raise"
+        >
+          <PrevArrow12Icon title="Select" className="mr-2 text-secondary" />
+          Back
+        </Link>
+      </div>
+      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 !bg-raise border-secondary elevation-3">
+        <div className="my-2 flex h-12 w-12 items-center justify-center">
+          <div className="absolute h-12 w-12 rounded-full opacity-20 bg-info motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
+          <Error12Icon className="relative h-8 w-8 text-info-secondary" />
+        </div>
+
+        <div className="space-y-2 text-center">{children}</div>
+      </div>
+    </div>
+  )
+}

app/components/Header.tsx

@@ -10,12 +10,13 @@ import { buttonStyle } from '@oxide/design-system'
 import * as Dropdown from '@radix-ui/react-dropdown-menu'
 import { Link, useFetcher } from '@remix-run/react'
 import { useCallback, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import Icon from '~/components/Icon'
 import NewRfdButton from '~/components/NewRfdButton'
-import { useKey } from '~/hooks/use-key'
 import { useRootLoaderData } from '~/root'
 import type { RfdItem, RfdListItem } from '~/services/rfd.server'
+import { userIsInternal } from '~/utils/rfdApi'
 
 import { DropdownItem, DropdownMenu } from './Dropdown'
 import { PublicBanner } from './PublicBanner'
@@ -53,7 +54,9 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
     return false // Returning false prevents default behaviour in Firefox
   }, [open])
 
-  useKey('mod+k', toggleSearchMenu)
+  useHotkeys('mod+k', toggleSearchMenu)
+
+  const isInternal = userIsInternal(user)
 
   return (
     <div className="sticky top-0 z-20">
@@ -79,6 +82,14 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
             <Icon name="search" size={16} />
           </button>
           <Search open={open} onClose={() => setOpen(false)} />
+          {user && isInternal && (
+            <Link
+              to="/notes"
+              className="flex h-8 w-8 items-center justify-center rounded border text-tertiary bg-secondary border-secondary elevation-1 hover:bg-hover"
+            >
+              <Icon name="edit" size={16} />
+            </Link>
+          )}
           <NewRfdButton />
 
           {user ? (

app/components/Layout.tsx

@@ -0,0 +1,36 @@
+import { Links, Meta, Scripts, ScrollRestoration, useLocation } from '@remix-run/react'
+import cn from 'classnames'
+
+export const Layout = ({
+  children,
+  theme,
+}: {
+  children: React.ReactNode
+  theme?: string
+}) => {
+  const location = useLocation()
+  const bodyClass = location.pathname.startsWith('/notes') ? 'note' : 'rfd'
+
+  return (
+    <html lang="en" className={theme}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <link rel="icon" href="/favicon.svg" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        {/* Use plausible analytics only on Vercel */}
+        {process.env.NODE_ENV === 'production' && (
+          <script defer data-domain="rfd.shared.oxide.computer" src="/js/viewscript.js" />
+        )}
+      </head>
+      <body className={cn('mb-32', bodyClass)}>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}

app/components/SelectRfdCombobox.tsx

@@ -10,9 +10,9 @@ import { Link, useNavigate } from '@remix-run/react'
 import cn from 'classnames'
 import fuzzysort from 'fuzzysort'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import Icon from '~/components/Icon'
-import { useKey } from '~/hooks/use-key'
 import { useSteppedScroll } from '~/hooks/use-stepped-scroll'
 import type { RfdItem, RfdListItem } from '~/services/rfd.server'
 import { classed } from '~/utils/classed'
@@ -33,7 +33,7 @@ const SelectRfdCombobox = ({
   // memoized to avoid render churn in useKey
   const toggleCombobox = useCallback(() => setOpen(!open), [setOpen, open])
 
-  useKey('mod+/', toggleCombobox)
+  useHotkeys('mod+/', toggleCombobox)
 
   const handleDismiss = () => setOpen(false)
 
@@ -220,7 +220,7 @@ const ComboboxItem = ({
 }) => {
   const [shouldPrefetch, setShouldPrefetch] = useState(false)
 
-  const timer = useRef<NodeJS.Timeout | null>(null)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   function clear() {
     if (timer.current) clearTimeout(timer.current)

app/components/home/FilterDropdown.tsx

@@ -149,7 +149,7 @@ const DropdownFilterItem = ({
 }) => (
   <DropdownItem
     onSelect={onSelect}
-    classNames={selected ? 'bg-accent-secondary text-accent' : ''}
+    className={selected ? 'text-accent bg-accent-secondary' : ''}
   >
     {selected && <Outline />}
     <div className="flex items-center justify-between">

app/components/note/Avatar.tsx

@@ -0,0 +1,90 @@
+import { useOthers, useSelf } from '@liveblocks/react/suspense'
+import cn from 'classnames'
+import { Tooltip } from 'radix-ui'
+
+import { getPresenceColor } from './Presence'
+
+export const Avatars = () => {
+  const users = useOthers()
+  const currentUser = useSelf()
+
+  // Removes duplicate users and other sessions that match the current user
+  const filteredUsers = users.filter(
+    (user, index, self) =>
+      user.id !== currentUser.id &&
+      user.info.name !== 'Service Account' &&
+      index === self.findIndex((u) => u.id === user.id),
+  )
+
+  const hasMoreUsers = filteredUsers.length > 3
+
+  return (
+    <Tooltip.Provider>
+      <div className="flex items-center gap-1">
+        {currentUser && <Avatar id={currentUser.id} name={currentUser.info.name} />}
+
+        {filteredUsers.slice(0, 3).map(({ id, connectionId, info }) => {
+          return (
+            <Avatar
+              key={connectionId}
+              id={id}
+              name={info && info.name ? info.name : 'Unknown'}
+              className="-ml-3"
+            />
+          )
+        })}
+
+        {hasMoreUsers && (
+          <div className="text-mono-sm text-quaternary">+{filteredUsers.length - 3}</div>
+        )}
+      </div>
+    </Tooltip.Provider>
+  )
+}
+
+export const Avatar = ({
+  id,
+  name,
+  className,
+}: {
+  id: string
+  name: string
+  className?: string
+}) => {
+  const { fg, bg } = getPresenceColor(id)
+
+  return (
+    <Tooltip.Root delayDuration={150}>
+      <Tooltip.Trigger>
+        <div
+          className={cn(
+            'flex h-9 w-9 items-center justify-center rounded-full border-[3px] border-[--surface-default] object-cover text-mono-sm',
+            className,
+          )}
+          style={{
+            color: fg,
+            backgroundColor: bg,
+          }}
+        >
+          {getInitials(name)}
+        </div>
+      </Tooltip.Trigger>
+      <Tooltip.Content
+        side="bottom"
+        className="z-50 mt-1 text-nowrap rounded border px-1 py-1 text-sans-md text-default bg-raise border-secondary elevation-2"
+      >
+        {name}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
+
+export const getInitials = (text: string) => {
+  const names = text.split(' ')
+  let initials = names[0].substring(0, 1).toUpperCase()
+
+  if (names.length > 1) {
+    initials += names[names.length - 1].substring(0, 1).toUpperCase()
+  }
+  return initials
+}