collavre 0.1.0

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

@@ -0,0 +1,160 @@
+.popup-box {
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  padding: 1em;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Share popup specific tweaks */
+#share-creative-modal .popup-box {
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+#share-creative-modal .share-grid {
+  max-height: 40vh;
+  overflow-y: auto;
+}
+
+.share-grid {
+  list-style: none;
+  padding: 0;
+}
+
+.share-grid li {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 0.5em;
+  align-items: center;
+  margin-bottom: 0.5em;
+}
+
+.share-avatar {
+  margin-right: 0.4em;
+}
+
+#link-creative-modal {
+  min-width: 320px;
+}
+
+.common-popup {
+  position: absolute;
+  z-index: 1000;
+  background: var(--color-section-bg);
+  border: 1px solid var(--color-border);
+  padding: 1em;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  max-width: 90vw;
+}
+
+.common-popup input[type="text"] {
+  width: 100%;
+  box-sizing: border-box;
+  margin-bottom: 0.75em;
+  padding: 0.5em;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background: var(--color-bg);
+  color: var(--color-text);
+}
+
+.common-popup h3 {
+  margin-top: 0;
+  margin-bottom: 0.75em;
+  font-size: 1.1em;
+}
+
+.popup-close-btn {
+  position: absolute;
+  top: 0.75em;
+  right: 0.75em;
+  background: none;
+  border: none;
+  font-size: 1.2em;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--color-text);
+}
+
+#github-integration-modal .github-modal-status {
+  color: var(--color-muted);
+  margin-bottom: 1em;
+}
+
+#github-integration-modal .github-modal-subtext {
+  color: var(--color-muted);
+}
+
+#github-integration-modal .github-existing-connections {
+  margin-top: 1.25em;
+}
+
+#github-integration-modal .github-modal-list {
+  padding-left: 1.2em;
+  margin-bottom: 0.75em;
+  color: var(--color-text);
+}
+
+#github-integration-modal .github-modal-list-box {
+  border: 1px solid var(--color-border);
+  padding: 0.5em;
+  border-radius: 4px;
+  background: var(--color-section-bg);
+  color: var(--color-text);
+}
+
+#github-integration-modal .github-modal-empty {
+  color: var(--color-muted);
+}
+
+.popup-menu-wrapper {
+  display: inline-block;
+  position: relative;
+}
+
+.popup-menu {
+  display: none;
+  position: absolute;
+  z-index: 1000;
+  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;
+  top: calc(100% + 4px);
+  left: 0;
+  transform: translateX(0);
+}
+
+.popup-menu-right {
+  left: auto;
+  right: 0;
+}
+
+#user-menu button {
+  display: block;
+  text-align: left;
+  min-width: 100%;
+}
+
+@media (max-width: 768px) {
+
+  #mobile-more-menu button,
+  #mobile-more-menu a {
+    display: block;
+    min-width: 100%;
+    text-align: left;
+  }
+
+  #mobile-more-menu .progress-filter-group {
+    display: block;
+    min-width: 100%;
+  }
+}

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

@@ -0,0 +1,37 @@
+@media print {
+  :root {
+    --creative-row-text-offset: 0px;
+  }
+
+  nav,
+  #plans-list-area,
+  #inbox-panel,
+  .creative-actions-row,
+  .creative-action-btn,
+  .creative-row-actions,
+  .creative-toggle-btn,
+  .select-creative-checkbox,
+  #creative-guide-popover,
+  #creative-guide-link,
+  #inbox-menu-btn,
+  #plans-menu-btn,
+  button,
+  input[type="button"],
+  input[type="submit"],
+  form {
+    display: none !important;
+  }
+
+  main {
+    margin: 0;
+  }
+
+  .page-title {
+    margin-left: 0 !important;
+    visibility: visible !important;
+  }
+
+  .creative-actions-row {
+    visibility: visible !important;
+  }
+}

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

@@ -0,0 +1,79 @@
+#slide-view {
+  height: 100vh;
+  display: flex;
+  overflow: auto;
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+#slide-content {
+  margin: auto;
+  font-size: 150%;
+}
+
+#slide-content .trix-content {
+    line-height: 1.8;
+}
+
+#slide-controls {
+  position: fixed;
+  bottom: 0.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+#slide-counter {
+  pointer-events: none;
+}
+
+#slide-goto {
+  text-decoration: none;
+}
+
+#slide-swipe {
+  display: none;
+}
+
+#slide-caption {
+  display: none;
+}
+
+#slide-timer {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  #slide-view {
+    height: 80vh;
+  }
+
+  #slide-swipe {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 20vh;
+    background: var(--color-border);
+    align-items: center;
+    justify-content: center;
+  }
+
+  #slide-caption {
+    display: block;
+    pointer-events: none;
+    padding: 0.5rem;
+    text-align: center;
+    white-space: pre-wrap;
+  }
+
+  #slide-timer {
+    display: block;
+    margin-top: 0.5rem;
+    font-variant-numeric: tabular-nums;
+  }
+}

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

@@ -0,0 +1,34 @@
+.nav-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+}
+
+.avatar {
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.comment-avatar {
+  margin-right: 0.4em;
+}
+
+.avatar-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.avatar-initial {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  color: var(--color-text);
+  pointer-events: none;
+}
+

data/app/channels/collavre/comments_presence_channel.rb

@@ -0,0 +1,54 @@
+module Collavre
+class CommentsPresenceChannel < ApplicationCable::Channel
+  def subscribed
+    Rails.logger.info "User #{current_user&.email} subscribed to comments presence for creative #{params[:creative_id]}"
+    return unless params[:creative_id].present? && current_user
+
+    @creative_id = Creative.find(params[:creative_id].to_i).effective_origin.id
+    creative = Creative.find(@creative_id)
+    stream_from stream_name
+    CommentPresenceStore.add(@creative_id, current_user.id)
+    Comment.broadcast_badge(creative, current_user)
+    broadcast_presence
+  end
+
+  def unsubscribed
+    if @creative_id && current_user
+      CommentPresenceStore.remove(@creative_id, current_user.id)
+      creative = Creative.find(@creative_id)
+      pointer = CommentReadPointer.find_or_initialize_by(user: current_user, creative: creative)
+      pointer.last_read_comment_id = creative.comments.maximum(:id)
+      pointer.save!
+      Comment.broadcast_badge(creative, current_user)
+      broadcast_presence
+    end
+  end
+
+  def typing
+    return unless @creative_id && current_user
+
+    ActionCable.server.broadcast(
+      stream_name,
+      { typing: { id: current_user.id, name: current_user.display_name } }
+    )
+  end
+
+  def stopped_typing
+    return unless @creative_id && current_user
+
+    ActionCable.server.broadcast(stream_name, { stop_typing: { id: current_user.id } })
+  end
+
+  private
+
+  def stream_name
+    "comments_presence:#{@creative_id}"
+  end
+
+  def broadcast_presence
+    ids = CommentPresenceStore.list(@creative_id)
+    Rails.logger.info "Broadcasting presence for creative #{@creative_id} to #{stream_name}, users: #{ids.join(', ')}"
+    ActionCable.server.broadcast(stream_name, { ids: ids })
+  end
+end
+end

data/app/channels/collavre/slide_view_channel.rb

@@ -0,0 +1,11 @@
+module Collavre
+class SlideViewChannel < ApplicationCable::Channel
+  def subscribed
+    stream_for [ current_user.id, params[:root_id] ]
+  end
+
+  def change(data)
+    SlideViewChannel.broadcast_to([ current_user.id, params[:root_id] ], index: data["index"])
+  end
+end
+end

data/app/channels/collavre/topics_channel.rb

@@ -0,0 +1,12 @@
+module Collavre
+class TopicsChannel < ApplicationCable::Channel
+  def subscribed
+    return reject unless params[:creative_id].present? && current_user
+
+    @creative = Creative.find(params[:creative_id]).effective_origin
+    return reject unless @creative.has_permission?(current_user, :read)
+
+    stream_for @creative
+  end
+end
+end

data/app/components/collavre/avatar_component.html.erb

@@ -0,0 +1,15 @@
+<div class="avatar-wrapper" style="width: <%= size %>px; height: <%= size %>px;">
+  <%= image_tag avatar_url,
+                alt: '',
+                width: size,
+                height: size,
+                class: classes,
+                title: email,
+                style: 'border-radius:50%;vertical-align:middle;',
+                data: data %>
+  <% if default_avatar? %>
+    <span class="avatar-initial" style="font-size: <%= (size / 2.0).round %>px;">
+      <%= initial %>
+    </span>
+  <% end %>
+</div>

data/app/components/collavre/avatar_component.rb

@@ -0,0 +1,59 @@
+module Collavre
+class AvatarComponent < ViewComponent::Base
+  # Enable fragment caching for avatar components
+  # Cache key includes user version (for display_name changes), avatar blob key, and size
+  def self.cache_key_for(user, size)
+    if user
+      avatar_key = user.avatar.attached? ? user.avatar.blob&.key : user.avatar_url.to_s
+      "avatar/#{user.cache_key_with_version}/#{avatar_key}/#{size}"
+    else
+      "avatar/anonymous/#{size}"
+    end
+  end
+
+  def initialize(user:, size: 32, classes: "", data: {})
+    @user = user
+    @size = size
+    @classes = classes
+    @data = data
+  end
+
+  attr_reader :size, :classes, :data
+
+  # Cache key for this component instance
+  def cache_key
+    self.class.cache_key_for(@user, @size)
+  end
+
+  def avatar_url
+    # Cache avatar URL computation
+    @avatar_url ||= compute_avatar_url
+  end
+
+  def default_avatar?
+    @user && !@user.avatar.attached? && @user.avatar_url.blank?
+  end
+
+  def initial
+    @user.display_name[0].upcase
+  end
+
+  def email
+    if @user
+      @user.display_name
+    else
+      I18n.t("collavre.comments.anonymous")
+    end
+  end
+
+  private
+
+  def compute_avatar_url
+    if @user
+      helpers.user_avatar_url(@user, size: @size)
+    else
+      helpers.asset_path("default_avatar.svg")
+    end
+  end
+end
+end

data/app/components/collavre/inbox/badge_component.html.erb

@@ -0,0 +1,6 @@
+
+<%= render partial: 'inbox/badge_component/count', formats: :html, locals: {
+  count: count,
+  badge_id: badge_id,
+  show_zero: show_zero
+} %>

data/app/components/collavre/inbox/badge_component.rb

@@ -0,0 +1,18 @@
+module Collavre
+module Inbox
+  class BadgeComponent < ViewComponent::Base
+    attr_reader :badge_id, :show_zero
+
+      def initialize(user: nil, count: nil, badge_id: "desktop-inbox-badge", show_zero: false)
+      @user = user
+      @count = count
+      @badge_id = badge_id
+      @show_zero = show_zero
+    end
+
+    def count
+      @count || InboxItem.where(owner: @user, state: "new").count
+    end
+  end
+end
+end

data/app/components/collavre/plans_timeline_component.html.erb

@@ -0,0 +1,14 @@
+<div class="plans-timeline-wrapper">
+  <button id="timeline-today-btn" type="button"><%= t('collavre.plans.today', default: '오늘') %></button>
+  <div id="plans-timeline" class="horizontal-timeline" data-plans='<%= raw plan_data.to_json %>' data-start-date="<%= @start_date %>" data-end-date="<%= @end_date %>" data-delete-confirm="<%= t('collavre.plans.delete_confirm', default: 'Are you sure?') %>"></div>
+</div>
+<hr>
+<div class="plan-form-container">
+<%= form_with(model: Plan.new, url: helpers.collavre.plans_path, local: true, id: 'new-plan-form') do |form| %>
+    <%= form.hidden_field :creative_id, id: 'plan-creative-id' %>
+    <input type="text" id="plan-select-creative-input" placeholder="<%= t('collavre.plans.select_creative', default: 'Select Creative') %>" autocomplete="off">
+    <%= form.date_field :target_date, placeholder: t('collavre.plans.target_date'), id: 'plan-target-date' %>
+    <%= form.submit t('collavre.plans.add_plan'), id: 'add-plan-btn', disabled: true %>
+<% end %>
+</div>
+

data/app/components/collavre/plans_timeline_component.rb

@@ -0,0 +1,56 @@
+module Collavre
+class PlansTimelineComponent < ViewComponent::Base
+  def initialize(plans:, calendar_events: CalendarEvent.none)
+    @start_date = Date.current - 30
+    @end_date = Date.current + 30
+    @plans = plans
+      .where("target_date >= ? AND created_at <= ?", @start_date, @end_date)
+      .select { |plan| plan.readable_by?(Current.user) }
+      .sort_by(&:created_at)
+    @calendar_events = calendar_events
+      .includes(:creative)
+      .where("DATE(start_time) <= ? AND DATE(end_time) >= ?", @end_date, @start_date)
+      .order(:start_time)
+  end
+
+  attr_reader :plans, :start_date, :end_date, :calendar_events
+
+  def plan_data
+    @plan_data ||= begin
+      plan_items = @plans.map do |plan|
+        {
+          id: plan.id,
+          name: (plan.creative&.effective_description(nil, false) || plan.name.presence || I18n.l(plan.target_date)),
+          created_at: plan.created_at.to_date,
+          target_date: plan.target_date,
+          progress: plan.progress,
+          path: plan_creatives_path(plan),
+          deletable: plan.owner_id == Current.user&.id
+        }
+      end
+      event_items = @calendar_events.map do |event|
+        {
+          id: "calendar_event_#{event.id}",
+          name: event.summary.presence || I18n.l(event.start_time.to_date),
+          created_at: event.start_time.to_date,
+          target_date: event.end_time.to_date,
+          progress: event.creative&.progress || 0,
+          path: event.creative ? helpers.collavre.creative_path(event.creative) : event.html_link,
+          deletable: event.user_id == Current.user&.id
+        }
+      end
+      plan_items + event_items
+    end
+  end
+
+  private
+
+  def plan_creatives_path(plan)
+    if helpers.params[:id].present?
+      helpers.collavre.creative_path(helpers.params[:id], tags: [ plan.id ])
+    else
+      helpers.collavre.creatives_path(tags: [ plan.id ])
+    end
+  end
+end
+end

data/app/components/collavre/popup_menu_component.html.erb

@@ -0,0 +1,6 @@
+<div class="popup-menu-wrapper" data-controller="popup-menu">
+  <%= button_tag raw(button_content), button_options %>
+  <div id="<%= menu_id %>" class="popup-menu <%= 'popup-menu-right' if align.to_sym == :right %>" data-popup-menu-target="menu" data-action="click->popup-menu#menuClick">
+    <%= content %>
+  </div>
+</div>

data/app/components/collavre/popup_menu_component.rb

@@ -0,0 +1,30 @@
+module Collavre
+class PopupMenuComponent < ViewComponent::Base
+  def initialize(button_content:, button_classes: "", menu_id: nil, align: :left, button_attributes: {})
+    @button_content = button_content
+    @button_classes = button_classes
+    @menu_id = menu_id || "popup-menu-#{SecureRandom.hex(4)}"
+    @align = align
+    @button_attributes = button_attributes
+  end
+
+  attr_reader :button_content, :button_classes, :menu_id, :align, :button_attributes
+
+  def button_options
+    defaults = {
+      type: "button",
+      class: [ "popup-menu-toggle", button_classes.presence ].compact.join(" "),
+      data: {
+        action: "click->popup-menu#toggle",
+        popup_menu_target: "button"
+      }
+    }
+
+    return defaults if button_attributes.blank?
+
+    defaults.deep_merge(button_attributes) do |key, this_val, other_val|
+      key == :class ? [ this_val, other_val ].compact.join(" ") : other_val
+    end
+  end
+end
+end

data/app/components/collavre/progress_filter_component.html.erb

@@ -0,0 +1,5 @@
+<div class="progress-filter-group" data-controller="progress-filter">
+  <% states.each do |state| %>
+    <button class="progress-filter-btn<%= ' active' if current_state.to_s == state[:value].to_s %>" data-action="click->progress-filter#apply" data-progress-filter-target="button" data-progress-filter-filter-param="<%= state[:value] %>"><%= state[:name] %></button>
+  <% end %>
+</div>

data/app/components/collavre/progress_filter_component.rb

@@ -0,0 +1,10 @@
+module Collavre
+class ProgressFilterComponent < ViewComponent::Base
+  def initialize(current_state:, states: [])
+    @current_state = current_state&.to_sym
+    @states = states
+  end
+
+  attr_reader :current_state, :states
+end
+end

data/app/components/collavre/user_mention_menu_component.html.erb

@@ -0,0 +1,3 @@
+<div id="<%= menu_id %>" class="mention-popup common-popup" style="display:none;">
+  <ul class="mention-results common-popup-list" data-popup-list></ul>
+</div>

data/app/components/collavre/user_mention_menu_component.rb

@@ -0,0 +1,8 @@
+module Collavre
+class UserMentionMenuComponent < ViewComponent::Base
+  def initialize(menu_id: "mention-menu")
+    @menu_id = menu_id
+  end
+  attr_reader :menu_id
+end
+end

data/app/controllers/collavre/application_controller.rb

@@ -0,0 +1,15 @@
+module Collavre
+  class ApplicationController < ::ApplicationController
+    protect_from_forgery with: :exception
+
+    private
+
+    # Helper to get the engine's routes
+    def collavre_engine
+      Collavre::Engine.routes.url_helpers
+    end
+
+    # Note: main_app is provided automatically by Rails engines with proper
+    # request-aware URL generation (handles script_name, subpath mounting, etc.)
+  end
+end