fix(atproto): improve handle edit layout for narrow screens (#371)

* fix(atproto): improve handle edit layout for narrow screens

Change handle editing from row to column layout so the input
gets full width and Save/Cancel buttons appear below it.

This fixes the cramped layout where the input was too narrow
to see the full handle when editing.

* feat: add Not Published chip to event cards and detail page

Add a warning-colored "Not published" chip for events that can be
published to AT Protocol but haven't been yet.

- Show chip when: no atprotoUri, no sourceType, user has active session
- Click to publish with loading ("Publishing...") and error states
- Updates to "Published" badge after successful sync
- Added to both EventsItemComponent (list) and EventPage (detail)
- Includes unit tests for visibility and interaction

Author: tompscanlan

src/api/events.ts

@@ -76,6 +76,9 @@ export interface EventApiType {
   previewAdminMessage: (slug: string, data: { subject: string, message: string, testEmail: string }) => Promise<AxiosResponse<{ message: string }>>
   contactOrganizers: (slug: string, data: { contactType: string, subject: string, message: string }) => Promise<AxiosResponse<AdminMessageResult>>
 
+  // AT Protocol sync
+  syncAtproto: (slug: string) => Promise<AxiosResponse<EventEntity>>
+
   // Recurrence-related methods (deprecated)
   /**
    * @deprecated Use eventSeriesApi.getOccurrences instead
@@ -167,5 +170,8 @@ export const eventsApi: EventApiType = {
   contactOrganizers: (slug: string, data: { contactType: string, subject: string, message: string }): Promise<AxiosResponse<AdminMessageResult>> => api.post(`/api/events/${slug}/contact-organizers`, data, createEventApiHeaders(slug)),
 
   // Activity feed endpoint
-  getFeed: (groupSlug: string, eventSlug: string, query?: { limit?: number, offset?: number }): Promise<AxiosResponse<ActivityFeedEntity[]>> => api.get(`/api/events/${eventSlug}/feed`, { params: query })
+  getFeed: (groupSlug: string, eventSlug: string, query?: { limit?: number, offset?: number }): Promise<AxiosResponse<ActivityFeedEntity[]>> => api.get(`/api/events/${eventSlug}/feed`, { params: query }),
+
+  // AT Protocol sync
+  syncAtproto: (slug: string): Promise<AxiosResponse<EventEntity>> => api.post(`/api/events/${slug}/sync-atproto`, {}, createEventApiHeaders(slug))
 }

src/components/atproto/AtprotoIdentityCard.vue

@@ -128,14 +128,14 @@
           <div v-else-if="editingHandle" class="row items-center">
             <div class="text-subtitle2 text-grey-7 col-3">Handle</div>
             <div class="col">
-              <div class="row items-center q-gutter-sm">
+              <div class="column q-gutter-y-sm">
                 <q-input
                   data-cy="new-handle-input"
                   v-model="newHandle"
                   label="Username"
                   filled
                   dense
-                  class="col"
+                  class="full-width"
                   :error="!!handleError"
                   :error-message="handleError"
                   @keyup.enter="submitHandleChange"
@@ -145,28 +145,30 @@
                     <span class="text-grey-7 text-body2">{{ handleDomain || '.opnmt.me' }}</span>
                   </template>
                 </q-input>
-                <q-btn
-                  data-cy="submit-handle-btn"
-                  color="primary"
-                  no-caps
-                  size="sm"
-                  :loading="updatingHandle"
-                  :disable="updatingHandle || !newHandle.trim()"
-                  @click="submitHandleChange"
-                >
-                  Save
-                </q-btn>
-                <q-btn
-                  data-cy="cancel-handle-btn"
-                  flat
-                  no-caps
-                  size="sm"
-                  color="grey-7"
-                  :disable="updatingHandle"
-                  @click="cancelEditingHandle"
-                >
-                  Cancel
-                </q-btn>
+                <div class="row q-gutter-x-sm">
+                  <q-btn
+                    data-cy="submit-handle-btn"
+                    color="primary"
+                    no-caps
+                    size="sm"
+                    :loading="updatingHandle"
+                    :disable="updatingHandle || !newHandle.trim()"
+                    @click="submitHandleChange"
+                  >
+                    Save
+                  </q-btn>
+                  <q-btn
+                    data-cy="cancel-handle-btn"
+                    flat
+                    no-caps
+                    size="sm"
+                    color="grey-7"
+                    :disable="updatingHandle"
+                    @click="cancelEditingHandle"
+                  >
+                    Cancel
+                  </q-btn>
+                </div>
               </div>
             </div>
           </div>

src/components/event/EventsItemComponent.vue

@@ -1,15 +1,60 @@
 <script setup lang="ts">
+import { ref, computed } from 'vue'
 import { EventEntity } from '../../types'
 import { getImageSrc } from '../../utils/imageUtils'
 import { formatDate } from '../../utils/dateUtils'
 import { getSourceColor } from '../../utils/eventUtils'
+import { useAuthStore } from '../../stores/auth-store'
+import { eventsApi } from '../../api/events'
 
 interface Props {
   event: EventEntity;
   layout?: 'grid' | 'list';
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  synced: [event: EventEntity]
+}>()
+
+const authStore = useAuthStore()
+
+// Sync state: 'idle' | 'syncing' | 'error'
+const syncStatus = ref<'idle' | 'syncing' | 'error'>('idle')
+
+/**
+ * Check if the publish chip should be shown
+ * Conditions:
+ * - Event has no atprotoUri (not already published)
+ * - Event has no sourceType (not imported from external source)
+ * - User has active ATProto session
+ */
+const canPublish = computed(() => {
+  const hasActiveSession = authStore.user?.atprotoIdentity?.hasActiveSession === true
+  const notAlreadyPublished = !props.event.atprotoUri
+  const notImported = !props.event.sourceType
+  return hasActiveSession && notAlreadyPublished && notImported
+})
+
+/**
+ * Handle the publish button click
+ */
+const handlePublish = async () => {
+  if (syncStatus.value === 'syncing') return
+
+  syncStatus.value = 'syncing'
+  try {
+    const response = await eventsApi.syncAtproto(props.event.slug)
+    emit('synced', response.data)
+    syncStatus.value = 'idle'
+  } catch (error) {
+    syncStatus.value = 'error'
+    // Reset to idle after a brief delay to show the error
+    setTimeout(() => {
+      syncStatus.value = 'idle'
+    }, 3000)
+  }
+}
 
 /**
  * Format a series slug to be more readable
@@ -73,6 +118,27 @@ const formatSeriesSlug = (slug: string): string => {
           />
           {{ event.sourceType }}
         </q-badge>
+        <q-badge
+          v-if="canPublish"
+          :color="syncStatus === 'syncing' ? 'grey' : syncStatus === 'error' ? 'negative' : 'warning'"
+          class="q-ml-sm cursor-pointer"
+          data-cy="publish-atproto-chip"
+          :clickable="syncStatus !== 'syncing'"
+          @click.stop.prevent="handlePublish"
+        >
+          <q-spinner-dots
+            v-if="syncStatus === 'syncing'"
+            size="xs"
+            class="q-mr-xs"
+          />
+          <q-icon
+            v-else
+            :name="syncStatus === 'error' ? 'sym_r_error' : 'sym_r_cloud_off'"
+            size="xs"
+            class="q-mr-xs"
+          />
+          {{ syncStatus === 'syncing' ? 'Publishing...' : syncStatus === 'error' ? 'Publish failed' : 'Not published' }}
+        </q-badge>
         <q-badge
           v-if="event.atprotoUri"
           color="blue"