Customize error screens

cypress/e2e/auth.cy.ts

@@ -35,7 +35,7 @@ describe('Auth', () => {
         cy.cssLogin();
 
         // Act
-        cy.ariaLabel('Logout').click();
+        cy.ariaLabel('Log out').click();
         cy.contains('[role="dialog"]', 'Are you sure you want to log out?').within(() => {
             cy.press('Ok');
         });

package.json

@@ -2,6 +2,7 @@
     "name": "ramen",
     "version": "0.0.0",
     "private": true,
+    "repository": "github:noeldemartin/ramen",
     "scripts": {
         "build": "vite build",
         "cy:dev": "concurrently --kill-others \"npm run test:serve-app\" \"npm run test:serve-pod\" \"npm run cy:open\"",

src/components/AppCookbook.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col items-center space-y-4">
+    <div class="flex flex-col items-center gap-4">
         <NoCookbook v-if="!$cookbook.hasCookbook()" />
         <NoRamen v-else-if="!$cookbook.hasRamen()" />
         <Ramen v-else />

src/components/AppLoginError.vue

@@ -1,20 +1,20 @@
 <template>
-    <div v-if="errorMessage" class="flex flex-col items-center">
+    <div v-if="errorMessage" class="flex flex-col items-center gap-4 p-8">
+        <i-twemoji-face-screaming-in-fear class="h-20 w-20" />
         <AGMarkdown
             as="h1"
             inline
             class="overflow-hidden overflow-ellipsis text-center text-3xl text-red-600"
             :text="errorMessage"
         />
-
-        <div class="mt-4 flex gap-3">
-            <TextButton @click="$solid.reconnect({ force: true })">
+        <div class="flex flex-col gap-3">
+            <TextButton color="danger" @click="$ui.loading($solid.reconnect({ force: true }))">
                 {{ $t('login.errorReconnect') }}
             </TextButton>
-            <TextButton @click="$solid.logout(true)">
+            <TextButton color="danger" @click="$ui.loading($solid.logout(true).then(() => $app.reload()))">
                 {{ $t('login.errorLogout') }}
             </TextButton>
-            <TextButton @click="$errors.inspect($solid.error)">
+            <TextButton color="danger" @click="$errors.inspect($solid.error)">
                 {{ $t('login.errorInspect') }}
             </TextButton>
         </div>

src/components/cookbook/NoCookbook.vue

@@ -1,9 +1,9 @@
 <template>
     <i-twemoji-cook class="h-20 w-20" />
-    <AGMarkdown lang-key="cookbook.notFound" class="text-3xl font-light" />
+    <AGMarkdown lang-key="cookbook.notFound" class="text-center text-3xl font-light leading-snug" />
     <AGForm
         :form="form"
-        class="flex items-center space-x-2"
+        class="mt-6 flex flex-col items-center gap-2 md:mt-0 md:flex-row"
         @submit="$ui.loading($t('cookbook.creating'), $cookbook.create(form.url))"
     >
         <TextButton submit>

src/components/cookbook/NoRamen.vue

@@ -1,6 +1,6 @@
 <template>
     <i-twemoji-crying-face class="h-20 w-20" />
-    <AGMarkdown class="text-3xl font-light" lang-key="cookbook.noRamen" />
+    <AGMarkdown lang-key="cookbook.noRamen" class="text-center text-3xl font-light leading-snug" />
     <TextButton @click="$ui.loading($t('cookbook.addingRamen'), $cookbook.learnRamen())">
         {{ $t('cookbook.addRamen') }}
     </TextButton>

src/components/cookbook/Ramen.vue

@@ -7,5 +7,5 @@
     >
         <i-twemoji-steaming-bowl class="h-40 w-40" />
     </a>
-    <AGMarkdown class="mt-8 text-center text-4xl font-light leading-snug" lang-key="cookbook.ramen" />
+    <AGMarkdown class="text-center text-4xl font-light leading-snug" lang-key="cookbook.ramen" />
 </template>

src/components/index.ts

@@ -5,11 +5,13 @@ import ConfirmModal from './overrides/ConfirmModal.vue';
 import ErrorReportModal from './overrides/ErrorReportModal.vue';
 import LoadingModal from './overrides/LoadingModal.vue';
 import SnackbarNotification from './overrides/SnackbarNotification.vue';
+import StartupCrash from './overrides/StartupCrash.vue';
 
 export const components = {
     [UIComponents.AlertModal]: AlertModal,
     [UIComponents.ConfirmModal]: ConfirmModal,
     [UIComponents.ErrorReportModal]: ErrorReportModal,
     [UIComponents.LoadingModal]: LoadingModal,
     [UIComponents.Snackbar]: SnackbarNotification,
+    [UIComponents.StartupCrash]: StartupCrash,
 };

src/components/inputs/TextButton.vue

@@ -1,6 +1,6 @@
 <template>
     <AGHeadlessButton
-        class="rounded-md px-3 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
+        class="flex items-center justify-center gap-1 rounded-md px-3 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
         :class="variantClasses"
         :disabled="disabled"
     >

src/components/modals/LoginErrorModal.vue

@@ -1,13 +1,12 @@
 <template>
-    <AGModal>
-        <AGModalTitle>
-            {{ $t('loginError.title') }}
-        </AGModalTitle>
+    <ModalWrapper :title="$t('loginError.title')">
         <AGMarkdown lang-key="loginError.description" />
-        <AGButton v-if="error" class="mt-2" @click="$errors.inspect(error)">
-            {{ $t('loginError.inspect') }}
-        </AGButton>
-    </AGModal>
+        <div v-if="error" class="mt-2 flex justify-center">
+            <TextButton color="danger" @click="$errors.inspect(error)">
+                {{ $t('loginError.inspect') }}
+            </TextButton>
+        </div>
+    </ModalWrapper>
 </template>
 
 <script setup lang="ts">

src/components/overrides/ErrorReportModal.vue

@@ -43,13 +43,18 @@
                         }: IAGErrorReportModalButtonsDefaultSlotProps"
                     >
                         <TextButton
+                            color="clear"
+                            class="group whitespace-nowrap"
                             :url="url"
-                            color="secondary"
-                            class="flex items-center gap-1"
+                            :aria-label="description"
                             @click="handler"
                         >
-                            <component :is="iconComponent" />
-                            {{ description }}
+                            <component :is="iconComponent" class="h-4 w-4" />
+                            <AGMeasured
+                                class="block w-0 overflow-hidden transition-[width] group-hover:w-[--width] group-focus:w-[--width]"
+                            >
+                                {{ description }}
+                            </AGMeasured>
                         </TextButton>
                     </template>
                 </AGErrorReportModalButtons>

src/components/overrides/StartupCrash.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="grid flex-grow place-items-center">
+        <div class="flex flex-col items-center gap-4 p-8">
+            <i-twemoji-face-screaming-in-fear class="mt-2 h-20 w-20" />
+            <h1 class="text-center text-4xl text-red-600">
+                {{ $t('startupCrash.title') }}
+            </h1>
+            <AGMarkdown :text="$t('startupCrash.message')" class="text-center text-gray-700" />
+            <div class="flex flex-col space-y-4">
+                <TextButton color="danger" @click="$ui.loading($app.reload())">
+                    {{ $t('startupCrash.reload') }}
+                </TextButton>
+                <TextButton
+                    v-if="$solid.isLoggedIn()"
+                    color="danger"
+                    @click="$ui.loading($app.reload({ autoReconnect: 'false' }))"
+                >
+                    {{ $t('startupCrash.reloadWithoutReconnect') }}
+                </TextButton>
+                <TextButton
+                    v-if="$solid.isLoggedIn()"
+                    color="danger"
+                    @click="$ui.loading($solid.logout(true).then(() => $app.reload()))"
+                >
+                    {{ $t('startupCrash.logout') }}
+                </TextButton>
+                <TextButton color="danger" @click="$errors.inspect($errors.startupErrors)">
+                    {{ $t('startupCrash.inspect') }}
+                </TextButton>
+            </div>
+        </div>
+    </div>
+</template>

src/lang/en.yaml

@@ -8,9 +8,9 @@ login:
     logout: Forget it
     reconnect: Log in again
     errorInfo: 'Error: {message}'
-    errorReconnect: Reconnect
-    errorLogout: Logout
-    errorInspect: Inspect
+    errorReconnect: Try again
+    errorLogout: Log out
+    errorInspect: View error details
 
 cookbook:
     create: Create cookbook
@@ -28,12 +28,23 @@ cookbook:
 header:
     account: Your Web Id is {webId}
     cookbook: Your recipes are stored in {url}
-    logout: Logout
+    logout: Log out
 
 footer:
     help: What is this?
 
 loginError:
     title: Login failed
     description: Something went wrong and it was not possible to log in.
-    inspect: View details
+    inspect: View error details
+
+startupCrash:
+    title: Something went wrong!
+    message: |
+        Something failed trying to start the application, but we don't know what :(.
+
+        Here's some things you can do:
+    reload: Try again
+    reloadWithoutReconnect: Try without reconnecting
+    logout: Log out
+    inspect: View error details