UI/UX tweaks and improvements.

app/components/DevLoginPanel.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="dev-login">
+    <div class="dev-label">Dev Login</div>
+    <div class="dev-actions">
+      <div class="dev-buttons">
+        <a href="/api/dev/test-login" class="dev-button">Admin</a>
+        <button class="dev-button dev-logout" @click="handleLogout">Log out</button>
+      </div>
+      <USelectMenu
+        v-model="selectedEmail"
+        :items="members"
+        value-key="value"
+        :filter-fields="['label', 'value']"
+        placeholder="Switch user..."
+        :search-input="{ placeholder: 'Search members...' }"
+        class="dev-select"
+        size="xs"
+        @update:model-value="loginAsEmail"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const selectedEmail = ref(null)
+const { logout } = useAuth()
+
+const { data: members } = await useFetch('/api/dev/members', {
+  default: () => []
+})
+
+const loginAsEmail = (email) => {
+  if (email) {
+    navigateTo(`/api/dev/member-login?email=${encodeURIComponent(email)}`, { external: true })
+  }
+}
+
+const handleLogout = async () => {
+  await logout()
+}
+</script>
+
+<style scoped>
+.dev-login {
+  margin-top: 10px;
+  padding: 8px;
+  border: 1px dashed var(--ember);
+  background: transparent;
+}
+
+.dev-label {
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ember);
+  margin-bottom: 8px;
+}
+
+.dev-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dev-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.dev-button {
+  flex: 1;
+  padding: 4px 8px;
+  font-family: "Commit Mono", monospace;
+  font-size: 11px;
+  background: var(--surface);
+  color: var(--ember);
+  border: 1px solid var(--ember);
+  cursor: pointer;
+  text-decoration: none;
+  text-align: center;
+  transition: all 0.15s;
+}
+
+.dev-button:hover {
+  background: var(--ember);
+  color: var(--bg);
+}
+
+
+.dev-select {
+  width: 100%;
+}
+</style>