chore: updated whats new for 1.30.0 release

package.json

@@ -22,10 +22,11 @@
     "@tanstack/vue-virtual": "^3.5.0",
     "@tauri-apps/api": "^1.5.4",
     "@vee-validate/zod": "^4.12.5",
-    "@vueuse/core": "^10.7.2",
+    "@vueuse/core": "^10.11.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "date-fns": "^3.0.6",
+    "embla-carousel-vue": "^8.3.0",
     "fuse.js": "^7.0.0",
     "js-yaml": "^4.1.0",
     "marked": "^9.1.6",

src-tauri/tauri.conf.json

@@ -65,8 +65,8 @@
     "windows": [
       {
         "title": "JET Pilot",
-        "width": 800,
-        "height": 600,
+        "width": 1120,
+        "height": 820,
         "resizable": true,
         "fullscreen": false,
         "decorations": true,

src/components/ui/carousel/Carousel.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { useProvideCarousel } from "./useCarousel";
+import type {
+  CarouselEmits,
+  CarouselProps,
+  WithClassAsProps,
+} from "./interface";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: "horizontal",
+});
+
+const emits = defineEmits<CarouselEmits>();
+
+const {
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+} = useProvideCarousel(props, emits);
+
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+});
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+
+  if (event.key === prevKey) {
+    event.preventDefault();
+    scrollPrev();
+
+    return;
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault();
+    scrollNext();
+  }
+}
+</script>
+
+<template>
+  <div
+    :class="cn('relative px-2', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot
+      :can-scroll-next
+      :can-scroll-prev
+      :carousel-api
+      :carousel-ref
+      :orientation
+      :scroll-next
+      :scroll-prev
+    />
+  </div>
+</template>

src/components/ui/carousel/CarouselContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div ref="carouselRef" class="overflow-hidden">
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

src/components/ui/carousel/CarouselItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useCarousel } from './useCarousel'
+import type { WithClassAsProps } from './interface'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/carousel/CarouselNext.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ArrowRightIcon } from "@radix-icons/vue";
+import { useCarousel } from "./useCarousel";
+import type { WithClassAsProps } from "./interface";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const props = defineProps<WithClassAsProps>();
+
+const { orientation, canScrollNext, scrollNext } = useCarousel();
+</script>
+
+<template>
+  <Button
+    :disabled="!canScrollNext"
+    :class="
+      cn(
+        'touch-manipulation absolute h-8 w-8 p-0',
+        orientation === 'horizontal'
+          ? '-right-12 top-1/2 -translate-y-1/2 mr-2'
+          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+        props.class
+      )
+    "
+    variant="default"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRightIcon class="h-4 w-4 text-current" />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>