Update API to use env vars and general type fixes

app/components/Header.tsx

@@ -10,10 +10,10 @@ 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'
 
@@ -53,7 +53,7 @@ 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)
 
   return (
     <div className="sticky top-0 z-20">
@@ -81,7 +81,7 @@ export default function Header({ currentRfd }: { currentRfd?: RfdItem }) {
           <Search open={open} onClose={() => setOpen(false)} />
           <Link
             to="/notes"
-            className="flex h-8 w-8 items-center justify-center rounded border text-quaternary bg-secondary border-secondary elevation-1 hover:bg-hover"
+            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>

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)
 

app/components/note/Editor.tsx

@@ -3,7 +3,6 @@ import { shikiToMonaco } from '@shikijs/monaco'
 import { useEffect } from 'react'
 import { getHighlighter } from 'shiki'
 
-// import asciidocLang from './asciidoc-lang.json'
 import theme from './oxide-dark.json'
 
 const EditorWrapper = ({

app/components/note/Sidebar.tsx

@@ -4,7 +4,7 @@ import cn from 'classnames'
 import { type ReactNode } from 'react'
 
 import Icon from '~/components/Icon'
-import { type NoteItem } from '~/routes/notes_'
+import { type NoteItem } from '~/routes/notes'
 
 const navLinkStyles = ({ isActive }: { isActive: boolean }) => {
   const activeStyle = isActive
@@ -35,23 +35,25 @@ export const SidebarIcon = () => (
   </svg>
 )
 
+interface HandleData {
+  notes: NoteItem[]
+}
+
 export const Sidebar = () => {
   const matches = useMatches()
 
-  const notes = matches && matches[1] && (matches[1].data.notes as NoteItem[])
+  const data = matches[1]?.data as HandleData
+  const notes = data.notes || undefined
 
   return (
     <nav className="300:max-800:max-w-[400px] 300:w-[80vw] flex h-full w-full flex-col justify-between space-y-6 border-r pb-4 border-secondary elevation-2 800:elevation-0 print:hidden">
       <div className="flex flex-col">
         {notes && (
           <div className="relative space-y-6 overflow-y-auto overflow-x-hidden pb-8">
             <div className="mt-0 flex h-14 items-center border-b px-4 border-secondary">
-              <NavLink
-                to="/"
-                className="flex items-center gap-2 text-sans-md text-secondary"
-              >
+              <Link to="/" className="flex items-center gap-2 text-sans-md text-secondary">
                 <Icon name="prev-arrow" size={12} className="text-tertiary" /> Back to RFDs
-              </NavLink>
+              </Link>
             </div>
 
             <LinkSection label="Published">

app/routes/_index.tsx

@@ -25,6 +25,7 @@ import cn from 'classnames'
 import dayjs from 'dayjs'
 import fuzzysort from 'fuzzysort'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
 import { ClientOnly } from '~/components/ClientOnly'
 import Container from '~/components/Container'
@@ -34,7 +35,6 @@ import FilterDropdown from '~/components/home/FilterDropdown'
 import StatusBadge from '~/components/StatusBadge'
 import { ExactMatch, SuggestedAuthors, SuggestedLabels } from '~/components/Suggested'
 import { useIsOverflow } from '~/hooks/use-is-overflow'
-import { useKey } from '~/hooks/use-key'
 import { useRootLoaderData } from '~/root'
 import { rfdSortCookie } from '~/services/cookies.server'
 import type { RfdListItem } from '~/services/rfd.server'
@@ -190,7 +190,7 @@ export default function Index() {
     return false
   }, [inputEl])
 
-  useKey('/', focusInput)
+  useHotkeys('/', focusInput)
 
   const fetcher = useFetcher()
   const submitSortOrder = (newSortAttr: SortAttr) => {

app/routes/notes_.$id.delete.tsx → app/routes/notes.$id.delete.tsx

@@ -14,7 +14,7 @@ export const action: ActionFunction = async ({ request, params }) => {
 
   if (!user) throw new Response('User not found', { status: 401 })
 
-  const response = await fetch(`http://localhost:8000/notes/${params.id}`, {
+  const response = await fetch(`${process.env.NOTES_API}/notes/${params.id}`, {
     method: 'DELETE',
     headers: {
       'x-api-key': process.env.NOTES_API_KEY || '',

app/routes/notes.$id.publish.tsx

@@ -16,7 +16,7 @@ export async function action({ request, params }: ActionArgs) {
 
   const { publish } = await request.json()
 
-  const response = await fetch(`http://localhost:8000/notes/${params.id}/publish`, {
+  const response = await fetch(`${process.env.NOTES_API}/notes/${params.id}/publish`, {
     method: 'POST',
     headers: {
       'x-api-key': process.env.NOTES_API_KEY || '',

app/routes/notes_.$id_.edit.tsx → app/routes/notes.$id_.edit.tsx

@@ -16,7 +16,7 @@ import { Sidebar } from '~/components/note/Sidebar'
 import { isAuthenticated } from '~/services/authn.server'
 
 export const loader: LoaderFunction = async ({ params: { id } }) => {
-  const response = await fetch(`http://localhost:8000/notes/${id}`, {
+  const response = await fetch(`${process.env.NOTES_API}/notes/${id}`, {
     headers: {
       'x-api-key': process.env.NOTES_API_KEY || '',
     },
@@ -37,7 +37,7 @@ export const action: ActionFunction = async ({ request, params }) => {
     const user = await isAuthenticated(request)
     if (!user) throw new Response('User not found', { status: 401 })
 
-    const response = await fetch(`http://localhost:8000/notes/${params.id}`, {
+    const response = await fetch(`${process.env.NOTES_API}/notes/${params.id}`, {
       method: 'PUT',
       headers: {
         'x-api-key': process.env.NOTES_API_KEY || '',

app/routes/notes_._index.tsx → app/routes/notes._index.tsx

@@ -15,9 +15,9 @@ export const loader: LoaderFunction = async ({ request }) => {
 
   if (!user) throw new Response('Not authorized', { status: 401 })
 
-  console.log(`http://localhost:8000/user/${user.id}`)
+  console.log(`${process.env.NOTES_API}/user/${user.id}`)
 
-  const response = await fetch(`http://localhost:8000/user/${user.id}`, {
+  const response = await fetch(`${process.env.NOTES_API}/user/${user.id}`, {
     headers: {
       'x-api-key': process.env.NOTES_API_KEY || '',
     },
@@ -27,6 +27,8 @@ export const loader: LoaderFunction = async ({ request }) => {
   }
   const data = await response.json()
 
+  console.log('REDIRECT')
+
   if (data.length > 0) {
     return redirect(`/notes/${data[0].id}/edit`)
   } else {

app/routes/notes_.new.tsx → app/routes/notes.new.tsx

@@ -14,7 +14,7 @@ export const action: ActionFunction = async ({ request }) => {
 
   if (!user) throw new Response('User not found', { status: 401 })
 
-  const response = await fetch('http://localhost:8000/notes', {
+  const response = await fetch('${process.env.NOTES_API}/notes', {
     method: 'POST',
     headers: {
       'x-api-key': process.env.NOTES_API_KEY || '',

app/routes/notes_.tsx → app/routes/notes.tsx

@@ -16,7 +16,7 @@ export const loader: LoaderFunction = async ({ request }) => {
 
   if (!user) throw new Response('Not authorized', { status: 401 })
 
-  const response = await fetch(`http://localhost:8000/user/${user.id}`, {
+  const response = await fetch(`${process.env.NOTES_API}/user/${user.id}`, {
     headers: {
       'x-api-key': process.env.NOTES_API_KEY || '',
     },
@@ -28,7 +28,6 @@ export const loader: LoaderFunction = async ({ request }) => {
   const data = await response.json()
   return {
     notes: data,
-    isMac: /Macintosh/i.test(request.headers.get('User-Agent') || ''),
     user,
   }
 }

app/styles/index.css

@@ -130,3 +130,39 @@ input[type='radio']:focus:not(:focus-visible),
 input[type='checkbox']:focus:not(:focus-visible) {
   @apply outline-0 ring-0;
 }
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 12px;
+  height: 12px;
+}
+
+.typing-indicator span {
+  display: block;
+  width: 3px;
+  height: 3px;
+  background-color: var(--content-accent);
+  border-radius: 50%;
+  animation: bounce 1.4s infinite both;
+}
+
+.typing-indicator span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes bounce {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+  }
+  40% {
+    transform: translateY(-4px);
+  }
+}