collabmd 0.1.18 → 0.1.19

package/src/client/styles/style.css

@@ -2310,6 +2310,17 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   max-width: none;
 }
 
+.preview-content.is-image-file-preview {
+  display: flex;
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: var(--space-4);
+  position: relative;
+  box-sizing: border-box;
+  max-width: none;
+}
+
 .preview-content.is-plantuml-file-preview {
   width: 100%;
   min-height: 100%;
@@ -2337,6 +2348,31 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   min-height: 100%;
 }
 
+.preview-content.is-image-file-preview [data-preview-render-host="true"] {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 100%;
+}
+
+.image-file-preview-shell {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.image-file-preview-image {
+  max-width: min(100%, 1200px);
+  max-height: calc(100vh - 180px);
+  object-fit: contain;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  background: var(--color-surface);
+}
+
 .preview-content.is-mermaid-file-preview .mermaid-shell {
   margin: 0;
   min-height: 100%;
@@ -2590,6 +2626,163 @@ html[data-initial-file-requested="true"] .editor-page.hidden {
   height: auto;
   border-radius: var(--radius-md);
   margin: var(--space-4) 0;
+  cursor: zoom-in;
+}
+
+.image-lightbox-root {
+  position: fixed;
+  inset: 0;
+  z-index: 220;
+  display: grid;
+  place-items: center;
+  pointer-events: auto;
+}
+
+.image-lightbox-root[hidden] {
+  display: none !important;
+}
+
+.image-lightbox-backdrop {
+  position: absolute;
+  inset: 0;
+  border: none;
+  background: oklch(0.08 0.01 260 / 0.82);
+  backdrop-filter: blur(10px);
+  cursor: zoom-out;
+}
+
+.image-lightbox-shell {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+.image-lightbox-toolbar {
+  position: absolute;
+  top: var(--space-5);
+  left: var(--space-5);
+  right: var(--space-5);
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  pointer-events: none;
+}
+
+.image-lightbox-title {
+  min-width: 0;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: white;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: oklch(0.18 0.02 260 / 0.68);
+  backdrop-filter: blur(12px);
+  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
+  pointer-events: auto;
+}
+
+.image-lightbox-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  pointer-events: auto;
+}
+
+.image-lightbox-btn {
+  min-width: 0;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 999px;
+  background: oklch(0.18 0.02 260 / 0.68);
+  color: white;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
+  transition: background 0.18s ease, transform 0.18s ease;
+}
+
+.image-lightbox-btn:hover:not(:disabled) {
+  background: oklch(0.24 0.02 260 / 0.82);
+}
+
+.image-lightbox-btn:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.image-lightbox-zoom-label {
+  min-width: 58px;
+  padding: 8px 12px;
+  border-radius: 999px;
+  background: oklch(0.18 0.02 260 / 0.68);
+  color: white;
+  font-size: var(--text-xs);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+  backdrop-filter: blur(12px);
+  box-shadow: 0 16px 40px oklch(0 0 0 / 0.24);
+}
+
+.image-lightbox-viewport {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+
+.image-lightbox-viewport.is-dragging .image-lightbox-image {
+  cursor: grabbing !important;
+}
+
+.image-lightbox-image {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  max-width: calc(100vw - (var(--space-8) * 2));
+  max-height: calc(100vh - (var(--space-8) * 2));
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  transform-origin: center center;
+  will-change: transform;
+  box-shadow: 0 28px 80px oklch(0 0 0 / 0.28);
+}
+
+body.image-lightbox-open {
+  overflow: hidden;
+}
+
+@media (max-width: 768px) {
+  .image-lightbox-toolbar {
+    top: var(--space-3);
+    left: var(--space-3);
+    right: var(--space-3);
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .image-lightbox-controls {
+    justify-content: flex-start;
+  }
+
+  .image-lightbox-btn {
+    flex: 0 0 auto;
+  }
+
+  .image-lightbox-image {
+    max-width: calc(100vw - (var(--space-4) * 2));
+    max-height: calc(100vh - (var(--space-4) * 2));
+  }
 }
 
 .preview-content .video-embed-shell {
@@ -2923,13 +3116,29 @@ body.plantuml-maximized-open::before {
   font-family: var(--font-mono);
   font-size: 11.5px;
   line-height: 1.65;
-  white-space: pre;
-  overflow-x: auto;
-  overflow-y: hidden;
-  word-break: normal;
-  text-wrap: nowrap;
+  white-space: pre-wrap;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+  max-height: 9.5rem;
   scrollbar-width: thin;
-  padding-bottom: calc(var(--space-2) + 2px);
+  padding-bottom: calc(var(--space-3) + 2px);
+}
+
+.comments-drawer-item-preview {
+  position: relative;
+  max-height: 7.8rem;
+  overflow: hidden;
+  color: var(--color-text-muted);
+}
+
+.comments-drawer-item-preview:after {
+  content: "";
+  position: absolute;
+  inset: auto 0 0 0;
+  height: 2.5rem;
+  background: linear-gradient(180deg, oklch(0 0 0 / 0), color-mix(in srgb, var(--color-surface-2) 95%, var(--color-comment) 5%));
+  pointer-events: none;
 }
 
 .comments-drawer-item-footer {
@@ -2937,6 +3146,12 @@ body.plantuml-maximized-open::before {
   color: var(--color-text-muted);
   font-weight: 600;
   letter-spacing: 0.01em;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+
+.comments-drawer-item-updated {
+  color: var(--color-text-faint);
 }
 
 .comment-editor-layer,
@@ -3029,7 +3244,7 @@ body.plantuml-maximized-open::before {
 }
 
 .comment-card {
-  width: min(100%, 360px);
+  width: min(100%, 520px);
   border-radius: 18px;
   border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
   background: color-mix(in srgb, var(--color-surface) 94%, var(--color-comment) 6%);
@@ -3038,6 +3253,8 @@ body.plantuml-maximized-open::before {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
+  max-height: min(78vh, 720px);
+  overflow: hidden;
   animation: comment-card-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -3056,6 +3273,19 @@ body.plantuml-maximized-open::before {
   justify-content: space-between;
 }
 
+.comment-card-header {
+  flex-shrink: 0;
+}
+
+.comment-card-scroll {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-height: 0;
+  overflow: auto;
+  padding-right: 2px;
+}
+
 .comment-card-title {
   font-size: 15px;
   font-weight: 700;
@@ -3110,15 +3340,15 @@ body.plantuml-maximized-open::before {
 }
 
 .comment-card-quote {
-  white-space: pre;
-  overflow-x: auto;
-  overflow-y: hidden;
-  word-break: normal;
-  text-wrap: nowrap;
+  white-space: pre-wrap;
+  overflow: auto;
+  overflow-wrap: anywhere;
+  word-break: break-word;
   font-family: var(--font-mono);
   font-size: 11.5px;
   line-height: 1.65;
-  padding-bottom: calc(var(--space-2) + 2px);
+  max-height: 11rem;
+  padding-bottom: calc(var(--space-3) + 2px);
   scrollbar-width: thin;
 }
 
@@ -3137,11 +3367,24 @@ body.plantuml-maximized-open::before {
 .comment-thread-card {
   display: flex;
   flex-direction: column;
-  gap: var(--space-2);
+  gap: var(--space-3);
   padding-top: var(--space-3);
   border-top: 1px solid var(--color-divider);
 }
 
+.comment-thread-card-header {
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.comment-thread-card-heading {
+  display: flex;
+  flex: 1 1 160px;
+  flex-wrap: wrap;
+  gap: var(--space-1) var(--space-2);
+  min-width: 0;
+}
+
 .comment-thread-card-author,
 .comment-message-card-author {
   font-size: 12px;
@@ -3156,8 +3399,10 @@ body.plantuml-maximized-open::before {
 
 .comment-thread-card-actions {
   display: inline-flex;
+  flex-wrap: wrap;
   gap: var(--space-1);
   margin-left: auto;
+  justify-content: flex-end;
 }
 
 .comment-message-card {
@@ -3170,6 +3415,246 @@ body.plantuml-maximized-open::before {
 .comment-message-card-body {
   margin-top: var(--space-1);
   font-size: 12px;
+  line-height: 1.65;
+}
+
+.comment-reaction-bar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+  margin-top: var(--space-2);
+}
+
+.comment-reaction-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.comment-reaction-actions {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.comment-reaction-chip,
+.comment-reaction-more-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 30px;
+  padding: 4px 10px;
+  border-radius: var(--radius-full);
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-comment) 10%);
+  color: var(--color-text-muted);
+  font-size: 11px;
+  font-weight: 600;
+  transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive), transform 140ms ease;
+}
+
+.comment-reaction-chip:hover,
+.comment-reaction-more-trigger:hover {
+  color: var(--color-text);
+  border-color: oklch(from var(--color-comment) l c h / 0.22);
+  background: color-mix(in srgb, var(--color-surface-offset) 76%, var(--color-comment) 24%);
+}
+
+.comment-reaction-chip.is-active {
+  color: var(--color-comment);
+  border-color: oklch(from var(--color-comment) l c h / 0.28);
+  background: color-mix(in srgb, var(--color-surface-offset) 64%, var(--color-comment) 36%);
+}
+
+.comment-reaction-chip-emoji,
+.comment-reaction-chip-count {
+  line-height: 1;
+}
+
+.comment-reaction-quick-add,
+.comment-reaction-picker-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 34px;
+  min-height: 34px;
+  padding: 0;
+  border-radius: var(--radius-md);
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  background: color-mix(in srgb, var(--color-surface-2) 92%, var(--color-comment) 8%);
+  font-size: 18px;
+  transition: background var(--transition-interactive), border-color var(--transition-interactive), transform 140ms ease;
+}
+
+.comment-reaction-quick-add:hover,
+.comment-reaction-picker-btn:hover {
+  border-color: oklch(from var(--color-comment) l c h / 0.24);
+  background: color-mix(in srgb, var(--color-surface-offset) 78%, var(--color-comment) 22%);
+  transform: translateY(-1px);
+}
+
+.comment-reaction-picker-wrap {
+  position: relative;
+  display: inline-flex;
+}
+
+.comment-reaction-picker {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 2;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3);
+  border-radius: var(--radius-lg);
+  border: 1px solid color-mix(in srgb, var(--color-border) 82%, var(--color-comment) 18%);
+  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
+  box-shadow: var(--shadow-lg);
+  overflow: auto;
+  scrollbar-width: thin;
+}
+
+.comment-reaction-picker.is-upward {
+  top: auto;
+  bottom: calc(100% + 8px);
+}
+
+.comment-reaction-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: var(--space-2);
+}
+
+.comment-markdown {
+  color: var(--color-text);
+  font-size: 12px;
+  line-height: 1.65;
+}
+
+.comment-markdown > :first-child {
+  margin-top: 0;
+}
+
+.comment-markdown > :last-child {
+  margin-bottom: 0;
+}
+
+.comment-markdown p,
+.comment-markdown ul,
+.comment-markdown ol,
+.comment-markdown blockquote,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table,
+.comment-markdown table {
+  max-width: none;
+}
+
+.comment-markdown p,
+.comment-markdown ul,
+.comment-markdown ol,
+.comment-markdown blockquote,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table {
+  margin: var(--space-2) 0;
+}
+
+.comment-markdown li + li {
+  margin-top: 4px;
+}
+
+.comment-markdown ul,
+.comment-markdown ol {
+  padding-left: var(--space-5);
+}
+
+.comment-markdown a {
+  color: var(--color-primary);
+  overflow-wrap: anywhere;
+  text-decoration: underline;
+}
+
+.comment-markdown blockquote {
+  padding: var(--space-2) var(--space-3);
+  border-left: 3px solid oklch(from var(--color-comment) l c h / 0.45);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  background: color-mix(in srgb, var(--color-surface-offset) 84%, var(--color-comment) 16%);
+  color: var(--color-text-muted);
+}
+
+.comment-markdown code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  background: color-mix(in srgb, var(--color-surface-offset) 88%, var(--color-comment) 12%);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  color: var(--color-primary);
+}
+
+.comment-markdown pre {
+  border-radius: var(--radius-lg);
+  overflow: auto;
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-comment) 4%);
+  max-width: 100%;
+}
+
+.comment-markdown pre code {
+  display: block;
+  padding: var(--space-3);
+  background: none;
+  color: var(--color-text);
+  font-size: 12px;
+  line-height: 1.6;
+  white-space: pre;
+  width: max-content;
+  min-width: 100%;
+}
+
+.comment-markdown .comment-markdown-table {
+  border: 1px solid color-mix(in srgb, var(--color-divider) 88%, var(--color-comment) 12%);
+  border-radius: var(--radius-md);
+  overflow: auto;
+}
+
+.comment-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.comment-markdown th,
+.comment-markdown td {
+  padding: var(--space-2) var(--space-3);
+  text-align: left;
+  border-bottom: 1px solid var(--color-divider);
+  font-size: 12px;
+}
+
+.comment-markdown th {
+  background: color-mix(in srgb, var(--color-surface-offset) 90%, var(--color-comment) 10%);
+}
+
+.comment-markdown-preview > :not(pre):not(blockquote):not(.comment-markdown-table) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+}
+
+.comment-markdown-preview pre code {
+  max-height: 6.6rem;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+.comment-markdown-preview .comment-markdown-table {
+  display: none;
 }
 
 @keyframes comment-card-in {
@@ -3410,6 +3895,9 @@ body.plantuml-maximized-open::before {
 .editor-layout[data-view="preview"] .preview-content.is-excalidraw-file-preview {
   max-width: none;
 }
+.editor-layout[data-view="preview"] .preview-content.is-image-file-preview {
+  max-width: none;
+}
 .editor-layout[data-view="preview"] .preview-content.is-mermaid-file-preview {
   max-width: none;
 }
@@ -3631,6 +4119,23 @@ body.plantuml-maximized-open::before {
   .chat-send-btn {
     padding-inline: var(--space-3);
   }
+
+  .comment-card {
+    width: min(100vw - 32px, 520px);
+    max-height: min(72vh, 680px);
+  }
+
+  .comment-thread-card-actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-start;
+  }
+
+  .comment-reaction-picker {
+    left: 0;
+    right: auto;
+    min-width: min(240px, calc(100vw - 64px));
+  }
 }
 
 @media (min-width: 769px) {
@@ -3655,8 +4160,12 @@ body.plantuml-maximized-open::before {
 .git-panel,
 .diff-scroll,
 .comments-drawer-list,
+.comments-drawer-item-quote,
 .comment-card-quote,
+.comment-card-scroll,
 .markdown-toolbar,
+.comment-markdown pre,
+.comment-markdown .comment-markdown-table,
 .preview-content pre,
 .preview-content .table-wrapper,
 .preview-content .mermaid-frame,
@@ -3672,8 +4181,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar,
 .diff-scroll::-webkit-scrollbar,
 .comments-drawer-list::-webkit-scrollbar,
+.comments-drawer-item-quote::-webkit-scrollbar,
 .comment-card-quote::-webkit-scrollbar,
+.comment-card-scroll::-webkit-scrollbar,
 .markdown-toolbar::-webkit-scrollbar,
+.comment-markdown pre::-webkit-scrollbar,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar,
 .preview-content pre::-webkit-scrollbar,
 .preview-content .table-wrapper::-webkit-scrollbar,
 .preview-content .mermaid-frame::-webkit-scrollbar,
@@ -3688,8 +4201,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar-track,
 .diff-scroll::-webkit-scrollbar-track,
 .comments-drawer-list::-webkit-scrollbar-track,
+.comments-drawer-item-quote::-webkit-scrollbar-track,
 .comment-card-quote::-webkit-scrollbar-track,
+.comment-card-scroll::-webkit-scrollbar-track,
 .markdown-toolbar::-webkit-scrollbar-track,
+.comment-markdown pre::-webkit-scrollbar-track,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-track,
 .preview-content pre::-webkit-scrollbar-track,
 .preview-content .table-wrapper::-webkit-scrollbar-track,
 .preview-content .mermaid-frame::-webkit-scrollbar-track,
@@ -3703,8 +4220,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar-thumb,
 .diff-scroll::-webkit-scrollbar-thumb,
 .comments-drawer-list::-webkit-scrollbar-thumb,
+.comments-drawer-item-quote::-webkit-scrollbar-thumb,
 .comment-card-quote::-webkit-scrollbar-thumb,
+.comment-card-scroll::-webkit-scrollbar-thumb,
 .markdown-toolbar::-webkit-scrollbar-thumb,
+.comment-markdown pre::-webkit-scrollbar-thumb,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb,
 .preview-content pre::-webkit-scrollbar-thumb,
 .preview-content .table-wrapper::-webkit-scrollbar-thumb,
 .preview-content .mermaid-frame::-webkit-scrollbar-thumb,
@@ -3719,8 +4240,12 @@ body.plantuml-maximized-open::before {
 .git-panel::-webkit-scrollbar-thumb:hover,
 .diff-scroll::-webkit-scrollbar-thumb:hover,
 .comments-drawer-list::-webkit-scrollbar-thumb:hover,
+.comments-drawer-item-quote::-webkit-scrollbar-thumb:hover,
 .comment-card-quote::-webkit-scrollbar-thumb:hover,
+.comment-card-scroll::-webkit-scrollbar-thumb:hover,
 .markdown-toolbar::-webkit-scrollbar-thumb:hover,
+.comment-markdown pre::-webkit-scrollbar-thumb:hover,
+.comment-markdown .comment-markdown-table::-webkit-scrollbar-thumb:hover,
 .preview-content pre::-webkit-scrollbar-thumb:hover,
 .preview-content .table-wrapper::-webkit-scrollbar-thumb:hover,
 .preview-content .mermaid-frame::-webkit-scrollbar-thumb:hover,