Refine service information and simplify device controls

apps/web/src/App.vue

@@ -23,7 +23,6 @@ import {
   ShieldCheck,
   ChevronDown,
   LoaderCircle,
-  RefreshCw,
   ArrowDownLeft,
   CircleHelp,
   File as FileIcon,
@@ -33,8 +32,11 @@ import {
   EllipsisVertical,
   Ellipsis,
   Info,
+  MonitorSmartphone,
+  Globe,
 } from '@lucide/vue';
 import QRCode from 'qrcode';
+import { version as appVersion } from '../package.json';
 import AccountPanel from './AccountPanel.vue';
 import SendComposer from './SendComposer.vue';
 import InstallButton from './InstallButton.vue';
@@ -800,9 +802,6 @@ async function spaceAction(space, action, memberId) {
                     {{ spaces.length ? '방 안의 기기' : '주변 기기' }}
                   </h2>
                 </div>
-                <button class="icon-button" @click="act(refresh)" aria-label="기기 목록 새로고침">
-                  <RefreshCw :size="17" />
-                </button>
               </div>
               <div v-if="!connectionCards.length" class="empty-devices">
                 <Monitor :size="30" stroke-width="1.4" />
@@ -846,10 +845,10 @@ async function spaceAction(space, action, memberId) {
                   >
                     <span class="peer-top"
                       ><component :is="iconFor(card.peer.name)" :size="30" /><span
+                        v-if="card.pending"
                         class="peer-live"
                         :class="{ hasMenu: managedSpaces(card.peer.id).length }"
-                        ><template v-if="card.pending">승인 대기</template
-                        ><template v-else><i></i>온라인</template></span
+                        >승인 대기</span
                       ></span
                     ><strong>{{ deviceLabel(card.peer) }}</strong
                     ><span v-if="deviceDetail(card.peer)" class="peer-model">{{
@@ -1130,13 +1129,38 @@ async function spaceAction(space, action, memberId) {
         </template>
         <template v-else-if="modal === 'about'">
           <div class="service-info">
-            <strong>hop.</strong>
-            <p>기기 사이를 가볍게.</p>
-            <p>
-              파일과 링크를 다른 기기로 보낼 수 있어요.<br />보관함에 저장한 자료는 최대 7일 후
-              삭제됩니다.
-            </p>
-            <small>by noname.company</small>
+            <strong class="service-brand">hop.</strong>
+            <p class="service-tagline">기기 사이를 가볍게.</p>
+            <div class="service-intro">
+              <p>Android, iOS, macOS, Windows.</p>
+              <p>서로 다른 운영체제에서도 파일과 링크를 자유롭게 주고받으세요.</p>
+            </div>
+            <ul class="service-features">
+              <li>
+                <MonitorSmartphone :size="20" aria-hidden="true" />
+                <div>
+                  <strong>기기 구분 없이</strong>
+                  <p>스마트폰과 태블릿, PC를 자유롭게 연결</p>
+                </div>
+              </li>
+              <li>
+                <Globe :size="20" aria-hidden="true" />
+                <div>
+                  <strong>설치 없이 간편하게</strong>
+                  <p>회원가입 없이 브라우저에서 바로 전송</p>
+                </div>
+              </li>
+              <li>
+                <QrCode :size="20" aria-hidden="true" />
+                <div>
+                  <strong>네트워크가 달라도</strong>
+                  <p>QR 또는 초대 코드로 다른 기기와 연결</p>
+                </div>
+              </li>
+            </ul>
+            <footer class="service-info-footer">
+              <small>by noname.company</small><small>v{{ appVersion }}</small>
+            </footer>
           </div>
         </template>
         <template v-else

apps/web/src/style.css

@@ -164,7 +164,7 @@ button:active:not(:disabled) {
 }
 .header-actions {
   display: flex;
-  gap: 20px;
+  gap: 8px;
   align-items: center;
   margin-left: auto;
 }
@@ -3252,7 +3252,12 @@ a.button {
 .modal .create-space {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  margin-top: 18px;
+  gap: 14px;
+}
+.modal .join-form .modal-subtitle,
+.modal .create-space .modal-subtitle {
+  margin: 0;
 }
 .modal .join-form input {
   width: 100%;
@@ -3440,16 +3445,58 @@ a.button {
 .service-info {
   padding: 24px 0 4px;
   font-size: 13px;
-  line-height: 1.8;
 }
-.service-info strong {
+.service-brand {
   font-size: 30px;
   letter-spacing: -0.07em;
 }
 .service-info p {
-  margin: 12px 0;
-  color: var(--muted);
+  margin: 0;
 }
-.service-info small {
+.service-info .service-tagline {
   color: var(--muted);
+  margin-top: 2px;
+}
+.service-intro {
+  margin: 24px 0;
+}
+.service-intro p + p {
+  margin-top: 8px;
+}
+.service-features {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.service-features li {
+  display: flex;
+  gap: 14px;
+  align-items: flex-start;
+}
+.service-features svg {
+  color: var(--muted);
+  flex-shrink: 0;
+  margin-top: 3px;
+}
+.service-features strong {
+  font-size: 14px;
+  font-weight: 500;
+}
+.service-features p {
+  font-size: 12px;
+  color: var(--muted);
+  margin-top: 5px;
+}
+.service-info-footer {
+  border-top: 1px solid var(--line);
+  padding-top: 18px;
+  margin-top: 28px;
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  color: var(--muted);
+  font-size: 12px;
 }