collavre 0.1.0

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

@@ -0,0 +1,559 @@
+/* #creatives {} - removed empty rule */
+
+:root {
+    --creative-row-text-offset: 1.8em;
+    --creative-loading-emojis: "🚀,🧠,🧩,🤝,🗂️,⚡";
+}
+
+.creative-actions-row,
+.page-title {
+    visibility: hidden;
+}
+
+html.creative-alignment-ready .creative-actions-row,
+html.creative-alignment-ready .page-title {
+    visibility: visible;
+}
+
+.creative-actions-row {
+    margin: 0.0em 1.0em 0.0em var(--creative-row-text-offset);
+    padding: 0.5em 0.5em 0.5em 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    height: 48px;
+    align-items: center;
+}
+
+.creative-actions-row button {
+    height: 32px;
+}
+
+.delete-options {
+    display: none;
+    position: absolute;
+    z-index: 10;
+    background: var(--color-section-bg);
+    border: 1px solid var(--color-border);
+    padding: 0.5em;
+    box-shadow: 0 2px 8px var(--color-border);
+    min-width: 220px;
+}
+
+.delete-one {
+    margin-bottom: 0.5em;
+}
+
+.tags {
+    margin: 0.2em 2.0em;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    align-items: center;
+}
+
+.creative-tree {
+    position: relative;
+}
+
+creative-tree-row.show-edit .creative-row {
+    display: none !important;
+}
+
+.creative-tree.child-drop-indicator-active::after {
+    content: '↳';
+    position: absolute;
+    top: 50%;
+    margin-left: 12px;
+    color: #2196f3;
+    font-size: 1.3em;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+
+.creative-link-drop-indicator {
+    position: fixed;
+    display: none;
+    pointer-events: none;
+    background: rgba(33, 150, 243, 0.9);
+    color: #fff;
+    font-size: 12px;
+    padding: 2px 8px;
+    border-radius: 4px;
+    transform: translate(-50%, -170%);
+    z-index: 9999;
+    font-weight: 600;
+    letter-spacing: 1px;
+}
+
+.creative-tree-li {
+    display: flex;
+    align-items: flex-start;
+    /* Changed from center to flex-start */
+    position: relative;
+}
+
+/* Tree Lines */
+.tree-line {
+    width: 10px;
+    /* Indentation width matching toggle button */
+    min-width: 10px;
+    display: flex;
+    justify-content: center;
+    position: relative;
+    align-self: stretch;
+    /* Stretch to full height of the row */
+}
+
+.tree-line::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 1px;
+    background-color: var(--color-border);
+    /* Thin guide line */
+    opacity: 0.5;
+}
+
+.creative-content {
+    min-width: min(50vw, var(--max-width) / 2);
+    max-width: calc(min(100vw, var(--max-width)) - 160px);
+    padding-top: 2px;
+    /* Slight adjustment for text baseline */
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+/* Allow attachments and images to be clickable independently of the parent link */
+.creative-content a[download],
+.creative-content img {
+    pointer-events: auto;
+    position: relative;
+    z-index: 1;
+}
+
+.creative-row:hover .creative-content {
+    text-decoration: underline;
+    text-decoration-color: var(--color-link);
+    text-decoration-thickness: 4px;
+    cursor: pointer;
+}
+
+@media (max-width: 768px) {
+    .creative-content {
+        min-width: min(50vw, var(--max-width) / 2);
+        max-width: calc(min(100vw, var(--max-width)) - 110px);
+    }
+}
+
+/* make it as same as <li> tag */
+.creative-tree-bullet {
+    width: 5px;
+    height: 5px;
+    min-width: 5px;
+    min-height: 5px;
+    max-width: 5px;
+    max-height: 5px;
+    border-radius: 50%;
+    background: var(--color-text);
+    margin-left: 4px;
+    margin-right: 8px;
+    flex: 0 0 5px;
+    margin-top: 10px;
+    /* Align with first line of text (approx) */
+}
+
+.creative-row-end {
+    margin-left: 10px;
+    color: var(--color-muted);
+    font-size: 0.9em;
+    white-space: nowrap;
+    display: flex;
+    align-items: flex-start;
+    /* Top align */
+    /* padding-top: 4px; - Removed to align comments button with edit button */
+}
+
+.creative-tags {
+    margin-left: 10px;
+    text-align: right;
+    white-space: nowrap;
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 4px;
+    /* Restore baseline alignment */
+}
+
+.creative-progress-complete,
+.creative-progress-incomplete {
+    color: var(--color-complete);
+    padding-top: 4px;
+    /* Restore baseline alignment */
+}
+
+.creative-progress-incomplete {
+    color: var(--color-muted);
+}
+
+/* .creative-progress-incomplete {} - removed empty rule */
+
+.creative-row-start {
+    display: flex;
+    align-items: flex-start;
+    /* Changed from center to flex-start */
+    flex-grow: 1;
+}
+
+.creative-loading-indicator {
+    display: inline-flex;
+    align-items: baseline;
+    margin-left: 0.5em;
+    color: var(--color-muted);
+    min-width: 1.5em;
+}
+
+.creative-loading-dot {
+    font-weight: bold;
+    display: inline-block;
+    width: 1.05em;
+    text-align: center;
+    font-size: 0.55em;
+}
+
+.creative-tree-loading-placeholder {
+    min-height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-muted);
+    font-size: 1.2em;
+    letter-spacing: 2px;
+}
+
+.creative-tree-loading-placeholder .creative-loading-indicator {
+    margin-left: 0;
+    font-size: 1.5em;
+}
+
+.creative-action-btn {
+    margin-left: 0px;
+    font-size: 16px;
+    cursor: pointer;
+    background: none;
+    border: none;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    display: inline-flex;
+    flex-shrink: 0;
+    padding-top: 4px;
+    /* Align with text */
+}
+
+/* Ensure inline editor actions use the correct text color */
+#actions-inline-editor .creative-action-btn {
+    color: var(--color-text);
+}
+
+.creative-action-btn:disabled,
+.popup-menu-toggle:disabled,
+.popup-menu .popup-menu-item:disabled {
+    opacity: 0.4;
+    color: var(--color-muted);
+    cursor: not-allowed;
+    filter: grayscale(100%);
+}
+
+.creative-action-btn:disabled .icon-svg,
+.popup-menu-toggle:disabled .icon-svg,
+.popup-menu .popup-menu-item:disabled .icon-svg {
+    opacity: 0.75;
+}
+
+.popup-menu-toggle:disabled {
+    pointer-events: none;
+}
+
+.voice-input-active {
+    background-color: #2ecc71;
+    color: #ffffff;
+    border-radius: 6px;
+    padding: 4px 8px;
+}
+
+.creative-toggle-btn {
+    width: 16px;
+    height: 16px;
+    font-size: 14px;
+    margin-right: 4px;
+    margin-top: 4px;
+    /* Align with text */
+    visibility: hidden;
+    /* Hidden by default on desktop */
+    /* Total width is 20px (16 + 4) */
+}
+
+
+.creative-row:hover .creative-toggle-btn {
+    visibility: visible;
+}
+
+creative-tree-row:not([expanded]) .creative-toggle-btn {
+    visibility: visible;
+}
+
+
+.add-creative-btn {
+    font-size: 18px;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+
+/* Replaced creative-row-actions visibility logic with direct targeting */
+.edit-inline-btn {
+    visibility: hidden;
+    opacity: 0;
+    color: var(--color-text);
+    transition: opacity 0.2s ease;
+    width: 20px;
+    /* Fixed width for alignment */
+}
+
+.creative-row:hover .edit-inline-btn {
+    color: var(--color-text);
+    visibility: visible;
+    opacity: 1;
+}
+
+@media (max-width: 768px) {
+    .creative-toggle-btn {
+        visibility: visible !important;
+    }
+
+    .edit-inline-btn {
+        max-width: 0;
+        opacity: 0;
+        overflow: hidden;
+        pointer-events: none;
+        transform: translateX(10px);
+        transition: max-width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
+    }
+
+    .creative-row.show-edit .edit-inline-btn {
+        max-width: 40px;
+        opacity: 1;
+        transform: translateX(0);
+        pointer-events: auto;
+        visibility: visible;
+    }
+}
+
+.creative-divider {
+    position: relative;
+    /* width: 6px; */
+    margin-right: 2px;
+    background-color: var(--color-border);
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+}
+
+/* to prevent border height from affecting layout, add virtual border */
+@media (max-width: 768px) {
+
+    .creative-divider::before,
+    .creative-divider::after {
+        content: "";
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 6px;
+        /* border thickness */
+        background: var(--color-bg);
+    }
+
+    .creative-divider::before {
+        top: 0;
+    }
+
+    .creative-divider::after {
+        bottom: 0;
+    }
+}
+
+.select-creative-checkbox {
+    margin-left: 6px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    visibility: visible;
+    margin-top: 6px;
+    /* Align with text */
+}
+
+.creative-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    /* Changed from center to flex-start */
+    padding: 2px 0;
+    /* Add some vertical padding */
+}
+
+.creative-row.selected {
+    background-color: var(--color-drag-over);
+}
+
+.creative-row:hover {
+    background-color: var(--color-border);
+}
+
+.creative-progress {
+    color: var(--color-muted);
+    font-size: 0.9em;
+    margin-left: 10px;
+    padding-top: 4px;
+    /* Align with text */
+}
+
+.page-title {
+    margin-left: var(--creative-row-text-offset);
+    font-size: 1.4em;
+}
+
+
+/* Constrain images within creative-row to prevent overflow */
+.creative-row img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+.creative-origin-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border-radius: 999px;
+    transition: background-color 0.2s ease;
+}
+
+.creative-origin-link:hover,
+.creative-origin-link:focus {
+    background-color: var(--color-border);
+}
+
+.creative-origin-link-icon {
+    width: 16px;
+    height: 16px;
+}
+
+.creative-row-start h1 {
+    font-size: 1.3em;
+    margin: 0;
+}
+
+.creative-row-start h2 {
+    font-size: 1.2em;
+    margin: 0;
+}
+
+.creative-row-start h3 {
+    font-size: 1.1em;
+    margin: 0;
+}
+
+.creative-row-start h4,
+.creative-row-start h5,
+.creative-row-start h6 {
+    margin: 0;
+}
+
+/* Headings need specific alignment adjustments */
+.level-1 .creative-action-btn,
+.level-1 .select-creative-checkbox,
+.level-1 .creative-toggle-btn {
+    margin-top: 8px;
+}
+
+.level-2 .creative-action-btn,
+.level-2 .select-creative-checkbox,
+.level-2 .creative-toggle-btn {
+    margin-top: 7px;
+}
+
+.level-3 .creative-action-btn,
+.level-3 .select-creative-checkbox,
+.level-3 .creative-toggle-btn {
+    margin-top: 6px;
+}
+
+
+.indent1,
+.indent2,
+.indent3 {
+    display: flex;
+    align-items: flex-start;
+    margin-left: 0;
+    /* Indentation now comes from tree lines; avoid extra left margin here */
+}
+
+.comments-btn {
+    width: 28px;
+    height: 28px;
+    position: relative;
+    color: var(--color-text);
+    margin-top: -2px;
+    /* Move higher as requested */
+}
+
+/* Ensure comments button stays high for headings, overriding generic action button margin */
+.level-1 .comments-btn,
+.level-2 .comments-btn,
+.level-3 .comments-btn {
+    margin-top: -2px;
+}
+
+/* Add spacing for headings via row padding to preserve alignment */
+.creative-row.level-1,
+.creative-row.level-2,
+.creative-row.level-3 {
+    padding-top: 6px;
+    padding-bottom: 6px;
+}
+
+.comment-icon {
+    width: 100%;
+    height: 100%;
+    color: var(--color-text);
+}
+
+.comments-btn.no-comments {
+    visibility: hidden;
+}
+
+.creative-row:hover .comments-btn.no-comments {
+    visibility: visible;
+    opacity: 1.0;
+}
+
+@media (max-width: 768px) {
+    .comments-btn.no-comments {
+        visibility: visible;
+        opacity: 0.2;
+    }
+}
+
+.comments-btn .badge {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+}
+
+.comments-btn .badge[data-count="0"] {
+    background: var(--color-complete);
+}

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

@@ -0,0 +1,118 @@
+/* 다크모드 변수 및 스타일 */
+:root {
+  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial,
+    sans-serif;
+  --color-bg: #f7f7f8;
+  --color-text: #202123;
+  --color-link: #185ABC;
+  --color-nav-bg: #ffffff;
+  --color-section-bg: #ffffff;
+  --color-btn-bg: #f1f2f4;
+  --color-btn-text: #202123;
+  --color-border: #e0e0e0;
+  --color-muted: #666;
+  --color-complete: oklch(60% 0.4 145);
+  --color-chip-bg: var(--color-complete);
+  --color-drag-over: #e0e0e0;
+  --color-drag-over-edge: #bbb;
+  --hover-brightness: 90%;
+  --color-badge-bg: red;
+  --color-badge-bg: red;
+  --color-badge-text: white;
+  --color-secondary-active: #007bff;
+  --color-secondary-background: #ffffff;
+  --color-nav-btn-text: #202123;
+  --color-chat-btn-text: #666;
+  --color-input-bg: #f7f7f8;
+  --color-input-bg: #f7f7f8;
+  --color-input-text: #202123;
+  --color-nav-text: #202123;
+  --max-width: 960px;
+  --paragraph-space-1: 0.75rem;
+}
+
+body.dark-mode {
+  --color-bg: #212121;
+  --color-text: #eaeaea;
+  --color-link: #185ABC;
+  --color-nav-bg: #181818;
+  --color-section-bg: #181818;
+  --color-btn-bg: #333543;
+  --color-btn-text: #eaeaea;
+  --color-border: #333333;
+  --color-muted: #aaaaaa;
+  --color-complete: oklch(50% 0.4 145);
+  --color-chip-bg: var(--color-complete);
+  --color-drag-over: #383a40;
+  --color-drag-over-edge: #777;
+  --hover-brightness: 110%;
+  --color-badge-bg: red;
+  --color-badge-text: white;
+  --color-secondary-active: #6a9eff;
+  --color-secondary-background: #181818;
+  --color-nav-btn-text: #eaeaea;
+  --color-chat-btn-text: #aaaaaa;
+  --color-input-bg: #212121;
+  --color-input-bg: #212121;
+  --color-input-text: #eaeaea;
+  --color-nav-text: #eaeaea;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light-mode):not(.dark-mode) {
+    --color-bg: #212121;
+    --color-text: #eaeaea;
+    --color-link: #185ABC;
+    --color-nav-bg: #181818;
+    --color-section-bg: #181818;
+    --color-btn-bg: #333543;
+    --color-btn-text: #eaeaea;
+    --color-border: #333333;
+    --color-muted: #aaaaaa;
+    --color-complete: oklch(50% 0.4 145);
+    --color-chip-bg: var(--color-complete);
+    --color-drag-over: #383a40;
+    --color-drag-over-edge: #777;
+    --hover-brightness: 110%;
+    --color-badge-bg: red;
+    --color-badge-text: white;
+    --color-secondary-active: #6a9eff;
+    --color-secondary-background: #181818;
+    --color-nav-btn-text: #eaeaea;
+    --color-chat-btn-text: #aaaaaa;
+    --color-input-bg: #212121;
+    --color-input-bg: #212121;
+    --color-input-text: #eaeaea;
+    --color-nav-text: #eaeaea;
+  }
+}
+
+body {
+  background: var(--color-bg);
+  color: var(--color-text);
+  transition: background 0.3s, color 0.3s;
+}
+
+nav {
+  background: var(--color-nav-bg);
+}
+
+a {
+  color: var(--color-link);
+}
+
+main,
+section.creative {
+  background: var(--color-section-bg);
+}
+
+button,
+input[type="button"],
+input[type="submit"] {
+  border: none;
+  border-radius: 1px;
+  padding: 2px 4px;
+  transition: background 0.3s, color 0.3s;
+}
+
+/* 기타 요소도 필요에 따라 추가 가능 */

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

@@ -0,0 +1,43 @@
+
+.common-popup {
+  position: absolute;
+  z-index: 1200;
+  background: var(--color-section-bg);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  border-radius: 6px;
+  padding: 0.35em;
+  max-width: min(420px, 90vw);
+}
+
+.common-popup-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.mention-popup ul,
+.common-popup ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mention-item {
+  padding: 0.3em 0.5em;
+  cursor: pointer;
+}
+
+.mention-item:hover,
+.mention-item.active,
+.common-popup-item:hover,
+.common-popup-item.active {
+  background: var(--color-drag-over);
+}
+
+.common-popup-item {
+  padding: 0.35em 0.5em;
+  cursor: pointer;
+}