Lots of UI fixes

app/pages/member/dashboard.vue

@@ -173,14 +173,28 @@
               <h2 class="text-xl font-bold text-ghost-100 ethereal-text">
                 Your Upcoming Events
               </h2>
-              <UButton
-                to="/events"
-                variant="ghost"
-                size="sm"
-                class="text-ghost-300 hover:text-ghost-100"
-              >
-                Browse All Events
-              </UButton>
+              <div class="flex items-center gap-2">
+                <UButton
+                  v-if="registeredEvents.length > 0"
+                  @click="copyCalendarLink"
+                  variant="ghost"
+                  size="sm"
+                  class="text-ghost-300 hover:text-ghost-100"
+                  icon="heroicons:calendar"
+                >
+                  {{
+                    calendarLinkCopied ? "Link Copied!" : "Get Calendar Link"
+                  }}
+                </UButton>
+                <UButton
+                  to="/events"
+                  variant="ghost"
+                  size="sm"
+                  class="text-ghost-300 hover:text-ghost-100"
+                >
+                  Browse All Events
+                </UButton>
+              </div>
             </div>
           </template>
 
@@ -261,6 +275,46 @@
               Browse Events
             </UButton>
           </div>
+
+          <!-- Calendar subscription instructions -->
+          <div
+            v-if="registeredEvents.length > 0 && showCalendarInstructions"
+            class="mt-4 p-4 bg-ghost-800 border border-ghost-600"
+          >
+            <div class="flex items-start justify-between gap-4">
+              <div class="flex-1">
+                <h4 class="text-sm font-semibold text-ghost-100 mb-2">
+                  How to Subscribe to Your Calendar
+                </h4>
+                <ul
+                  class="text-xs text-ghost-300 space-y-1 list-disc list-inside"
+                >
+                  <li>
+                    <strong>Google Calendar:</strong> Click "+" → "From URL" →
+                    Paste the link
+                  </li>
+                  <li>
+                    <strong>Apple Calendar:</strong> File → New Calendar
+                    Subscription → Paste the link
+                  </li>
+                  <li>
+                    <strong>Outlook:</strong> Add Calendar → Subscribe from web
+                    → Paste the link
+                  </li>
+                </ul>
+                <p class="text-xs text-ghost-400 mt-2">
+                  Your calendar will automatically update when you register or
+                  unregister from events.
+                </p>
+              </div>
+              <button
+                @click="showCalendarInstructions = false"
+                class="text-ghost-400 hover:text-ghost-200"
+              >
+                <Icon name="heroicons:x-mark" class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
         </UCard>
       </div>
     </UContainer>
@@ -272,6 +326,33 @@ const { memberData, checkMemberStatus } = useAuth();
 
 const registeredEvents = ref([]);
 const loadingEvents = ref(false);
+const calendarLinkCopied = ref(false);
+const showCalendarInstructions = ref(false);
+
+// Calendar subscription URL
+const calendarUrl = computed(() => {
+  const memberId = memberData.value?._id || memberData.value?.id;
+  if (!memberId) return "";
+  const config = useRuntimeConfig();
+  const baseUrl = config.public.appUrl || "http://localhost:3000";
+  // Use webcal protocol for calendar subscription
+  const webcalUrl = baseUrl.replace(/^https?:/, "webcal:");
+  return `${webcalUrl}/api/members/my-calendar?memberId=${memberId}`;
+});
+
+// Copy calendar subscription link to clipboard
+const copyCalendarLink = async () => {
+  try {
+    await navigator.clipboard.writeText(calendarUrl.value);
+    calendarLinkCopied.value = true;
+    showCalendarInstructions.value = true;
+    setTimeout(() => {
+      calendarLinkCopied.value = false;
+    }, 2000);
+  } catch (err) {
+    console.error("Failed to copy calendar link:", err);
+  }
+};
 
 // Handle authentication check on page load
 const { pending: authPending } = await useLazyAsyncData(