viveworker 0.1.2 → 0.1.4

package/scripts/viveworker.mjs

@@ -265,7 +265,7 @@ async function runSetup(cliOptions) {
   if (allowInsecureHttpLan) {
     console.log(t(locale, "cli.setup.warning.insecureHttpLan"));
   }
-  if (canShowCaDownload && !cliOptions.installMkcert) {
+  if (canShowCaDownload && !cliOptions.installMkcert && !cliOptions.pair) {
     console.log(t(locale, "cli.setup.caDownloadLocal", { url: caDownloadLocalUrl }));
     console.log(t(locale, "cli.setup.caDownloadIp", { url: caDownloadIpUrl }));
   }
@@ -280,7 +280,7 @@ async function runSetup(cliOptions) {
   console.log("");
   console.log(t(locale, "cli.setup.qrPairing"));
   await printQrCode(`${publicBaseUrl}${pairPath}`);
-  if (canShowCaDownload && !cliOptions.installMkcert) {
+  if (canShowCaDownload && !cliOptions.installMkcert && !cliOptions.pair) {
     console.log("");
     console.log(t(locale, "cli.setup.qrCaDownload"));
     await printQrCode(caDownloadIpUrl);

package/web/app.css

@@ -1083,6 +1083,30 @@ code {
   gap: 0.34rem;
 }
 
+.timeline-entry__images {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
+  gap: 0.46rem;
+  margin-top: 0.08rem;
+}
+
+.timeline-entry__image-frame {
+  display: block;
+  border-radius: 14px;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
+    rgba(10, 17, 22, 0.76);
+  border: 1px solid rgba(156, 181, 197, 0.12);
+}
+
+.timeline-entry__image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+}
+
 .timeline-entry__title,
 .timeline-entry__summary {
   margin: 0;
@@ -1425,11 +1449,55 @@ code {
     rgba(14, 22, 29, 0.84);
 }
 
+.detail-card--interrupt {
+  margin-top: 0.24rem;
+  gap: 0;
+  background:
+    linear-gradient(180deg, rgba(214, 171, 96, 0.12), rgba(255, 255, 255, 0.02)),
+    rgba(21, 28, 33, 0.92);
+}
+
+.detail-card--images {
+  margin-top: 0.24rem;
+  gap: 0;
+  padding: 0.5rem;
+}
+
 .detail-card--reply {
   margin-top: 0.32rem;
   gap: 0.72rem;
 }
 
+.detail-image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
+  gap: 0.56rem;
+  width: 100%;
+}
+
+.detail-image-link {
+  display: block;
+  padding: 0;
+  cursor: zoom-in;
+  border-radius: 16px;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
+    rgba(10, 17, 22, 0.86);
+  border: 1px solid rgba(156, 181, 197, 0.12);
+  box-shadow:
+    0 10px 22px rgba(0, 0, 0, 0.18),
+    inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.detail-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  background: rgba(255, 255, 255, 0.03);
+}
+
 .detail-context-card__header {
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -1437,6 +1505,22 @@ code {
   align-items: center;
 }
 
+.detail-interrupt-copy {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.52rem;
+  color: #ffe7b8;
+  font-weight: 700;
+  line-height: 1.45;
+}
+
+.detail-interrupt-copy__icon {
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+}
+
 .detail-context-card__eyebrow {
   min-width: 0;
   display: inline-flex;
@@ -1524,66 +1608,88 @@ code {
   gap: 0.5rem;
 }
 
-.reply-field__input {
-  width: 100%;
-  min-height: 7.4rem;
-  padding: 0.9rem 1rem;
+.reply-field__shell {
+  display: grid;
+  gap: 0.52rem;
+  padding: 0.82rem 0.9rem 0.76rem;
   border-radius: 18px;
   border: 1px solid var(--line);
   background: rgba(7, 12, 16, 0.96);
+}
+
+.reply-field__input {
+  width: 100%;
+  min-height: 7.4rem;
+  padding: 0;
+  border-radius: 0;
+  border: 0;
+  background: transparent;
   color: var(--text);
   resize: vertical;
   font: inherit;
   line-height: 1.58;
 }
 
+.reply-field__input:focus {
+  outline: none;
+}
+
 .reply-field__input::placeholder {
   color: rgba(205, 220, 231, 0.42);
 }
 
-.reply-attachment-field {
+.reply-field__toolbar {
   display: grid;
-  gap: 0.55rem;
+  grid-template-columns: auto 1fr;
+  align-items: end;
+  gap: 0.72rem;
 }
 
-.reply-attachment-field__header {
-  display: flex;
+.reply-attachment-trigger {
+  position: relative;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-.reply-attachment-picker {
-  display: grid;
-  gap: 0.18rem;
-  padding: 0.88rem 0.95rem;
-  border-radius: 18px;
-  border: 1px dashed rgba(156, 181, 197, 0.24);
-  background: rgba(255, 255, 255, 0.03);
+  justify-content: center;
+  width: 2.7rem;
+  height: 2.7rem;
+  border-radius: 999px;
+  border: 1px solid rgba(156, 181, 197, 0.16);
+  background: rgba(255, 255, 255, 0.04);
+  color: #eef8ff;
   cursor: pointer;
 }
 
-.reply-attachment-picker__input {
+.reply-attachment-trigger__input {
   position: absolute;
+  inset: 0;
   opacity: 0;
-  pointer-events: none;
+  cursor: pointer;
 }
 
-.reply-attachment-picker__label {
-  font-size: 0.93rem;
-  font-weight: 700;
-  color: #eef8ff;
+.reply-attachment-trigger__icon {
+  width: 1.1rem;
+  height: 1.1rem;
 }
 
-.reply-attachment-picker__hint {
-  font-size: 0.82rem;
-  color: var(--muted);
-  line-height: 1.42;
+.reply-attachment-trigger__count {
+  position: absolute;
+  top: -0.12rem;
+  right: -0.08rem;
+  min-width: 1.15rem;
+  height: 1.15rem;
+  padding: 0 0.22rem;
+  border-radius: 999px;
+  background: rgba(84, 190, 133, 0.96);
+  color: #08110d;
+  font-size: 0.72rem;
+  font-weight: 800;
+  line-height: 1.15rem;
+  text-align: center;
 }
 
 .reply-image-preview {
   display: grid;
-  grid-template-columns: 4.5rem minmax(0, 1fr);
+  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
   gap: 0.8rem;
   align-items: center;
   padding: 0.78rem 0.85rem;
@@ -1592,6 +1698,11 @@ code {
   background: rgba(255, 255, 255, 0.04);
 }
 
+.reply-image-preview-list {
+  display: grid;
+  gap: 0.6rem;
+}
+
 .reply-image-preview__image {
   width: 4.5rem;
   height: 4.5rem;
@@ -1625,6 +1736,60 @@ code {
   font-size: 0.8rem;
 }
 
+.reply-mode-toggle {
+  justify-self: end;
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  gap: 0.62rem;
+  min-width: 0;
+  cursor: pointer;
+}
+
+.reply-mode-toggle__label {
+  color: rgba(236, 248, 255, 0.86);
+  font-size: 0.88rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.reply-mode-toggle__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.reply-mode-toggle__track {
+  width: 2.65rem;
+  height: 1.6rem;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(156, 181, 197, 0.16);
+  padding: 0.12rem;
+  display: flex;
+  align-items: center;
+  transition: background 160ms ease, border-color 160ms ease;
+}
+
+.reply-mode-toggle__thumb {
+  width: 1.08rem;
+  height: 1.08rem;
+  border-radius: 999px;
+  background: rgba(236, 248, 255, 0.94);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
+  transform: translateX(0);
+  transition: transform 160ms ease;
+}
+
+.reply-mode-toggle__input:checked + .reply-mode-toggle__track {
+  background: rgba(67, 160, 255, 0.28);
+  border-color: rgba(121, 196, 255, 0.34);
+}
+
+.reply-mode-toggle__input:checked + .reply-mode-toggle__track .reply-mode-toggle__thumb {
+  transform: translateX(0.94rem);
+}
+
 .reply-mode-switch {
   display: grid;
   grid-template-columns: auto auto minmax(0, 1fr);
@@ -2188,6 +2353,53 @@ button:disabled {
   backdrop-filter: blur(16px);
 }
 
+.modal-backdrop--image-viewer {
+  z-index: 60;
+  place-items: stretch center;
+  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
+}
+
+.image-viewer {
+  width: min(100%, 62rem);
+  min-height: 0;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  border-radius: 24px;
+  overflow: hidden;
+  border: 1px solid rgba(156, 181, 197, 0.12);
+  background: rgba(8, 14, 18, 0.96);
+  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34);
+}
+
+.image-viewer__chrome {
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.85rem;
+  border-bottom: 1px solid rgba(156, 181, 197, 0.08);
+}
+
+.image-viewer__close {
+  min-height: 2.75rem;
+  padding-inline: 1rem;
+}
+
+.image-viewer__body {
+  min-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.image-viewer__image {
+  display: block;
+  max-width: 100%;
+  max-height: min(78vh, 100%);
+  object-fit: contain;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.03);
+}
+
 .modal-card {
   width: min(34rem, 100%);
   padding: 1.1rem;