added my current attendance state to buttons

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -5,6 +5,7 @@ import { computed, ref } from 'vue';
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 import Button from '../ui/button/Button.vue';
 import { CalendarAttendance, setCalendarEventAttendance } from '@/api/calendar';
+import { useUserStore } from '@/stores/user';
 
 const props = defineProps<{
     event: CalendarEvent | null
@@ -38,6 +39,17 @@ const attending = computed<CalendarSignup[]>(() => { return activeEvent.value.ev
 const maybe = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.Maybe) })
 const declined = computed<CalendarSignup[]>(() => { return activeEvent.value.eventSignups.filter((s) => s.status == CalendarAttendance.NotAttending) })
 const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
+
+let user = useUserStore();
+const myAttendance = computed<CalendarSignup | null>(() => {
+    return activeEvent.value.eventSignups.find(
+        (s) => s.member_id === user.user.id
+    ) || null;
+});
+
+async function setAttendance(state: CalendarAttendance) {
+    setCalendarEventAttendance(activeEvent.value.id, state);
+}
 </script>
 
 <template>
@@ -54,15 +66,18 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
             </button>
         </div>
         <!-- Body -->
-        <div class="flex-1 flex flex-col items-center min-h-0 overflow-y-auto px-4 py-4 space-y-6">
+        <div class="flex-1 flex flex-col items-center min-h-0 overflow-y-auto px-4 py-4 space-y-6 w-full">
-            <section>
+            <section class="w-full">
-                <ButtonGroup>
+                <ButtonGroup class="flex w-full">
                     <Button variant="outline"
-                        @click="setCalendarEventAttendance(activeEvent.id, CalendarAttendance.Attending)">Going</Button>
+                        :class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
+                        @click="setAttendance(CalendarAttendance.Attending)">Going</Button>
                     <Button variant="outline"
-                        @click="setCalendarEventAttendance(activeEvent.id, CalendarAttendance.Maybe)">Maybe</Button>
+                        :class="myAttendance?.status === CalendarAttendance.Maybe ? 'border-2 border-primary' : ''"
+                        @click="setAttendance(CalendarAttendance.Maybe)">Maybe</Button>
                     <Button variant="outline"
-                        @click="setCalendarEventAttendance(activeEvent.id, CalendarAttendance.NotAttending)">Declined</Button>
+                        :class="myAttendance?.status === CalendarAttendance.NotAttending ? 'border-2 border-primary' : ''"
+                        @click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
                 </ButtonGroup>
             </section>
             <!-- When -->
@@ -81,7 +96,7 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
                 <span class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
                     <User class="size-3.5 opacity-80" />
                     <span class="font-medium">Created by: {{ activeEvent.creator_name || "Unknown User"
-                        }}</span>
+                    }}</span>
                 </span>
             </section>
             <!-- Description -->
@@ -96,9 +111,11 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
                 <p class="text-lg font-semibold">Attendance</p>
                 <div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
                     <div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
-                        <label :class="viewedState === CalendarAttendance.Attending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
+                        <label
+                            :class="viewedState === CalendarAttendance.Attending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                             @click="viewedState = CalendarAttendance.Attending">Going {{ attending.length }}</label>
-                        <label :class="viewedState === CalendarAttendance.Maybe ? 'border-b-3 border-foreground' : 'mb-[2px]'"
+                        <label
+                            :class="viewedState === CalendarAttendance.Maybe ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                             @click="viewedState = CalendarAttendance.Maybe">Maybe {{ maybe.length }}</label>
                         <label
                             :class="viewedState === CalendarAttendance.NotAttending ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@@ -120,7 +137,7 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
             </section>
         </div>
         <!-- Footer (optional actions) -->
-        <div class="border-t px-4 py-3 flex items-center justify-end gap-2">
+        <!-- <div class="border-t px-4 py-3 flex items-center justify-end gap-2">
             <button class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40 transition">
                 Edit
             </button>
@@ -128,7 +145,7 @@ const viewedState = ref<CalendarAttendance>(CalendarAttendance.Attending);
                 class="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm hover:opacity-90 transition">
                 Open details
             </button>
-        </div>
+        </div> -->
 
     </div>
 </template>

ui/src/pages/Calendar.vue

@@ -246,7 +246,7 @@ onMounted(() => {
                 </div>
             </div>
             <aside v-if="panelOpen && activeEvent"
-                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col"
+                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
                 <ViewCalendarEvent @close="() => {panelOpen = false; activeEvent = null;}" :event="activeEvent"></ViewCalendarEvent>
             </aside>
@@ -254,6 +254,36 @@ onMounted(() => {
     </div>
 </template>
 
+<style scoped>
+/* Firefox */
+.scrollbar-themed {
+    scrollbar-width: thin;
+    scrollbar-color: #555 #1f1f1f;
+    padding-right: 6px;
+}
+
+/* Chrome, Edge, Safari */
+.scrollbar-themed::-webkit-scrollbar {
+    width: 10px;
+    /* slightly wider to allow padding look */
+}
+
+.scrollbar-themed::-webkit-scrollbar-track {
+    background: #1f1f1f;
+    margin-left: 6px;
+    /* ❗ adds space between content + scrollbar */
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb {
+    background: #555;
+    border-radius: 9999px;
+}
+
+.scrollbar-themed::-webkit-scrollbar-thumb:hover {
+    background: #777;
+}
+</style>
+
 <style scoped>
 /* ---------- Optional container "card" around the calendar ---------- */
 :global(.fc) {