UX Papercuts 3: use absolute paths, add error page with buttons to help refresh, etc (#615)

* Fix #593: don't prevent default on link click

* Use absolute/explicit path for settings
Trying to test fix for #594

* Broken: replace almost all relative URLs with absolute

* Clean up to use clean useDismiss with absolute path

* Merge branch 'main' into franknoirot/ux-papercuts-3a

* Add buttons to home, reload, clear, and bug report on error screen

src/routes/Onboarding/Introduction.tsx

@@ -15,15 +15,13 @@ import { isTauri } from 'lib/isTauri'
 import { useNavigate } from 'react-router-dom'
 import { paths } from 'Router'
 import { useEffect } from 'react'
-import { useDotDotSlash } from 'hooks/useDotDotSlash'
 
 function OnboardingWithNewFile() {
   const navigate = useNavigate()
-  const dotDotSlash = useDotDotSlash()
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.INDEX)
-  const { setCode } = useStore((s) => ({
-    setCode: s.setCode,
+  const { deferredSetCode } = useStore((s) => ({
+    deferredSetCode: s.deferredSetCode,
   }))
   const {
     settings: {
@@ -53,7 +51,7 @@ function OnboardingWithNewFile() {
             <div className="flex justify-between mt-6">
               <ActionButton
                 Element="button"
-                onClick={() => dismiss(dotDotSlash())}
+                onClick={dismiss}
                 icon={{
                   icon: faXmark,
                   bgClassName: 'bg-destroy-80',
@@ -67,7 +65,7 @@ function OnboardingWithNewFile() {
               <ActionButton
                 Element="button"
                 onClick={() => {
-                  setCode(bracket)
+                  deferredSetCode(bracket)
                   next()
                 }}
                 icon={{ icon: faArrowRight }}
@@ -91,7 +89,7 @@ function OnboardingWithNewFile() {
             <div className="flex justify-between mt-6">
               <ActionButton
                 Element="button"
-                onClick={() => dismiss(dotDotSlash())}
+                onClick={dismiss}
                 icon={{
                   icon: faXmark,
                   bgClassName: 'bg-destroy-80',
@@ -118,9 +116,9 @@ function OnboardingWithNewFile() {
 }
 
 export default function Introduction() {
-  const { setCode, code } = useStore((s) => ({
+  const { deferredSetCode, code } = useStore((s) => ({
     code: s.code,
-    setCode: s.setCode,
+    deferredSetCode: s.deferredSetCode,
   }))
   const {
     settings: {
@@ -136,11 +134,10 @@ export default function Introduction() {
       : ''
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.CAMERA)
-  const dotDotSlash = useDotDotSlash()
 
   useEffect(() => {
-    if (code === '') setCode(bracket)
-  }, [code, setCode])
+    if (code === '') deferredSetCode(bracket)
+  }, [code, deferredSetCode])
 
   return !(code !== '' && code !== bracket) ? (
     <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
@@ -180,7 +177,7 @@ export default function Introduction() {
         <div className="flex justify-between mt-6">
           <ActionButton
             Element="button"
-            onClick={() => dismiss(dotDotSlash())}
+            onClick={dismiss}
             icon={{
               icon: faXmark,
               bgClassName: 'bg-destroy-80',