refactor: replace Bootstrap with Tailwind CSS and Base UI

README.md

@@ -518,7 +518,7 @@ For every edit on dnsmasq, it will give you the option to either edit the `/etc/
 
 ## Stack
 
-The site is written in javascript (not typescript 😱) using [Next.js](https://nextjs.org/), a [React](https://react.dev/) framework. The backend API is provided via [GraphQL](https://graphql.org/). The database is [PostgreSQL](https://www.postgresql.org/) modeled with [Prisma](https://www.prisma.io/). The [job queue](https://github.com/timgit/pg-boss) is also maintained in PostgreSQL. We use [lnd](https://github.com/lightningnetwork/lnd) for our lightning node. A customized [Bootstrap](https://react-bootstrap.netlify.app/) theme is used for styling.
+The site is written in javascript (not typescript 😱) using [Next.js](https://nextjs.org/), a [React](https://react.dev/) framework. The backend API is provided via [GraphQL](https://graphql.org/). The database is [PostgreSQL](https://www.postgresql.org/) modeled with [Prisma](https://www.prisma.io/). The [job queue](https://github.com/timgit/pg-boss) is also maintained in PostgreSQL. We use [lnd](https://github.com/lightningnetwork/lnd) for our lightning node. Styling uses [Tailwind CSS](https://tailwindcss.com/) utilities with [Base UI](https://base-ui.com/) components; the conventions are documented in [docs/dev/styling.md](./docs/dev/styling.md).
 
 <br>
 

capture/index.js

@@ -203,11 +203,7 @@ async function addCaptureCleanupScript (page) {
       const style = document.createElement('style')
       style.textContent = `
         #nprogress,
-        .navbar,
-        nav.d-block.d-md-none:has(.navbar),
-        [class*="sticky"]:has(.navbar),
-        .d-none.d-md-block:has(.navbar),
-        .d-block.d-md-none:has(.navbar) {
+        [data-sn-navigation] {
           display: none !important;
         }
       `

components/accordion-item.js

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import { Collapsible, CollapsibleTrigger, CollapsiblePanel } from './ui/collapsible'
+import styles from './ui/collapsible.module.css'
+import ArrowRight from '@/svgs/arrow-right-s-fill.svg'
+import ArrowDown from '@/svgs/arrow-down-s-fill.svg'
+import { cn } from '@/lib/cn'
+
+export default function AccordionItem ({ header, body, className, headerColor = 'var(--sn-grey)', show }) {
+  const [open, setOpen] = useState(!!show)
+
+  useEffect(() => {
+    // `show` transitions force open/close; manual toggles stay free either way
+    setOpen(!!show)
+  }, [show])
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className='flex items-center w-full'>
+        {open
+          ? <ArrowDown style={{ fill: headerColor }} height={20} width={20} />
+          : <ArrowRight style={{ fill: headerColor }} height={20} width={20} />}
+        <div style={{ color: headerColor }}>{header}</div>
+      </CollapsibleTrigger>
+      <CollapsiblePanel className={cn('mt-2', className)}>{body}</CollapsiblePanel>
+    </Collapsible>
+  )
+}
+
+export function AccordionCard ({ header, children, show, className }) {
+  return (
+    <Collapsible defaultOpen={!!show} className={cn(styles.card, className)}>
+      <CollapsibleTrigger className={cn(styles.cardTrigger, 'flex items-center w-full')}>
+        {header}
+        <ArrowDown className={cn(styles.cardChevron, 'ms-auto shrink-0')} height={20} width={20} />
+      </CollapsibleTrigger>
+      <CollapsiblePanel>
+        <div className={styles.cardBody}>{children}</div>
+      </CollapsiblePanel>
+    </Collapsible>
+  )
+}

components/account.js

@@ -25,7 +25,7 @@ export default function SwitchAccountList () {
   return (
     <>
       <div className='my-2'>
-        <div className='d-flex flex-column flex-wrap mt-2 mb-3'>
+        <div className='flex flex-col flex-wrap mt-2 mb-4'>
           <h4 className='text-muted'>Accounts</h4>
           <AccountListRow
             account={{ id: USER_ID.anon, name: 'anon' }}
@@ -47,7 +47,7 @@ export default function SwitchAccountList () {
             pathname: '/login',
             query: { callbackUrl: window.location.origin + router.asPath, multiAuth: true }
           }}
-          className='text-reset fw-bold'
+          className='text-reset font-bold'
         >
           <AddIcon height={20} width={20} /> existing account
         </Link>
@@ -81,10 +81,10 @@ const AccountListRow = ({ account, selected, ...props }) => {
   }
 
   return (
-    <div className='d-flex flex-row'>
+    <div className='flex flex-row'>
       <UserListRow
         user={{ ...account, photoId, name }}
-        className='d-flex align-items-center me-2'
+        className='flex items-center me-2'
         selected={selected}
         {...props}
         onNymClick={onClick}

components/action-dropdown.js

@@ -1,4 +1,4 @@
-import Dropdown from 'react-bootstrap/Dropdown'
+import { Menu, MenuTrigger, MenuPopup } from '@/components/ui/menu'
 import styles from './item.module.css'
 import MoreIcon from '@/svgs/more-fill.svg'
 
@@ -7,13 +7,10 @@ export default function ActionDropdown ({ children }) {
     return null
   }
   return (
-    <Dropdown className={`pointer ${styles.dropdown}`} as='span'>
-      <Dropdown.Toggle variant='success' as='a' onPointerDown={e => e.preventDefault()}>
-        <MoreIcon className='fill-grey ms-1' height={16} width={16} />
-      </Dropdown.Toggle>
-      <Dropdown.Menu>
-        {children}
-      </Dropdown.Menu>
-    </Dropdown>
+    <Menu className={`pointer ${styles.dropdown}`}>
+      {/* Base UI gives the rendered span button semantics. */}
+      <MenuTrigger aria-label='Item actions' nativeButton={false} render={<span><MoreIcon className='fill-muted ms-1' height={16} width={16} /></span>} />
+      <MenuPopup>{children}</MenuPopup>
+    </Menu>
   )
 }

components/action-tooltip.js

@@ -1,8 +1,7 @@
 import { useFormikContext } from 'formik'
-import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
-import Tooltip from 'react-bootstrap/Tooltip'
+import Tooltip from '@/components/ui/tooltip'
 
-export default function ActionTooltip ({ children, notForm, disable, overlayText, placement, noWrapper, showDelay, hideDelay, transition }) {
+export default function ActionTooltip ({ children, notForm, disable, overlayText, placement, noWrapper, showDelay }) {
   // if we're in a form, we want to hide tooltip on submit
   let formik
   if (!notForm) {
@@ -12,26 +11,13 @@ export default function ActionTooltip ({ children, notForm, disable, overlayText
     return children
   }
   return (
-    <OverlayTrigger
-      placement={placement || 'bottom'}
-      overlay={
-        <Tooltip style={{ position: 'fixed' }}>
-          {overlayText}
-        </Tooltip>
-      }
-      trigger={['hover', 'focus']}
-      show={formik?.isSubmitting ? false : undefined}
-      delay={{ show: showDelay || 0, hide: hideDelay || 0 }}
-      transition={transition || false}
-      popperConfig={{
-        modifiers: {
-          preventOverflow: {
-            enabled: false
-          }
-        }
-      }}
+    <Tooltip
+      content={overlayText}
+      side={placement || 'bottom'}
+      delay={showDelay}
+      disabled={formik?.isSubmitting}
     >
       {noWrapper ? children : <span>{children}</span>}
-    </OverlayTrigger>
+    </Tooltip>
   )
 }

components/adv-post-form.js

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
-import AccordianItem from './accordian-item'
-import { Input, InputUserSuggest, VariableInput, Checkbox } from './form'
-import InputGroup from 'react-bootstrap/InputGroup'
+import AccordionItem from './accordion-item'
+import { Input, InputAddon, InputUserSuggest, VariableInput, Checkbox } from './form'
 import { MAX_FORWARDS } from '@/lib/constants'
 import { DEFAULT_CROSSPOSTING_RELAYS } from '@/lib/nostr'
 import Info from './info'
@@ -34,7 +33,7 @@ export default function AdvPostForm ({ children, item, storageKeyPrefix }) {
     const isDirty = formik?.values.forward?.[0].nym !== '' || formik?.values.forward?.[0].pct !== '' ||
       (router.query?.type === 'link' && formik?.values.text !== '')
 
-    // if the adv post form is dirty on first render, show the accordian
+    // if the adv post form is dirty on first render, show the accordion
     if (isDirty) {
       setShow(FormStatus.DIRTY)
     }
@@ -54,7 +53,7 @@ export default function AdvPostForm ({ children, item, storageKeyPrefix }) {
   }, [formik?.values, storageKeyPrefix])
 
   useEffect(() => {
-    // force show the accordian if there is an error and the form is submitting
+    // force show the accordion if there is an error and the form is submitting
     const hasError = formik?.errors?.forward?.length > 0
     // if it's open we don't want to collapse on submit
     setShow(show => hasError && formik?.isSubmitting ? FormStatus.ERROR : show)
@@ -101,7 +100,7 @@ export default function AdvPostForm ({ children, item, storageKeyPrefix }) {
   }
 
   return (
-    <AccordianItem
+    <AccordionItem
       header={<div style={{ fontWeight: 'bold', fontSize: '92%' }}>options</div>}
       show={show}
       body={
@@ -117,20 +116,20 @@ export default function AdvPostForm ({ children, item, storageKeyPrefix }) {
           >
             {({ index, AppendColumn }) => {
               return (
-                <div key={index} className='d-flex flex-row'>
+                <div key={index} className='flex flex-row'>
                   <InputUserSuggest
                     name={`forward[${index}].nym`}
-                    prepend={<InputGroup.Text>@</InputGroup.Text>}
+                    prepend={<InputAddon>@</InputAddon>}
                     showValid
-                    groupClassName={`${styles.name} me-3 mb-0`}
+                    groupClassName={`${styles.name} me-4 mb-0`}
                   />
                   <Input
                     name={`forward[${index}].pct`}
                     type='number'
                     step={5}
                     min={1}
                     max={100}
-                    append={<InputGroup.Text className='text-monospace'>%</InputGroup.Text>}
+                    append={<InputAddon className='font-mono'>%</InputAddon>}
                     groupClassName={`${styles.percent} mb-0`}
                     AppendColumn={AppendColumn}
                   />
@@ -141,7 +140,7 @@ export default function AdvPostForm ({ children, item, storageKeyPrefix }) {
           {me && itemType &&
             <Checkbox
               label={
-                <div className='d-flex align-items-center'>crosspost to nostr
+                <div className='flex items-center'>crosspost to nostr
                   <Info>
                     <ul>
                       {renderCrosspostDetails(itemType)}

components/adv-post-form.module.css

@@ -1,19 +1,26 @@
+@layer components {
+
+/* Both flex items must shrink below their inputs' intrinsic width on narrow
+   screens. */
 .name {
   display: flex;
   flex: 1 1 60%;
   height: fit-content;
   flex-flow: column;
+  min-width: 0;
 }
 
 .percent {
   display: flex;
   flex: 0 1 fit-content;
   height: fit-content;
+  min-width: 0;
 }
 
 .boostMax small {
   font-weight: 400;
   margin-left: 0.25rem;
   margin-right: 0.25rem;
   opacity: 0.5;
-}
+}
+}

components/avatar.js

@@ -1,14 +1,14 @@
 import { useRef, useState } from 'react'
 import AvatarEditor from 'react-avatar-editor'
-import Button from 'react-bootstrap/Button'
-import BootstrapForm from 'react-bootstrap/Form'
+import Button from '@/components/ui/button'
+import { Slider } from '@/components/form'
 import EditImage from '@/svgs/image-edit-fill.svg'
 import Moon from '@/svgs/moon-fill.svg'
 import { useShowModal } from './modal'
 import { FileUpload } from './file-upload'
 import { gql } from '@apollo/client'
 import { useMutation } from '@apollo/client/react'
-import { useToast } from './toast'
+import { useToast } from '@/components/ui/toast'
 
 export default function Avatar ({ onSuccess }) {
   const [cropPhoto] = useMutation(gql`
@@ -25,7 +25,7 @@ export default function Avatar ({ onSuccess }) {
     const ref = useRef()
 
     return (
-      <div className='text-end mt-1 p-4'>
+      <div className='text-end mt-1 p-6'>
         <AvatarEditor
           ref={ref} width={200} height={200}
           image={file}
@@ -35,13 +35,14 @@ export default function Avatar ({ onSuccess }) {
             height: 'auto'
           }}
         />
-        <BootstrapForm.Group controlId='formBasicRange'>
-          <BootstrapForm.Range
-            onChange={e => setScale(parseFloat(e.target.value))}
-            min={1} max={2} step='0.05'
-            // defaultValue={scale}
+        <div>
+          {/* Keep the thumb and crop scale aligned on the first render. */}
+          <Slider
+            min={1} max={2} step={0.05}
+            defaultValue={1}
+            onValueChange={setScale}
           />
-        </BootstrapForm.Group>
+        </div>
         <Button
           onClick={async () => {
             const rect = ref.current.getCroppingRect()
@@ -118,7 +119,8 @@ export default function Avatar ({ onSuccess }) {
         setUploading(true)
       }}
     >
-      <div className='position-absolute p-1 bg-dark pointer' style={{ bottom: '0', right: '0' }}>
+      {/* deliberately static across themes: the chip backs the fill-white icons */}
+      <div className='absolute p-1 bg-dark pointer' style={{ bottom: '0', right: '0' }}>
         {uploading
           ? <Moon className='fill-white spin' />
           : <EditImage className='fill-white' />}