分報のページはviewのlayoutを分報独自のlayoutファイルを使うようにした

app/assets/stylesheets/application.css

@@ -121,4 +121,5 @@
 @import "./application/blocks/micro-report/_micro-report-form.css";
 @import "./application/blocks/micro-report/_micro-report-form-tabs.css";
 @import "./application/blocks/micro-report/_micro-report-actions.css";
+@import "./application/blocks/micro-report/_micro-report-layout.css";
 @import "./form/_zip-tel-input.css";

app/assets/stylesheets/application/blocks/micro-report/_micro-report-actions.css

@@ -8,19 +8,22 @@
 .micro-report-actions__action {
   font-size: .75rem;
   display: flex;
-  height: 2rem;
+  height: 2.25rem;
   align-items: center;
   text-decoration: none;
   padding-inline: .75rem;
-  background-color: var(--background-shade);
+  background-color: var(--base);
+  border: solid 1px var(--border);
   border-radius: .25rem;
-  color: var(--muted-text);
+  color: var(--default-text);
+  cursor: pointer;
   transition: all .2s ease-out;
 }
 
 .micro-report-actions__action:hover {
   background-color: var(--main);
   color: var(--reversal-text);
+  border-color: var(--main);
 }
 
 .micro-report-actions__user-link {

app/assets/stylesheets/application/blocks/micro-report/_micro-report-form-tabs.css

@@ -21,7 +21,6 @@
 .micro-report-form__preview,
 .micro-report-form__form {
   min-height: 3.75rem;
-  padding: 0.5rem;
   max-height: calc(100vh - 14rem);
   overflow-y: auto;
 }

app/assets/stylesheets/application/blocks/micro-report/_micro-report-form.css

@@ -1,16 +1,11 @@
 
 .micro-report-form {
-  padding-bottom: 1rem;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background-color: var(--background);
   z-index: 2;
-  @media (min-width: 48em) {
-    margin-left: 5rem;
-
-  }
 }
 .micro-report-form__inner {
   display: flex;

app/assets/stylesheets/application/blocks/micro-report/_micro-report-layout.css

@@ -0,0 +1,221 @@
+.is-micro-report {
+  background-color: var(--background);
+}
+
+/* =============================================
+   Layout shell (Twitter-like 2-column)
+============================================= */
+
+.mr-layout {
+  display: flex;
+  min-height: 100vh;
+  max-width: 75rem;
+  margin: 0 auto;
+}
+
+/* =============================================
+   Sidebar
+============================================= */
+
+.mr-sidebar {
+  flex: 0 0 15rem;
+  width: 15rem;
+  border-right: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+}
+
+.mr-sidebar__inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1rem 0.75rem;
+}
+
+.mr-sidebar__logo {
+  margin-bottom: 1.25rem;
+  padding: 0 0.5rem;
+}
+
+.mr-sidebar__logo-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 50%;
+  transition: background-color 0.2s;
+}
+
+.mr-sidebar__logo-link:hover {
+  background-color: var(--main-tint);
+}
+
+.mr-sidebar__logo-image {
+  width: 2rem;
+  height: 2rem;
+  object-fit: contain;
+}
+
+.mr-sidebar__nav-items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.mr-sidebar__nav-link {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: 9999px;
+  text-decoration: none;
+  color: var(--default-text);
+  font-size: 1rem;
+  font-weight: 500;
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.mr-sidebar__nav-link:hover {
+  background-color: var(--main-tint);
+  color: var(--main);
+}
+
+.mr-sidebar__nav-link i {
+  font-size: 1.25rem;
+  width: 1.5rem;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.mr-sidebar__footer {
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border);
+}
+
+.mr-sidebar__user {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 0.75rem;
+  cursor: default;
+  transition: background-color 0.2s;
+}
+
+.mr-sidebar__user:hover {
+  background-color: var(--background-tint);
+}
+
+.mr-sidebar__user-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.mr-sidebar__user-info {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.mr-sidebar__user-name {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--default-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.mr-sidebar__user-login {
+  font-size: 0.8125rem;
+  color: var(--muted-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* =============================================
+   Main content
+============================================= */
+
+.mr-main {
+  flex: 1;
+  min-width: 0;
+  max-width: 40rem;
+  border-right: 1px solid var(--border);
+}
+
+/* =============================================
+   Bottom nav (mobile only)
+============================================= */
+
+.mr-bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: var(--background);
+  border-top: 1px solid var(--border);
+  z-index: 100;
+}
+
+.mr-bottom-nav__items {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+.mr-bottom-nav__item {
+  flex: 1;
+}
+
+.mr-bottom-nav__link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 3.25rem;
+  font-size: 1.25rem;
+  color: var(--default-text);
+  text-decoration: none;
+  transition: color 0.2s;
+}
+
+.mr-bottom-nav__link:hover {
+  color: var(--main);
+}
+
+/* =============================================
+   Responsive
+============================================= */
+
+@media (max-width: 47.9375em) {
+  .mr-layout {
+    flex-direction: column;
+  }
+
+  .mr-sidebar {
+    display: none;
+  }
+
+  .mr-main {
+    max-width: 100%;
+    border-right: none;
+    padding-bottom: 3.25rem;
+  }
+
+  .mr-bottom-nav {
+    display: block;
+  }
+}

app/assets/stylesheets/application/blocks/micro-report/_micro-report.css

@@ -235,6 +235,10 @@
   display: flex;
 }
 
+.micro-report__footer .reactions {
+  z-index: auto;
+}
+
 @media (min-width: 48em) {
   .micro-report__footer {
     justify-content: space-between;

app/assets/stylesheets/application/blocks/micro-report/_micro-reports.css

@@ -1,9 +1,8 @@
 .micro-reports {
-  height: calc(100vh - 10.5rem);
+  height: calc(100vh - 52px);
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
 }
 .micro-reports .thread-comment:last-child {
   margin-bottom: 0;

app/controllers/users/micro_reports_controller.rb

@@ -7,6 +7,8 @@ class Users::MicroReportsController < ApplicationController
   before_action :set_user
   before_action :set_micro_report, only: %i[destroy]
 
+  layout 'micro_report'
+
   def index
     if params[:micro_report_id].present?
       micro_report = @user.micro_reports.find_by(id: params[:micro_report_id])

app/views/layouts/micro_report.html.slim

@@ -0,0 +1,38 @@
+doctype html
+html.is-micro-report lang='ja'
+  head
+    = display_meta_tags default_meta_tags
+    = render 'layouts/common/common_head'
+    = render 'available_emojis'
+    = stylesheet_link_tag 'application', media: 'all'
+    = content_for(:head_last) if content_for?(:head_last)
+  body.is-micro-report#body(class="#{body_class}")
+    .mr-layout
+      nav.mr-sidebar
+        .mr-sidebar__inner
+          .mr-sidebar__logo
+            = link_to root_path, class: 'mr-sidebar__logo-link' do
+              = image_tag 'logo-lg.svg', class: 'mr-sidebar__logo-image', alt: 'FBC'
+          ul.mr-sidebar__nav-items
+            li.mr-sidebar__nav-item
+              = link_to root_path, class: 'mr-sidebar__nav-link' do
+                i.fa-solid.fa-house
+                span.mr-sidebar__nav-label ホーム
+              li.mr-sidebar__nav-item
+                = link_to "#{user_micro_reports_path(current_user, page: current_user.latest_micro_report_page)}#latest-micro-report", class: 'mr-sidebar__nav-link' do
+                  i.fa-solid.fa-comment-dots
+                  span.mr-sidebar__nav-label 自分の分報
+              li.mr-sidebar__nav-item
+                = link_to notifications_path, class: 'mr-sidebar__nav-link' do
+                  i.fa-solid.fa-bell
+                  span.mr-sidebar__nav-label 通知
+            .mr-sidebar__footer
+              .mr-sidebar__user
+                = image_tag current_user.avatar_url, class: 'mr-sidebar__user-icon', alt: current_user.name
+                .mr-sidebar__user-info
+                  span.mr-sidebar__user-name = current_user.name
+                  span.mr-sidebar__user-login = "@#{current_user.login_name}"
+      main.mr-main
+        = render 'application/flash'
+        = yield
+    = any_login_here if defined?(AnyLogin)

app/views/users/micro_reports/index.html.slim

@@ -4,28 +4,25 @@
 
 = render 'users/page_title', user: @user
 
-= user_page_tabs(@user, active_tab: '分報')
-
-.page-body.pb-0
-  .page-content
-    .micro-reports__end
-      = render(Users::MicroReports::FormComponent.new(user: @user))
-    .micro-reports#js-micro-reports.micro-reports-with-form
-      .micro-reports__start
-        .container.is-md
-          .micro-reports__items
-            - if @micro_reports.empty?
-              .o-empty-message
-                .o-empty-message__icon
-                  .o-empty-message
-                    .o-empty-message__icon
-                      i.fa-regular.fa-sad-tear
-                    .o-empty-message__text
-                      | 分報の投稿はまだありません。
-            - else
-              = paginate @micro_reports
-              - @micro_reports.each_with_index do |micro_report, index|
-                - if index == @micro_reports.size - 1
-                  #latest-micro-report
-                = render(Users::MicroReports::MicroReportComponent.new(user: @user, current_user: current_user, micro_report: micro_report))
-              = paginate @micro_reports, params: { anchor: 'latest-micro-report' }
+.micro-reports
+  .micro-reports__end
+    = render(Users::MicroReports::FormComponent.new(user: @user))
+  .micro-reports#js-micro-reports.micro-reports-with-form
+    .micro-reports__start
+      .container.is-md
+        .micro-reports__items
+          - if @micro_reports.empty?
+            .o-empty-message
+              .o-empty-message__icon
+                .o-empty-message
+                  .o-empty-message__icon
+                    i.fa-regular.fa-sad-tear
+                  .o-empty-message__text
+                    | 分報の投稿はまだありません。
+          - else
+            = paginate @micro_reports
+            - @micro_reports.each_with_index do |micro_report, index|
+              - if index == @micro_reports.size - 1
+                #latest-micro-report
+              = render(Users::MicroReports::MicroReportComponent.new(user: @user, current_user: current_user, micro_report: micro_report))
+            = paginate @micro_reports, params: { anchor: 'latest-micro-report' }