made more ticket components

2026-04-18 14:04:09 +02:00
parent 550c837c5e
commit fdf2af1ad3
15 changed files with 1574 additions and 1578 deletions
@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import FeatureComingSoonPanel from '@/components/FeatureComingSoonPanel.vue';
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle,
+} from '@/components/ui/card';
+import { frostedAsideCardClass } from '@/lib/ticket-styles';
+import type { TicketModel } from '@/types/models/ticket-model';
+import type { TicketRepositoryBranchModel } from '@/types/models/ticket-repository-branch-model';
+import type { TicketRepositoryPullRequestModel } from '@/types/models/ticket-repository-pull-request-model';
+
+const props = defineProps<{
+    repositoryBranches: TicketRepositoryBranchModel[];
+    repositoryPullRequests: TicketRepositoryPullRequestModel[];
+    ticket: TicketModel;
+}>();
+
+const repositoryBranchCount = computed(() =>
+    props.repositoryBranches.reduce(
+        (count, repositoryBranch) => count + repositoryBranch.branches.length,
+        0,
+    ),
+);
+
+const pullRequestCount = computed(() =>
+    props.repositoryPullRequests.reduce(
+        (count, repositoryPullRequest) =>
+            count + repositoryPullRequest.pull_requests.length,
+        0,
+    ),
+);
+
+const formatDateTime = (value: string): string => {
+    return new Intl.DateTimeFormat(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+    }).format(new Date(value));
+};
+</script>
+
+<template>
+    <div class="space-y-6">
+        <Card :class="frostedAsideCardClass">
+            <CardHeader>
+                <CardTitle
+                    class="font-display dark:text-foreground text-xl text-[#2d3335]"
+                >
+                    Snapshot
+                </CardTitle>
+                <CardDescription>
+                    Quick context for the ticket without scrolling through the
+                    full detail form.
+                </CardDescription>
+            </CardHeader>
+
+            <CardContent class="space-y-3">
+                <div
+                    class="dark:bg-muted/35 rounded-[1.25rem] bg-[#f1f4f5] px-4 py-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)]"
+                >
+                    <p
+                        class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
+                    >
+                        Assignee
+                    </p>
+                    <p
+                        class="dark:text-foreground mt-1 text-sm font-medium text-[#2d3335]"
+                    >
+                        {{ ticket.assignee?.name ?? 'Unassigned' }}
+                    </p>
+                </div>
+
+                <div
+                    class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
+                >
+                    <p
+                        class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
+                    >
+                        Author
+                    </p>
+                    <p
+                        class="dark:text-foreground mt-1 text-sm font-medium text-[#2d3335]"
+                    >
+                        {{ ticket.author?.name ?? 'No author' }}
+                    </p>
+                </div>
+
+                <div class="grid gap-3 sm:grid-cols-2 2xl:grid-cols-1">
+                    <div
+                        class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
+                    >
+                        <p
+                            class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
+                        >
+                            Branches
+                        </p>
+                        <p
+                            class="dark:text-foreground mt-1 text-lg font-semibold text-[#2d3335]"
+                        >
+                            {{ repositoryBranchCount }}
+                        </p>
+                    </div>
+
+                    <div
+                        class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
+                    >
+                        <p
+                            class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
+                        >
+                            Pull requests
+                        </p>
+                        <p
+                            class="dark:text-foreground mt-1 text-lg font-semibold text-[#2d3335]"
+                        >
+                            {{ pullRequestCount }}
+                        </p>
+                    </div>
+                </div>
+
+                <div
+                    class="dark:bg-muted/25 rounded-[1.25rem] bg-[#f8f9fa] px-4 py-3"
+                >
+                    <p
+                        class="dark:text-muted-foreground text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-[#5a6062]"
+                    >
+                        Last updated
+                    </p>
+                    <p
+                        class="dark:text-foreground mt-1 text-sm font-medium text-[#2d3335]"
+                    >
+                        {{ formatDateTime(ticket.updated_at) }}
+                    </p>
+                </div>
+            </CardContent>
+        </Card>
+
+        <FeatureComingSoonPanel
+            feature="Comments & discussion"
+            description="The Stitch design already reserves this full rail for threaded comments, collaboration, and follow-up context. The visual shell is in place here until the feature is wired."
+        />
+    </div>
+</template>