日報フォロー機能のコメント通知を切り替えられるようにする

app/assets/stylesheets/atoms/_a-dropdown.sass

@@ -0,0 +1,10 @@
+.a-dropdown
+  overflow: hidden
+  background-color: $base
+  border: solid 1px $border-shade
+  box-shadow: rgba(black, .2) 0 0 .375rem
+  border-radius: .25rem
+
+.a-dropdown__item
+  &:not(:last-child)
+    border-bottom: solid 1px $border

app/assets/stylesheets/blocks/header/_.header-notification-icon.sass

@@ -0,0 +1,50 @@
+.header-notification-icon
+  +text-block(1.25rem 1, center)
+  +media-breakpoint-down(sm)
+    +text-block(1.125rem 1)
+    .has-count &
+      color: $default-text
+
+.header-notification-count
+  background-color: $badge-color
+  +text-block(.625rem 1, center $reversal-text flex)
+  align-items: center
+  justify-content: center
+  border-radius: 1rem
+  position: absolute
+  +media-breakpoint-up(md)
+    +size(1.25rem .875rem)
+    +position(right .25rem, top .25rem)
+  +media-breakpoint-down(sm)
+    +size(1.125rem .75rem)
+    +position(right .125rem, top .125rem)
+
+.header-notifications-item__body
+  width: 100%
+  +media-breakpoint-up(md)
+    color: $default-text
+  +media-breakpoint-down(sm)
+    color: $reversal-text
+
+.header-notifications-item__user-icon
+  float: left
+  +size(2rem)
+  margin-right: .5rem
+  margin-bottom: .25rem
+
+.header-notifications-item__message
+  p
+    line-height: 1.45
+    margin-bottom: .375em
+    +media-breakpoint-up(md)
+      font-size: .8125rem
+    +media-breakpoint-down(sm)
+      font-size: .75rem
+
+.header-notifications-item__created-at
+  text-align: right
+  display: block
+  +media-breakpoint-up(md)
+    font-size: .75rem
+  +media-breakpoint-down(sm)
+    font-size: .625rem

app/assets/stylesheets/blocks/header/_header-dropdown.sass

@@ -16,8 +16,8 @@
 
 .header-dropdown__inner
   +media-breakpoint-up(md)
-    background-color: $base
     +position(absolute, right 0, top 100%, 2)
+    background-color: $base
     border: solid 1px $border-shade
     width: 14rem
     box-shadow: rgba(black, .2) 0 0 .375rem
@@ -63,7 +63,7 @@
     .header-dropdown__item:not(:last-child) &
       border-bottom: solid 1px $background
     &:hover
-      background-color: $background-more-tint
+      background-color: $hover-background
   +media-breakpoint-down(sm)
     color: $reversal-text
     border-bottom: solid 1px $side-border

app/assets/stylesheets/blocks/page/_page-tabs.sass

@@ -31,7 +31,7 @@
 
 .page-tabs__item-link
   +flex-link
-  +text-block(.825rem 1, $default-text 600)
+  +text-block(.825rem 1, $semi-muted-text 600)
   align-items: center
   justify-content: center
   height: 2.75rem

app/assets/stylesheets/blocks/shared/_tab-nav.sass

@@ -25,14 +25,14 @@
 
 .tab-nav__item-link
   +block-link
-  +text-block(.75rem 2.3, $muted-text center nowrap)
+  +text-block(.75rem 2.3, $semi-muted-text center nowrap)
   background-color: $background-shade
   border-radius: 20rem
   width: 7rem
   transition: all.2s ease-out
   &:hover
     background-color: shade($background-shade, 10%)
-    color: $main-text
+    color: $default-text
   &.is-active
     background-color: $accent
-    color: $main-text
+    color: $default-text

app/assets/stylesheets/blocks/user/_following.sass

@@ -0,0 +1,32 @@
+.following
+  position: relative
+
+.following__dropdown
+  +position(absolute, 2)
+  width: 18.75rem
+
+.following-option
+  cursor: pointer
+  width: 100%
+  padding: .75rem
+  display: block
+  text-align: left
+  transition: all .2s ease-out
+  &:hover
+    background-color: $hover-background
+
+.following-option__inner
+  position: relative
+  padding-left: 1.5rem
+  .following-option.is-active &::before
+    +fa(fas '\f00c')
+    +position(absolute, left 0, top 0)
+
+.following-option__label
+  +text-block(.875rem 1.4, 600 $semi-muted-text)
+  .following-option.is-active &
+    color: $default-text
+
+.following-option__desciption
+  +text-block(.75rem 1.5, $muted-text)
+  margin-top: .125rem

app/assets/stylesheets/initializers/_reset.sass

@@ -50,5 +50,6 @@ hr
   border: none
 
 details,
-details *
+details *,
+summary
   box-sizing: border-box

app/assets/stylesheets/mixins/_button.sass

@@ -15,6 +15,7 @@
   &.is-block
     display: flex
     width: 100%
+    max-width: 100%
     &.is-select
       +margin(horizontal, 0)
   &:focus
@@ -30,7 +31,6 @@
     margin-right: .35em
     margin-top: .02em
     font-size: 1.07em
-    font-weight: normal
   &.is-icon
     i
       +text-block(1.3em 1)

app/assets/stylesheets/variables/_colors.sass

@@ -5,6 +5,8 @@ $background: #ececec
 $background-shade: #d6d6d6
 $background-tint: #eceeef
 $background-more-tint: #f7f7f9
+$hover-background: $background-more-tint
+
 
 $default-text: #403f47
 $reversal-text: white

app/controllers/api/followings_controller.rb

@@ -5,13 +5,24 @@ class API::FollowingsController < API::BaseController
 
   def create
     user = User.find(params[:id])
-    if current_user.follow(user)
+    watch = params[:watch] == 'true'
+    if current_user.follow(user, watch: watch)
       render json: { id: user.id }
     else
       head :bad_request
     end
   end
 
+  def update
+    user = User.find(params[:id])
+    watch = params[:watch] == 'true'
+    if current_user.change_watching(user, watch)
+      head :no_content
+    else
+      head :bad_request
+    end
+  end
+
   def destroy
     user = User.find(params[:id])
     if current_user.unfollow(user)

app/controllers/api/users_controller.rb

@@ -9,11 +9,11 @@ def index
     @tag = params[:tag]
     @target = params[:target]
     @target = 'student_and_trainee' unless target_allowlist.include?(@target)
+    @watch = params[:watch]
 
     target_users =
       if @target == 'followings'
-        followings = Following.where(follower_id: current_user.id).select('followed_id')
-        User.where(id: followings)
+        current_user.following_list(watch: @watch)
       elsif params[:tag]
         User.tagged_with(params[:tag])
       else

app/controllers/users_controller.rb

@@ -9,11 +9,11 @@ class UsersController < ApplicationController
   def index
     @target = params[:target]
     @target = 'student_and_trainee' unless target_allowlist.include?(@target)
+    @watch = params[:watch]
 
     target_users =
       if @target == 'followings'
-        followings = Following.where(follower_id: current_user.id).select('followed_id')
-        User.where(id: followings)
+        current_user.following_list(watch: @watch)
       elsif params[:tag]
         User.tagged_with(params[:tag])
       else

app/javascript/following.js

@@ -8,13 +8,15 @@ document.addEventListener('DOMContentLoaded', () => {
       const following = followings[i]
       const isFollowing = following.getAttribute('data-is-following')
       const userId = following.getAttribute('data-user-id')
+      const isWatching = following.getAttribute('data-is-watching')
 
       new Vue({
         render: (h) =>
           h(Following, {
             props: {
               isFollowing: isFollowing === 'true',
-              userId: Number(userId)
+              userId: Number(userId),
+              isWatching: isWatching === 'true'
             }
           })
       }).$mount('.js-following')