collavre 0.1.0

data/app/views/collavre/creatives/_import_upload_zone.html.erb

@@ -0,0 +1,10 @@
+<div id="import-markdown-area" data-creatives--import-target="area" style="display:none; margin: 1em 0;">
+  <div id="import-markdown-dropzone"
+    style="border:2px dashed var(--color-border);padding:2em;text-align:center;cursor:pointer;"
+    data-creatives--import-target="dropzone"
+    data-action="dragover->creatives--import#dragOver dragleave->creatives--import#dragLeave drop->creatives--import#drop click->creatives--import#pickFile">
+    <%= t('collavre.creatives.index.drop_or_click_markdown') %>
+    <input type="file" id="import-markdown-input" accept=".md,.ppt,.pptx" style="display:none;" data-creatives--import-target="input" data-action="change->creatives--import#fileChanged" />
+    <div id="import-markdown-progress" style="margin-top:1em;color:#0074d9;display:none;" data-creatives--import-target="progress"></div>
+  </div>
+</div>

data/app/views/collavre/creatives/_inline_edit_form.html.erb

@@ -0,0 +1,89 @@
+<div id="inline-edit-form" class="inline-edit-form-shell" style="display:none;">
+  <form id="inline-edit-form-element" method="post">
+    <input type="hidden" id="inline-method" name="_method" value="patch" />
+    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>" />
+    <input type="hidden" id="inline-creative-description" name="creative[description]" />
+    <input type="hidden" id="inline-parent-id" name="creative[parent_id]" />
+    <input type="hidden" id="inline-before-id" name="before_id" />
+    <input type="hidden" id="inline-after-id" name="after_id" />
+    <input type="hidden" id="inline-child-id" name="child_id" />
+    <input type="hidden" id="inline-origin-id" name="creative[origin_id]" />
+    <div id="lexical-inline-editor"
+         data-lexical-editor-root
+         class="lexical-inline-editor"
+         data-direct-upload-url="<%= main_app.rails_direct_uploads_url %>"
+         data-blob-url-template="<%= main_app.rails_service_blob_url(':signed_id', ':filename') %>"
+         data-placeholder="<%= t('collavre.creatives.inline_editor.placeholder') %>"></div>
+    <div id="actions-inline-editor" style="padding: 0px 8px;">
+      <div style="margin-top:0.5em;display:flex;align-items:center;gap:0.5em;">
+        <input type="range" id="inline-creative-progress" name="creative[progress]" min="0" max="1" step="0.01">
+        <span id="inline-progress-value">0%</span>
+      </div>
+      <div style="margin-top:0.5em;">
+        <button type="button" id="inline-move-up" class="creative-action-btn" title="<%= t('collavre.creatives.index.inline_move_up_tooltip') %>">
+          &nbsp;<%= svg_tag 'arrow-up.svg', class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <button type="button" id="inline-move-down" class="creative-action-btn" title="<%= t('collavre.creatives.index.inline_move_down_tooltip') %>">
+          &nbsp;<%= svg_tag 'arrow-down.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <button type="button" id="inline-add" class="creative-action-btn add-creative-btn" title="<%= t('collavre.creatives.index.inline_add_sibling_tooltip') %>">
+          &nbsp;<%= svg_tag 'add.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <button type="button" id="inline-level-down" class="creative-action-btn add-creative-btn" title="<%= t('collavre.creatives.index.inline_level_down_tooltip') %>">
+          &nbsp;
+          <%= svg_tag 'hierarchy-child.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <button type="button" id="inline-level-up" class="creative-action-btn add-creative-btn" title="<%= t('collavre.creatives.index.inline_level_up_tooltip') %>">
+          &nbsp;
+          <%= svg_tag 'hierarchy-parent.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <% inline_delete_button_content = capture do %>
+          &nbsp;<%= svg_tag 'trash-bold-outline.svg', class: 'icon-svg', width: 24, height: 24 %>
+        <% end %>
+        <%= render PopupMenuComponent.new(
+              button_content: inline_delete_button_content,
+              button_classes: 'creative-action-btn danger-link',
+              button_attributes: { id: 'inline-delete-popup-toggle' },
+              menu_id: 'inline-delete-popup-menu'
+            ) do %>
+          <button type="button"
+                  id="inline-delete"
+                  class="popup-menu-item danger-link"
+                  title="<%= t('collavre.creatives.index.delete_only_this') %>"
+                  data-confirm="<%= t('collavre.creatives.index.are_you_sure_delete_only_this') %>">
+            <%= t('collavre.creatives.index.delete_only_this') %>
+          </button>
+          <button type="button"
+                  id="inline-delete-with-children"
+                  class="popup-menu-item danger-link"
+                  title="<%= t('collavre.creatives.index.delete_with_children') %>"
+                  data-confirm="<%= t('collavre.creatives.index.are_you_sure_delete_with_children') %>">
+            <%= t('collavre.creatives.index.delete_with_children') %>
+          </button>
+        <% end %>
+        <button type="button" id="inline-link" class="creative-action-btn" title="<%= t('collavre.creatives.index.link') %>">
+          &nbsp;<%= svg_tag 'link.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <button type="button"
+                id="inline-unconvert"
+                class="creative-action-btn"
+                title="<%= t('collavre.creatives.index.unconvert') %>"
+                data-confirm="<%= t('collavre.creatives.index.unconvert_confirm') %>"
+                data-error="<%= t('collavre.creatives.index.unconvert_failed') %>">
+          &nbsp;<%= svg_tag 'hierarchy-parent.svg',class: 'icon-svg', width: 16, height: 16 %>
+           <%= svg_tag 'comment.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <button type="button" id="inline-unlink" class="creative-action-btn danger-link" title="<%= t('collavre.creatives.index.unlink') %>" data-confirm="<%= t('collavre.creatives.index.are_you_sure_unlink') %>" style="display:none;">
+          &nbsp;<%= svg_tag 'unlink.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+        <button type="button" id="inline-close" class="creative-action-btn" title="<%= t('collavre.creatives.index.inline_close_tooltip') %>">
+          &nbsp;<%= svg_tag 'close.svg',class: 'icon-svg', width: 24, height: 24 %>
+        </button>
+      </div>
+      <button type="button" id="inline-recommend-parent" class="creative-action-btn" style="margin-top:0.5em;" title="<%= t('collavre.creatives.index.recommend_parent') %>">✨<%= t('collavre.creatives.index.recommend_parent') %></button>
+      <select id="parent-suggestions" size="5" style="display:none;margin-top:0.5em;width:100%;"></select>
+    </div>
+  </form>
+</div>
+
+

data/app/views/collavre/creatives/_mobile_actions_menu.html.erb

@@ -0,0 +1,24 @@
+<div class="mobile-only">
+  <%= render PopupMenuComponent.new(
+        button_content: '...',
+        menu_id: 'mobile-actions-menu',
+        align: :right
+      ) do %>
+    <% current_creative = local_assigns[:current_creative] || @parent_creative || @creative %>
+    <% can_manage_integrations = local_assigns.fetch(:can_manage_integrations, current_creative&.has_permission?(Current.user, :admin)) %>
+    <% if current_creative&.has_permission?(Current.user, :write) %>
+      <button type="button" class="popup-menu-item" data-controller="click-target" data-click-target-id-value="share-creative-btn" data-action="click->click-target#trigger"><%= t('collavre.creatives.index.share') %></button>
+    <% end %>
+    <% if can_manage_integrations %>
+      <button type="button" class="popup-menu-item" data-controller="click-target" data-click-target-id-value="github-integration-btn" data-action="click->click-target#trigger"><%= t('collavre.creatives.index.integrations', default: '연동') %> - Github</button>
+       <button type="button" class="popup-menu-item" data-controller="click-target" data-click-target-id-value="notion-integration-btn" data-action="click->click-target#trigger"><%= t('collavre.creatives.index.integrations', default: '연동') %> - Notion</button>
+    <% end %>
+    <% if @parent_creative.present? %>
+      <%= button_to t('collavre.creatives.index.slide_view'), slide_view_creative_path(@parent_creative), method: :get, class: 'popup-menu-item' %>
+    <% end %>
+    <% if authenticated? && (!params[:id] || (current_creative && current_creative.has_permission?(Current.user, :write))) %>
+      <button type="button" class="popup-menu-item" data-controller="click-target" data-click-target-id-value="import-markdown-btn" data-action="click->click-target#trigger"><%= t('collavre.creatives.index.import_markdown') %></button>
+    <% end %>
+    <button type="button" class="popup-menu-item" data-controller="click-target" data-click-target-id-value="export-markdown-btn" data-action="click->click-target#trigger"><%= t('collavre.creatives.index.export_markdown') %></button>
+  <% end %>
+</div>

data/app/views/collavre/creatives/_notion_integration_modal.html.erb

@@ -0,0 +1,90 @@
+<div id="notion-integration-modal"
+     data-success-message="<%= t('collavre.creatives.index.notion_integration_saved', default: 'Notion integration saved successfully.') %>"
+     data-login-required="<%= t('collavre.creatives.index.notion_integration_login_required', default: 'Sign in with your Notion account to start the integration.') %>"
+     data-no-creative="<%= t('collavre.creatives.index.notion_integration_missing_creative', default: 'No Creative selected for integration.') %>"
+     data-existing-message="<%= t('collavre.creatives.index.notion_integration_existing_message', default: 'You\'re already connected to Notion pages below.') %>"
+     data-delete-confirm="<%= t('collavre.creatives.index.notion_integration_delete_confirm', default: 'Do you want to remove the Notion integration?') %>"
+     data-delete-success="<%= t('collavre.creatives.index.notion_integration_delete_success', default: 'Notion integration removed successfully.') %>"
+     data-delete-error="<%= t('collavre.creatives.index.notion_integration_delete_error', default: 'Failed to remove the Notion integration.') %>"
+     data-delete-button-label="<%= t('collavre.creatives.index.notion_integration_delete_button', default: 'Remove integration') %>"
+     data-export-success="<%= t('collavre.creatives.index.notion_export_success', default: 'Creative exported to Notion successfully.') %>"
+     data-sync-success="<%= t('collavre.creatives.index.notion_sync_success', default: 'Creative synced to Notion successfully.') %>"
+     style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;align-items:center;justify-content:center;">
+  <div class="popup-box" style="min-width:360px;max-width:90vw;">
+    <button type="button" id="close-notion-modal" class="popup-close-btn">&times;</button>
+    <h2><%= t('collavre.creatives.index.notion_integration_title', default: 'Configure Notion integration') %></h2>
+    <p id="notion-integration-status" class="notion-modal-status"></p>
+
+    <div class="notion-wizard-step" id="notion-step-connect">
+      <p id="notion-connect-message" class="notion-modal-subtext"><%= t('collavre.creatives.index.notion_integration_connect', default: 'Sign in with your Notion account to start exporting.') %></p>
+      <form id="notion-login-form" action="/auth/notion" method="get" target="notion-auth-window" style="display:none;">
+      </form>
+      <button type="button" id="notion-login-btn" class="btn btn-primary" data-window-width="620" data-window-height="720">
+        <%= t('collavre.creatives.index.notion_login_button', default: 'Sign in with Notion') %>
+      </button>
+      <div id="notion-existing-connections" style="display:none;margin-top:1.25em;">
+        <p style="margin-bottom:0.5em;"><%= t('collavre.creatives.index.notion_integration_existing_intro', default: 'Linked Notion pages:') %></p>
+        <ul id="notion-existing-page-list" style="padding-left:1.2em;margin-bottom:0.75em;color:var(--color-text);"></ul>
+        <div style="display:flex;gap:0.5em;">
+          <button type="button" id="notion-sync-btn" class="btn btn-secondary" style="display:none;">
+            <%= t('collavre.creatives.index.notion_sync_button', default: 'Sync to Notion') %>
+          </button>
+          <button type="button" id="notion-delete-btn" class="btn btn-danger" style="display:none;">
+            <%= t('collavre.creatives.index.notion_integration_delete_button', default: 'Remove link') %>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="notion-wizard-step" id="notion-step-workspace" style="display:none;">
+      <p class="notion-modal-subtext"><%= t('collavre.creatives.index.notion_integration_workspace', default: 'Your Notion workspace is connected. Choose how to export your creative.') %></p>
+      <div id="notion-workspace-info" style="margin-bottom:1em;padding:1em;background:var(--color-bg-alt);border-radius:4px;">
+        <strong id="notion-workspace-name"></strong>
+      </div>
+      <div style="margin-bottom:1em;">
+        <label style="display:block;margin-bottom:0.5em;">
+          <%= t('collavre.creatives.index.notion_export_option', default: 'Export option:') %>
+        </label>
+        <div style="display:flex;flex-direction:column;gap:0.5em;">
+          <label style="display:flex;align-items:center;gap:0.5em;">
+            <input type="radio" name="notion-export-type" value="new-page" checked>
+            <%= t('collavre.creatives.index.notion_export_new_page', default: 'Create new page') %>
+          </label>
+          <label style="display:flex;align-items:center;gap:0.5em;">
+            <input type="radio" name="notion-export-type" value="select-parent">
+            <%= t('collavre.creatives.index.notion_export_under_page', default: 'Create as subpage under existing page') %>
+          </label>
+        </div>
+      </div>
+      <div id="notion-parent-page-section" style="display:none;margin-bottom:1em;">
+        <label for="notion-parent-page-select" style="display:block;margin-bottom:0.5em;">
+          <%= t('collavre.creatives.index.notion_parent_page', default: 'Parent page:') %>
+        </label>
+        <select id="notion-parent-page-select" style="width:100%;padding:0.5em;border:1px solid var(--color-border);border-radius:4px;">
+          <option value=""><%= t('collavre.creatives.index.notion_loading', default: 'Loading pages...') %></option>
+        </select>
+      </div>
+    </div>
+
+    <div class="notion-wizard-step" id="notion-step-summary" style="display:none;">
+      <p class="notion-modal-subtext"><%= t('collavre.creatives.index.notion_integration_summary', default: 'Ready to export your creative tree to Notion:') %></p>
+      <div id="notion-export-summary" style="margin:1em 0;padding:1em;background:var(--color-bg-alt);border-radius:4px;">
+        <div><strong><%= t('collavre.creatives.index.notion_creative_title', default: 'Root Creative:') %></strong> <span id="notion-creative-title"></span></div>
+        <div><strong><%= t('collavre.creatives.index.notion_workspace', default: 'Workspace:') %></strong> <span id="notion-workspace-summary"></span></div>
+        <div><strong><%= t('collavre.creatives.index.notion_export_as', default: 'Export as:') %></strong> <span id="notion-export-type-summary"></span></div>
+        <div id="notion-parent-summary" style="display:none;"><strong><%= t('collavre.creatives.index.notion_parent_page', default: 'Parent page:') %></strong> <span id="notion-parent-page-summary"></span></div>
+        <div style="margin-top:0.5em;color:var(--color-text-secondary);font-size:0.9em;"><%= t('collavre.creatives.index.notion_tree_note', default: 'This will export the selected creative and all its descendants as a structured document.') %></div>
+      </div>
+    </div>
+
+    <div id="notion-wizard-error" style="display:none;margin:0.5em 0;color:#c0392b;font-weight:bold;"></div>
+
+    <div class="notion-wizard-footer" style="display:flex;justify-content:space-between;gap:0.5em;margin-top:1.5em;">
+      <button type="button" id="notion-prev-btn" class="btn btn-secondary" style="display:none;"><%= t('app.previous', default: 'Previous') %></button>
+      <div style="margin-left:auto;display:flex;gap:0.5em;">
+        <button type="button" id="notion-next-btn" class="btn btn-primary" style="display:none;"><%= t('app.next', default: 'Next') %></button>
+        <button type="button" id="notion-export-btn" class="btn btn-primary" style="display:none;"><%= t('collavre.creatives.index.notion_export_button', default: 'Export to Notion') %></button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/collavre/creatives/_set_plan_modal.html.erb

@@ -0,0 +1,25 @@
+<div id="set-plan-modal" data-creatives--set-plan-modal-target="modal" data-action="click->creatives--set-plan-modal#backdrop" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;align-items:center;justify-content:center;">
+  <div class="popup-box" style="min-width:320px;max-width:90vw;">
+    <button id="close-set-plan-modal" class="popup-close-btn" data-action="creatives--set-plan-modal#close">&times;</button>
+    <h2><%= t('collavre.creatives.index.set_plan_title', default: 'Set Plan for Selected Creatives') %></h2>
+    <form id="set-plan-form" method="post" action="<%= collavre.creative_plan_path %>" data-creatives--set-plan-modal-target="form" data-action="submit->creatives--set-plan-modal#submit">
+      <%= csrf_meta_tags %>
+      <div style="margin-bottom:1em;">
+        <label for="plan-id-select"><%= t('collavre.creatives.index.select_plan', default: 'Select Plan') %></label>
+        <select id="plan-id-select" name="plan_id" required style="width:100%;" data-creatives--set-plan-modal-target="planSelect">
+          <% Plan.all.each do |plan| %>
+            <option value="<%= plan.id %>"><%= plan.creative&.effective_description(nil, false).presence || plan.target_date %></option>
+          <% end %>
+        </select>
+      </div>
+      <!-- Hidden field for creative IDs, filled by JS -->
+      <input type="hidden" name="creative_ids" id="selected-creative-ids-input" data-creatives--set-plan-modal-target="idsInput" />
+      <div style="display:flex; gap:1em; align-items:center;">
+        <button type="button" id="remove-plan-btn" data-remove-path="<%= collavre.creative_plan_path %>" class="btn btn-danger" style="margin-right:0.5em;" data-action="click->creatives--set-plan-modal#remove">
+          <%= t('collavre.creatives.index.remove_plan', default: 'Remove Plan') %>
+        </button>
+        <button type="submit" class="btn btn-primary"><%= t('collavre.creatives.index.add_plan', default: 'Add Plan') %></button>
+      </div>
+    </form>
+  </div>
+</div>

data/app/views/collavre/creatives/_share_button.html.erb

@@ -0,0 +1,55 @@
+<button id="share-creative-btn" class="btn btn-primary desktop-only">
+  <span aria-hidden="true"><%= svg_tag 'share.svg', class: 'icon-up', width: 22, height: 20 %></span>
+</button>
+<!-- Share Creative Modal -->
+<div id="share-creative-modal" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;align-items:center;justify-content:center;" data-creative-id="<%= (@parent_creative || @creative).id %>">
+  <div class="popup-box" style="min-width:320px;max-width:90vw;">
+    <button id="close-share-modal" class="popup-close-btn">&times;</button>
+    <h2><%= t('collavre.creatives.index.share_creative') %></h2>
+    <form id="share-creative-form" action="<%= collavre.creative_creative_shares_path(@parent_creative || @creative) %>" method="post" data-controller="share-invite">
+      <%= csrf_meta_tags %>
+      <div style="margin-bottom:1em; position:relative;" 
+           data-controller="share-user-search"
+           data-share-user-search-creative-id-value="<%= (@parent_creative || @creative).id %>"
+           data-share-user-search-scope-value="contacts">
+        <label for="share-user-email"><%= t('collavre.creatives.index.user_email') %></label>
+        <input type="email" name="user_email" id="share-user-email" style="width:100%;" 
+          data-share-invite-target="email" 
+          data-share-user-search-target="input"
+          data-action="blur->share-invite#check input->share-user-search#input focus->share-user-search#focus keydown->share-user-search#handleKey"
+          autocomplete="off" />
+        <%= render UserMentionMenuComponent.new(menu_id: 'share-user-suggestions') %>
+      </div>
+      <div style="margin-bottom:1em;">
+        <select name="permission" id="share-permission" style="width:100%;">
+          <option value="no_access"><%= t('collavre.creatives.index.permission_no_access') %></option>
+          <option value="read"><%= t('collavre.creatives.index.permission_read') %></option>
+          <option value="feedback"><%= t('collavre.creatives.index.permission_feedback') %></option>
+          <option value="write"><%= t('collavre.creatives.index.permission_write') %></option>
+          <option value="admin"><%= t('collavre.creatives.index.permission_admin') %></option>
+        </select>
+      </div>
+      <button type="submit" class="btn btn-primary" data-share-invite-target="submit" data-share="<%= t('collavre.creatives.index.share') %>" data-invite="<%= t('collavre.creatives.index.invite') %>"><%= t('collavre.creatives.index.share') %></button>
+      <button type="button" id="creative-invite-link" class="btn btn-secondary" data-creative-id="<%= (@parent_creative || @creative).id %>" data-no-access-message="<%= t('collavre.creatives.index.invite_link_no_access') %>" data-copied-template="<%= t('collavre.creatives.index.invite_link_copied_permission', permission: '__PERMISSION__') %>"><%= t('collavre.creatives.index.invite_link') %></button>
+    </form>
+    <% if @shared_list.any? %>
+      <div style="margin-top:1em;">
+        <strong><%= t('collavre.creatives.index.shared_with') %>:</strong>
+        <ul class="share-grid">
+          <% @shared_list.each do |share| %>
+            <li>
+              <span>
+                <%= render AvatarComponent.new(user: share.user, size: 20, classes: 'avatar share-avatar') %>
+              </span>
+              <span><%= share.user&.display_name || (share.user_id.nil? ? t('collavre.creatives.index.public_share') : t('collavre.creatives.index.unknown_user')) %></span>
+              <span><%= t("collavre.creatives.index.permission_#{share.permission}") %></span>
+              <span>
+                <%= button_to '×', collavre.creative_creative_share_path(@parent_creative || @creative, share), method: :delete, form: { data: { turbo_confirm: t('collavre.creatives.index.are_you_sure_delete_share') } }, class: 'delete-share-btn', style: 'padding:0 0.5em;' %>
+              </span>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/collavre/creatives/edit.html.erb

@@ -0,0 +1,4 @@
+<h1><%= t('collavre.creatives.edit_title') %></h1>
+
+<p><%= t('collavre.creatives.edit.inline_editor_only_html') %></p>
+<%= link_to t('app.cancel'), @creative %>

data/app/views/collavre/creatives/index.html.erb

@@ -0,0 +1,192 @@
+<%= tag.div(flash[:alert], class: "flash-alert") if flash[:alert] %>
+
+<div data-controller="creatives--import creatives--select-mode creatives--drag-drop creatives--expansion creatives--row-editor creatives--set-plan-modal"
+     data-creatives--import-parent-id-value="<%= @parent_creative&.id %>"
+     data-creatives--import-uploading-value="<%= t('collavre.creatives.index.import_uploading') %>"
+     data-creatives--import-success-value="<%= t('collavre.creatives.index.import_success') %>"
+     data-creatives--import-failed-value="<%= t('collavre.creatives.index.import_failed') %>"
+     data-creatives--import-only-markdown-value="<%= t('collavre.creatives.index.only_markdown') %>"
+     data-creatives--set-plan-modal-select-one-value="<%= t('collavre.creatives.index.select_one_creative') %>"
+     data-creatives--set-plan-modal-select-plan-value="<%= t('collavre.creatives.index.select_plan_to_remove') %>">
+  <div class="creative-actions-row">
+  <%= render 'add_button' if authenticated? && (!params[:id] || (@parent_creative && @parent_creative.has_permission?(Current.user, :write))) %>
+  <% if @parent_creative&.parent_id.present? %>
+    <%= button_to creative_path(@parent_creative.owning_parent), method: :get, aria: { label: t('.up') } do %>
+      <span aria-hidden="true"><%= svg_tag 'arrow-up.svg', class: 'icon-up', width: 16, height: 16 %></span>
+    <% end %>
+  <% elsif @parent_creative.present? %>
+    <%= button_to creatives_path, class: "up-link", method: :get, aria: { label: t('.up') } do %>
+      <span aria-hidden="true"><%= svg_tag 'arrow-up.svg', class: 'icon-up', width: 16, height: 16 %></span>
+    <% end %>
+  <% end %>
+
+  <% current_creative = @parent_creative || @creative %>
+  <% can_manage_integrations = current_creative&.has_permission?(Current.user, :admin) %>
+  <% if (@parent_creative || @creative) && (@parent_creative || @creative).has_permission?(Current.user, :write) %>
+    <%= render 'share_button' %>
+  <% end %>
+
+  <% if can_manage_integrations %>
+    <%= render PopupMenuComponent.new(
+          button_content: t('collavre.creatives.index.integrations', default: '연동'),
+          menu_id: 'creative-integrations-menu',
+          align: :left,
+          button_classes: 'desktop-only'
+        ) do %>
+      <button type="button" class="popup-menu-item" data-controller="click-target" data-click-target-id-value="github-integration-btn" data-action="click->click-target#trigger">Github</button>
+       <button type="button" class="popup-menu-item" data-controller="click-target" data-click-target-id-value="notion-integration-btn" data-action="click->click-target#trigger">Notion</button>
+    <% end %>
+  <% end %>
+
+  <% if @parent_creative.present? %>
+    <%= button_to slide_view_creative_path(@parent_creative), method: :get, class: 'slide-view-btn desktop-only', aria: { label: t('collavre.creatives.index.slide_view') } do %>
+      <span aria-hidden="true"><%= svg_tag 'slide.svg', class: 'icon-slide', width: 22, height: 20 %></span>
+    <% end %>
+  <% end %>
+
+  <button id="set-plan-btn" class="set-plan-btn" style="display:none;" data-creatives--select-mode-target="setPlan" data-action="click->creatives--set-plan-modal#open"><%= t('app.set_plan') %></button>
+  <input type="checkbox" id="select-all-creatives" style="display:none;vertical-align:middle;" data-action="change->creatives--select-mode#toggleSelectAll" data-creatives--select-mode-target="selectAll" />
+  <% if authenticated? %>
+    <button id="select-creative-btn" class="select-btn" data-select-text="<%= t('app.select') %>" data-cancel-text="<%= t('app.cancel_select') %>" data-action="click->creatives--select-mode#toggle" data-creatives--select-mode-target="toggle"><%= t('app.select') %></button>
+  <% end %>
+  <% if (@parent_creative || @creative)&.has_permission?(Current.user, :admin) %>
+    <button id="delete-selection-btn" class="danger-link" style="display:none;" data-confirm="<%= t('collavre.creatives.index.are_you_sure_delete_selection') %>" data-action="click->creatives--select-mode#deleteSelected" data-creatives--select-mode-target="deleteButton"><%= t('collavre.creatives.index.delete_selection') %></button>
+  <% end %>
+  <button id="expand-all-btn" class="expand-btn" style="width: 36px;" data-expand-text="<%= t('app.expand_all') %>" data-collapse-text="<%= t('app.collapse_all') %>" data-action="click->creatives--expansion#toggleAll" data-creatives--expansion-target="expand"><span aria-hidden="true">▼</span></button>
+  <button id="toggle-edit-btn" class="edit-toggle-btn mobile-only" aria-label="<%= t('.edit') %>" title="<%= t('.edit') %>">
+    <span aria-hidden="true"><%= svg_tag 'edit.svg', class: 'icon-edit', width: 16, height: 16 %></span></button>
+  <% if authenticated? && (!params[:id] || (@parent_creative && @parent_creative.has_permission?(Current.user, :write))) %>
+    <button id="import-markdown-btn" class="import-btn desktop-only" data-action="click->creatives--import#toggle" data-creatives--import-target="toggle"><%= t('.import_markdown') %></button>
+  <% end %>
+  <button id="export-markdown-btn" class="export-btn desktop-only" data-parent-creative-id="<%= @parent_creative&.id %>" data-error="<%= t('collavre.creatives.index.export_failed') %>"><%= t('.export_markdown') %></button>
+  <%= render 'mobile_actions_menu', current_creative: current_creative, can_manage_integrations: can_manage_integrations %>
+</div>
+  <%= render 'import_upload_zone' %>
+
+<% if can_manage_integrations %>
+  <button id="github-integration-btn" data-creative-id="<%= current_creative&.id %>" style="display:none;"></button>
+  <button id="notion-integration-btn" data-creative-id="<%= current_creative&.id %>" style="display:none;"></button>
+<% end %>
+
+
+
+<%= stylesheet_link_tag 'collavre/comments_popup', media: 'all' %>
+<%= stylesheet_link_tag 'collavre/mention_menu', media: 'all' %>
+
+<div class="tags">
+  <% labels = @parent_creative&.tags&.map { |tag| tag.label }&.compact %>
+  <% labels&.each do |label| %>
+    <input type="checkbox" class="tag-checkbox"
+           <%= "checked" unless params[:tags].present? && params[:tags].include?(label.id.to_s) %>
+           value="<%= label.id %>">
+
+      <%= "##{strip_tags(label.name)}" %>
+      <% if label.type == "Plan" %> 🗓<%= label.target_date %><% end %>
+
+  <% end %>
+  <% if labels.present? %>
+  <button id="apply-tags"><%= t('app.apply_tags') %></button>
+  <% end %>
+</div>
+
+<% if @parent_creative %>
+  <% content_for :head do %>
+    <meta property="og:title" content="<%= strip_tags(@parent_creative.effective_origin.description) %>">
+  <% end %>
+  <% title_templates = [
+        content_tag(:template, data: { part: "description" }) { sanitize @parent_creative.effective_description },
+        content_tag(:template, data: { part: "progress" }) { render_creative_progress(@parent_creative) }
+      ] %>
+  <% if @parent_creative.origin_id.present? %>
+    <% title_templates << content_tag(:template, data: { part: "origin-link" }) do %>
+      <%= link_to creative_path(@parent_creative.origin),
+                  class: "creative-origin-link creative-action-btn unstyled-link",
+                  title: t("collavre.creatives.index.view_origin"),
+                  aria: { label: t("collavre.creatives.index.view_origin") } do %>
+        <%= svg_tag "arrow-right.svg", class: "creative-origin-link-icon", width: 16, height: 16 %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%
+    title_row_content = safe_join(title_templates)
+    title_row_content += content_tag(:template, data: { part: "edit-icon" }) { svg_tag("edit.svg", class: "icon-edit") }
+    title_row_content += content_tag(:template, data: { part: "edit-off-icon" }) { svg_tag("edit-off.svg", class: "icon-edit") }
+  %>
+  <%= content_tag(
+        "creative-tree-row",
+        title_row_content,
+        "dom-id": "creative-markdown-block",
+        "creative-id": @parent_creative.id,
+        "parent-id": @parent_creative.parent_id,
+        "can-write": @parent_creative.has_permission?(Current.user, :write) ? "true" : "false",
+        "is-title": "",
+        "data-description-raw-html": @parent_creative.description,
+        "data-progress-value": @parent_creative.progress,
+        "data-origin-id": @parent_creative.origin_id
+      ) %>
+<% else %>
+  <%= content_tag(
+        "creative-tree-row",
+        content_tag(:template, data: { part: "description" }) do
+          if params[:tags].present?
+            render_tags(Label.where(id: params[:tags]), "unstyled-link")
+          else
+            t('.creatives')
+          end
+        end +
+        content_tag(:template, data: { part: "progress" }) do
+          if @overall_progress.nil?
+            "".html_safe
+          else
+            render_progress_value(@overall_progress)
+          end
+        end,
+        "dom-id": "creative-markdown-block",
+        "is-title": ""
+      ) %>
+<% end %>
+
+<%
+  empty_html = nil
+  if (@creatives || []).blank?
+    if params[:search].present?
+      empty_html = content_tag(:p, t('.no_search_results'), style: 'text-align: center;')
+    elsif params[:id] && @creative && !@creative.has_permission?(Current.user, :read)
+      message = content_tag(:p, t('.no_permission'), style: 'text-align: center;')
+      action = content_tag(:div, button_to(t('.request_permission'), request_permission_creative_path(@creative), method: :post), style: 'text-align: center;')
+      empty_html = message + action
+    else
+      text = params[:id] ? t('.no_sub_creatives') : t('.no_creatives')
+      empty_html = content_tag(:p, text, style: 'text-align: center;')
+    end
+  end
+  # Only pass filter parameters to avoid unnecessary params in URL
+  tree_params = params.to_unsafe_h.slice(
+    "id", "tags", "min_progress", "max_progress", "search", "comment",
+    "has_comments", "due_before", "due_after", "has_due_date",
+    "assignee_id", "unassigned"
+  ).merge(format: :json)
+  tree_url = creatives_path(tree_params)
+%>
+
+<%= tag.div(
+      empty_html,
+      id: 'creatives',
+      data: {
+        controller: 'creatives--tree',
+        'creatives--tree-url-value': tree_url,
+        'creatives--tree-empty-html-value': empty_html.to_s,
+        edit_icon_html: svg_tag("edit.svg", className: "icon-edit"),
+        edit_off_icon_html: svg_tag("edit-off.svg", className: "icon-edit")
+      }
+    ) %>
+
+<%= render 'collavre/comments/comments_popup' %>
+<%= render 'inline_edit_form' %>
+
+<%= render 'set_plan_modal' %>
+<% if can_manage_integrations %>
+  <%= render 'github_integration_modal', creative: current_creative %>
+  <%= render 'notion_integration_modal', creative: current_creative %>
+<% end %>
+</div>

data/app/views/collavre/creatives/new.html.erb

@@ -0,0 +1,4 @@
+<h1><%= t("collavre.creatives.index.new_creative") %></h1>
+
+<p><%= t("collavre.creatives.new.inline_editor_only_html") %></p>
+<%= link_to t("app.cancel"), creatives_path %>

data/app/views/collavre/creatives/show.html.erb

@@ -0,0 +1,29 @@
+<%#= TODO: remove this later, currently show uses index template, see controller %>
+<p><%= link_to t('collavre.users.back'), creatives_path %></p>
+
+<section class="creative">
+
+  <section class="creative-info">
+    <% cache @creative do %>
+      <% if @creative.parent %>
+        <h1>
+          <%= sanitize @creative.parent.description %>
+        </h1>
+      <% end %>
+      <div>
+        <%= embed_youtube_iframe(@creative.description) %>
+      </div>
+    <% end %>
+
+    <div class="creative-actions-row">
+      <% if authenticated? %>
+        <%= link_to t('collavre.creatives.index.new_sub_creative'), @creative&.id ? new_creative_path(parent_id: @creative.id, tags: params[:tags]) : new_creative_path(tags: params[:tags]) %>
+        <%= button_to t('collavre.creatives.index.delete'), @creative, method: :delete, data: { turbo_confirm: t('collavre.creatives.index.are_you_sure') } %>
+        <%= link_to slide_view_creative_path(@creative), aria: { label: t('collavre.creatives.index.slide_view') } do %>
+          <span aria-hidden="true"><%= svg_tag 'slide.svg', class: 'icon-slide', width: 16, height: 16 %></span>
+        <% end %>
+      <% end %>
+    </div>
+
+  </section>
+</section>

data/app/views/collavre/creatives/slide_view.html.erb

@@ -0,0 +1,20 @@
+<% depth = (@creative.ancestors.count - @root_depth) + 1 %>
+<% tag_name = case depth
+             when 1 then 'h1'
+             when 2 then 'h2'
+             when 3 then 'h3'
+             else 'div'
+             end %>
+<% initial_index = params[:slide].to_i.clamp(0, @slide_ids.length - 1) %>
+<% initial_prompt = @creative.prompt_for(Current.user) %>
+<div id="slide-view" data-slide-ids="<%= @slide_ids.join(',') %>" data-initial-index="<%= initial_index %>" data-root-id="<%= @creative.id %>">
+  <div id="slide-content"><%= content_tag(tag_name, @creative.effective_description.html_safe) %></div>
+</div>
+<div id="slide-controls">
+  <div id="slide-counter"><%= initial_index + 1 %> / <%= @slide_ids.length %></div>
+  <%= link_to '→', creative_path(@creative), id: 'slide-goto', aria: { label: t('collavre.creatives.slide_view.go_to_creative') } %>
+</div>
+<div id="slide-swipe">
+  <div id="slide-caption"><%= initial_prompt %></div>
+  <div id="slide-timer" aria-live="polite">00:00</div>
+</div>

data/app/views/collavre/email_verification_mailer/verify.html.erb

@@ -0,0 +1,4 @@
+<p>
+  <%= t('collavre.user_mailer.email_verification.message_html',
+         link: link_to(t('app.here'), collavre.email_verification_url(token: @user.generate_token_for(:email_verification)))) %>
+</p>

data/app/views/collavre/email_verification_mailer/verify.text.erb

@@ -0,0 +1,2 @@
+<%= t('collavre.user_mailer.email_verification.message_text',
+       link: collavre.email_verification_url(token: @user.generate_token_for(:email_verification))) %>

data/app/views/collavre/emails/index.html.erb

@@ -0,0 +1,19 @@
+<h1 class="no-top-margin"><%= t('collavre.emails.index_title') %></h1>
+<table>
+  <thead>
+    <tr>
+      <th><%= t('collavre.emails.list.title.to') %></th>
+      <th><%= t('collavre.emails.list.title.event') %></th>
+      <th><%= t('collavre.emails.list.title.sent_at') %></th>
+    </tr>
+  </thead>
+  <tbody>
+    <% @emails.each do |email| %>
+      <tr>
+        <td><%= link_to email.email, email_path(email) %></td>
+        <td><%= t("collavre.emails.event.#{email.event}") %></td>
+        <td><%= l(email.created_at, format: :short) %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/collavre/emails/show.html.erb

@@ -0,0 +1,5 @@
+<h1 class="no-top-margin"><%= @email.subject %></h1>
+<p><strong><%= t('collavre.emails.list.title.to') %>:</strong> <%= @email.email %></p>
+<p><strong><%= t('collavre.emails.list.title.event') %>:</strong> <%= t("collavre.emails.event.#{@email.event}") %></p>
+<p><strong><%= t('collavre.emails.list.title.sent_at') %>:</strong> <%= l(@email.created_at, format: :long) %></p>
+<pre><%= @email.body %></pre>

data/app/views/collavre/inbox_items/_item.html.erb

@@ -0,0 +1,18 @@
+<div class="inbox-item" data-id="<%= item.id %>">
+  <div class="message">
+    <% if item.link.present? %>
+      <%= link_to item.localized_message, item.link, class: 'item-link unstyled-link' %>
+    <% else %>
+      <%= h item.localized_message %>
+    <% end %>
+  </div>
+  <div class="time"><%= time_ago_in_words(item.created_at) %></div>
+  <div class="actions">
+    <% if item.state == 'read' %>
+      <button class="mark-unread" data-id="<%= item.id %>"><%= t('collavre.inbox.mark_unread') %></button>
+    <% else %>
+      <button class="mark-read" data-id="<%= item.id %>"><%= t('collavre.inbox.mark_read') %></button>
+    <% end %>
+    <button class="delete-item" data-id="<%= item.id %>"><%= t('collavre.inbox.delete') %></button>
+  </div>
+</div>