入って1週間のユーザーにはメンターにしか表示されないマークを表示した

app/components/products/product_component.html.slim

@@ -3,7 +3,7 @@
     - if @display_user_icon
       .card-list-item__user
         = link_to user_url(@product.user), class: "card-list-item__user-link" do
-          span class=["a-user-role", role_class]
+          span class=@product.user.user_icon_frame_class
             = image_tag @product.user.avatar_url,
               class: "card-list-item__user-icon a-user-icon",
               title: @product.user.icon_title,
@@ -79,7 +79,7 @@
                   - @product.commented_users.distinct.each do |user|
                     a.card-list-item__user-icons-icon href=user_path(user)
                       = image_tag user.avatar_url,
-                        class: "a-user-icon #{role_class}",
+                        class: "a-user-icon #{role_class} #{joining_status_class}",
                         title: user.icon_title,
                         alt: user.icon_title
 

app/components/products/product_component.rb

@@ -15,6 +15,10 @@ def role_class
     "is-#{@product.user.primary_role}"
   end
 
+  def joining_status_class
+    @product.user.joining_status == 'new-user' ? 'is-new-user' : ''
+  end
+
   def practice_title
     "#{@product.practice.title}の提出物"
   end

app/components/works/work_component.html.slim

@@ -14,7 +14,7 @@
             .thumbnail-card__author
               .thumbnail-card__icon
                 = link_to user_path(work.user) do
-                  span class="a-user-role is-#{work.user.primary_role}"
+                  span class=work.user.user_icon_frame_class
                     = creator_avatar
               .thumbnail-card__user
                 = link_to work.user.name, user_path(work.user), class: 'a-user-name'

app/decorators/user_decorator.rb

@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 module UserDecorator
+  NEW_USER_DAYS = 7
+
   include Role
   include Retire
 
@@ -91,4 +93,14 @@ def niconico_calendar(dates_and_reports)
 
     [*blanks, *dates_and_reports].each_slice(7).to_a
   end
+
+  def joining_status
+    elapsed_days <= NEW_USER_DAYS ? 'new-user' : ''
+  end
+
+  def user_icon_frame_class
+    classes = ['a-user-role', "is-#{primary_role}"]
+    classes << 'is-new-user' if joining_status == 'new-user'
+    classes.join(' ')
+  end
 end

app/javascript/components/ListComment.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import CommentUserIcon from './CommentUserIcon'
+import { UserIconFrameClass } from './UserIconFrameClass'
 
 export default function ListComment({ report }) {
   return (
@@ -17,7 +17,14 @@ export default function ListComment({ report }) {
               <div className="card-list-item__user-icons">
                 {report.comments.map((comment) => {
                   return (
-                    <CommentUserIcon comment={comment} key={comment.user_id} />
+                    <a
+                      className="card-list-item__user-icons-icon"
+                      href={`/users/${comment.user_id}`}
+                      key={comment.user_id}>
+                      <span className={UserIconFrameClass(comment)}>
+                        <img className="a-user-icon" src={comment.user_icon} />
+                      </span>
+                    </a>
                   )
                 })}
               </div>

app/javascript/components/NotificationsBell/Notifications.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import LoadingListPlaceholder from '../LoadingListPlaceholder'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
+import { UserIconFrameClass } from '../UserIconFrameClass'
 dayjs.extend(relativeTime)
 
 export default function Notifications({ notifications, targetStatus }) {
@@ -56,9 +57,9 @@ function Notification({ notification }) {
         href={notification.path}
         className="header-dropdown__item-link unconfirmed_link">
         <div className="header-notifications-item__body">
-          <span
-            className={`a-user-role header-notifications-item__user-icon is-${notification.sender.primary_role}`}>
+          <span className={UserIconFrameClass(notification.sender)}>
             <img
+              spanClassName="header-notifications-item__user-icon"
               src={notification.sender.avatar_url}
               className="a-user-icon"
               alt="User Icon"

app/javascript/components/Report.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import ListComment from './ListComment'
+import { UserIconFrameClass } from './UserIconFrameClass'
 
 export default function Report({ report, currentUserId, displayUserIcon }) {
   return (
@@ -66,12 +67,10 @@ export default function Report({ report, currentUserId, displayUserIcon }) {
 }
 
 const DisplayUserIcon = ({ report }) => {
-  const roleClass = `is-${report.user.primary_role}`
-
   return (
     <div className="card-list-item__user">
       <a href={report.user.url} className="card-list-item__user-link">
-        <span className={`a-user-role ${roleClass}`}>
+        <span className={UserIconFrameClass(report.user)}>
           <img
             className="card-list-item__user-icon a-user-icon"
             src={report.user.avatar_url}

app/javascript/components/User.jsx

@@ -4,6 +4,7 @@ import UserActivityCounts from './UserActivityCounts.jsx'
 import UserSns from './UserSns.jsx'
 import UserTags from './UserTags.jsx'
 import UserPracticeProgress from './UserPracticeProgress.jsx'
+import { UserIconFrameClass } from './UserIconFrameClass.jsx'
 
 export default function User({ user, currentUser }) {
   const userDescParagraphs = () => {
@@ -21,12 +22,10 @@ export default function User({ user, currentUser }) {
     return paragraphs
   }
 
-  const roleClass = () => `is-${user.primary_role}`
-
   return (
     <div className="col-xxxl-2 col-xxl-3 col-xl-4 col-lg-4 col-md-6 col-xs-12">
       <div className="users-item is-react">
-        <div className={`users-item__inner a-card ${roleClass()}`}>
+        <div className={`users-item__inner a-card ${UserIconFrameClass(user)}`}>
           {currentUser &&
             (currentUser.mentor || currentUser.admin) &&
             user.student_or_trainee && (
@@ -54,12 +53,12 @@ export default function User({ user, currentUser }) {
               <div className="users-item__header-start">
                 <div className="users-item__icon">
                   <a href={user.url}>
-                    <span className={`a-user-role ${roleClass()}`}>
+                    <span className={UserIconFrameClass(user)}>
                       <img
                         className="users-item__user-icon-image a-user-icon"
+                        src={user.avatar_url}
                         title={user.icon_title}
                         alt={user.icon_title}
-                        src={user.avatar_url}
                       />
                     </span>
                   </a>

app/javascript/components/UserIconFrameClass.jsx

@@ -0,0 +1,5 @@
+export function UserIconFrameClass(user) {
+  return `a-user-role is-${user.primary_role} ${
+    user.joining_status === 'new-user' ? 'is-new-user' : ''
+  }`
+}

app/javascript/components/question.vue

@@ -3,7 +3,7 @@
   .card-list-item__inner
     .card-list-item__user
       a.card-list-item__user-link(:href='question.user.url')
-        span(:class='["a-user-role", roleClass]')
+        span(:class='["a-user-role", roleClass, joiningStatusClass]')
           img.card-list-item__user-icon.a-user-icon(
             :title='question.user.icon_title',
             :alt='question.user.icon_title',
@@ -84,6 +84,11 @@ export default {
     roleClass() {
       return `is-${this.question.user.primary_role}`
     },
+    joiningStatusClass() {
+      return this.question.user.joining_status === 'new-user'
+        ? 'is-new-user'
+        : ''
+    },
     urgentClass() {
       return {
         'is-important': !this.hasAnswers

app/javascript/stylesheets/config/mixins/_user-role.sass

@@ -16,3 +16,12 @@
     background-color: black
     .a-user-icon
      opacity: .7
+  body.is-mentor-mode &.is-new-user
+    .a-user-icon
+      box-shadow: 0 0 1px 2px var(--warning)
+    &.is-student
+      .a-user-icon
+        border: dashed 2px var(--danger)
+    &.is-trainee
+      .a-user-icon
+        border: dashed 2px var(--main)

app/javascript/user-icon.js

@@ -10,6 +10,9 @@ export default function userIcon({
 
   const span = document.createElement('span')
   span.classList.add('a-user-role', `is-${user.primary_role}`)
+  if (user.joining_status === 'new-user') {
+    span.classList.add('is-new-user')
+  }
 
   const img = document.createElement('img')
   img.src = user.avatar_url

app/views/admin/users/_table.html.slim

@@ -71,7 +71,7 @@
           td.admin-table__item-value.text-left
             = link_to user, class: 'admin-table__user', target: '_blank', rel: 'noopener' do
               span.admin-table__user-icon
-                span(class="a-user-role is-#{user.primary_role}")
+                span class=user.user_icon_frame_class
                   = image_tag user.avatar_url, title: user.icon_title, class: 'admin-table__user-icon a-user-icon'
               span.admin-table__user-login-name
                 = user.login_name

app/views/api/comments/_user_icons.json.jbuilder

@@ -8,6 +8,7 @@ if report.comments.present?
       json.user_icon user.avatar_url
       json.user_id user.id
       json.primary_role user.primary_role
+      json.joining_status user.joining_status
     end
   end
 end

app/views/api/courses/practices/index.json.jbuilder

@@ -18,6 +18,7 @@ json.categories @categories do |category|
         json.icon_title user.icon_title
         json.roles user.roles
         json.primary_role user.primary_role
+        json.joining_status user.joining_status
       end
     end
   end

app/views/api/generations/users/_user.json.jbuilder

@@ -4,3 +4,4 @@ json.avatar_url user.avatar_url
 json.icon_title user.icon_title
 json.login_name user.login_name
 json.primary_role user.primary_role
+json.joining_status user.joining_status

app/views/api/products/_product.json.jbuilder

@@ -50,6 +50,7 @@ json.comments do
       json.url user_path(user)
       json.icon_title user.icon_title
       json.primary_role user.primary_role
+      json.joining_status user.joining_status
     end
   end
 end

app/views/api/searchables/_searchable.json.jbuilder

@@ -12,6 +12,7 @@ if searchable.respond_to?(:user)
   json.avatar_url searchable.user.avatar_url
   json.icon_title searchable.user.icon_title
   json.primary_role searchable.user.primary_role
+  json.joining_status searchable.user.joining_status
 end
 json.is_comment_or_answer comment_or_answer?(searchable)
 if comment_or_answer?(searchable)
@@ -25,4 +26,5 @@ json.is_user user?(searchable)
 if user?(searchable)
   json.avatar_url searchable.avatar_url
   json.primary_role searchable.primary_role
+  json.joining_status searchable.joining_status
 end

app/views/api/users/_list_user.json.jbuilder

@@ -1,6 +1,6 @@
 user_course_practice = ActiveDecorator::Decorator.instance.decorate(UserCoursePractice.new(user))
 
-json.(user, :id, :login_name, :name, :description, :github_account, :twitter_account, :facebook_url, :blog_url, :job_seeker, :job, :os, :experiences, :email, :roles, :primary_role, :icon_title, :graduated_on)
+json.(user, :id, :login_name, :name, :description, :github_account, :twitter_account, :facebook_url, :blog_url, :job_seeker, :job, :os, :experiences, :email, :roles, :primary_role, :icon_title, :graduated_on, :joining_status)
 json.tag_list user.tags.pluck(:name)
 json.url user_url(user)
 json.updated_at l(user.updated_at)

app/views/api/users/_user.json.jbuilder

@@ -1,4 +1,4 @@
-columns = %i(id login_name email long_name url roles primary_role icon_title)
+columns = %i(id login_name email long_name url roles primary_role icon_title joining_status)
 columns << :mentor_memo if admin_or_mentor_login?
 json.(user, *columns)
 json.avatar_url user.avatar_url

app/views/application/_current_user.html.erb

@@ -1,5 +1,5 @@
 <script>
-  const user = <%= raw(current_user&.to_json(only: [:id, :login_name, :name], methods: [:avatar_url, :roles, :primary_role]) || '{}') %>;
+  const user = <%= raw(current_user&.to_json(only: [:id, :login_name, :name], methods: [:avatar_url, :roles, :primary_role, :joining_status]) || '{}') %>;
 
   window.currentUser = user;
   window.currentUserID = user.id || 0;

app/views/coding_tests/coding_test_submissions/show.html.slim

@@ -37,10 +37,10 @@ ruby:
                 = link_to cts.user,
                   itemprop: 'url',
                   class: 'page-content-header__user-link' do
-                  span class="a-user-role is-#{cts.user.primary_role}"
-                    = image_tag cts.user.avatar_url,
-                      title: cts.user.icon_title,
-                      class: 'page-content-header__user-icon-image a-user-icon'
+                    span class=cts.user.user_icon_frame_class
+                      = image_tag cts.user.avatar_url,
+                        title: cts.user.icon_title,
+                        class: 'page-content-header__user-icon-image a-user-icon'
           .page-content-header__end
             .page-content-header__row
               .page-content-header__before-title

app/views/companies/products/_product.html.slim

@@ -66,7 +66,7 @@
                       title="#{user.icon_title}"
                       alt="#{user.icon_title}"
                       src="#{user.avatar_url}"
-                      class="is-#{user.primary_role}")
+                      class="is-#{user.primary_role} is-#{user.joining_status}")
 
               - if product.self_last_commented_at && product.mentor_last_commented_at
                 .card-list-item-meta__item

app/views/companies/users/_user.html.slim

@@ -17,7 +17,7 @@
           .users-item__header-start
             .users-item__icon
               = link_to user.url
-                span(:class='["a-user-role", roleClass]')
+                span(:class='["a-user-role", roleClass, joiningStatusClass]')
                   img.users-item__user-icon-image.a-user-icon(
                     title="#{user.login_name}(#{user.name})"
                     alt="#{user.login_name}(#{user.name})"

app/views/courses/practices/_practice_user_icon.html.slim

@@ -1,4 +1,4 @@
 .a-user-icons__item
   a.a-user-icons__item-link(href="#{user_path(started_or_submitted_student)}")
-    span.a-user-role(class="a-user-role is-#{started_or_submitted_student.primary_role}")
+    span class=started_or_submitted_student.user_icon_frame_class
       = image_tag started_or_submitted_student.avatar_url, title: started_or_submitted_student.icon_title, class: 'a-user-icons__item-icon a-user-icon'

app/views/events/_event.html.slim

@@ -79,7 +79,7 @@
               - event.participants.each do |participant|
                 li.user-icons-item
                   = link_to participant do
-                    span class="a-user-role is-#{participant.primary_role}"
+                    span class=participant.user_icon_frame_class
                       = image_tag participant.avatar_url, title: participant.icon_title, class: "a-user-icon is-sm is-#{participant.login_name}", alt: participant.login_name
           - else
             .o-empty-message

app/views/footprints/_footprint.html.slim

@@ -1,4 +1,4 @@
 li.user-icons__item
   a.user-icons__item-link href=footprint.user.url
-    span.a-user-role class="is-#{footprint.user.primary_role}"
+    span class=footprint.user.user_icon_frame_class
       img.a-user-icon.is-sm title=footprint.user.icon_title alt=footprint.user.icon_title src=footprint.user.avatar_url class="is-#{footprint.user.login_name}"

app/views/generations/index.html.slim

@@ -53,6 +53,6 @@ main.page-main
                         - ActiveDecorator::Decorator.instance.decorate(user)
                         .a-user-icons__item
                           = link_to user_path(user), class: 'a-user-icons__item-link' do
-                            span class=["a-user-role", "is-#{user.primary_role}"]
+                            span class=user.user_icon_frame_class
                               img.a-user-icons__item-icon.a-user-icon src=user.avatar_url title=user.icon_title data-login-name=user.login_name
       = paginate @generations

app/views/questions/_answer.html.slim

@@ -1,7 +1,7 @@
 .thread-comment.answer id="answer_#{answer.id}" data-question_id="#{question.id}" data-answer_id="#{answer.id}" data-answer_description="#{answer.description}"
   .thread-comment__start
     a.thread-comment__user-link href="#{answer.user.url}"
-      span class="a-user-role is-#{answer.user.primary_role}"
+      span class=answer.user.user_icon_frame_class
         img.thread-comment__user-icon.a-user-icon src="#{answer.user.avatar_url}"
     - if answer.user.company && (answer.user.adviser? || answer.user.trainee?)
       a.thread-comment__company-link href="#{company_path(answer.user.company)}"

app/views/questions/_new_answer.html.slim

@@ -1,6 +1,6 @@
 .thread-comment-form.new-answer data-question_id="#{question.id}"
   .thread-comment__start
-    span class="a-user-role is-#{user.primary_role}"
+    span class=user.user_icon_frame_class
       img.thread-comment__user-icon.a-user-icon src="#{user.avatar_url}" alt="#{current_user.icon_title}"
   .thread-comment__end
     .answer-editor

app/views/regular_events/_regular_event.html.slim

@@ -84,7 +84,7 @@
               - regular_event.participants.each do |participant|
                 li.user-icons-item
                   = link_to participant do
-                    span class="a-user-role is-#{participant.primary_role}"
+                    span class=participant.user_icon_frame_class
                       = image_tag participant.avatar_url, title: participant.icon_title, class: "a-user-icon is-sm is-#{participant.login_name}", alt: participant.login_name
                   - if admin_login?
                     = link_to regular_event_participation_path(regular_event_id: regular_event, participant_id: participant),

app/views/regular_events/_regular_event_meta.html.slim

@@ -9,7 +9,7 @@
             - regular_event.organizers.each do |organizer|
               li.user-icons-item
                 = link_to organizer do
-                  span class="a-user-role is-#{organizer.primary_role}"
+                  span class=organizer.user_icon_frame_class
                     = image_tag organizer.avatar_url, title: organizer.icon_title, class: "a-user-icon is-sm is-#{organizer.login_name}", alt: organizer.login_name
       .event-meta__item
         dt.event-meta__item-label