added copy link button

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
-import { CircleAlert, Clock4, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next';
+import { CircleAlert, Clock4, EllipsisVertical, Link, MapPin, User, X } from 'lucide-vue-next';
 import { computed, ref, watch } from 'vue';
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 import Button from '../ui/button/Button.vue';
@@ -14,6 +14,7 @@ import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
 import { Calendar } from 'lucide-vue-next';
 import MemberCard from '../members/MemberCard.vue';
 import Spinner from '../ui/spinner/Spinner.vue';
+import { CopyLink } from '@/lib/copyLink';
 
 const route = useRoute();
 
@@ -178,17 +179,20 @@ defineExpose({ forceReload })
 <template>
     <div v-if="loaded">
         <!-- Header -->
-        <div class="flex items-center justify-between gap-3 border-b px-4 py-3 h-14">
+        <div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
-            <h2 class="text-lg font-semibold break-all">
+            <h2 class="text-lg font-semibold break-after-all">
                 {{ activeEvent?.name || 'Event' }}
             </h2>
-            <div class="flex gap-4 items-center">
+            <div class="flex gap-2 items-center">
                 <DropdownMenu v-if="canEditEvent">
                     <DropdownMenuTrigger>
-                        <button
+                        <Button variant="ghost" size="icon">
+                            <EllipsisVertical class="size-5" />
+                        </Button>
+                        <!-- <button
                             class="inline-flex flex-none size-8 items-center justify-center cursor-pointer rounded-md hover:bg-muted/40 transition">
                             <EllipsisVertical class="size-6" />
-                        </button>
+                        </button> -->
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
                         <DropdownMenuItem @click="emit('edit', activeEvent)">
@@ -202,11 +206,17 @@ defineExpose({ forceReload })
                         </DropdownMenuItem>
                     </DropdownMenuContent>
                 </DropdownMenu>
-                <button
+                <Button variant="ghost" size="icon" @click="CopyLink()">
-                    class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition cursor-pointer"
+                    <Link class="size-4" />
+                </Button>
+                <Button variant="ghost" size="icon" @click="emit('close')">
+                    <X class="size-5" />
+                </Button>
+                <!-- <button
+                    class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted transition cursor-pointer"
                     aria-label="Close" @click="emit('close')">
                     <X class="size-4" />
-                </button>
+                </button> -->
             </div>
         </div>
         <!-- Body -->
@@ -293,11 +303,9 @@ defineExpose({ forceReload })
         </div>
     </div>
     <div v-else class="flex justify-center h-full items-center">
-        <button
+        <Button variant="ghost" size="icon" @click="emit('close')">
-            class="absolute top-4 right-4 inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition cursor-pointer z-50"
+            <X class="size-5" />
-            aria-label="Close" @click="emit('close')">
+        </Button>
-            <X class="size-4" />
-        </button>
 
         <Spinner class="size-8"></Spinner>
     </div>

ui/src/pages/TrainingReport.vue

@@ -10,7 +10,7 @@ import {
     TableHeader,
     TableRow,
 } from '@/components/ui/table'
-import { ArrowUpDown, ChevronDown, ChevronUp, Funnel, Plus, Search, X } from 'lucide-vue-next';
+import { ArrowUpDown, ChevronDown, ChevronUp, Funnel, Link, Plus, Search, X } from 'lucide-vue-next';
 import Button from '@/components/ui/button/Button.vue';
 import TrainingReportForm from '@/components/trainingReport/trainingReportForm.vue';
 import Checkbox from '@/components/ui/checkbox/Checkbox.vue';
@@ -33,6 +33,7 @@ import {
     PaginationPrevious,
 } from '@/components/ui/pagination'
 import Tooltip from '@/components/tooltip/Tooltip.vue';
+import { CopyLink } from '@/lib/copyLink';
 
 enum sidePanelState { view, create, closed };
 
@@ -236,9 +237,14 @@ const expanded = ref<number>(null);
         <div v-if="focusedTrainingReport != null && sidePanel == sidePanelState.view" class="pl-9 my-3 border-l w-3/5">
             <div class="flex justify-between items-center">
                 <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Report Details</p>
-                <Button @click="closeTrainingReport" class="cursor-pointer" variant="ghost" size="icon">
+                <div class="flex items-center gap-2">
-                    <X class="size-6"></X>
+                    <Button class="cursor-pointer" variant="ghost" size="icon" @click="CopyLink()">
-                </Button>
+                        <Link class="size-4" />
+                    </Button>
+                    <Button @click="closeTrainingReport" class="cursor-pointer" variant="ghost" size="icon">
+                        <X class="size-6"></X>
+                    </Button>
+                </div>
             </div>
             <div v-if="TRLoaded" class="max-h-[70vh] overflow-auto scrollbar-themed my-5">
                 <div class="flex flex-col mb-5 border rounded-lg bg-muted/70 p-2 py-3 px-4">
@@ -251,7 +257,7 @@ const expanded = ref<number>(null);
                                 :member-id="focusedTrainingReport.created_by" />
                         <p v-else>{{ focusedTrainingReport.created_by_name === null ? "Unknown User" :
                             focusedTrainingReport.created_by_name
-                        }}</p>
+                            }}</p>
                         </p>
                     </div>
                 </div>