Add catalog photo submissions

.github/workflows/build-and-deploy.yml

@@ -22,7 +22,17 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  format:
+    name: Format
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: Perdolique/automations/.github/actions/setup-pnpm@v3
+        with:
+          install-dependencies: true
+      - run: pnpm run format:check
+
   deploy:
+    needs: format
     uses: Perdolique/automations/.github/workflows/deploy.yml@v3
 
     with:

.husky/pre-commit

@@ -20,6 +20,7 @@ run_quietly() {
 	return "$status"
 }
 
+run_quietly 'Format check' vp run format:check
 run_quietly 'Markdown lint' vp run lint:markdown
 run_quietly 'Oxlint' vp run lint:oxlint:agent
 run_quietly 'Typecheck' vp run test:typecheck

.node-version

@@ -1 +1 @@
-v24.14
+v26.7

AGENTS.md

@@ -31,6 +31,7 @@
 
 ### TypeScript or Vue file changes
 
+- Run `vp run format` and wait for it to finish before starting the remaining checks.
 - `vp run test:typecheck`
 - `vp run test:unit:agent`
 - `vp run lint:oxlint:agent`

app/app.vue

@@ -12,6 +12,7 @@
       name: 'color-scheme',
       content: 'light dark'
     }],
+
     link: [{
       rel: 'icon',
       type: 'image/png',

app/assets/styles/reset.css

@@ -47,6 +47,17 @@ select {
   font: inherit;
 }
 
+/* Remove default fieldset styles */
+fieldset {
+  min-inline-size: 0;
+  padding: 0;
+  border: 0;
+}
+
+legend {
+  padding: 0;
+}
+
 /* Avoid text overflows */
 p,
 h1,

app/components/ActionPanel.vue

@@ -43,7 +43,6 @@
 
   const props = defineProps<Props>()
   const slots = useSlots()
-
   const hasMediaSlot = computed(() => slots.media !== undefined)
   const showIcon = computed(() => props.icon !== undefined && props.icon !== '')
   const showMedia = computed(() => hasMediaSlot.value || showIcon.value)

app/components/PerdHeading.vue

@@ -19,7 +19,6 @@
   }
 
   const { level } = defineProps<Props>()
-
   const tag = computed(() => `h${level}` as const)
 </script>
 

app/components/PerdSearchInput.vue

@@ -55,6 +55,7 @@
     name,
     placeholder
   } = defineProps<Props>()
+
   const emit = defineEmits<Emits>()
 
   const value = defineModel<string>({

app/components/TextInput.vue

@@ -9,44 +9,87 @@
       ref="input"
       v-model="value"
       :class="$style.input"
+      :aria-describedby="describedBy"
+      :aria-invalid="ariaInvalid"
+      :autocomplete="autocomplete"
       :disabled="disabled"
       :maxlength="maxlength"
       :name="name"
       :placeholder="placeholder"
       :required="required"
-      type="text"
-      autocomplete="off"
+      :type="type"
     >
+
+    <span v-if="hasHint" :id="hintId" :class="$style.hint">
+      {{ hint }}
+    </span>
+
+    <span
+      v-if="hasError"
+      :id="errorId"
+      :class="$style.error"
+      role="alert"
+    >
+      {{ error }}
+    </span>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { useId, useTemplateRef } from 'vue'
+  import { computed, useId, useTemplateRef } from 'vue'
 
   interface Props {
+    autocomplete?: string;
     disabled?: boolean;
+    error?: string;
+    hint?: string;
     label: string;
     maxlength?: number;
     name: string;
     placeholder?: string;
     required?: boolean;
+    type?: 'text' | 'url';
   }
 
   const {
+    autocomplete = 'off',
     disabled,
+    error,
+    hint,
     label,
     maxlength,
     name,
     placeholder,
-    required
+    required,
+    type = 'text'
   } = defineProps<Props>()
 
   const value = defineModel<string>({
     required: true
   })
 
-  const inputId = useId()
+  const componentId = useId()
+  const inputId = `${componentId}-input`
+  const hintId = `${componentId}-hint`
+  const errorId = `${componentId}-error`
   const input = useTemplateRef('input')
+  const hasHint = computed(() => hint !== undefined)
+  const hasError = computed(() => error !== undefined)
+  const ariaInvalid = computed(() => hasError.value || undefined)
+
+  const describedBy = computed(() => {
+    const ids = []
+
+    if (hasHint.value) {
+      ids.push(hintId)
+    }
+
+    if (hasError.value) {
+      ids.push(errorId)
+    }
+
+    return ids.length === 0 ? undefined : ids.join(' ')
+  })
 
   function focus() {
     input.value?.focus()
@@ -88,5 +131,18 @@
       outline-offset: 2px;
       box-shadow: var(--shadow-focus);
     }
+
+    &[aria-invalid='true'] {
+      border-color: var(--color-danger-primary);
+    }
+  }
+
+  .hint {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-14);
+  }
+
+  .error {
+    color: var(--color-danger-primary);
   }
 </style>