feat: add setting for shell command

Added setting for specifying shell command, which defaults to /bin/sh

Fixes #2

package.json

@@ -20,7 +20,8 @@
     "@radix-icons/vue": "^1.0.0",
     "@tanstack/vue-table": "^8.11.0",
     "@tauri-apps/api": "1.4.0",
-    "@vueuse/core": "^10.7.0",
+    "@vee-validate/zod": "^4.12.5",
+    "@vueuse/core": "^10.7.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^3.0.6",
@@ -32,11 +33,13 @@
     "radix-vue": "^1.2.7",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
+    "vee-validate": "^4.12.5",
     "vite-svg-loader": "^5.1.0",
     "vue": "3.4.7",
     "vue-router": "^4.2.5",
     "xterm": "^5.3.0",
-    "xterm-addon-fit": "^0.8.0"
+    "xterm-addon-fit": "^0.8.0",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@semantic-release/git": "^10.0.1",

src/components/settings/Navigation.vue

@@ -4,6 +4,5 @@ import NavigationItem from "@/components/settings/NavigationItem.vue";
 <template>
   <nav class="flex flex-col space-y-1">
     <NavigationItem :to="{ name: 'SettingsGeneral' }" title="General" />
-    <NavigationItem :to="{ name: 'SettingsContexts' }" title="Contexts" />
   </nav>
 </template>

src/components/ui/form/FormControl.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { Slot } from 'radix-vue'
+import { useFormField } from './useFormField'
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

src/components/ui/form/FormDescription.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { useFormField } from './useFormField'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </p>
+</template>

src/components/ui/form/FormItem.vue

@@ -0,0 +1,25 @@
+<script lang="ts">
+import type { HTMLAttributes, InjectionKey } from 'vue'
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>
+</script>
+
+<script lang="ts" setup>
+import { provide } from 'vue'
+import { useId } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/form/FormLabel.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import type { LabelProps } from 'radix-vue'
+import { useFormField } from './useFormField'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    :class="cn(
+      error && 'text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>