collavre 0.1.0

data/app/assets/stylesheets/collavre/actiontext.css

@@ -0,0 +1,577 @@
+/*
+ * Rich text styles for the Lexical-based inline editor and persisted Action Text content.
+ */
+
+.lexical-inline-editor {
+  background: var(--color-section-bg, var(--color-bg));
+  border-radius: 8px;
+  padding: 0.5rem;
+}
+
+.inline-edit-form-shell {
+  background: var(--color-section-bg, var(--color-bg));
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  padding: 0 0 1rem 0;
+}
+
+.lexical-editor-shell {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lexical-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.lexical-toolbar-color {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.lexical-toolbar-color__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.lexical-toolbar-color__swatch {
+  width: 0.9rem;
+  height: 0.9rem;
+  border: 1px solid var(--color-border);
+  border-radius: 2px;
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.lexical-toolbar-color__popover {
+  position: absolute;
+  top: calc(100% + 0.35rem);
+  left: 0;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.5rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  box-shadow: 0 6px 16px rgba(20, 24, 43, 0.14);
+}
+
+.lexical-toolbar-color__popover input[type="color"] {
+  appearance: none;
+  cursor: pointer;
+  border: none;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: transparent;
+}
+
+.lexical-toolbar-btn--small {
+  min-width: auto;
+  padding: 0.2rem 0.4rem;
+  font-size: 0.75rem;
+}
+
+.lexical-toolbar-btn {
+  appearance: none;
+  background: var(--color-btn-bg);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  color: var(--color-btn-text);
+  cursor: pointer;
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1.2;
+  min-width: 2rem;
+  padding: 0.25rem 0.4rem;
+  text-align: center;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.lexical-toolbar-btn:hover,
+.lexical-toolbar-btn:focus-visible {
+  filter: brightness(var(--hover-brightness, 0.95));
+  outline: none;
+}
+
+.lexical-toolbar-btn.active {
+  background: var(--color-accent, #cbeefa);
+  border-color: var(--color-accent-border, #7bc4e4);
+  color: var(--color-accent-text, #03425f);
+}
+
+.lexical-toolbar-separator {
+  align-self: stretch;
+  border-left: 1px solid var(--color-border);
+  margin-inline: 0.25rem;
+}
+
+.lexical-editor-inner {
+  position: relative;
+}
+
+.lexical-content-editable {
+  min-height: 6rem;
+  outline: none;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.lexical-placeholder {
+  color: var(--color-muted, #8c93a3);
+  left: 0.75rem;
+  pointer-events: none;
+  position: absolute;
+  top: 0.6rem;
+}
+
+.lexical-paragraph {
+  margin: 0 0 0 0;
+}
+
+.lexical-heading-h1,
+.lexical-heading-h2,
+.lexical-heading-h3 {
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+}
+
+.lexical-heading-h1 {
+  font-size: 1.35rem;
+}
+
+.lexical-heading-h2 {
+  font-size: 1.2rem;
+}
+
+.lexical-heading-h3 {
+  font-size: 1.1rem;
+}
+
+.lexical-quote {
+  border-left: 0.25rem solid var(--color-border);
+  color: var(--color-muted, #656c7b);
+  margin: 0 0 0.75rem 0;
+  padding-left: 0.75rem;
+}
+
+.lexical-list-ul,
+.lexical-list-ol {
+  margin: 0 0 0.75rem 1.25rem;
+  padding: 0;
+}
+
+.lexical-list-item {
+  margin: 0.35rem 0;
+}
+
+.lexical-link {
+  color: var(--color-link, #0366d6);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+}
+
+.lexical-text-bold {
+  font-weight: 600;
+}
+
+.lexical-text-italic {
+  font-style: italic;
+}
+
+.lexical-text-underline {
+  text-decoration: underline;
+}
+
+.lexical-text-strike {
+  text-decoration: line-through;
+}
+
+.lexical-text-code {
+  background: rgba(135, 143, 161, 0.15);
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9em;
+  padding: 0.1em 0.3em;
+}
+
+.lexical-code-block {
+  display: block;
+  background: var(--color-code-bg, #f6f8fa);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  color: var(--color-code-text, #1f2328);
+  font-family: ui-monospace, SFMono-Regular, SFMono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.9em;
+  line-height: 1.5;
+  margin: 0 0 0.75rem 0;
+  overflow-x: auto;
+  padding: 0.75rem;
+  white-space: pre;
+}
+
+.lexical-code-block span {
+  background: transparent;
+  border: 0;
+}
+
+.lexical-code-block code {
+  display: block;
+  white-space: inherit;
+}
+
+.lexical-token-comment,
+.lexical-token-prolog,
+.lexical-token-doctype,
+.lexical-token-cdata {
+  color: #6a737d;
+}
+
+.lexical-token-punctuation {
+  color: #393a34;
+}
+
+.lexical-token-property,
+.lexical-token-tag,
+.lexical-token-constant,
+.lexical-token-symbol,
+.lexical-token-deleted,
+.lexical-token-boolean,
+.lexical-token-number {
+  color: #b31d28;
+}
+
+.lexical-token-selector,
+.lexical-token-attr,
+.lexical-token-string,
+.lexical-token-char,
+.lexical-token-builtin,
+.lexical-token-inserted {
+  color: #1a7f37;
+}
+
+.lexical-token-operator,
+.lexical-token-entity,
+.lexical-token-url,
+.lexical-token-variable {
+  color: #9a6e3a;
+}
+
+.lexical-token-atrule,
+.lexical-token-keyword,
+.lexical-token-class,
+.lexical-token-classname,
+.lexical-token-namespace {
+  color: #0550ae;
+}
+
+.lexical-token-function,
+.lexical-token-important {
+  color: #bc4c00;
+}
+
+.lexical-token-regex {
+  color: #1a7f37;
+}
+
+.lexical-token-tag,
+.lexical-token-selector,
+.lexical-token-keyword {
+  font-weight: 600;
+}
+
+.lexical-attachment {
+  position: relative;
+  margin: 0.75rem 0;
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  background: var(--color-surface, #fff);
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+}
+
+.lexical-attachment figure {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.lexical-attachment figure img {
+  border-radius: 8px;
+  max-width: 100%;
+  height: auto;
+}
+
+.lexical-attachment.is-selected {
+  border-color: var(--color-accent, #4f46e5);
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
+}
+
+.lexical-attachment__remove {
+  position: absolute;
+  top: 0.45rem;
+  right: 0.45rem;
+  border: 0;
+  background: rgba(15, 23, 42, 0.75);
+  color: #fff;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 999px;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  font-size: 0.95rem;
+  line-height: 1;
+}
+
+.lexical-attachment:hover .lexical-attachment__remove,
+.lexical-attachment.is-selected .lexical-attachment__remove {
+  opacity: 1;
+}
+
+.lexical-attachment__overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0.75rem;
+  border-radius: 12px;
+  background: rgba(15, 23, 42, 0.6);
+  color: #fff;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.lexical-attachment__overlay--error {
+  background: rgba(220, 38, 38, 0.75);
+}
+
+.lexical-attachment__resize-handle {
+  display: none;
+  position: absolute;
+  right: 0.55rem;
+  bottom: 0.55rem;
+  width: 16px;
+  height: 16px;
+  border-right: 2px solid var(--color-accent, #4f46e5);
+  border-bottom: 2px solid var(--color-accent, #4f46e5);
+  cursor: nwse-resize;
+  opacity: 0.6;
+}
+
+.lexical-attachment__resize-handle:hover {
+  opacity: 1;
+}
+
+.lexical-attachment--image .lexical-attachment__resize-handle {
+  display: block;
+}
+
+.lexical-attachment__image-placeholder {
+  width: 100%;
+  padding-bottom: 56%;
+  border-radius: 8px;
+  background: repeating-linear-gradient(45deg,
+      rgba(148, 163, 184, 0.25) 0,
+      rgba(148, 163, 184, 0.25) 10px,
+      rgba(148, 163, 184, 0.35) 10px,
+      rgba(148, 163, 184, 0.35) 20px);
+  position: relative;
+}
+
+.lexical-attachment__image-placeholder::after {
+  content: "";
+  position: absolute;
+  inset: 20%;
+  border-radius: 999px;
+  border: 2px dashed rgba(100, 116, 139, 0.45);
+}
+
+.lexical-attachment__caption-input {
+  width: 100%;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  padding: 0.5rem 0.6rem;
+  font-size: 0.9rem;
+  background: var(--color-surface, #fff);
+  color: inherit;
+}
+
+.lexical-attachment__caption-input:focus {
+  outline: none;
+  border-color: var(--color-accent, #4f46e5);
+  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15);
+}
+
+.lexical-attachment__caption-size {
+  margin-left: 0.5rem;
+  font-size: 0.8rem;
+  color: var(--color-text-muted, #6b7280);
+}
+
+.lexical-attachment__file {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.lexical-attachment__file-icon {
+  font-size: 1.6rem;
+}
+
+.lexical-attachment__file-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.lexical-attachment__file-name {
+  font-weight: 600;
+  color: inherit;
+  text-decoration: none;
+}
+
+.lexical-attachment__file-name:hover,
+.lexical-attachment__file-name:focus-visible {
+  text-decoration: underline;
+}
+
+.lexical-attachment__file-size {
+  font-size: 0.85rem;
+  color: var(--color-text-muted, #6b7280);
+}
+
+/*
+ * Persisted Action Text content retains the historical .trix-content class.
+ */
+.trix-content {
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+
+.trix-content * {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+.trix-content h1 {
+  font-size: 1.2em;
+  line-height: 1.2;
+}
+
+.trix-content blockquote {
+  border: 0 solid var(--color-border);
+  border-left-width: 0.3em;
+  margin-left: 0.3em;
+  padding-left: 0.6em;
+}
+
+.trix-content [dir=rtl] blockquote,
+.trix-content blockquote[dir=rtl] {
+  border-width: 0;
+  border-right-width: 0.3em;
+  margin-right: 0.3em;
+  padding-right: 0.6em;
+}
+
+.trix-content li {
+  margin-left: 1em;
+}
+
+.trix-content [dir=rtl] li {
+  margin-right: 1em;
+}
+
+.trix-content pre {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+  font-family: monospace;
+  font-size: 0.9em;
+  padding: 0.5em;
+  white-space: pre;
+  background-color: var(--color-btn-bg);
+  color: var(--color-text);
+  overflow-x: auto;
+}
+
+.trix-content img {
+  max-width: 100%;
+  height: auto;
+}
+
+.trix-content .attachment {
+  display: inline-block;
+  position: relative;
+  max-width: 100%;
+}
+
+.trix-content .attachment a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.trix-content .attachment a:hover,
+.trix-content .attachment a:visited:hover {
+  color: inherit;
+}
+
+.trix-content .attachment__caption {
+  text-align: center;
+}
+
+.trix-content .attachment__caption .attachment__name+.attachment__size::before {
+  content: " \2022 ";
+}
+
+.trix-content .attachment--preview {
+  width: 100%;
+  text-align: center;
+}
+
+.trix-content .attachment--preview .attachment__caption {
+  color: #666;
+  font-size: 0.9em;
+  line-height: 1.2;
+}
+
+.trix-content .attachment--file {
+  color: var(--color-text);
+  line-height: 1;
+  margin: 0 2px 2px 2px;
+  padding: 0.4em 1em;
+  border: 1px solid var(--color-border);
+  border-radius: 5px;
+}
+
+.trix-content .attachment-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.trix-content .attachment-gallery .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content .attachment-gallery.attachment-gallery--2 .attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}

data/app/assets/stylesheets/collavre/activity_logs.css

@@ -0,0 +1,99 @@
+/* Activity Log Details */
+.comment-activity-log-block {
+    margin-top: 4px;
+    margin-bottom: 8px;
+}
+
+.comment-activity-log-block details>summary {
+    cursor: pointer;
+}
+
+.comment-activity-log-block details>summary::marker {
+    color: #ccc;
+}
+
+/* List container */
+.activity-log-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 10px;
+}
+
+/* Individual Item */
+.activity-log-item {
+    background-color: #f9f9f9;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    padding: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+    .activity-log-item {
+        background-color: #2a2a2a;
+        border-color: #444;
+    }
+}
+
+.activity-log-summary {
+    font-size: 0.9em;
+    font-weight: 600;
+    color: #555;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+}
+
+@media (prefers-color-scheme: dark) {
+    .activity-log-summary {
+        color: #ccc;
+    }
+}
+
+.activity-name {
+    color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+    .activity-name {
+        color: #fff;
+    }
+}
+
+.activity-time {
+    font-weight: normal;
+    color: #999;
+    font-size: 0.85em;
+    margin-left: 10px;
+}
+
+.activity-log-body {
+    margin-top: 8px;
+}
+
+.activity-log-yaml {
+    background: #fff;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #e0e0e0;
+    overflow-x: auto;
+    font-family: monospace;
+    font-size: 0.85em;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: #333;
+}
+
+@media (prefers-color-scheme: dark) {
+    .activity-log-yaml {
+        background: #1e1e1e;
+        border-color: #333;
+        color: #d4d4d4;
+    }
+}
+
+.activity-log-empty {
+    color: #888;
+    font-style: italic;
+    padding: 10px;
+}