Refine vault defaults and account settings

apps/web/src/AccountPanel.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
+import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
 import {
   ArrowUpRight,
   ArrowRight,
+  ArrowLeft,
   Inbox,
   Send,
   LogOut,
@@ -35,9 +36,9 @@ import {
   uploadProgress,
   clipboardTextLimitBytes,
 } from './client';
-const props = defineProps({ initialView: { type: String, default: 'vault' } });
+const props = defineProps({ initialView: { type: String, default: 'inbox' } });
 const emit = defineEmits(['devices', 'send-item']);
-const view = ref(props.initialView === 'inbox' ? 'inbox' : 'vault');
+const view = ref(props.initialView === 'vault' ? 'vault' : 'inbox');
 const authMode = ref('login'),
   email = ref(''),
   password = ref(''),
@@ -66,6 +67,56 @@ const securityAction = ref('none'),
   newPassword = ref(''),
   newConfirmation = ref(''),
   newEmail = ref('');
+const preferencesDialog = ref(null);
+let preferencesTrigger;
+watch(preferencesOpen, async (open) => {
+  if (open) {
+    preferencesTrigger = document.activeElement;
+    await nextTick();
+    preferencesDialog.value
+      ?.querySelector('[aria-label="계정 설정 닫기"]')
+      ?.focus({ preventScroll: true });
+  } else if (preferencesTrigger?.isConnected) {
+    preferencesTrigger.focus({ preventScroll: true });
+  }
+});
+watch(securityAction, async () => {
+  if (!preferencesOpen.value) return;
+  await nextTick();
+  preferencesDialog.value
+    ?.querySelector('[aria-label="계정 설정 닫기"]')
+    ?.focus({ preventScroll: true });
+});
+function preferencesKeydown(event) {
+  if (event.key !== 'Tab') return;
+  const controls = [
+    ...preferencesDialog.value.querySelectorAll('button:not(:disabled), input:not(:disabled)'),
+  ];
+  const first = controls[0],
+    last = controls.at(-1);
+  if (event.shiftKey && document.activeElement === first) {
+    event.preventDefault();
+    last?.focus();
+  } else if (!event.shiftKey && document.activeElement === last) {
+    event.preventDefault();
+    first?.focus();
+  }
+}
+function selectSecurityAction(action = 'none') {
+  currentPassword.value = '';
+  newPassword.value = '';
+  newConfirmation.value = '';
+  newEmail.value = '';
+  securityAction.value = action;
+}
+function openPreferences() {
+  selectSecurityAction();
+  preferencesOpen.value = true;
+}
+function closePreferences() {
+  preferencesOpen.value = false;
+  selectSecurityAction();
+}
 let timer;
 function message(text) {
   notice.value = text;
@@ -383,9 +434,7 @@ async function securitySubmit() {
         email: newEmail.value,
         password: currentPassword.value,
       });
-      currentPassword.value = '';
-      newEmail.value = '';
-      securityAction.value = 'none';
+      selectSecurityAction();
       message('새 주소의 인증 메일을 확인해 주세요. 인증 후 변경됩니다.');
     }
   });
@@ -532,17 +581,9 @@ async function resendVerification() {
     <div class="account-heading compact-heading">
       <div>
         <h1>보관함</h1>
-        <p>
-          {{
-            view === 'inbox'
-              ? '로그인 중 받은 링크와 파일을 날짜별로 모았어요.'
-              : '나중에 보내거나 꺼내 쓸 링크와 파일을 담아두세요.'
-          }}
-          · 최대 7일
-        </p>
       </div>
       <div>
-        <button class="icon-button" @click="preferencesOpen = true" aria-label="계정 설정">
+        <button class="icon-button" @click="openPreferences" aria-label="계정 설정">
           <Settings :size="18" /></button
         ><button class="icon-button" @click="logout" aria-label="로그아웃">
           <LogOut :size="18" /></button
@@ -672,7 +713,8 @@ async function resendVerification() {
     </div>
     <button v-if="nextCursor" class="button load-more" @click="loadMoreAccount">더 보기</button>
     <p class="scope-note">
-      내 보관함 {{ size(storage.usedBytes) }} / {{ size(storage.limitBytes) }} · 최대 7일
+      내 보관함 {{ size(storage.usedBytes) }} / {{ size(storage.limitBytes) }} · 항목별 최대 7일
+      보관
     </p>
   </section>
   <div v-if="compose" class="modal-backdrop" @click.self="!saveTransfer && (compose = false)">
@@ -734,21 +776,76 @@ async function resendVerification() {
       >
     </section>
   </div>
-  <div v-if="preferencesOpen" class="modal-backdrop" @click.self="preferencesOpen = false">
-    <section class="modal" role="dialog" aria-modal="true" aria-label="계정 설정">
+  <div
+    v-if="preferencesOpen"
+    class="modal-backdrop"
+    @click.self="closePreferences"
+    @keydown.esc.stop.prevent="closePreferences"
+  >
+    <section
+      ref="preferencesDialog"
+      class="modal account-preferences"
+      role="dialog"
+      aria-modal="true"
+      aria-label="계정 설정"
+      @keydown="preferencesKeydown"
+    >
       <header>
-        <h2>계정 설정</h2>
-        <button class="icon-button" @click="preferencesOpen = false" aria-label="계정 설정 닫기">
+        <div class="preferences-title">
+          <button
+            v-if="securityAction !== 'none'"
+            class="icon-button"
+            @click="selectSecurityAction()"
+            aria-label="계정 설정 목록으로"
+          >
+            <ArrowLeft :size="20" />
+          </button>
+          <h2>
+            {{
+              securityAction === 'password'
+                ? '비밀번호 변경'
+                : securityAction === 'email'
+                  ? '이메일 변경'
+                  : '계정 설정'
+            }}
+          </h2>
+        </div>
+        <button class="icon-button" @click="closePreferences" aria-label="계정 설정 닫기">
           <X :size="20" />
         </button>
       </header>
-      <p>{{ account.email }}</p>
-      <select v-model="securityAction" aria-label="계정 정보 변경">
-        <option value="none">변경할 항목 선택</option>
-        <option value="password">비밀번호 변경</option>
-        <option value="email">이메일 변경</option>
-      </select>
-      <form v-if="securityAction !== 'none'" @submit.prevent="securitySubmit">
+      <div v-if="securityAction === 'none'" class="preferences-list">
+        <div class="preference-item">
+          <div>
+            <strong>이메일</strong>
+            <p>{{ account.email }}</p>
+          </div>
+          <button
+            class="button small"
+            @click="selectSecurityAction('email')"
+            aria-label="이메일 변경"
+          >
+            변경
+          </button>
+        </div>
+        <div class="preference-item">
+          <div>
+            <strong>비밀번호</strong>
+            <p>계정을 안전하게 보호하세요.</p>
+          </div>
+          <button
+            class="button small"
+            @click="selectSecurityAction('password')"
+            aria-label="비밀번호 변경"
+          >
+            변경
+          </button>
+        </div>
+      </div>
+      <form v-else class="preferences-form" @submit.prevent="securitySubmit">
+        <p v-if="securityAction === 'email'" class="preferences-hint">
+          새 이메일로 받은 인증을 완료하면 변경됩니다.
+        </p>
         <label
           >현재 비밀번호<input
             type="password"
@@ -770,8 +867,9 @@ async function resendVerification() {
               :minlength="passwordMinLength"
               required
               autocomplete="new-password" /></label></template
-        ><label v-else>새 이메일<input type="email" v-model="newEmail" required /></label
-        ><button class="button primary" :disabled="busy">변경</button>
+        ><label v-else
+          >새 이메일<input type="email" v-model="newEmail" required autocomplete="email" /></label
+        ><button class="button primary" :disabled="busy">{{ busy ? '변경 중…' : '변경' }}</button>
       </form>
     </section>
   </div>

apps/web/src/App.vue

@@ -902,13 +902,7 @@ async function spaceAction(space, action, memberId) {
               <div v-if="!connectionCards.length" class="empty-devices">
                 <Monitor :size="30" stroke-width="1.4" />
                 <h3>아직 연결된 기기가 없어요.</h3>
-                <p>
-                  {{
-                    device?.discoverable
-                      ? '다른 기기에서 hop.을 열거나 QR로 연결해 보세요.'
-                      : '아래 내 기기 설정에서 발견 허용을 켜 주세요.'
-                  }}
-                </p>
+                <p>다른 기기에서 hop.을 열거나 QR로 연결해 보세요.</p>
               </div>
               <TransitionGroup
                 tag="div"
@@ -1042,10 +1036,7 @@ async function spaceAction(space, action, memberId) {
           </section>
         </template>
         <template v-else
-          ><AccountPanel
-            :initial-view="tab === 'received' ? 'inbox' : 'vault'"
-            @devices="tab = 'devices'"
-            @send-item="prepareVault"
+          ><AccountPanel initial-view="inbox" @devices="tab = 'devices'" @send-item="prepareVault"
         /></template>
       </template>
     </main>
@@ -1278,27 +1269,7 @@ async function spaceAction(space, action, memberId) {
               /> </label
             ><button class="button primary" :disabled="busy" aria-label="저장">저장</button>
           </form>
-          <label class="settings-row discovery-setting">
-            <span>다른 기기에서 발견 허용</span>
-            <span class="relative inline-flex h-6 w-11 shrink-0 items-center">
-              <input
-                class="peer absolute inset-0 m-0 h-full w-full cursor-pointer opacity-0"
-                type="checkbox"
-                role="switch"
-                :checked="device?.discoverable"
-                :disabled="busy"
-                @change="act(() => patchDevice({ discoverable: $event.target.checked }))"
-              />
-              <span
-                aria-hidden="true"
-                class="pointer-events-none absolute inset-0 rounded-full bg-[var(--line)] transition-colors motion-reduce:transition-none peer-checked:bg-[var(--ink)] peer-focus-visible:outline-2 peer-focus-visible:outline-offset-4 peer-focus-visible:outline-[var(--ink)] peer-disabled:opacity-50"
-              ></span>
-              <span
-                aria-hidden="true"
-                class="pointer-events-none absolute left-0.5 top-0.5 size-5 rounded-full bg-[var(--surface)] shadow-sm transition-transform motion-reduce:transition-none peer-checked:translate-x-5 peer-disabled:opacity-50"
-              ></span>
-            </span> </label
-        ></template>
+        </template>
       </section>
     </div>
   </div>

apps/web/src/client.js

@@ -72,6 +72,11 @@ export async function bootstrap() {
     device.value = s.device;
     csrfToken.value = s.csrfToken;
     sessionExpiresAt.value = s.expiresAt;
+    // An open site participates in discovery, including sessions that opted out in older UI.
+    if (!s.device.discoverable) {
+      await api('/device/me', 'PATCH', { discoverable: true });
+      device.value = { ...s.device, discoverable: true };
+    }
   };
   if (navigator.locks) await navigator.locks.request('hop-session-bootstrap', init);
   else await init();

apps/web/src/style.css

@@ -3001,6 +3001,76 @@ a.button {
   gap: 12px;
   margin-top: 24px;
 }
+.account-preferences header {
+  margin-bottom: 20px;
+  gap: 12px;
+}
+.preferences-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.preferences-list {
+  display: grid;
+  gap: 12px;
+}
+.preference-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 16px;
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+}
+.preference-item > div {
+  min-width: 0;
+}
+.preference-item strong {
+  font-size: 14px;
+  font-weight: 500;
+}
+.preference-item p,
+.preferences-hint {
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.preference-item p {
+  margin: 6px 0 0;
+}
+.preference-item .button {
+  flex-shrink: 0;
+  min-height: 44px;
+  border-radius: 10px;
+}
+.preferences-form {
+  display: grid;
+  gap: 18px;
+}
+.preferences-form label {
+  display: grid;
+  gap: 8px;
+  font-size: 13px;
+}
+.preferences-form input {
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  padding: 10px 12px;
+  border-radius: 12px;
+}
+.preferences-form > .button {
+  min-height: 44px;
+  margin-top: 6px;
+  border-radius: 12px;
+}
+.preferences-hint {
+  margin: 0;
+}
 .device-settings-form label {
   flex: 1;
   display: grid;