feat: added what's new to highlight new feature releases

src/App.vue

@@ -14,6 +14,7 @@ import TabProvider from "./providers/TabProvider";
 import DialogProvider from "./providers/DialogProvider";
 import DialogHandler from "./components/DialogHandler.vue";
 import UpdateHandler from "./components/UpdateHandler.vue";
+import WhatsNew from "./components/WhatsNew.vue";
 import { type as getOsType } from "@tauri-apps/api/os";
 
 const osType = ref("");
@@ -45,6 +46,7 @@ onMounted(() => {
                       <CommandPalette />
                       <DialogHandler />
                       <UpdateHandler />
+                      <WhatsNew />
                     </CommandPaletteProvider>
                   </TabProvider>
                 </PortForwardingProvider>

src/components/PortForwardingManager.vue

@@ -34,7 +34,7 @@ const openInBrowser = (portForwarding: ActivePortForwarding) => {
     <Dialog>
       <DialogTrigger as-child>
         <button
-          class="relative overflow-hidden flex justify-center flex-col w-full text-xs bg-orange-500 rounded-lg p-2 text-left hover:bg-orange-600"
+          class="text-foreground relative overflow-hidden flex justify-center flex-col w-full text-xs bg-orange-500 rounded-lg p-2 text-left hover:bg-orange-600"
         >
           <span
             >{{ activePortForwardings.length }} Active Port Forwarding{{

src/components/WhatsNew.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { injectStrict } from "@/lib/utils";
+import { SettingsContextStateKey } from "@/providers/SettingsContextProvider";
+import { getVersion } from "@tauri-apps/api/app";
+import metadata from "@/components/whats-new/metadata.json";
+
+const { settings } = injectStrict(SettingsContextStateKey);
+
+const shouldShowWhatsNew = ref(false);
+const currentVersion = ref<string | null>(null);
+const whatsNewComponent = ref<any>(null);
+
+onMounted(async () => {
+  const lastSeenVersion = settings.value.updates.whatsNew;
+  currentVersion.value = await getVersion();
+
+  if (
+    lastSeenVersion !== currentVersion.value &&
+    Object.keys(metadata).includes(currentVersion.value)
+  ) {
+    whatsNewComponent.value = defineAsyncComponent(
+      // eslint-disable-next-line security/detect-object-injection
+      () =>
+        import(
+          `@/components/whats-new/${
+            metadata[currentVersion.value as keyof typeof metadata]
+          }.vue`
+        )
+    );
+
+    shouldShowWhatsNew.value = true;
+  }
+});
+
+const storeLatestWhatsNew = (open: boolean) => {
+  if (!open) {
+    settings.value.updates.whatsNew = currentVersion.value;
+    shouldShowWhatsNew.value = false;
+  }
+};
+</script>
+<template>
+  <Dialog :open="shouldShowWhatsNew" @update:open="storeLatestWhatsNew">
+    <DialogContent class="min-w-[700px]">
+      <DialogHeader>
+        <DialogTitle>What's new in JET Pilot {{ currentVersion }}</DialogTitle>
+      </DialogHeader>
+      <component :is="whatsNewComponent" />
+    </DialogContent>
+  </Dialog>
+</template>

src/components/ui/dialog/Dialog.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import { DialogRoot, type DialogRootProps } from "radix-vue";
-
-const props = defineProps<DialogRootProps>();
+import { DialogRoot } from "radix-vue";
 </script>
 
 <template>
-  <DialogRoot v-bind="props">
+  <DialogRoot>
     <slot />
   </DialogRoot>
 </template>

src/components/whats-new/1-29-0.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <img
+      src="@/assets/whats-new/port-forwarding.gif"
+      alt="Port Forwarding"
+      class="w-full rounded-lg"
+    />
+    <h1 class="font-bold mt-5">Port Forwarding</h1>
+    <p class="text-sm">
+      You can now forward ports from Pods, Deployments and Services to your
+      local machine.
+    </p>
+  </div>
+</template>

src/components/whats-new/metadata.json

@@ -0,0 +1,3 @@
+{
+  "1.29.0": "1-29-0"
+}

src/providers/SettingsContextProvider.ts

@@ -37,6 +37,7 @@ export interface SettingsContextState {
     };
     updates: {
       checkOnStartup: boolean;
+      whatsNew: string | null;
     };
   };
 }
@@ -66,6 +67,7 @@ export default {
         },
         updates: {
           checkOnStartup: true,
+          whatsNew: null,
         },
       },
     });