feat(components): Improve event and player card UI

- Add conditional rendering for event list to show a message when no events
- Update player team card to show edit button conditionally
- Style crown icon for team leader
- Adjust role icon styles for better alignment

availabili.tf/src/components/EventList.vue

@@ -8,17 +8,15 @@ const props = defineProps<{
 </script>
 
 <template>
-  <h2>Upcoming Events</h2>
+  <div class="events-list" v-if="props.events?.length > 0">
-  <div class="events-list">
     <EventCard v-for="event in props.events" :key="event.id" :event="event" />
   </div>
+  <div class="events-list" v-else>
+    <em class="subtext">No upcoming events.</em>
+  </div>
 </template>
 
 <style scoped>
-h2 {
-  margin-bottom: 1rem;
-}
-
 .events-list {
   display: flex;
   flex-direction: column;

availabili.tf/src/components/PlayerTeamCard.vue

@@ -134,7 +134,14 @@ const rightIndicator = computed(() => {
         <h3>
           {{ player.username }}
         </h3>
-        <svg-icon v-if="player.isTeamLeader" type="mdi" :path="mdiCrown" />
+        <svg-icon
+          v-if="player.isTeamLeader"
+          :class="[
+            isUnavailable ? '' : 'crown',
+          ]"
+          type="mdi"
+          :path="mdiCrown"
+        />
       </div>
     </td>
     <td :colspan="isEditing ? 2 : 1">
@@ -164,6 +171,11 @@ const rightIndicator = computed(() => {
         <span v-else class="aside">
           No roles
         </span>
+        <div class="edit-group">
+          <button v-if="!isEditing" @click="isEditing = true">
+            <i class="bi bi-pencil-fill edit-icon" />
+          </button>
+        </div>
       </div>
     </td>
     <td v-if="!isEditing">
@@ -184,9 +196,6 @@ const rightIndicator = computed(() => {
             <i class="bi bi-check-lg" />
           </button>
         </template>
-        <button v-else @click="isEditing = true">
-          <i class="bi bi-pencil-fill edit-icon" />
-        </button>
       </div>
     </td>
   </tr>
@@ -209,6 +218,10 @@ const rightIndicator = computed(() => {
   font-size: 12pt;
 }
 
+.player-card .crown {
+  color: var(--yellow);
+}
+
 .status-indicators {
   display: flex;
   flex-direction: row;
@@ -249,13 +262,14 @@ const rightIndicator = computed(() => {
   align-items: center;
 }
 
-.role-icons i {
+.role-icons > .role-icon i {
   font-size: 24px;
   line-height: 1;
   color: var(--overlay-0);
+  vertical-align: middle;
 }
 
-.role-icons i.main {
+.role-icons > .role-icon i.main {
   color: var(--text);
 }