Restructure UX and seed a fully simulated organisation

Rework the dashboard, environment topology view, header navigation, and
status rendering, and standardise selects on a shadcn-vue component.

Replace the thin database seeder with a SimulatedEnvironmentSeeder that
builds a fully wired, mostly-running organisation (ACTIVE server fleet,
managed + GHCR registries, Gitea source provider, ClipBin app with
production/staging environments, services, slices, endpoints, managed
variables, build artifacts, and a completed/in-progress/failed operations
history) so the new UI renders against realistic data.

resources/js/components/ui/select/Select.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+    SelectRoot,
+    useForwardPropsEmits,
+    type SelectRootEmits,
+    type SelectRootProps,
+} from "radix-vue";
+
+const props = defineProps<SelectRootProps>();
+const emits = defineEmits<SelectRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+    <SelectRoot v-bind="forwarded">
+        <slot />
+    </SelectRoot>
+</template>

resources/js/components/ui/select/SelectContent.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import SelectScrollDownButton from "./SelectScrollDownButton.vue";
+import SelectScrollUpButton from "./SelectScrollUpButton.vue";
+import {
+    SelectContent,
+    type SelectContentEmits,
+    type SelectContentProps,
+    SelectPortal,
+    SelectViewport,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = withDefaults(
+    defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        position: "popper",
+    },
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <SelectPortal>
+        <SelectContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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',
+                    position === 'popper' &&
+                        'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+                    props.class,
+                )
+            "
+        >
+            <SelectScrollUpButton />
+            <SelectViewport
+                :class="
+                    cn(
+                        'p-1',
+                        position === 'popper' &&
+                            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+                    )
+                "
+            >
+                <slot />
+            </SelectViewport>
+            <SelectScrollDownButton />
+        </SelectContent>
+    </SelectPortal>
+</template>

resources/js/components/ui/select/SelectGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectGroup, type SelectGroupProps, useForwardProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectGroup v-bind="forwardedProps" :class="cn('p-1', props.class)">
+        <slot />
+    </SelectGroup>
+</template>

resources/js/components/ui/select/SelectItem.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { Check } from "lucide-vue-next";
+import {
+    SelectItem,
+    SelectItemIndicator,
+    type SelectItemProps,
+    SelectItemText,
+    useForwardProps,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                props.class,
+            )
+        "
+    >
+        <span class="absolute right-2 flex size-3.5 items-center justify-center">
+            <SelectItemIndicator>
+                <Check class="size-4" />
+            </SelectItemIndicator>
+        </span>
+        <SelectItemText>
+            <slot />
+        </SelectItemText>
+    </SelectItem>
+</template>

resources/js/components/ui/select/SelectLabel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectLabel, type SelectLabelProps } from "radix-vue";
+import { type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+        <slot />
+    </SelectLabel>
+</template>

resources/js/components/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import {
+    SelectScrollDownButton,
+    type SelectScrollDownButtonProps,
+    useForwardProps,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectScrollDownButton
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+    >
+        <slot>
+            <ChevronDown class="size-4" />
+        </slot>
+    </SelectScrollDownButton>
+</template>

resources/js/components/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronUp } from "lucide-vue-next";
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectScrollUpButton
+        v-bind="forwardedProps"
+        :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+    >
+        <slot>
+            <ChevronUp class="size-4" />
+        </slot>
+    </SelectScrollUpButton>
+</template>

resources/js/components/ui/select/SelectSeparator.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { SelectSeparator, type SelectSeparatorProps } from "radix-vue";
+import { type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+    <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

resources/js/components/ui/select/SelectTrigger.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-vue-next";
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+    <SelectTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[placeholder]:text-muted-foreground',
+                props.class,
+            )
+        "
+    >
+        <slot />
+        <SelectIcon as-child>
+            <ChevronDown class="size-4 opacity-50" />
+        </SelectIcon>
+    </SelectTrigger>
+</template>

resources/js/components/ui/select/SelectValue.vue

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

resources/js/components/ui/select/index.ts

@@ -0,0 +1,10 @@
+export { default as Select } from "./Select.vue";
+export { default as SelectContent } from "./SelectContent.vue";
+export { default as SelectGroup } from "./SelectGroup.vue";
+export { default as SelectItem } from "./SelectItem.vue";
+export { default as SelectLabel } from "./SelectLabel.vue";
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue";
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue";
+export { default as SelectSeparator } from "./SelectSeparator.vue";
+export { default as SelectTrigger } from "./SelectTrigger.vue";
+export { default as SelectValue } from "./SelectValue.vue";