pull-requests: overhaul of the UX by adding new sidebar

- sidebar aggregates comments, todos, observers, referenced tickets, and reviewers
- live components push now comments, reviewer presence, and todo live via channelstream
- sidebar is collapsable, and stored in user session
- simplified number of information on the pull request page
- fixed and cleanup of the outdated comments and at version comments that in some cases reported wrong version assignment.

rhodecode/apps/repository/__init__.py

@@ -345,6 +345,16 b' def includeme(config):'
         pattern='/{repo_name:.*?[^/]}/pull-request/{pull_request_id:\d+}/comment/{comment_id}/delete',
         repo_route=True, repo_accepted_types=['hg', 'git'])
 
+    config.add_route(
+        name='pullrequest_comments',
+        pattern='/{repo_name:.*?[^/]}/pull-request/{pull_request_id:\d+}/comments',
+        repo_route=True)
+
+    config.add_route(
+        name='pullrequest_todos',
+        pattern='/{repo_name:.*?[^/]}/pull-request/{pull_request_id:\d+}/todos',
+        repo_route=True)
+
     # Artifacts, (EE feature)
     config.add_route(
         name='repo_artifacts_list',

rhodecode/apps/repository/views/repo_commits.py

@@ -87,6 +87,7 b' class RepoCommitsView(RepoAppView):'
         diff_limit = c.visual.cut_off_limit_diff
         file_limit = c.visual.cut_off_limit_file
 
+
         # get ranges of commit ids if preset
         commit_range = commit_id_range.split('...')[:2]
 
@@ -226,6 +227,7 b' class RepoCommitsView(RepoAppView):'
 
         # sort comments by how they were generated
         c.comments = sorted(c.comments, key=lambda x: x.comment_id)
+        c.at_version_num = None
 
         if len(c.commit_ranges) == 1:
             c.commit = c.commit_ranges[0]

rhodecode/apps/repository/views/repo_pull_requests.py

@@ -265,6 +265,36 b' class RepoPullRequestsView(RepoAppView, '
 
         return diffset
 
+    def register_comments_vars(self, c, pull_request, versions):
+        comments_model = CommentsModel()
+
+        # GENERAL COMMENTS with versions #
+        q = comments_model._all_general_comments_of_pull_request(pull_request)
+        q = q.order_by(ChangesetComment.comment_id.asc())
+        general_comments = q
+
+        # pick comments we want to render at current version
+        c.comment_versions = comments_model.aggregate_comments(
+            general_comments, versions, c.at_version_num)
+
+        # INLINE COMMENTS with versions  #
+        q = comments_model._all_inline_comments_of_pull_request(pull_request)
+        q = q.order_by(ChangesetComment.comment_id.asc())
+        inline_comments = q
+
+        c.inline_versions = comments_model.aggregate_comments(
+            inline_comments, versions, c.at_version_num, inline=True)
+
+        # Comments inline+general
+        if c.at_version:
+            c.inline_comments_flat = c.inline_versions[c.at_version_num]['display']
+            c.comments = c.comment_versions[c.at_version_num]['display']
+        else:
+            c.inline_comments_flat = c.inline_versions[c.at_version_num]['until']
+            c.comments = c.comment_versions[c.at_version_num]['until']
+
+        return general_comments, inline_comments
+
     @LoginRequired()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
@@ -280,6 +310,8 b' class RepoPullRequestsView(RepoAppView, '
         pull_request_id = pull_request.pull_request_id
 
         c.state_progressing = pull_request.is_state_changing()
+        c.pr_broadcast_channel = '/repo${}$/pr/{}'.format(
+            pull_request.target_repo.repo_name, pull_request.pull_request_id)
 
         _new_state = {
             'created': PullRequest.STATE_CREATED,
@@ -300,22 +332,23 b' class RepoPullRequestsView(RepoAppView, '
         from_version = self.request.GET.get('from_version') or version
         merge_checks = self.request.GET.get('merge_checks')
         c.fulldiff = str2bool(self.request.GET.get('fulldiff'))
+        force_refresh = str2bool(self.request.GET.get('force_refresh'))
+        c.range_diff_on = self.request.GET.get('range-diff') == "1"
 
         # fetch global flags of ignore ws or context lines
         diff_context = diffs.get_diff_context(self.request)
         hide_whitespace_changes = diffs.get_diff_whitespace_flag(self.request)
 
-        force_refresh = str2bool(self.request.GET.get('force_refresh'))
-
         (pull_request_latest,
          pull_request_at_ver,
          pull_request_display_obj,
          at_version) = PullRequestModel().get_pr_version(
             pull_request_id, version=version)
+
         pr_closed = pull_request_latest.is_closed()
 
         if pr_closed and (version or from_version):
-            # not allow to browse versions
+            # not allow to browse versions for closed PR
             raise HTTPFound(h.route_path(
                 'pullrequest_show', repo_name=self.db_repo_name,
                 pull_request_id=pull_request_id))
@@ -323,13 +356,13 b' class RepoPullRequestsView(RepoAppView, '
         versions = pull_request_display_obj.versions()
         # used to store per-commit range diffs
         c.changes = collections.OrderedDict()
-        c.range_diff_on = self.request.GET.get('range-diff') == "1"
 
         c.at_version = at_version
         c.at_version_num = (at_version
-                            if at_version and at_version != 'latest'
+                            if at_version and at_version != PullRequest.LATEST_VER
                             else None)
-        c.at_version_pos = ChangesetComment.get_index_from_version(
+
+        c.at_version_index = ChangesetComment.get_index_from_version(
             c.at_version_num, versions)
 
         (prev_pull_request_latest,
@@ -340,9 +373,9 b' class RepoPullRequestsView(RepoAppView, '
 
         c.from_version = prev_at_version
         c.from_version_num = (prev_at_version
-                              if prev_at_version and prev_at_version != 'latest'
+                              if prev_at_version and prev_at_version != PullRequest.LATEST_VER
                               else None)
-        c.from_version_pos = ChangesetComment.get_index_from_version(
+        c.from_version_index = ChangesetComment.get_index_from_version(
             c.from_version_num, versions)
 
         # define if we're in COMPARE mode or VIEW at version mode
@@ -355,14 +388,17 b' class RepoPullRequestsView(RepoAppView, '
                         self.db_repo_name, pull_request_at_ver.target_repo.repo_name)
             raise HTTPNotFound()
 
-        c.shadow_clone_url = PullRequestModel().get_shadow_clone_url(
-            pull_request_at_ver)
+        c.shadow_clone_url = PullRequestModel().get_shadow_clone_url(pull_request_at_ver)
 
         c.pull_request = pull_request_display_obj
         c.renderer = pull_request_at_ver.description_renderer or c.renderer
         c.pull_request_latest = pull_request_latest
 
-        if compare or (at_version and not at_version == 'latest'):
+        # inject latest version
+        latest_ver = PullRequest.get_pr_display_object(pull_request_latest, pull_request_latest)
+        c.versions = versions + [latest_ver]
+
+        if compare or (at_version and not at_version == PullRequest.LATEST_VER):
             c.allowed_to_change_status = False
             c.allowed_to_update = False
             c.allowed_to_merge = False
@@ -391,12 +427,9 b' class RepoPullRequestsView(RepoAppView, '
                         'rules' in pull_request_latest.reviewer_data:
             rules = pull_request_latest.reviewer_data['rules'] or {}
             try:
-                c.forbid_adding_reviewers = rules.get(
-                    'forbid_adding_reviewers')
-                c.forbid_author_to_review = rules.get(
-                    'forbid_author_to_review')
-                c.forbid_commit_author_to_review = rules.get(
-                    'forbid_commit_author_to_review')
+                c.forbid_adding_reviewers = rules.get('forbid_adding_reviewers')
+                c.forbid_author_to_review = rules.get('forbid_author_to_review')
+                c.forbid_commit_author_to_review = rules.get('forbid_commit_author_to_review')
             except Exception:
                 pass
 
@@ -421,41 +454,37 b' class RepoPullRequestsView(RepoAppView, '
                 'rhodecode:templates/pullrequests/pullrequest_merge_checks.mako'
             return self._get_template_context(c)
 
-        comments_model = CommentsModel()
+        c.allowed_reviewers = [obj.user_id for obj in pull_request.reviewers if obj.user]
 
         # reviewers and statuses
-        c.pull_request_reviewers = pull_request_at_ver.reviewers_statuses()
-        allowed_reviewers = [x[0].user_id for x in c.pull_request_reviewers]
+        c.pull_request_default_reviewers_data_json = json.dumps(pull_request.reviewer_data)
+        c.pull_request_set_reviewers_data_json = collections.OrderedDict({'reviewers': []})
 
-        # GENERAL COMMENTS with versions #
-        q = comments_model._all_general_comments_of_pull_request(pull_request_latest)
-        q = q.order_by(ChangesetComment.comment_id.asc())
-        general_comments = q
+        for review_obj, member, reasons, mandatory, status in pull_request_at_ver.reviewers_statuses():
+            member_reviewer = h.reviewer_as_json(
+                member, reasons=reasons, mandatory=mandatory,
+                user_group=review_obj.rule_user_group_data()
+            )
 
-        # pick comments we want to render at current version
-        c.comment_versions = comments_model.aggregate_comments(
-            general_comments, versions, c.at_version_num)
-        c.comments = c.comment_versions[c.at_version_num]['until']
+            current_review_status = status[0][1].status if status else ChangesetStatus.STATUS_NOT_REVIEWED
+            member_reviewer['review_status'] = current_review_status
+            member_reviewer['review_status_label'] = h.commit_status_lbl(current_review_status)
+            member_reviewer['allowed_to_update'] = c.allowed_to_update
+            c.pull_request_set_reviewers_data_json['reviewers'].append(member_reviewer)
 
-        # INLINE COMMENTS with versions  #
-        q = comments_model._all_inline_comments_of_pull_request(pull_request_latest)
-        q = q.order_by(ChangesetComment.comment_id.asc())
-        inline_comments = q
+        c.pull_request_set_reviewers_data_json = json.dumps(c.pull_request_set_reviewers_data_json)
+
+
 
-        c.inline_versions = comments_model.aggregate_comments(
-            inline_comments, versions, c.at_version_num, inline=True)
+
+        general_comments, inline_comments = \
+            self.register_comments_vars(c, pull_request_latest, versions)
 
         # TODOs
         c.unresolved_comments = CommentsModel() \
-            .get_pull_request_unresolved_todos(pull_request)
+            .get_pull_request_unresolved_todos(pull_request_latest)
         c.resolved_comments = CommentsModel() \
-            .get_pull_request_resolved_todos(pull_request)
-
-        # inject latest version
-        latest_ver = PullRequest.get_pr_display_object(
-            pull_request_latest, pull_request_latest)
-
-        c.versions = versions + [latest_ver]
+            .get_pull_request_resolved_todos(pull_request_latest)
 
         # if we use version, then do not show later comments
         # than current version
@@ -522,8 +551,8 b' class RepoPullRequestsView(RepoAppView, '
 
         # empty version means latest, so we keep this to prevent
         # double caching
-        version_normalized = version or 'latest'
-        from_version_normalized = from_version or 'latest'
+        version_normalized = version or PullRequest.LATEST_VER
+        from_version_normalized = from_version or PullRequest.LATEST_VER
 
         cache_path = self.rhodecode_vcs_repo.get_create_shadow_cache_pr_path(target_repo)
         cache_file_path = diff_cache_exist(
@@ -719,7 +748,7 b' class RepoPullRequestsView(RepoAppView, '
 
             # current user review statuses for each version
             c.review_versions = {}
-            if self._rhodecode_user.user_id in allowed_reviewers:
+            if self._rhodecode_user.user_id in c.allowed_reviewers:
                 for co in general_comments:
                     if co.author.user_id == self._rhodecode_user.user_id:
                         status = co.status_change
@@ -939,6 +968,83 b' class RepoPullRequestsView(RepoAppView, '
     @NotAnonymous()
     @HasRepoPermissionAnyDecorator(
         'repository.read', 'repository.write', 'repository.admin')
+    @view_config(
+        route_name='pullrequest_comments', request_method='POST',
+        renderer='string', xhr=True)
+    def pullrequest_comments(self):
+        self.load_default_context()
+
+        pull_request = PullRequest.get_or_404(
+            self.request.matchdict['pull_request_id'])
+        pull_request_id = pull_request.pull_request_id
+        version = self.request.GET.get('version')
+
+        _render = self.request.get_partial_renderer(
+            'rhodecode:templates/pullrequests/pullrequest_show.mako')
+        c = _render.get_call_context()
+
+        (pull_request_latest,
+         pull_request_at_ver,
+         pull_request_display_obj,
+         at_version) = PullRequestModel().get_pr_version(
+            pull_request_id, version=version)
+        versions = pull_request_display_obj.versions()
+        latest_ver = PullRequest.get_pr_display_object(pull_request_latest, pull_request_latest)
+        c.versions = versions + [latest_ver]
+
+        c.at_version = at_version
+        c.at_version_num = (at_version
+                            if at_version and at_version != PullRequest.LATEST_VER
+                            else None)
+
+        self.register_comments_vars(c, pull_request_latest, versions)
+        all_comments = c.inline_comments_flat + c.comments
+        return _render('comments_table', all_comments, len(all_comments))
+
+    @LoginRequired()
+    @NotAnonymous()
+    @HasRepoPermissionAnyDecorator(
+        'repository.read', 'repository.write', 'repository.admin')
+    @view_config(
+        route_name='pullrequest_todos', request_method='POST',
+        renderer='string', xhr=True)
+    def pullrequest_todos(self):
+        self.load_default_context()
+
+        pull_request = PullRequest.get_or_404(
+            self.request.matchdict['pull_request_id'])
+        pull_request_id = pull_request.pull_request_id
+        version = self.request.GET.get('version')
+
+        _render = self.request.get_partial_renderer(
+            'rhodecode:templates/pullrequests/pullrequest_show.mako')
+        c = _render.get_call_context()
+        (pull_request_latest,
+         pull_request_at_ver,
+         pull_request_display_obj,
+         at_version) = PullRequestModel().get_pr_version(
+            pull_request_id, version=version)
+        versions = pull_request_display_obj.versions()
+        latest_ver = PullRequest.get_pr_display_object(pull_request_latest, pull_request_latest)
+        c.versions = versions + [latest_ver]
+
+        c.at_version = at_version
+        c.at_version_num = (at_version
+                            if at_version and at_version != PullRequest.LATEST_VER
+                            else None)
+
+        c.unresolved_comments = CommentsModel() \
+            .get_pull_request_unresolved_todos(pull_request)
+        c.resolved_comments = CommentsModel() \
+            .get_pull_request_resolved_todos(pull_request)
+
+        all_comments = c.unresolved_comments + c.resolved_comments
+        return _render('comments_table', all_comments, len(c.unresolved_comments), todo_comments=True)
+
+    @LoginRequired()
+    @NotAnonymous()
+    @HasRepoPermissionAnyDecorator(
+        'repository.read', 'repository.write', 'repository.admin')
     @CSRFRequired()
     @view_config(
         route_name='pullrequest_create', request_method='POST',
@@ -1100,7 +1206,7 b' class RepoPullRequestsView(RepoAppView, '
             self.request.matchdict['pull_request_id'])
         _ = self.request.translate
 
-        self.load_default_context()
+        c = self.load_default_context()
         redirect_url = None
 
         if pull_request.is_closed():
@@ -1111,6 +1217,8 b' class RepoPullRequestsView(RepoAppView, '
                     'redirect_url': redirect_url}
 
         is_state_changing = pull_request.is_state_changing()
+        c.pr_broadcast_channel = '/repo${}$/pr/{}'.format(
+            pull_request.target_repo.repo_name, pull_request.pull_request_id)
 
         # only owner or admin can update it
         allowed_to_update = PullRequestModel().check_user_update(
@@ -1134,7 +1242,7 b' class RepoPullRequestsView(RepoAppView, '
                     return {'response': True,
                             'redirect_url': redirect_url}
 
-                self._update_commits(pull_request)
+                self._update_commits(c, pull_request)
                 if force_refresh:
                     redirect_url = h.route_path(
                         'pullrequest_show', repo_name=self.db_repo_name,
@@ -1170,7 +1278,7 b' class RepoPullRequestsView(RepoAppView, '
         h.flash(msg, category='success')
         return
 
-    def _update_commits(self, pull_request):
+    def _update_commits(self, c, pull_request):
         _ = self.request.translate
 
         with pull_request.set_state(PullRequest.STATE_UPDATING):
@@ -1198,13 +1306,18 b' class RepoPullRequestsView(RepoAppView, '
                 change_source=changed)
             h.flash(msg, category='success')
 
-            channel = '/repo${}$/pr/{}'.format(
-                pull_request.target_repo.repo_name, pull_request.pull_request_id)
             message = msg + (
                 ' - <a onclick="window.location.reload()">'
                 '<strong>{}</strong></a>'.format(_('Reload page')))
+
+            message_obj = {
+                'message': message,
+                'level': 'success',
+                'topic': '/notifications'
+            }
+
             channelstream.post_message(
-                channel, message, self._rhodecode_user.username,
+                c.pr_broadcast_channel, message_obj, self._rhodecode_user.username,
                 registry=self.request.registry)
         else:
             msg = PullRequestModel.UPDATE_STATUS_MESSAGES[resp.reason]
@@ -1474,6 +1587,7 b' class RepoPullRequestsView(RepoAppView, '
         }
         if comment:
             c.co = comment
+            c.at_version_num = None
             rendered_comment = render(
                 'rhodecode:templates/changeset/changeset_comment_block.mako',
                 self._get_template_context(c), self.request)

rhodecode/lib/helpers.py

@@ -810,8 +810,7 b' import tzlocal'
 local_timezone = tzlocal.get_localzone()
 
 
-def age_component(datetime_iso, value=None, time_is_local=False, tooltip=True):
-    title = value or format_date(datetime_iso)
+def get_timezone(datetime_iso, time_is_local=False):
     tzinfo = '+00:00'
 
     # detect if we have a timezone info, otherwise, add it
@@ -822,6 +821,12 b' def age_component(datetime_iso, value=No'
         timezone = force_timezone or local_timezone
         offset = timezone.localize(datetime_iso).strftime('%z')
         tzinfo = '{}:{}'.format(offset[:-2], offset[-2:])
+    return tzinfo
+
+
+def age_component(datetime_iso, value=None, time_is_local=False, tooltip=True):
+    title = value or format_date(datetime_iso)
+    tzinfo = get_timezone(datetime_iso, time_is_local=time_is_local)
 
     return literal(
         '<time class="timeago {cls}" title="{tt_title}" datetime="{dt}{tzinfo}">{title}</time>'.format(
@@ -1650,17 +1655,18 b' def get_active_pattern_entries(repo_name'
 
 pr_pattern_re = re.compile(r'(?:(?:^!)|(?: !))(\d+)')
 
+allowed_link_formats = [
+    'html', 'rst', 'markdown', 'html+hovercard', 'rst+hovercard', 'markdown+hovercard']
+
 
 def process_patterns(text_string, repo_name, link_format='html', active_entries=None):
 
-    allowed_formats = ['html', 'rst', 'markdown',
-                       'html+hovercard', 'rst+hovercard', 'markdown+hovercard']
-    if link_format not in allowed_formats:
+    if link_format not in allowed_link_formats:
         raise ValueError('Link format can be only one of:{} got {}'.format(
-                         allowed_formats, link_format))
+                         allowed_link_formats, link_format))
 
     if active_entries is None:
-        log.debug('Fetch active patterns for repo: %s', repo_name)
+        log.debug('Fetch active issue tracker patterns for repo: %s', repo_name)
         active_entries = get_active_pattern_entries(repo_name)
 
     issues_data = []
@@ -1718,7 +1724,8 b' def process_patterns(text_string, repo_n'
     return new_text, issues_data
 
 
-def urlify_commit_message(commit_text, repository=None, active_pattern_entries=None):
+def urlify_commit_message(commit_text, repository=None, active_pattern_entries=None,
+                          issues_container=None):
     """
     Parses given text message and makes proper links.
     issues are linked to given issue-server, and rest is a commit link
@@ -1741,6 +1748,9 b' def urlify_commit_message(commit_text, r'
     new_text, issues = process_patterns(new_text, repository or '',
                                         active_entries=active_pattern_entries)
 
+    if issues_container is not None:
+        issues_container.extend(issues)
+
     return literal(new_text)
 
 
@@ -1781,7 +1791,7 b' def renderer_from_filename(filename, exc'
 
 
 def render(source, renderer='rst', mentions=False, relative_urls=None,
-           repo_name=None, active_pattern_entries=None):
+           repo_name=None, active_pattern_entries=None, issues_container=None):
 
     def maybe_convert_relative_links(html_source):
         if relative_urls:
@@ -1798,6 +1808,8 b" def render(source, renderer='rst', menti"
             source, issues = process_patterns(
                 source, repo_name, link_format='rst',
                 active_entries=active_pattern_entries)
+            if issues_container is not None:
+                issues_container.extend(issues)
 
         return literal(
             '<div class="rst-block">%s</div>' %
@@ -1810,6 +1822,8 b" def render(source, renderer='rst', menti"
             source, issues = process_patterns(
                 source, repo_name, link_format='markdown',
                 active_entries=active_pattern_entries)
+            if issues_container is not None:
+                issues_container.extend(issues)
 
         return literal(
             '<div class="markdown-block">%s</div>' %

rhodecode/model/comment.py

@@ -91,8 +91,7 b' class CommentsModel(BaseModel):'
         # group by versions, and count until, and display objects
 
         comment_groups = collections.defaultdict(list)
-        [comment_groups[
-             _co.pull_request_version_id].append(_co) for _co in comments]
+        [comment_groups[_co.pull_request_version_id].append(_co) for _co in comments]
 
         def yield_comments(pos):
             for co in comment_groups[pos]:
@@ -456,37 +455,53 b' class CommentsModel(BaseModel):'
         else:
             action = 'repo.commit.comment.create'
 
+        comment_id = comment.comment_id
         comment_data = comment.get_api_data()
+
         self._log_audit_action(
             action, {'data': comment_data}, auth_user, comment)
 
-        msg_url = ''
         channel = None
         if commit_obj:
-            msg_url = commit_comment_url
             repo_name = repo.repo_name
             channel = u'/repo${}$/commit/{}'.format(
                 repo_name,
                 commit_obj.raw_id
             )
         elif pull_request_obj:
-            msg_url = pr_comment_url
             repo_name = pr_target_repo.repo_name
             channel = u'/repo${}$/pr/{}'.format(
                 repo_name,
-                pull_request_id
+                pull_request_obj.pull_request_id
             )
 
-        message = '<strong>{}</strong> {} - ' \
-                  '<a onclick="window.location=\'{}\';' \
-                  'window.location.reload()">' \
-                  '<strong>{}</strong></a>'
+        if channel:
+            username = user.username
+            message = '<strong>{}</strong> {} #{}, {}'
         message = message.format(
-            user.username, _('made a comment'), msg_url,
-            _('Show it now'))
+                username,
+                _('posted a new comment'),
+                comment_id,
+                _('Refresh the page to see new comments.'))
+
+            message_obj = {
+                'message': message,
+                'level': 'success',
+                'topic': '/notifications'
+            }
 
         channelstream.post_message(
-            channel, message, user.username,
+                channel, message_obj, user.username,
+                registry=get_current_registry())
+
+            message_obj = {
+                'message': None,
+                'user': username,
+                'comment_id': comment_id,
+                'topic': '/comment'
+            }
+            channelstream.post_message(
+                channel, message_obj, user.username,
             registry=get_current_registry())
 
         return comment
@@ -643,14 +658,14 b' class CommentsModel(BaseModel):'
 
     def get_inline_comments_as_list(self, inline_comments, skip_outdated=True,
                                   version=None):
-        inline_cnt = 0
+        inline_comms = []
         for fname, per_line_comments in inline_comments.iteritems():
             for lno, comments in per_line_comments.iteritems():
                 for comm in comments:
                     if not comm.outdated_at_version(version) and skip_outdated:
-                        inline_cnt += 1
+                        inline_comms.append(comm)
 
-        return inline_cnt
+        return inline_comms
 
     def get_outdated_comments(self, repo_id, pull_request):
         # TODO: johbo: Remove `repo_id`, it is not needed to find the comments

rhodecode/model/db.py

@@ -3821,16 +3821,35 b' class ChangesetComment(Base, BaseModel):'
         """
         Checks if comment is outdated for given pull request version
         """
-        return self.outdated and self.pull_request_version_id != version
+        def version_check():
+            return self.pull_request_version_id and self.pull_request_version_id != version
+
+        if self.is_inline:
+            return self.outdated and version_check()
+        else:
+            # general comments don't have .outdated set, also latest don't have a version
+            return version_check()
+
+    def outdated_at_version_js(self, version):
+        """
+        Checks if comment is outdated for given pull request version
+        """
+        return json.dumps(self.outdated_at_version(version))
 
     def older_than_version(self, version):
         """
         Checks if comment is made from previous version than given
         """
         if version is None:
-            return self.pull_request_version_id is not None
-
-        return self.pull_request_version_id < version
+            return self.pull_request_version != version
+
+        return self.pull_request_version < version
+
+    def older_than_version_js(self, version):
+        """
+        Checks if comment is made from previous version than given
+        """
+        return json.dumps(self.older_than_version(version))
 
     @property
     def commit_id(self):
@@ -4327,6 +4346,7 b' class PullRequest(Base, _PullRequestBase'
     __table_args__ = (
         base_table_args,
     )
+    LATEST_VER = 'latest'
 
     pull_request_id = Column(
         'pull_request_id', Integer(), nullable=False, primary_key=True)
@@ -4385,6 +4405,10 b' class PullRequest(Base, _PullRequestBase'
             def pull_request_version_id(self):
                 return getattr(pull_request_obj, 'pull_request_version_id', None)
 
+            @property
+            def pull_request_last_version(self):
+                return pull_request_obj.pull_request_last_version
+
         attrs = StrictAttributeDict(pull_request_obj.get_api_data(with_merge_state=False))
 
         attrs.author = StrictAttributeDict(
@@ -4449,6 +4473,10 b' class PullRequest(Base, _PullRequestBase'
         """
         return self.versions.count() + 1
 
+    @property
+    def pull_request_last_version(self):
+        return self.versions_count
+
 
 class PullRequestVersion(Base, _PullRequestBase):
     __tablename__ = 'pull_request_versions'

rhodecode/public/css/legacy_code_styles.less

@@ -240,14 +240,14 b' div.markdown-block ol {'
 div.markdown-block ul.checkbox li,
 div.markdown-block ol.checkbox li {
     list-style: none !important;
-    margin: 6px !important;
+    margin: 0px !important;
     padding: 0 !important;
 }
 
 div.markdown-block ul li,
 div.markdown-block ol li {
     list-style: disc !important;
-    margin: 6px !important;
+    margin: 0px !important;
     padding: 0 !important;
 }
 

rhodecode/public/css/main.less

@@ -1510,18 +1510,14 b' table.integrations {'
   min-height: 55px;
 }
 
-.reviewers_member {
-    width: 100%;
-    overflow: auto;
-}
 .reviewer_reason {
     padding-left: 20px;
     line-height: 1.5em;
 }
 .reviewer_status {
     display: inline-block;
-    width: 25px;
-    min-width: 25px;
+    width: 20px;
+    min-width: 20px;
     height: 1.2em;
     line-height: 1em;
 }
@@ -1544,23 +1540,17 b' table.integrations {'
 }
 
 .reviewer_member_mandatory {
-    position: absolute;
-    left: 15px;
-    top: 8px;
     width: 16px;
     font-size: 11px;
     margin: 0;
     padding: 0;
     color: black;
+    opacity: 0.4;
 }
 
 .reviewer_member_mandatory_remove,
 .reviewer_member_remove {
-    position: absolute;
-    right: 0;
-    top: 0;
     width: 16px;
-    margin-bottom: 10px;
     padding: 0;
     color: black;
 }
@@ -1617,7 +1607,8 b' table.integrations {'
   .td-todo-number {
     text-align: left;
     white-space: nowrap;
-    width: 15%;
+    width: 1%;
+    padding-right: 2px;
   }
 
   .td-todo-gravatar {
@@ -1641,10 +1632,13 b' table.integrations {'
   text-overflow: ellipsis;
 }
 
+table.group_members {
+  width: 100%
+}
+
 .group_members {
     margin-top: 0;
     padding: 0;
-    list-style: outside none none;
 
     img {
         height: @gravatar-size;

rhodecode/public/js/rhodecode/routes.js

@@ -246,6 +246,8 b' function registerRCRoutes() {'
     pyroutes.register('pullrequest_comment_create', '/%(repo_name)s/pull-request/%(pull_request_id)s/comment', ['repo_name', 'pull_request_id']);
     pyroutes.register('pullrequest_comment_edit', '/%(repo_name)s/pull-request/%(pull_request_id)s/comment/%(comment_id)s/edit', ['repo_name', 'pull_request_id', 'comment_id']);
     pyroutes.register('pullrequest_comment_delete', '/%(repo_name)s/pull-request/%(pull_request_id)s/comment/%(comment_id)s/delete', ['repo_name', 'pull_request_id', 'comment_id']);
+    pyroutes.register('pullrequest_comments', '/%(repo_name)s/pull-request/%(pull_request_id)s/comments', ['repo_name', 'pull_request_id']);
+    pyroutes.register('pullrequest_todos', '/%(repo_name)s/pull-request/%(pull_request_id)s/todos', ['repo_name', 'pull_request_id']);
     pyroutes.register('edit_repo', '/%(repo_name)s/settings', ['repo_name']);
     pyroutes.register('edit_repo_advanced', '/%(repo_name)s/settings/advanced', ['repo_name']);
     pyroutes.register('edit_repo_advanced_archive', '/%(repo_name)s/settings/advanced/archive', ['repo_name']);

rhodecode/public/js/src/components/rhodecode-app/rhodecode-app.js

@@ -28,9 +28,12 b' export class RhodecodeApp extends Polyme'
         super.connectedCallback();
         ccLog.debug('rhodeCodeApp created');
         $.Topic('/notifications').subscribe(this.handleNotifications.bind(this));
+        $.Topic('/comment').subscribe(this.handleComment.bind(this));
         $.Topic('/favicon/update').subscribe(this.faviconUpdate.bind(this));
         $.Topic('/connection_controller/subscribe').subscribe(
-            this.subscribeToChannelTopic.bind(this));
+            this.subscribeToChannelTopic.bind(this)
+        );
+
         // this event can be used to coordinate plugins to do their
         // initialization before channelstream is kicked off
         $.Topic('/__MAIN_APP__').publish({});
@@ -71,6 +74,14 b' export class RhodecodeApp extends Polyme'
 
     }
 
+    handleComment(data) {
+        if (data.message.comment_id) {
+          if (window.refreshAllComments !== undefined) {
+              refreshAllComments()
+          }
+        }
+    }
+
     faviconUpdate(data) {
         this.shadowRoot.querySelector('rhodecode-favicon').counter = data.count;
     }
@@ -95,6 +106,7 b' export class RhodecodeApp extends Polyme'
             }
             // append any additional channels registered in other plugins
             $.Topic('/connection_controller/subscribe').processPrepared();
+
             channelstreamConnection.connect();
         }
     }
@@ -157,8 +169,7 b' export class RhodecodeApp extends Polyme'
 
     handleConnected(event) {
         var channelstreamConnection = this.getChannelStreamConnection();
-        channelstreamConnection.set('channelsState',
-            event.detail.channels_info);
+        channelstreamConnection.set('channelsState', event.detail.channels_info);
         channelstreamConnection.set('userState', event.detail.state);
         channelstreamConnection.set('channels', event.detail.channels);
         this.propagageChannelsState();

rhodecode/public/js/src/rhodecode.js

@@ -677,7 +677,9 b' var feedLifetimeOptions = function(query'
     query.callback(data);
 };
 
-
+/*
+* Retrievew via  templateContext.session_attrs.key
+* */
 var storeUserSessionAttr = function (key, val) {
 
     var postData = {

rhodecode/public/js/src/rhodecode/comments.js

@@ -670,8 +670,20 b' var CommentsController = function() {'
 
       var success = function(response) {
         $comment.remove();
+
+        if (window.updateSticky !== undefined) {
+            // potentially our comments change the active window size, so we
+            // notify sticky elements
+            updateSticky()
+        }
+
+        if (window.refreshAllComments !== undefined) {
+          // if we have this handler, run it, and refresh all comments boxes
+          refreshAllComments()
+        }
         return false;
       };
+
       var failure = function(jqXHR, textStatus, errorThrown) {
         var prefix = "Error while deleting this comment.\n"
         var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
@@ -682,6 +694,9 b' var CommentsController = function() {'
         return false;
       };
       ajaxPOST(url, postData, success, failure);
+
+
+
   }
 
   this.deleteComment = function(node) {
@@ -727,6 +742,15 b' var CommentsController = function() {'
       $filediff.find('.hide-line-comments').removeClass('hide-line-comments');
       $filediff.toggleClass('hide-comments');
     }
+
+    // since we change the height of the diff container that has anchor points for upper
+    // sticky header, we need to tell it to re-calculate those
+    if (window.updateSticky !== undefined) {
+        // potentially our comments change the active window size, so we
+        // notify sticky elements
+        updateSticky()
+    }
+
     return false;
   };
 
@@ -747,7 +771,7 b' var CommentsController = function() {'
       var cm = commentForm.getCmInstance();
 
       if (resolvesCommentId){
-        var placeholderText = _gettext('Leave a resolution comment, or click resolve button to resolve TODO comment #{0}').format(resolvesCommentId);
+        placeholderText = _gettext('Leave a resolution comment, or click resolve button to resolve TODO comment #{0}').format(resolvesCommentId);
       }
 
       setTimeout(function() {
@@ -1077,9 +1101,15 b' var CommentsController = function() {'
                     updateSticky()
                 }
 
+                if (window.refreshAllComments !== undefined) {
+                      // if we have this handler, run it, and refresh all comments boxes
+                      refreshAllComments()
+                }
+
                 commentForm.setActionButtonsDisabled(false);
 
               };
+
               var submitFailCallback = function(jqXHR, textStatus, errorThrown) {
                   var prefix = "Error while editing comment.\n"
                   var message = formatErrorMessage(jqXHR, textStatus, errorThrown, prefix);
@@ -1209,6 +1239,11 b' var CommentsController = function() {'
                   updateSticky()
               }
 
+              if (window.refreshAllComments !== undefined) {
+                  // if we have this handler, run it, and refresh all comments boxes
+                  refreshAllComments()
+              }
+
               commentForm.setActionButtonsDisabled(false);
 
             };

rhodecode/public/js/src/rhodecode/pullrequests.js

@@ -98,10 +98,13 b' ReviewersController = function () {'
     var self = this;
     this.$reviewRulesContainer = $('#review_rules');
     this.$rulesList = this.$reviewRulesContainer.find('.pr-reviewer-rules');
+    this.$userRule = $('.pr-user-rule-container');
     this.forbidReviewUsers = undefined;
     this.$reviewMembers = $('#review_members');
     this.currentRequest = null;
     this.diffData = null;
+    this.enabledRules = [];
+
     //dummy handler, we might register our own later
     this.diffDataHandler = function(data){};
 
@@ -116,14 +119,17 b' ReviewersController = function () {'
 
     this.hideReviewRules = function () {
         self.$reviewRulesContainer.hide();
+        $(self.$userRule.selector).hide();
     };
 
     this.showReviewRules = function () {
         self.$reviewRulesContainer.show();
+        $(self.$userRule.selector).show();
     };
 
     this.addRule = function (ruleText) {
         self.showReviewRules();
+        self.enabledRules.push(ruleText);
         return '<div>- {0}</div>'.format(ruleText)
     };
 
@@ -179,6 +185,7 b' ReviewersController = function () {'
                     _gettext('Reviewers picked from source code changes.'))
             )
         }
+
         if (data.rules.forbid_adding_reviewers) {
             $('#add_reviewer_input').remove();
             self.$rulesList.append(
@@ -186,6 +193,7 b' ReviewersController = function () {'
                     _gettext('Adding new reviewers is forbidden.'))
             )
         }
+
         if (data.rules.forbid_author_to_review) {
             self.forbidReviewUsers.push(data.rules_data.pr_author);
             self.$rulesList.append(
@@ -193,6 +201,7 b' ReviewersController = function () {'
                     _gettext('Author is not allowed to be a reviewer.'))
             )
         }
+
         if (data.rules.forbid_commit_author_to_review) {
 
             if (data.rules_data.forbidden_users) {
@@ -208,6 +217,12 b' ReviewersController = function () {'
             )
         }
 
+        // we don't have any rules set, so we inform users about it
+        if (self.enabledRules.length === 0) {
+            self.addRule(
+                _gettext('No review rules set.'))
+        }
+
         return self.forbidReviewUsers
     };
 
@@ -347,11 +362,12 b' ReviewersController = function () {'
                 members.innerHTML += renderTemplate('reviewMemberEntry', {
                     'member': reviewer_obj,
                     'mandatory': mandatory,
+                    'reasons': reasons,
                     'allowed_to_update': true,
                     'review_status': 'not_reviewed',
                     'review_status_label': _gettext('Not Reviewed'),
-                    'reasons': reasons,
-                    'create': true
+                    'user_group': reviewer_obj.user_group,
+                    'create': true,
                 });
                 tooltipActivate();
             }
@@ -600,7 +616,7 b' VersionController = function () {'
         var $elem = $(elem);
         var $target = $(target);
 
-        if ($target.is(':visible')) {
+        if ($target.is(':visible') || $target.length === 0) {
             $target.hide();
             $elem.html($elem.data('toggleOn'))
         } else {

rhodecode/templates/changeset/changeset_file_comment.mako

@@ -10,12 +10,14 b''
 
 <%namespace name="base" file="/base/base.mako"/>
 <%def name="comment_block(comment, inline=False, active_pattern_entries=None)">
-  <% pr_index_ver = comment.get_index_version(getattr(c, 'versions', [])) %>
+
+  <% comment_ver = comment.get_index_version(getattr(c, 'versions', [])) %>
   <% latest_ver = len(getattr(c, 'versions', [])) %>
+
   % if inline:
-      <% outdated_at_ver = comment.outdated_at_version(getattr(c, 'at_version_num', None)) %>
+      <% outdated_at_ver = comment.outdated_at_version(c.at_version_num) %>
   % else:
-      <% outdated_at_ver = comment.older_than_version(getattr(c, 'at_version_num', None)) %>
+      <% outdated_at_ver = comment.older_than_version(c.at_version_num) %>
   % endif
 
   <div class="comment
@@ -153,38 +155,38 b''
               </div>
           %endif
 
-          <a class="permalink" href="#comment-${comment.comment_id}"> &para;</a>
+          <a class="permalink" href="#comment-${comment.comment_id}">&para; #${comment.comment_id}</a>
 
           <div class="comment-links-block">
 
             % if inline:
                     <a class="pr-version-inline" href="${request.current_route_path(_query=dict(version=comment.pull_request_version_id), _anchor='comment-{}'.format(comment.comment_id))}">
                     % if outdated_at_ver:
-                        <code class="tooltip pr-version-num" title="${_('Outdated comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}">
-                            outdated ${'v{}'.format(pr_index_ver)} |
+                        <code class="tooltip pr-version-num" title="${_('Outdated comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}">
+                            outdated ${'v{}'.format(comment_ver)} |
                         </code>
-                    % elif pr_index_ver:
-                        <code class="tooltip pr-version-num" title="${_('Comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}">
-                            ${'v{}'.format(pr_index_ver)} |
+                    % elif comment_ver:
+                        <code class="tooltip pr-version-num" title="${_('Comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}">
+                            ${'v{}'.format(comment_ver)} |
                         </code>
                     % endif
                     </a>
             % else:
-                % if pr_index_ver:
+                % if comment_ver:
 
                       % if comment.outdated:
                         <a class="pr-version"
                            href="?version=${comment.pull_request_version_id}#comment-${comment.comment_id}"
                         >
-                            ${_('Outdated comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}
+                            ${_('Outdated comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}
                         </a> |
                       % else:
                         <a class="tooltip pr-version"
-                           title="${_('Comment from pull request version v{0}, latest v{1}').format(pr_index_ver, latest_ver)}"
+                           title="${_('Comment from pull request version v{0}, latest v{1}').format(comment_ver, latest_ver)}"
                            href="${h.route_path('pullrequest_show',repo_name=comment.pull_request.target_repo.repo_name,pull_request_id=comment.pull_request.pull_request_id, version=comment.pull_request_version_id)}"
                         >
                         <code class="pr-version-num">
-                            ${'v{}'.format(pr_index_ver)}
+                            ${'v{}'.format(comment_ver)}
                         </code>
                         </a> |
                       % endif

rhodecode/templates/compare/compare_commits.mako

@@ -21,8 +21,9 b''
     ## to speed up lookups cache some functions before the loop
     <%
         active_patterns = h.get_active_pattern_entries(c.repo_name)
-        urlify_commit_message = h.partial(h.urlify_commit_message, active_pattern_entries=active_patterns)
+        urlify_commit_message = h.partial(h.urlify_commit_message, active_pattern_entries=active_patterns, issues_container=getattr(c, 'referenced_commit_issues', None))
     %>
+
     %for commit in c.commit_ranges:
         <tr id="row-${commit.raw_id}"
             commit_id="${commit.raw_id}"

rhodecode/templates/ejs_templates/templates.html

@@ -1,6 +1,10 b''
 <%text>
 <div style="display: none">
 
+<script>
+var CG = new ColorGenerator();
+</script>
+
 <script id="ejs_gravatarWithUser" type="text/template" class="ejsTemplate">
 
 <%
@@ -34,10 +38,6 b" var data_hovercard_url = pyroutes.url('h"
 
 </script>
 
-<script>
-var CG = new ColorGenerator();
-</script>
-
 <script id="ejs_reviewMemberEntry" type="text/template" class="ejsTemplate">
     <%
         if (create) {
@@ -47,26 +47,24 b' var CG = new ColorGenerator();'
         }
 
         if (member.user_group && member.user_group.vote_rule) {
-            var groupStyle = 'border-right: 2px solid '+CG.asRGB(CG.getColor(member.user_group.vote_rule));
+            var reviewGroup = '<i class="icon-user-group"></i>';
+            var reviewGroupColor = CG.asRGB(CG.getColor(member.user_group.vote_rule));
         } else {
-            var groupStyle = 'border-right: 2px solid transparent';
+            var reviewGroup = null;
+            var reviewGroupColor = 'transparent';
         }
     %>
 
-<li id="reviewer_<%= member.user_id %>" class="reviewer_entry" style="<%= groupStyle%>" tooltip="Review Group">
+<tr id="reviewer_<%= member.user_id %>" class="reviewer_entry" tooltip="Review Group" data-reviewer-user-id="<%= member.user_id %>">
 
-    <div class="reviewers_member">
+    <td style="width: 20px">
         <div class="reviewer_status tooltip" title="<%= review_status_label %>">
           <i class="icon-circle review-status-<%= review_status %>"></i>
+        </div>
+    </td>
 
-        </div>
+    <td>
       <div id="reviewer_<%= member.user_id %>_name" class="reviewer_name">
-        <% if (mandatory) { %>
-            <div class="reviewer_member_mandatory tooltip" title="Mandatory reviewer">
-                <i class="icon-lock"></i>
-            </div>
-        <% } %>
-
         <%-
           renderTemplate('gravatarWithUser', {
             'size': 16,
@@ -78,11 +76,43 b' var CG = new ColorGenerator();'
             'gravatar_url':  member.gravatar_link
             })
         %>
+        <span class="tooltip presence-state" style="display: none" title="This users is currently at this page">
+          <i class="icon-eye" style="color: #0ac878"></i>
+        </span>
       </div>
+    </td>
+
+    <td style="width: 10px">
+    <% if (reviewGroup !== null) { %>
+        <span class="tooltip" title="Member of review group from rule: `<%= member.user_group.name %>`" style="color: <%= reviewGroupColor %>">
+        <%- reviewGroup %>
+        </span>
+    <% } %>
+    </td>
 
+    <% if (mandatory) { %>
+    <td style="text-align: right;width: 10px;">
+        <div class="reviewer_member_mandatory tooltip" title="Mandatory reviewer">
+            <i class="icon-lock"></i>
+        </div>
+    </td>
+
+    <% } else { %>
+    <td>
+        <% if (allowed_to_update) { %>
+          <div class="reviewer_member_remove action_button" onclick="reviewersController.removeReviewMember(<%= member.user_id %>, true)" style="visibility: <%= edit_visibility %>;">
+              <i class="icon-remove"></i>
+          </div>
+        <% } %>
+    </td>
+    <% } %>
+
+</tr>
+
+<tr>
+    <td colspan="4" style="display: none" class="pr-user-rule-container">
       <input type="hidden" name="__start__" value="reviewer:mapping">
 
-
         <%if (member.user_group && member.user_group.vote_rule) {%>
             <div class="reviewer_reason">
 
@@ -113,24 +143,11 b' var CG = new ColorGenerator();'
         <input type="hidden" name="mandatory" value="<%= mandatory %>"/>
 
       <input type="hidden" name="__end__" value="reviewer:mapping">
-
-      <% if (mandatory) { %>
-            <div class="reviewer_member_mandatory_remove" style="visibility: <%= edit_visibility %>;">
-                <i class="icon-remove"></i>
-            </div>
-      <% } else { %>
-        <% if (allowed_to_update) { %>
-          <div class="reviewer_member_remove action_button" onclick="reviewersController.removeReviewMember(<%= member.user_id %>, true)" style="visibility: <%= edit_visibility %>;">
-              <i class="icon-remove" ></i>
-          </div>
-        <% } %>
-      <% } %>
-    </div>
-</li>
+    </td>
+</tr>
 
 </script>
 
-
 <script id="ejs_commentVersion" type="text/template" class="ejsTemplate">
 
 <%
@@ -158,7 +175,6 b' if (show_disabled) {'
 
 </script>
 
-
 </div>
 
 <script>

rhodecode/templates/email_templates/base.mako

@@ -360,13 +360,13 b' text_monospace = "\'Menlo\', \'Liberation M'
 
         div.markdown-block ul.checkbox li, div.markdown-block ol.checkbox li {
             list-style: none !important;
-            margin: 6px !important;
+            margin: 0px !important;
             padding: 0 !important
         }
 
         div.markdown-block ul li, div.markdown-block ol li {
             list-style: disc !important;
-            margin: 6px !important;
+            margin: 0px !important;
             padding: 0 !important
         }
 

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -21,7 +21,120 b''
     ${self.repo_menu(active='showpullrequest')}
 </%def>
 
+<%def name="comments_table(comments, counter_num, todo_comments=False)">
+    <%
+        old_comments = False
+        if todo_comments:
+            cls_ = 'todos-content-table'
+            def sorter(entry):
+                user_id = entry.author.user_id
+                resolved = '1' if entry.resolved else '0'
+                if user_id == c.rhodecode_user.user_id:
+                    # own comments first
+                    user_id = 0
+                return '{}'.format(str(entry.comment_id).zfill(10000))
+        else:
+            cls_ = 'comments-content-table'
+            def sorter(entry):
+                user_id = entry.author.user_id
+                return '{}'.format(str(entry.comment_id).zfill(10000))
+
+
+
+    %>
+    <table class="todo-table ${cls_}" data-total-count="${len(comments)}" data-counter="${counter_num}">
+
+     % for loop_obj, comment_obj in h.looper(reversed(sorted(comments, key=sorter))):
+         <%
+            display = ''
+            _cls = ''
+         %>
+         <% comment_ver_index = comment_obj.get_index_version(getattr(c, 'versions', [])) %>
+         <%
+             prev_comment_ver_index = 0
+             if loop_obj.previous:
+                prev_comment_ver_index = loop_obj.previous.get_index_version(getattr(c, 'versions', []))
+         %>
+         <% hidden_at_ver = comment_obj.outdated_at_version_js(c.at_version_num) %>
+         <% is_from_old_ver = comment_obj.older_than_version_js(c.at_version_num) %>
+         <%
+         if (prev_comment_ver_index > comment_ver_index) and old_comments is False:
+           old_comments = True
+         %>
+          % if todo_comments:
+              % if comment_obj.resolved:
+                  <% _cls = 'resolved-todo' %>
+                  <% display = 'none' %>
+              % endif
+          % else:
+              ## SKIP TODOs we display them in other area
+              % if comment_obj.is_todo:
+                  <% display = 'none' %>
+              % endif
+              ## Skip outdated comments
+              % if comment_obj.outdated:
+                  <% display = 'none' %>
+                  <% _cls = 'hidden-comment' %>
+              % endif
+          % endif
+
+          % if not todo_comments and old_comments:
+          <tr class="old-comments-marker">
+              <td colspan="3"> <code>comments from older versions</code> </td>
+          </tr>
+          ## reset markers so we only show this marker once
+          <% old_comments = None %>
+          % endif
+
+          <tr class="${_cls}" style="display: ${display};">
+              <td class="td-todo-number">
+
+                  <a class="${('todo-resolved' if comment_obj.resolved else '')} permalink"
+                     href="#comment-${comment_obj.comment_id}"
+                     onclick="return Rhodecode.comments.scrollToComment($('#comment-${comment_obj.comment_id}'), 0, ${hidden_at_ver})">
+
+                  % if todo_comments:
+                    % if comment_obj.is_inline:
+                      <i class="tooltip icon-code" title="Inline TODO comment ${('made in older version (v{})'.format(comment_ver_index) if is_from_old_ver == 'true' else 'made in this version')}."></i>
+                    % else:
+                      <i class="tooltip icon-comment" title="General TODO comment ${('made in older version (v{})'.format(comment_ver_index) if is_from_old_ver == 'true' else 'made in this version')}."></i>
+                    % endif
+                  % else:
+                    % if comment_obj.outdated:
+                      <i class="tooltip icon-comment-toggle" title="Inline Outdated made in v${comment_ver_index}."></i>
+                    % elif comment_obj.is_inline:
+                      <i class="tooltip icon-code" title="Inline comment ${('made in older version (v{})'.format(comment_ver_index) if is_from_old_ver == 'true' else 'made in this version')}."></i>
+                    % else:
+                      <i class="tooltip icon-comment" title="General comment ${('made in older version (v{})'.format(comment_ver_index) if is_from_old_ver == 'true' else 'made in this version')}."></i>
+                    % endif
+                  % endif
+
+                  #${comment_obj.comment_id}
+                  </a>
+              </td>
+
+              <td class="td-todo-gravatar">
+                  ${base.gravatar(comment_obj.author.email, 16, user=comment_obj.author, tooltip=True, extra_class=['no-margin'])}
+              </td>
+              <td class="todo-comment-text-wrapper">
+                  <div class="tooltip todo-comment-text timeago" title="${h.format_date(comment_obj.created_on)}" datetime="${comment_obj.created_on}${h.get_timezone(comment_obj.created_on, time_is_local=True)}">
+                    <code>${h.chop_at_smart(comment_obj.text, '\n', suffix_if_chopped='...')}</code>
+                  </div>
+              </td>
+          </tr>
+     % endfor
+
+    </table>
+
+</%def>
+
+
 <%def name="main()">
+## Container to gather extracted Tickets
+<%
+    c.referenced_commit_issues = []
+    c.referenced_desc_issues = []
+%>
 
 <script type="text/javascript">
     // TODO: marcink switch this to pyroutes
@@ -79,7 +192,7 b''
     </div>
 
     <div id="pr-desc" class="input" title="${_('Rendered using {} renderer').format(c.renderer)}">
-        ${h.render(c.pull_request.description, renderer=c.renderer, repo_name=c.repo_name)}
+        ${h.render(c.pull_request.description, renderer=c.renderer, repo_name=c.repo_name, issues_container=c.referenced_desc_issues)}
     </div>
 
     <div id="pr-desc-edit" class="input textarea" style="display: none;">
@@ -89,29 +202,6 b''
 
     <div id="summary" class="fields pr-details-content">
 
-       ## review
-       <div class="field">
-        <div class="label-pr-detail">
-            <label>${_('Review status')}:</label>
-        </div>
-        <div class="input">
-          %if c.pull_request_review_status:
-          <div class="tag status-tag-${c.pull_request_review_status}">
-            <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
-            <span class="changeset-status-lbl">
-              %if c.pull_request.is_closed():
-                  ${_('Closed')},
-              %endif
-
-              ${h.commit_status_lbl(c.pull_request_review_status)}
-
-            </span>
-          </div>
-            - ${_ungettext('calculated based on {} reviewer vote', 'calculated based on {} reviewers votes', len(c.pull_request_reviewers)).format(len(c.pull_request_reviewers))}
-          %endif
-        </div>
-       </div>
-
        ## source
        <div class="field">
         <div class="label-pr-detail">
@@ -231,7 +321,7 b''
                                 </code>
                            </td>
                            <td>
-                               <input ${('checked="checked"' if c.from_version_num == ver_pr else '')} class="compare-radio-button" type="radio" name="ver_source" value="${ver_pr or 'latest'}" data-ver-pos="${ver_pos}"/>
+                               <input ${('checked="checked"' if c.from_version_index == ver_pr else '')} class="compare-radio-button" type="radio" name="ver_source" value="${ver_pr or 'latest'}" data-ver-pos="${ver_pos}"/>
                                <input ${('checked="checked"' if c.at_version_num == ver_pr else '')} class="compare-radio-button" type="radio" name="ver_target" value="${ver_pr or 'latest'}" data-ver-pos="${ver_pos}"/>
                            </td>
                            <td>
@@ -281,8 +371,6 b''
   </div>
 
 
-
-
   </div>
 
 </div>
@@ -339,9 +427,9 b''
               <div class="compare_view_commits_title">
                   % if not c.compare_mode:
 
-                    % if c.at_version_pos:
+                    % if c.at_version_index:
                         <h4>
-                        ${_('Showing changes at v%d, commenting is disabled.') % c.at_version_pos}
+                        ${_('Showing changes at v{}, commenting is disabled.').format(c.at_version_index)}
                         </h4>
                     % endif
 
@@ -394,10 +482,11 b''
               </div>
 
               % if not c.missing_commits:
+                ## COMPARE RANGE DIFF MODE
                 % if c.compare_mode:
                     % if c.at_version:
                     <h4>
-                        ${_('Commits and changes between v{ver_from} and {ver_to} of this pull request, commenting is disabled').format(ver_from=c.from_version_pos, ver_to=c.at_version_pos if c.at_version_pos else 'latest')}:
+                        ${_('Commits and changes between v{ver_from} and {ver_to} of this pull request, commenting is disabled').format(ver_from=c.from_version_index, ver_to=c.at_version_index if c.at_version_index else 'latest')}:
                     </h4>
 
                     <div class="subtitle-compare">
@@ -452,7 +541,7 b''
                                 </td>
                                 <td class="mid td-description">
                                     <div class="log-container truncate-wrap">
-                                        <div class="message truncate" id="c-${commit.raw_id}" data-message-raw="${commit.message}">${h.urlify_commit_message(commit.message, c.repo_name)}</div>
+                                        <div class="message truncate" id="c-${commit.raw_id}" data-message-raw="${commit.message}">${h.urlify_commit_message(commit.message, c.repo_name, issues_container=c.referenced_commit_issues)}</div>
                                     </div>
                                 </td>
                             </tr>
@@ -463,21 +552,13 b''
 
                     % endif
 
+                ## Regular DIFF
                 % else:
                     <%include file="/compare/compare_commits.mako" />
                 % endif
 
                 <div class="cs_files">
                     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
-                    % if c.at_version:
-                        <% c.inline_cnt = len(c.inline_versions[c.at_version_num]['display']) %>
-                        <% c.inline_comments_flat = c.inline_versions[c.at_version_num]['display'] %>
-                        <% c.comments = c.comment_versions[c.at_version_num]['display'] %>
-                    % else:
-                        <% c.inline_cnt = len(c.inline_versions[c.at_version_num]['until']) %>
-                        <% c.inline_comments_flat = c.inline_versions[c.at_version_num]['until'] %>
-                        <% c.comments = c.comment_versions[c.at_version_num]['until'] %>
-                    % endif
 
                     <%
                         pr_menu_data = {
@@ -524,7 +605,7 b''
       ## comments heading with count
       <div class="comments-heading">
         <i class="icon-comment"></i>
-        ${_('Comments')} ${len(c.comments)}
+        ${_('General Comments')} ${len(c.comments)}
       </div>
 
       ## render general comments
@@ -561,6 +642,354 b''
    % endif
   </div>
 
+
+### NAVBOG RIGHT
+<style>
+
+    .right-sidebar {
+        position: fixed;
+        top: 0px;
+        bottom: 0;
+        right: 0;
+
+        background: #fafafa;
+        z-index: 50;
+    }
+
+    .right-sidebar {
+        border-left: 1px solid #dbdbdb;
+    }
+
+    .right-sidebar.right-sidebar-expanded {
+        width: 320px;
+        overflow: scroll;
+    }
+
+    .right-sidebar.right-sidebar-collapsed {
+        width: 50px;
+        padding: 0;
+        display: block;
+        overflow: hidden;
+    }
+
+    .sidenav {
+        float: right;
+        will-change: min-height;
+        background: #fafafa;
+        width: 100%;
+        padding-top: 50px;
+    }
+
+    .sidebar-toggle {
+        height: 30px;
+        text-align: center;
+        margin: 15px 0px 0 0;
+    }
+    .sidebar-toggle a {
+
+    }
+
+    .sidebar-content {
+        margin-left: 15px;
+        margin-right: 15px;
+    }
+
+    .sidebar-heading {
+        font-size: 1.2em;
+        font-weight: 700;
+        margin-top: 10px;
+    }
+
+    .sidebar-element {
+        margin-top: 20px;
+    }
+    .right-sidebar-collapsed-state {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 0 10px;
+        cursor: pointer;
+        font-size: 1.3em;
+        margin: 0 -15px;
+    }
+
+    .right-sidebar-collapsed-state:hover {
+        background-color: #dbd9da;
+    }
+
+    .old-comments-marker {
+        text-align: center;
+    }
+
+    .old-comments-marker td {
+        padding-top: 15px;
+        border-bottom: 1px solid #dbd9da;
+    }
+
+    #add_reviewer {
+        padding-top: 10px;
+    }
+
+</style>
+
+<aside class="right-sidebar right-sidebar-expanded" id="pr-nav-sticky" style="display: none">
+    <div class="sidenav navbar__inner" >
+        ## TOGGLE
+        <div class="sidebar-toggle" onclick="toggleSidebar(); return false">
+            <a href="#toggleSidebar">
+
+            </a>
+        </div>
+
+        ## CONTENT
+        <div class="sidebar-content">
+
+            ## RULES SUMMARY/RULES
+            <div class="sidebar-element clear-both">
+
+                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Reviewers')}">
+                    <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
+                    ${len(c.allowed_reviewers)}
+                </div>
+
+                ## REVIEW RULES
+                <div id="review_rules" style="display: none" class="">
+                    <div class="right-sidebar-expanded-state pr-details-title">
+                        <span class="sidebar-heading">
+                            ${_('Reviewer rules')}
+                        </span>
+
+                    </div>
+                    <div class="pr-reviewer-rules">
+                        ## review rules will be appended here, by default reviewers logic
+                    </div>
+                    <input id="review_data" type="hidden" name="review_data" value="">
+                </div>
+
+                ## REVIEWERS
+                <div class="right-sidebar-expanded-state pr-details-title">
+                    <span class="tooltip sidebar-heading" title="${_ungettext('Review status calculated based on {} reviewer vote', 'Review status calculated based on {} reviewers votes', len(c.allowed_reviewers)).format(len(c.allowed_reviewers))}">
+                        <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
+                        ${_('Reviewers')}
+                    </span>
+                    %if c.allowed_to_update:
+                        <span id="open_edit_reviewers" class="block-right action_button last-item">${_('Edit')}</span>
+                        <span id="close_edit_reviewers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
+                    %else:
+                        <span id="open_edit_reviewers" class="block-right action_button last-item">${_('Show rules')}</span>
+                        <span id="close_edit_reviewers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
+                    %endif
+                </div>
+
+                <div id="reviewers" class="right-sidebar-expanded-state pr-details-content reviewers">
+
+                    ## members redering block
+                    <input type="hidden" name="__start__" value="review_members:sequence">
+
+                    <table id="review_members" class="group_members">
+                    ## This content is loaded via JS and ReviewersPanel
+                    </table>
+
+                    <input type="hidden" name="__end__" value="review_members:sequence">
+                    ## end members redering block
+
+                    %if not c.pull_request.is_closed():
+                        <div id="add_reviewer" class="ac" style="display: none;">
+                        %if c.allowed_to_update:
+                            % if not c.forbid_adding_reviewers:
+                                <div id="add_reviewer_input" class="reviewer_ac">
+                                   ${h.text('user', class_='ac-input', placeholder=_('Add reviewer or reviewer group'))}
+                                   <div id="reviewers_container"></div>
+                                </div>
+                            % endif
+                            <div class="pull-right">
+                                <button id="update_pull_request" class="btn btn-small no-margin">${_('Save Changes')}</button>
+                            </div>
+                        %endif
+                        </div>
+                    %endif
+                </div>
+            </div>
+
+##             ## OBSERVERS
+##             <div class="sidebar-element clear-both">
+##                 <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Observers')}">
+##                     <i class="icon-eye"></i>
+##                     0
+##                 </div>
+##
+##                 <div class="right-sidebar-expanded-state pr-details-title">
+##                   <span class="sidebar-heading">
+##                     <i class="icon-eye"></i>
+##                     ${_('Observers')}
+##                   </span>
+##                 </div>
+##                 <div class="right-sidebar-expanded-state pr-details-content">
+##                     No observers
+##                 </div>
+##             </div>
+
+            ## TODOs
+            <div class="sidebar-element clear-both">
+                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="TODOs">
+                  <i class="icon-flag-filled"></i>
+                  <span id="todos-count">${len(c.unresolved_comments)}</span>
+                </div>
+
+                <div class="right-sidebar-expanded-state pr-details-title">
+                      ## Only show unresolved, that is only what matters
+                      <span class="sidebar-heading noselect" onclick="refreshTODOs(); return false">
+                      <i class="icon-flag-filled"></i>
+                      TODOs
+                      </span>
+
+                      % if not c.at_version:
+                          % if c.resolved_comments:
+                              <span class="block-right action_button last-item noselect" onclick="$('.unresolved-todo-text').toggle(); return versionController.toggleElement(this, '.resolved-todo');" data-toggle-on="Show resolved" data-toggle-off="Hide resolved">Show resolved</span>
+                          % else:
+                              <span class="block-right last-item noselect">Show resolved</span>
+                          % endif
+                      % endif
+                  </div>
+
+                <div class="right-sidebar-expanded-state pr-details-content">
+
+                  % if c.at_version:
+                      <table>
+                          <tr>
+                            <td class="unresolved-todo-text">${_('TODOs unavailable when browsing versions')}.</td>
+                          </tr>
+                      </table>
+                  % else:
+                    % if c.unresolved_comments + c.resolved_comments:
+                      ${comments_table(c.unresolved_comments + c.resolved_comments, len(c.unresolved_comments), todo_comments=True)}
+                    % else:
+                        <table>
+                            <tr>
+                                <td>
+                                    ${_('No TODOs yet')}
+                                </td>
+                            </tr>
+                        </table>
+                    % endif
+                  % endif
+                </div>
+            </div>
+
+            ## COMMENTS
+            <div class="sidebar-element clear-both">
+                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Comments')}">
+                    <i class="icon-comment" style="color: #949494"></i>
+                    <span id="comments-count">${len(c.inline_comments_flat+c.comments)}</span>
+                </div>
+
+                <div class="right-sidebar-expanded-state pr-details-title">
+                  <span class="sidebar-heading noselect" onclick="refreshComments(); return false">
+                    <i class="icon-comment" style="color: #949494"></i>
+                    ${_('Comments')}
+
+##                    % if outdated_comm_count_ver:
+##                         <a href="#" onclick="showOutdated(); Rhodecode.comments.nextOutdatedComment(); return false;">
+##                             (${_("{} Outdated").format(outdated_comm_count_ver)})
+##                         </a>
+##                         <a href="#" class="showOutdatedComments" onclick="showOutdated(this); return false;"> | ${_('show outdated')}</a>
+##                         <a href="#" class="hideOutdatedComments" style="display: none" onclick="hideOutdated(this); return false;"> | ${_('hide outdated')}</a>
+
+##                         % else:
+##                             (${_("{} Outdated").format(outdated_comm_count_ver)})
+##                    % endif
+
+                  </span>
+
+                  % if outdated_comm_count_ver:
+                    <span class="block-right action_button last-item noselect" onclick="return versionController.toggleElement(this, '.hidden-comment');" data-toggle-on="Show outdated" data-toggle-off="Hide outdated">Show outdated</span>
+                  % else:
+                    <span class="block-right last-item noselect">Show hidden</span>
+                  % endif
+
+                </div>
+
+                <div class="right-sidebar-expanded-state pr-details-content">
+                % if c.inline_comments_flat + c.comments:
+                    ${comments_table(c.inline_comments_flat + c.comments, len(c.inline_comments_flat+c.comments))}
+                % else:
+                    <table>
+                        <tr>
+                            <td>
+                                ${_('No Comments yet')}
+                            </td>
+                        </tr>
+                    </table>
+                % endif
+                </div>
+
+            </div>
+
+            ## Referenced Tickets
+            <div class="sidebar-element clear-both">
+                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Referenced Tickets')}">
+                    <i class="icon-info-circled"></i>
+                    ${(len(c.referenced_desc_issues) + len(c.referenced_commit_issues))}
+                </div>
+
+                <div class="right-sidebar-expanded-state pr-details-title">
+                  <span class="sidebar-heading">
+                    <i class="icon-info-circled"></i>
+                    ${_('Referenced Tickets')}
+                  </span>
+                </div>
+                <div class="right-sidebar-expanded-state pr-details-content">
+                    <table>
+
+                        <tr><td><code>${_('Pull Request Description')}</code></td></tr>
+                        % if c.referenced_desc_issues:
+                            % for ticket_dict in c.referenced_desc_issues:
+                            <tr>
+                                <td>
+                                    <a href="${ticket_dict.get('url')}">
+                                    ${ticket_dict.get('id')}
+                                    </a>
+                                </td>
+                            </tr>
+                            % endfor
+                        % else:
+                            <tr>
+                                <td>
+                                    ${_('No Ticket data found.')}
+                                </td>
+                            </tr>
+                        % endif
+
+                        <tr><td style="padding-top: 10px"><code>${_('Commit Messages')}</code></td></tr>
+                        % if c.referenced_commit_issues:
+                            % for ticket_dict in c.referenced_commit_issues:
+                            <tr>
+                                <td>
+                                    <a href="${ticket_dict.get('url')}">
+                                    ${ticket_dict.get('id')}
+                                    </a>
+                                </td>
+                            </tr>
+                            % endfor
+                        % else:
+                            <tr>
+                                <td>
+                                    ${_('No Ticket data found.')}
+                                </td>
+                            </tr>
+                        % endif
+                    </table>
+
+                </div>
+            </div>
+
+        </div>
+
+    </div>
+</aside>
+
+## This JS needs to be at the end
 <script type="text/javascript">
 
       versionController = new VersionController();
@@ -571,6 +1000,61 b''
 
       updateController = new UpdatePrController();
 
+/** leak object to top level scope **/
+window.PullRequestPresenceController;
+
+(function () {
+    "use strict";
+
+    window.PullRequestPresenceController = function (channel) {
+        var self = this;
+        this.channel = channel;
+        this.users = {};
+
+        this.storeUsers = function (users) {
+            self.users = {}
+            $.each(users, function(index, value) {
+                var userId = value.state.id;
+                self.users[userId] = value.state;
+            })
+        }
+
+        this.render = function () {
+            $.each($('.reviewer_entry'), function(index, value) {
+                var userData = $(value).data();
+                if(self.users[userData.reviewerUserId] !== undefined){
+                    $(value).find('.presence-state').show();
+                } else {
+                    $(value).find('.presence-state').hide();
+                }
+            })
+        };
+
+        this.handlePresence = function (data) {
+
+            if (data.type == 'presence' && data.channel === self.channel) {
+                this.storeUsers(data.users);
+                this.render()
+            }
+        };
+
+        this.handleChannelUpdate = function (data) {
+
+            if (data.channel === this.channel) {
+                this.storeUsers(data.state.users);
+                this.render()
+            }
+
+        };
+
+        /* subscribe our chat to topics that are interesting to it */
+        $.Topic('/connection_controller/channel_update').subscribe(this.handleChannelUpdate.bind(this));
+        $.Topic('/connection_controller/presence').subscribe(this.handlePresence.bind(this));
+    };
+
+})();
+
+
       $(function () {
 
           // custom code mirror
@@ -616,6 +1100,8 b''
               closeButton: $('#close_edit_reviewers'),
               addButton: $('#add_reviewer'),
               removeButtons: $('.reviewer_member_remove,.reviewer_member_mandatory_remove'),
+              reviewRules: ${c.pull_request_default_reviewers_data_json | n},
+              setReviewers: ${c.pull_request_set_reviewers_data_json | n},
 
               init: function () {
                   var self = this;
@@ -624,24 +1110,50 b''
                   });
                   this.closeButton.on('click', function (e) {
                       self.close();
+                      self.renderReviewers();
                   });
+
+                  self.renderReviewers();
+
+              },
+
+              renderReviewers: function () {
+
+                $('#review_members').html('')
+                $.each(this.setReviewers.reviewers, function (key, val) {
+                    var member = val;
+
+                    var entry = renderTemplate('reviewMemberEntry', {
+                        'member': member,
+                        'mandatory': member.mandatory,
+                        'reasons': member.reasons,
+                        'allowed_to_update': member.allowed_to_update,
+                        'review_status': member.review_status,
+                        'review_status_label': member.review_status_label,
+                        'user_group': member.user_group,
+                        'create': false
+                    });
+
+                    $('#review_members').append(entry)
+                });
+                tooltipActivate();
+
               },
 
               edit: function (event) {
                   this.editButton.hide();
                   this.closeButton.show();
                   this.addButton.show();
-                  this.removeButtons.css('visibility', 'visible');
+                  $(this.removeButtons.selector).css('visibility', 'visible');
                   // review rules
-                  reviewersController.loadReviewRules(
-                      ${c.pull_request.reviewer_data_json | n});
+                  reviewersController.loadReviewRules(this.reviewRules);
               },
 
               close: function (event) {
                   this.editButton.show();
                   this.closeButton.hide();
                   this.addButton.hide();
-                  this.removeButtons.css('visibility', 'hidden');
+                  $(this.removeButtons.selector).css('visibility', 'hidden');
                   // hide review rules
                   reviewersController.hideReviewRules()
               }
@@ -678,6 +1190,75 b''
               );
           };
 
+          refreshComments = function () {
+            var params = {
+                'pull_request_id': templateContext.pull_request_data.pull_request_id,
+                'repo_name': templateContext.repo_name,
+                'version': '${request.GET.get('version', '')}',
+            };
+            var data = {"comments[]": ["1"]};
+            var loadUrl = pyroutes.url('pullrequest_comments', params);
+            var $targetElem = $('.comments-content-table');
+            $targetElem.css('opacity', 0.3);
+            $targetElem.load(
+                  loadUrl, data, function (responseText, textStatus, jqXHR) {
+                    if (jqXHR.status !== 200) {
+                        return false;
+                    }
+                    var $counterElem = $('#comments-count');
+                    var newCount = $(responseText).data('counter');
+                    if (newCount !== undefined) {
+                        var callback = function () {
+                            $counterElem.animate({'opacity': 1.00}, 200)
+                            $counterElem.html(newCount);
+                        };
+                        $counterElem.animate({'opacity': 0.15}, 200, callback);
+                    }
+
+
+                    $targetElem.css('opacity', 1);
+                    tooltipActivate();
+                  }
+            );
+          }
+
+          refreshTODOs = function () {
+            var params = {
+                'pull_request_id': templateContext.pull_request_data.pull_request_id,
+                'repo_name': templateContext.repo_name,
+                'version': '${request.GET.get('version', '')}',
+            };
+            var data = {"comments[]": ["1"]};
+            var loadUrl = pyroutes.url('pullrequest_todos', params);
+            var $targetElem = $('.todos-content-table');
+            $targetElem.css('opacity', 0.3);
+            $targetElem.load(
+                  loadUrl, data, function (responseText, textStatus, jqXHR) {
+                    if (jqXHR.status !== 200) {
+                        return false;
+                    }
+                    var $counterElem = $('#todos-count')
+                    var newCount = $(responseText).data('counter');
+                    if (newCount !== undefined) {
+                        var callback = function () {
+                            $counterElem.animate({'opacity': 1.00}, 200)
+                            $counterElem.html(newCount);
+                        };
+                        $counterElem.animate({'opacity': 0.15}, 200, callback);
+                    }
+
+                    $targetElem.css('opacity', 1);
+                    tooltipActivate();
+                  }
+            );
+
+          }
+
+          refreshAllComments = function() {
+              refreshComments();
+              refreshTODOs();
+          }
+
           closePullRequest = function (status) {
               if (!confirm(_gettext('Are you sure to close this pull request without merging?'))) {
                   return false;
@@ -771,441 +1352,91 b''
 
       })
 
-  </script>
-
-
-### NAVBOG RIGHT
-<style>
-
-    .right-sidebar {
-        position: fixed;
-        top: 0px;
-        bottom: 0;
-        right: 0;
-
-        background: #fafafa;
-        z-index: 200;
-    }
-
-    .right-sidebar {
-        border-left: 1px solid #dbdbdb;
-    }
-
-    .right-sidebar.right-sidebar-expanded {
-        width: 320px;
-        overflow: scroll;
-    }
-
-    .right-sidebar.right-sidebar-collapsed {
-        width: 62px;
-        padding: 0;
-        display: block;
-        overflow: hidden;
-    }
-
-    .sidenav {
-        float: right;
-        will-change: min-height;
-        background: #fafafa;
-        width: 100%;
-    }
+      $(document).ready(function () {
 
-    .sidebar-toggle {
-        height: 30px;
-        text-align: center;
-        margin: 15px 0 0 0;
-    }
-    .sidebar-toggle a {
-
-    }
-
-    .sidebar-content {
-        margin-left: 5px;
-        margin-right: 5px;
-    }
-
-    .sidebar-heading {
-        font-size: 1.2em;
-        font-weight: 700;
-        margin-top: 10px;
-    }
+        var $sideBar = $('.right-sidebar');
+        var marginExpVal = '320'
+        var marginColVal = '50'
+        var marginExpanded = {'margin': '0 {0}px 0 0'.format(marginExpVal)};
+        var marginCollapsed = {'margin': '0 {0}px 0 0'.format(marginColVal)};
+        var marginExpandedHeader = {'margin': '0 -{0}px 0 0'.format(marginExpVal), 'z-index': 10000};
+        var marginCollapsedHeader = {'margin': '0 -{0}px 0 0'.format(marginColVal), 'z-index': 10000};
 
-    .sidebar-element {
-        margin-top: 20px;
+        var updateStickyHeader = function() {
+          if (window.updateSticky !== undefined) {
+              // potentially our comments change the active window size, so we
+              // notify sticky elements
+              updateSticky()
     }
-    .right-sidebar-collapsed-state {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 0 10px;
-        cursor: pointer;
-        font-size: 1.3em;
-        margin: 0 -10px;
-    }
-
-    .right-sidebar-collapsed-state:hover {
-        background-color: #dbd9da;
-    }
-
-    .navbar__inner {
-        height: 100%;
-        background: #fafafa;
-        position: relative;
     }
 
-</style>
-
-
-
-<aside class="right-sidebar right-sidebar-expanded">
-    <div class="sidenav">
-        ## TOGGLE
-        <div class="sidebar-toggle" onclick="toggleSidebar(); return false">
-            <a href="#toggleSidebar">
-
-            </a>
-        </div>
-
-        ## CONTENT
-        <div class="sidebar-content">
-
-            ## RULES SUMMARY/RULES
-            <div class="sidebar-element clear-both">
-
-                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Reviewers')}">
-                    <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
-                    <br/>${len(c.pull_request_reviewers)}
-                </div>
-
-                ## REVIEW RULES
-                <div id="review_rules" style="display: none" class="">
-                    <div class="pr-details-title">
-                        <span class="sidebar-heading">
-                            ${_('Reviewer rules')}
-                        </span>
-
-                    </div>
-                    <div class="pr-reviewer-rules">
-                        ## review rules will be appended here, by default reviewers logic
-                    </div>
-                    <input id="review_data" type="hidden" name="review_data" value="">
-                </div>
-
-                ## REVIEWERS
-                <div class="right-sidebar-expanded-state pr-details-title">
-                    <span class="sidebar-heading">
-                        <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
-                        ${_('Reviewers')} - ${len(c.pull_request_reviewers)}
-                    </span>
-                      %if c.allowed_to_update:
-                        <span id="open_edit_reviewers" class="block-right action_button last-item">${_('Edit')}</span>
-                        <span id="close_edit_reviewers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
-                      %endif
-                </div>
-                <div id="reviewers" class="right-sidebar-expanded-state pr-details-content reviewers">
-
-                    ## members redering block
-                    <input type="hidden" name="__start__" value="review_members:sequence">
-                    <ul id="review_members" class="group_members">
-
-                    % for review_obj, member, reasons, mandatory, status in c.pull_request_reviewers:
-                        <script>
-                            var member = ${h.json.dumps(h.reviewer_as_json(member, reasons=reasons, mandatory=mandatory, user_group=review_obj.rule_user_group_data()))|n};
-                            var status = "${(status[0][1].status if status else 'not_reviewed')}";
-                            var status_lbl = "${h.commit_status_lbl(status[0][1].status if status else 'not_reviewed')}";
-                            var allowed_to_update = ${h.json.dumps(c.allowed_to_update)};
-
-                            var entry = renderTemplate('reviewMemberEntry', {
-                                'member': member,
-                                'mandatory': member.mandatory,
-                                'reasons': member.reasons,
-                                'allowed_to_update': allowed_to_update,
-                                'review_status': status,
-                                'review_status_label': status_lbl,
-                                'user_group': member.user_group,
-                                'create': false
-                            });
-                            $('#review_members').append(entry)
-                        </script>
-
-                    % endfor
-
-                    </ul>
-
-                    <input type="hidden" name="__end__" value="review_members:sequence">
-                    ## end members redering block
-
-                    %if not c.pull_request.is_closed():
-                        <div id="add_reviewer" class="ac" style="display: none;">
-                        %if c.allowed_to_update:
-                            % if not c.forbid_adding_reviewers:
-                                <div id="add_reviewer_input" class="reviewer_ac">
-                                   ${h.text('user', class_='ac-input', placeholder=_('Add reviewer or reviewer group'))}
-                                   <div id="reviewers_container"></div>
-                                </div>
-                            % endif
-                            <div class="pull-right">
-                                <button id="update_pull_request" class="btn btn-small no-margin">${_('Save Changes')}</button>
-                            </div>
-                        %endif
-                        </div>
-                    %endif
-                </div>
-            </div>
-
-            ## OBSERVERS
-            <div class="sidebar-element clear-both">
-                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Observers')}">
-                    <i class="icon-eye"></i>
-                    <br/> 0
-                </div>
-
-                <div class="right-sidebar-expanded-state pr-details-title">
-                  <span class="sidebar-heading">
-                    <i class="icon-eye"></i>
-                    ${_('Observers')}
-                  </span>
-                </div>
-                <div class="right-sidebar-expanded-state pr-details-content">
-                    No observers - 0
-                </div>
-            </div>
-
-            ## TODOs
-            <div class="sidebar-element clear-both">
-                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="TODOs">
-                  <i class="icon-flag-filled"></i>
-                  <br/> ${len(c.unresolved_comments)}
-                </div>
-
-                ## TODOs will be listed here
-                <div class="right-sidebar-expanded-state pr-details-title">
-                      ## Only show unresolved, that is only what matters
-                      <span class="sidebar-heading">
-                      <i class="icon-flag-filled"></i>
-                      TODOs - ${len(c.unresolved_comments)}
-                      ##/ ${(len(c.unresolved_comments) + len(c.resolved_comments))}
-                      </span>
-
-                      % if not c.at_version:
-                          % if c.resolved_comments:
-                              <span class="block-right action_button last-item noselect" onclick="$('.unresolved-todo-text').toggle(); return versionController.toggleElement(this, '.unresolved-todo');" data-toggle-on="Show resolved" data-toggle-off="Hide resolved">Show resolved</span>
-                          % else:
-                              <span class="block-right last-item noselect">Show resolved</span>
-                          % endif
-                      % endif
-                  </div>
-
-                <div class="right-sidebar-expanded-state pr-details-content">
-
-                    <table class="todo-table">
-                          <%
-                            def sorter(entry):
-                                user_id = entry.author.user_id
-                                resolved = '1' if entry.resolved else '0'
-                                if user_id == c.rhodecode_user.user_id:
-                                    # own comments first
-                                    user_id = 0
-                                return '{}_{}_{}'.format(resolved, user_id, str(entry.comment_id).zfill(100))
-                          %>
-
-                      % if c.at_version:
-                          <tr>
-                            <td class="unresolved-todo-text">${_('unresolved TODOs unavailable in this view')}.</td>
-                          </tr>
-                      % else:
-                          % for todo_comment in sorted(c.unresolved_comments + c.resolved_comments, key=sorter):
-                              <% resolved = todo_comment.resolved %>
-                              % if inline:
-                                  <% outdated_at_ver = todo_comment.outdated_at_version(getattr(c, 'at_version_num', None)) %>
-                              % else:
-                                  <% outdated_at_ver = todo_comment.older_than_version(getattr(c, 'at_version_num', None)) %>
-                              % endif
-
-                              <tr ${('class="unresolved-todo" style="display: none"' if resolved else '') |n}>
-
-                                  <td class="td-todo-number">
-                                      % if resolved:
-                                          <a class="permalink todo-resolved tooltip" title="${_('Resolved by comment #{}').format(todo_comment.resolved.comment_id)}" href="#comment-${todo_comment.comment_id}" onclick="return Rhodecode.comments.scrollToComment($('#comment-${todo_comment.comment_id}'), 0, ${h.json.dumps(outdated_at_ver)})">
-                                          <i class="icon-flag-filled"></i> ${todo_comment.comment_id}</a>
-                                      % else:
-                                          <a class="permalink" href="#comment-${todo_comment.comment_id}" onclick="return Rhodecode.comments.scrollToComment($('#comment-${todo_comment.comment_id}'), 0, ${h.json.dumps(outdated_at_ver)})">
-                                          <i class="icon-flag-filled"></i> ${todo_comment.comment_id}</a>
-                                      % endif
-                                  </td>
-                                  <td class="td-todo-gravatar">
-                                      ${base.gravatar(todo_comment.author.email, 16, user=todo_comment.author, tooltip=True, extra_class=['no-margin'])}
-                                  </td>
-                                  <td class="todo-comment-text-wrapper">
-                                      <div class="todo-comment-text">
-                                        <code>${h.chop_at_smart(todo_comment.text, '\n', suffix_if_chopped='...')}</code>
-                                      </div>
-                                  </td>
-
-                              </tr>
-                          % endfor
-
-                          % if len(c.unresolved_comments) == 0:
-                              <tr>
-                                <td class="unresolved-todo-text">${_('No unresolved TODOs')}.</td>
-                              </tr>
-                          % endif
-
-                      % endif
-
-                    </table>
-
-                </div>
-            </div>
-
-            ## COMMENTS
-            <div class="sidebar-element clear-both">
-                <div class="tooltip right-sidebar-collapsed-state" style="display: none" onclick="toggleSidebar(); return false" title="${_('Comments')}">
-                    <i class="icon-comment" style="color: #949494"></i>
-                    <br/> ${len(c.inline_comments_flat+c.comments)}
-                </div>
-
-                <div class="right-sidebar-expanded-state pr-details-title">
-                  <span class="sidebar-heading">
-                    <i class="icon-comment" style="color: #949494"></i>
-                    ${_('Comments')} - ${len(c.inline_comments_flat+c.comments)}
-                      ##${_ungettext("{} General", "{} General", len(c.comments)).format(len(c.comments))} /
-                      ##${_ungettext("{} Inline", "{} Inline", c.inline_cnt).format(len(c.inline_comments_flat))}
-
-                      ## TODO check why this ins't working
-                        % if pull_request_menu:
-                            <%
-                            outdated_comm_count_ver = pull_request_menu['outdated_comm_count_ver']
-                            %>
-
-                            % if outdated_comm_count_ver:
-                                <a href="#" onclick="showOutdated(); Rhodecode.comments.nextOutdatedComment(); return false;">
-                                    (${_("{} Outdated").format(outdated_comm_count_ver)})
-                                </a>
-                                <a href="#" class="showOutdatedComments" onclick="showOutdated(this); return false;"> | ${_('show outdated')}</a>
-                                <a href="#" class="hideOutdatedComments" style="display: none" onclick="hideOutdated(this); return false;"> | ${_('hide outdated')}</a>
-                            % else:
-                                (${_("{} Outdated").format(outdated_comm_count_ver)})
-                            % endif
-
-                        % endif
-                  </span>
-                  <span class="block-right action_button last-item noselect" onclick="return versionController.toggleElement(this, '.hidden-comment');" data-toggle-on="Show all" data-toggle-off="Hide all">Show all</span>
-                </div>
-
-                <div class="right-sidebar-expanded-state pr-details-content">
-                    <table class="todo-table">
-                      <%
-                        def sorter(entry):
-                            user_id = entry.author.user_id
-                            return '{}'.format(str(entry.comment_id).zfill(100))
-                      %>
-
-                     % for comment_obj in reversed(sorted(c.inline_comments_flat + c.comments, key=sorter)):
-                         <%
-                            display = ''
-                            _cls = ''
-                         %>
-                         ## SKIP TODOs we display them above
-                          % if comment_obj.is_todo:
-                              <% display = 'none' %>
-                          % endif
-
-                          ## Skip outdated comments
-                          % if comment_obj.outdated:
-                              <% display = 'none' %>
-                              <% _cls = 'hidden-comment' %>
-                          % endif
-
-                          <tr class="${_cls}" style="display: ${display}">
-                              <td class="td-todo-number">
-                                  <a class="permalink" href="#comment-${comment_obj.comment_id}" onclick="return Rhodecode.comments.scrollToComment($('#comment-${comment_obj.comment_id}'), 0, ${comment_obj.outdated_js})">
-                                  % if comment_obj.outdated:
-                                      <i class="tooltip icon-comment-toggle" title="Outdated"></i>
-                                  % elif comment_obj.is_inline:
-                                      <i class="tooltip icon-code" title="Inline"></i>
-                                  % else:
-                                      <i class="tooltip icon-comment" title="General"></i>
-                                  % endif
-                                  ${comment_obj.comment_id}
-                                  </a>
-                              </td>
-                              <td class="td-todo-gravatar">
-                                  ${base.gravatar(comment_obj.author.email, 16, user=comment_obj.author, tooltip=True, extra_class=['no-margin'])}
-                              </td>
-                              <td class="todo-comment-text-wrapper">
-                                  <div class="todo-comment-text">
-                                    <code>${h.chop_at_smart(comment_obj.text, '\n', suffix_if_chopped='...')}</code>
-                                  </div>
-                              </td>
-                          </tr>
-                     % endfor
-
-                </table>
-                </div>
-
-            </div>
-        </div>
-
-    </div>
-</aside>
-
-
-<script>
+        var expandSidebar = function() {
     var $sideBar = $('.right-sidebar');
-    var marginExpanded = {'margin': '0 320px 0 0'};
-    var marginCollapsed = {'margin': '0 50px 0 0'};
-
-    if($sideBar.hasClass('right-sidebar-expanded')) {
         $('.outerwrapper').css(marginExpanded);
+            $('.header').css(marginExpandedHeader);
         $('.sidebar-toggle a').html('<i class="icon-right" style="margin-right: -10px"></i><i class="icon-right"></i>');
         $('.right-sidebar-collapsed-state').hide();
         $('.right-sidebar-expanded-state').show();
-        updateSticky()
 
-    } else {
-        $('.outerwrapper').css(marginCollapsed);
-        $('.sidebar-toggle a').html('<i class="icon-left" style="margin-right: -10px"></i><i class="icon-left"></i>');
-        $('.right-sidebar-collapsed-state').hide();
-        $('.right-sidebar-expanded-state').show();
-        updateSticky()
+            $sideBar.addClass('right-sidebar-expanded')
+            $sideBar.removeClass('right-sidebar-collapsed')
     }
 
-    var toggleSidebar = function(){
+        var collapseSidebar = function() {
         var $sideBar = $('.right-sidebar');
-
-        if($sideBar.hasClass('right-sidebar-expanded')) {
-            // collapse now
-            $sideBar.removeClass('right-sidebar-expanded')
-            $sideBar.addClass('right-sidebar-collapsed')
             $('.outerwrapper').css(marginCollapsed);
+            $('.header').css(marginCollapsedHeader);
             $('.sidebar-toggle a').html('<i class="icon-left" style="margin-right: -10px"></i><i class="icon-left"></i>');
             $('.right-sidebar-collapsed-state').show();
             $('.right-sidebar-expanded-state').hide();
 
+            $sideBar.removeClass('right-sidebar-expanded')
+            $sideBar.addClass('right-sidebar-collapsed')
+        }
+
+        toggleSidebar = function () {
+            var $sideBar = $('.right-sidebar');
+
+            if ($sideBar.hasClass('right-sidebar-expanded')) {
+                // expanded -> collapsed transition
+                collapseSidebar();
+                var sidebarState = 'collapsed';
+
         } else {
-            // expand now
-            $('.outerwrapper').css(marginExpanded);
-            $sideBar.addClass('right-sidebar-expanded')
-            $sideBar.removeClass('right-sidebar-collapsed')
-            $('.sidebar-toggle a').html('<i class="icon-right" style="margin-right: -10px"></i><i class="icon-right"></i>');
-            $('.right-sidebar-collapsed-state').hide();
-            $('.right-sidebar-expanded-state').show();
+                // collapsed -> expanded
+                expandSidebar();
+                var sidebarState = 'expanded';
         }
 
         // update our other sticky header in same context
-        updateSticky()
+            updateStickyHeader();
+            storeUserSessionAttr('rc_user_session_attr.sidebarState', sidebarState);
+        }
+
+        var expanded = $sideBar.hasClass('right-sidebar-expanded');
+
+        if (templateContext.session_attrs.sidebarState === 'expanded') {
+            expanded = true
+        } else if (templateContext.session_attrs.sidebarState === 'collapsed') {
+            expanded = false
     }
 
-    var sidebarElement = document.getElementById('pr-nav-sticky');
+        // show sidebar since it's hidden on load
+        $('.right-sidebar').show();
+
+        // init based on set initial class, or if defined user session attrs
+        if (expanded) {
+             expandSidebar();
+             updateStickyHeader();
 
-        ##  sidebar = new StickySidebar(sidebarElement, {
-        ##        containerSelector: '.main',
-        ##        minWidth: 62,
-        ##        innerWrapperSelector: '.navbar__inner',
-        ##        stickyClass: 'is-sticky',
-        ##  });
+        } else {
+             collapseSidebar();
+             updateStickyHeader();
+        }
+        var channel = '${c.pr_broadcast_channel}';
+        new PullRequestPresenceController(channel)
 
+    })
 </script>
+
 </%def>