From 237907de41e8eba8ecdb7620f5651debf2ae2885 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Thu, 13 Feb 2025 15:09:55 +0100
Subject: [PATCH] feat(ui): add hover card for project environments in
 dashboard

---
 app/Http/Controllers/InertiaController.php    | 18 ++++-
 resources/js/Pages/Dashboard.vue              | 10 ++-
 resources/js/components/ResourceBox.vue       | 68 +++++++++++++++----
 .../js/components/ui/hover-card/HoverCard.vue | 14 ++++
 .../ui/hover-card/HoverCardContent.vue        | 37 ++++++++++
 .../ui/hover-card/HoverCardTrigger.vue        | 11 +++
 .../js/components/ui/hover-card/index.ts      |  3 +
 .../js/components/ui/menubar/Menubar.vue      | 35 ++++++++++
 .../ui/menubar/MenubarCheckboxItem.vue        | 40 +++++++++++
 .../components/ui/menubar/MenubarContent.vue  | 43 ++++++++++++
 .../js/components/ui/menubar/MenubarGroup.vue | 11 +++
 .../js/components/ui/menubar/MenubarItem.vue  | 35 ++++++++++
 .../js/components/ui/menubar/MenubarLabel.vue | 13 ++++
 .../js/components/ui/menubar/MenubarMenu.vue  | 11 +++
 .../ui/menubar/MenubarRadioGroup.vue          | 20 ++++++
 .../ui/menubar/MenubarRadioItem.vue           | 40 +++++++++++
 .../ui/menubar/MenubarSeparator.vue           | 19 ++++++
 .../components/ui/menubar/MenubarShortcut.vue | 14 ++++
 .../js/components/ui/menubar/MenubarSub.vue   | 19 ++++++
 .../ui/menubar/MenubarSubContent.vue          | 39 +++++++++++
 .../ui/menubar/MenubarSubTrigger.vue          | 30 ++++++++
 .../components/ui/menubar/MenubarTrigger.vue  | 29 ++++++++
 resources/js/components/ui/menubar/index.ts   | 15 ++++
 resources/js/types/ProjectType.ts             |  3 +
 24 files changed, 556 insertions(+), 21 deletions(-)
 create mode 100644 resources/js/components/ui/hover-card/HoverCard.vue
 create mode 100644 resources/js/components/ui/hover-card/HoverCardContent.vue
 create mode 100644 resources/js/components/ui/hover-card/HoverCardTrigger.vue
 create mode 100644 resources/js/components/ui/hover-card/index.ts
 create mode 100644 resources/js/components/ui/menubar/Menubar.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarCheckboxItem.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarContent.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarGroup.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarItem.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarLabel.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarMenu.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarRadioGroup.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarRadioItem.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarSeparator.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarShortcut.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarSub.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarSubContent.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarSubTrigger.vue
 create mode 100644 resources/js/components/ui/menubar/MenubarTrigger.vue
 create mode 100644 resources/js/components/ui/menubar/index.ts

diff --git a/app/Http/Controllers/InertiaController.php b/app/Http/Controllers/InertiaController.php
index 2f5d2cbf8b..95997f731e 100644
--- a/app/Http/Controllers/InertiaController.php
+++ b/app/Http/Controllers/InertiaController.php
@@ -11,7 +11,20 @@ class InertiaController extends Controller
     public function dashboard()
     {
         $servers = Server::isUsable()->get();
-
+        $projects = Project::ownedByCurrentTeam()->orderBy('created_at')->with('environments')->get();
+        $projects = $projects->map(function ($project) {
+            return [
+                'name' => $project->name,
+                'description' => $project->description,
+                'uuid' => $project->uuid,
+                'environments' => $project->environments()->get()->map(function ($environment) {
+                    return [
+                        'name' => $environment->name,
+                        'uuid' => $environment->uuid,
+                    ];
+                }),
+            ];
+        });
         $destinations = collect($servers)->flatMap(function ($server) {
             return $server->destinations();
         });
@@ -30,9 +43,8 @@ public function dashboard()
                 'uuid' => $server->uuid,
             ];
         });
-
         return Inertia::render('Dashboard', [
-            'projects' => Project::ownedByCurrentTeam()->orderBy('created_at')->get(['name', 'description', 'uuid']),
+            'projects' => $projects,
             // Should not add proxy
             'servers' => $servers,
             'sources' => currentTeam()->sources(),
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 3c3daaf293..22a8543e5f 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -6,7 +6,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import ResourceBox from '@/components/ResourceBox.vue'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 import MainView from '@/components/MainView.vue'
-
+import {
+    HoverCard,
+    HoverCardContent,
+    HoverCardTrigger,
+} from '@/components/ui/hover-card'
 
 import type { User } from '@/types/UserType'
 import type { Project } from '@/types/ProjectType'
@@ -111,7 +115,7 @@ const breadcrumb = ref<CustomBreadcrumbItem[]>([
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-2">
                     <div v-for="project in projects" :key="project.uuid">
                         <ResourceBox type="project" :href="route('next_project', project.uuid)" :name="project.name"
-                            :description="project.description" />
+                            :description="project.description" :environments="project.environments" />
                     </div>
                     <div v-for="server in servers" :key="server.uuid">
                         <ResourceBox type="server" :href="route('next_project', server.uuid)" :name="server.name"
@@ -161,7 +165,7 @@ const breadcrumb = ref<CustomBreadcrumbItem[]>([
                     <div class="resource-box-container">
                         <div v-for="project in projects" :key="project.uuid">
                             <ResourceBox type="project" :href="route('next_project', project.uuid)" :name="project.name"
-                                :description="project.description" />
+                                :description="project.description" :environments="project.environments" />
                         </div>
                         <ResourceBox :new="true" type="project" :href="route('next_projects')" name="New Project" />
                     </div>
diff --git a/resources/js/components/ResourceBox.vue b/resources/js/components/ResourceBox.vue
index de8190a166..7e9002d2ed 100644
--- a/resources/js/components/ResourceBox.vue
+++ b/resources/js/components/ResourceBox.vue
@@ -2,6 +2,8 @@
 import { Link } from '@inertiajs/vue3'
 import { Server, GitBranch, Map, BriefcaseBusiness, Plus, Earth } from 'lucide-vue-next'
 import { computed } from 'vue';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
+import { Environment } from '@/types/EnvironmentType';
 
 const props = defineProps<{
     type: 'project' | 'server' | 'source' | 'destination' | 'environment';
@@ -9,9 +11,12 @@ const props = defineProps<{
     name: string;
     description?: string;
     new?: boolean;
+    environments?: Environment[];
 }>();
 
 const isNew = computed(() => props.new)
+const environments = computed(() => props.environments)
+console.log(environments.value)
 </script>
 
 <template>
@@ -24,20 +29,53 @@ const isNew = computed(() => props.new)
             </div>
         </div>
     </div>
-    <Link prefetch v-else :href="href"
-        class="flex rounded-r-xl bg-coolgray-100 border dark:border-black cursor-pointer h-24 group">
-    <div class=" text-xs text-muted-foreground group-hover:dark:text-white font-bold h-full bg-coolgray-200 p-2
-        group-hover:bg-coollabs rounded-l-xl transition-all">
-        <BriefcaseBusiness :size="20" v-if="type === 'project'" />
-        <Server :size="20" v-else-if="type === 'server'" />
-        <GitBranch :size="20" v-else-if="type === 'source'" />
-        <Map :size="20" v-else-if="type === 'destination'" />
-        <Earth :size="20" v-else-if="type === 'environment'" />
-    </div>
-    <div class="flex flex-col p-2">
-        <div class="text-sm font-bold text-foreground">{{ name }}</div>
-        <p class="text-xs text-muted-foreground group-hover:dark:text-white font-bold">{{ description
-            }}</p>
+    <div v-else>
+        <HoverCard v-if="type === 'project' && environments" :open-delay="100" :close-delay="100">
+            <HoverCardTrigger>
+                <Link prefetch :href="href"
+                    class="flex rounded-r-xl bg-coolgray-100 border dark:border-black cursor-pointer h-24 group">
+                <div class=" text-xs text-muted-foreground group-hover:dark:text-white font-bold h-full bg-coolgray-200 p-2
+            group-hover:bg-coollabs rounded-l-xl transition-all">
+                    <BriefcaseBusiness :size="20" v-if="type === 'project'" />
+                    <Server :size="20" v-else-if="type === 'server'" />
+                    <GitBranch :size="20" v-else-if="type === 'source'" />
+                    <Map :size="20" v-else-if="type === 'destination'" />
+                    <Earth :size="20" v-else-if="type === 'environment'" />
+                </div>
+                <div class="flex flex-col p-2">
+                    <div class="text-sm font-bold text-foreground">{{ name }}</div>
+                    <p class="text-xs text-muted-foreground group-hover:dark:text-white font-bold">{{ description
+                        }}</p>
+                </div>
+                </Link>
+            </HoverCardTrigger>
+            <HoverCardContent class="w-64 p-2 rounded-xl dark:bg-coolgray-100 shadow-xl dark:border-black"
+                :side-offset="5" align="center">
+                <h3 class="text-sm font-bold text-foreground pb-2 px-2">Environments</h3>
+                <div v-for="environment in environments" :key="environment.uuid" class="flex flex-col gap-2 text-xs">
+                    <Link class="hover:dark:bg-coolgray-300 p-2 rounded-md flex gap-2 items-center"
+                        :href="route('next_project', environment.uuid)">
+                    <Earth :size="16" class="text-muted-foreground/60" />
+                    {{ environment.name }}
+                    </Link>
+                </div>
+            </HoverCardContent>
+        </HoverCard>
+        <Link v-else prefetch :href="href"
+            class="flex rounded-r-xl bg-coolgray-100 border dark:border-black cursor-pointer h-24 group">
+        <div class=" text-xs text-muted-foreground group-hover:dark:text-white font-bold h-full bg-coolgray-200 p-2
+            group-hover:bg-coollabs rounded-l-xl transition-all">
+            <BriefcaseBusiness :size="20" v-if="type === 'project'" />
+            <Server :size="20" v-else-if="type === 'server'" />
+            <GitBranch :size="20" v-else-if="type === 'source'" />
+            <Map :size="20" v-else-if="type === 'destination'" />
+            <Earth :size="20" v-else-if="type === 'environment'" />
+        </div>
+        <div class="flex flex-col p-2">
+            <div class="text-sm font-bold text-foreground">{{ name }}</div>
+            <p class="text-xs text-muted-foreground group-hover:dark:text-white font-bold">{{ description
+                }}</p>
+        </div>
+        </Link>
     </div>
-    </Link>
 </template>
diff --git a/resources/js/components/ui/hover-card/HoverCard.vue b/resources/js/components/ui/hover-card/HoverCard.vue
new file mode 100644
index 0000000000..f17c9d1ffa
--- /dev/null
+++ b/resources/js/components/ui/hover-card/HoverCard.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { HoverCardRoot, type HoverCardRootEmits, type HoverCardRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<HoverCardRootProps>()
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>
diff --git a/resources/js/components/ui/hover-card/HoverCardContent.vue b/resources/js/components/ui/hover-card/HoverCardContent.vue
new file mode 100644
index 0000000000..521c54b16a
--- /dev/null
+++ b/resources/js/components/ui/hover-card/HoverCardContent.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+    HoverCardContent,
+    type HoverCardContentProps,
+    HoverCardPortal,
+    useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+    defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        sideOffset: 4,
+    },
+)
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <HoverCardPortal>
+        <HoverCardContent v-bind="forwardedProps" :class="cn(
+            'z-50 w-64 rounded-md border border-neutral-200 bg-white p-4 text-neutral-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
+            props.class,
+        )
+            ">
+            <slot />
+        </HoverCardContent>
+    </HoverCardPortal>
+</template>
diff --git a/resources/js/components/ui/hover-card/HoverCardTrigger.vue b/resources/js/components/ui/hover-card/HoverCardTrigger.vue
new file mode 100644
index 0000000000..3e300b95b8
--- /dev/null
+++ b/resources/js/components/ui/hover-card/HoverCardTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { HoverCardTrigger, type HoverCardTriggerProps } from 'radix-vue'
+
+const props = defineProps<HoverCardTriggerProps>()
+</script>
+
+<template>
+  <HoverCardTrigger v-bind="props">
+    <slot />
+  </HoverCardTrigger>
+</template>
diff --git a/resources/js/components/ui/hover-card/index.ts b/resources/js/components/ui/hover-card/index.ts
new file mode 100644
index 0000000000..9e4ccc2aa4
--- /dev/null
+++ b/resources/js/components/ui/hover-card/index.ts
@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
diff --git a/resources/js/components/ui/menubar/Menubar.vue b/resources/js/components/ui/menubar/Menubar.vue
new file mode 100644
index 0000000000..525c587237
--- /dev/null
+++ b/resources/js/components/ui/menubar/Menubar.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  MenubarRoot,
+  type MenubarRootEmits,
+  type MenubarRootProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRoot
+    v-bind="forwarded"
+    :class="
+      cn(
+        'flex h-10 items-center gap-x-1 rounded-md border border-neutral-200 bg-white p-1 dark:border-neutral-800 dark:bg-neutral-950',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarRoot>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarCheckboxItem.vue b/resources/js/components/ui/menubar/MenubarCheckboxItem.vue
new file mode 100644
index 0000000000..c15733c466
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarCheckboxItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+  MenubarCheckboxItem,
+  type MenubarCheckboxItemEmits,
+  type MenubarCheckboxItemProps,
+  MenubarItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Check class="w-4 h-4" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarCheckboxItem>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarContent.vue b/resources/js/components/ui/menubar/MenubarContent.vue
new file mode 100644
index 0000000000..fc25e7b2ca
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarContent.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  MenubarContent,
+  type MenubarContentProps,
+  MenubarPortal,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+  defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    align: 'start',
+    alignOffset: -4,
+    sideOffset: 8,
+  },
+)
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarContent
+      v-bind="forwardedProps"
+      :class="
+        cn(
+          'z-50 min-w-48 overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarContent>
+  </MenubarPortal>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarGroup.vue b/resources/js/components/ui/menubar/MenubarGroup.vue
new file mode 100644
index 0000000000..853976b5e8
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarGroup.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { MenubarGroup, type MenubarGroupProps } from 'radix-vue'
+
+const props = defineProps<MenubarGroupProps>()
+</script>
+
+<template>
+  <MenubarGroup v-bind="props">
+    <slot />
+  </MenubarGroup>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarItem.vue b/resources/js/components/ui/menubar/MenubarItem.vue
new file mode 100644
index 0000000000..846ed7d3a8
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarItem.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  MenubarItem,
+  type MenubarItemEmits,
+  type MenubarItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const emits = defineEmits<MenubarItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </MenubarItem>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarLabel.vue b/resources/js/components/ui/menubar/MenubarLabel.vue
new file mode 100644
index 0000000000..574ce49694
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+</script>
+
+<template>
+  <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+    <slot />
+  </MenubarLabel>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarMenu.vue b/resources/js/components/ui/menubar/MenubarMenu.vue
new file mode 100644
index 0000000000..fec5ee5573
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarMenu.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { MenubarMenu, type MenubarMenuProps } from 'radix-vue'
+
+const props = defineProps<MenubarMenuProps>()
+</script>
+
+<template>
+  <MenubarMenu v-bind="props">
+    <slot />
+  </MenubarMenu>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarRadioGroup.vue b/resources/js/components/ui/menubar/MenubarRadioGroup.vue
new file mode 100644
index 0000000000..60a8cd1d9e
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarRadioGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {
+  MenubarRadioGroup,
+  type MenubarRadioGroupEmits,
+  type MenubarRadioGroupProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+
+const props = defineProps<MenubarRadioGroupProps>()
+
+const emits = defineEmits<MenubarRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarRadioGroup v-bind="forwarded">
+    <slot />
+  </MenubarRadioGroup>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarRadioItem.vue b/resources/js/components/ui/menubar/MenubarRadioItem.vue
new file mode 100644
index 0000000000..66672191fa
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarRadioItem.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
+import {
+  MenubarItemIndicator,
+  MenubarRadioItem,
+  type MenubarRadioItemEmits,
+  type MenubarRadioItemProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarRadioItem
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarItemIndicator>
+        <Circle class="h-2 w-2 fill-current" />
+      </MenubarItemIndicator>
+    </span>
+    <slot />
+  </MenubarRadioItem>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarSeparator.vue b/resources/js/components/ui/menubar/MenubarSeparator.vue
new file mode 100644
index 0000000000..8eceb683c7
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSeparator :class=" cn('-mx-1 my-1 h-px bg-neutral-100 dark:bg-neutral-800', props.class)" v-bind="forwardedProps" />
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarShortcut.vue b/resources/js/components/ui/menubar/MenubarShortcut.vue
new file mode 100644
index 0000000000..2968a91cb9
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-neutral-500 dark:text-neutral-400', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarSub.vue b/resources/js/components/ui/menubar/MenubarSub.vue
new file mode 100644
index 0000000000..6b76cd3e24
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarSub.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { MenubarSub, type MenubarSubEmits, useForwardPropsEmits } from 'radix-vue'
+
+interface MenubarSubRootProps {
+  defaultOpen?: boolean
+  open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <MenubarSub v-bind="forwarded">
+    <slot />
+  </MenubarSub>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarSubContent.vue b/resources/js/components/ui/menubar/MenubarSubContent.vue
new file mode 100644
index 0000000000..b9a40ce412
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarSubContent.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  MenubarPortal,
+  MenubarSubContent,
+  type MenubarSubContentEmits,
+  type MenubarSubContentProps,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <MenubarPortal>
+    <MenubarSubContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'z-50 min-w-32 overflow-hidden rounded-md border border-neutral-200 bg-white p-1 text-neutral-950 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </MenubarSubContent>
+  </MenubarPortal>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarSubTrigger.vue b/resources/js/components/ui/menubar/MenubarSubTrigger.vue
new file mode 100644
index 0000000000..ae3b2a2f29
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarSubTrigger.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarSubTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+    <ChevronRight class="ml-auto h-4 w-4" />
+  </MenubarSubTrigger>
+</template>
diff --git a/resources/js/components/ui/menubar/MenubarTrigger.vue b/resources/js/components/ui/menubar/MenubarTrigger.vue
new file mode 100644
index 0000000000..c05050f8bc
--- /dev/null
+++ b/resources/js/components/ui/menubar/MenubarTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <MenubarTrigger
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[state=open]:bg-neutral-100 data-[state=open]:text-neutral-900 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[state=open]:bg-neutral-800 dark:data-[state=open]:text-neutral-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </MenubarTrigger>
+</template>
diff --git a/resources/js/components/ui/menubar/index.ts b/resources/js/components/ui/menubar/index.ts
new file mode 100644
index 0000000000..600c23ea83
--- /dev/null
+++ b/resources/js/components/ui/menubar/index.ts
@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
+export { default as MenubarContent } from './MenubarContent.vue'
+export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
+export { default as MenubarMenu } from './MenubarMenu.vue'
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
+export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
+export { default as MenubarSub } from './MenubarSub.vue'
+export { default as MenubarSubContent } from './MenubarSubContent.vue'
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
+export { default as MenubarTrigger } from './MenubarTrigger.vue'
diff --git a/resources/js/types/ProjectType.ts b/resources/js/types/ProjectType.ts
index d3ac6b60b3..be68979fa5 100644
--- a/resources/js/types/ProjectType.ts
+++ b/resources/js/types/ProjectType.ts
@@ -1,3 +1,5 @@
+import { Environment } from "./EnvironmentType";
+
 export interface Project {
     id: number;
     uuid: string;
@@ -6,5 +8,6 @@ export interface Project {
     team_id: number;
     created_at: string;
     updated_at: string;
+    environments: Environment[];
 }