diff --git a/src/components/IssuesPage/IssuesPageTemplate.vue b/src/components/IssuesPage/IssuesPageTemplate.vue
index b46fdbd..b6386f0 100644
--- a/src/components/IssuesPage/IssuesPageTemplate.vue
+++ b/src/components/IssuesPage/IssuesPageTemplate.vue
@@ -35,7 +35,7 @@
        
 
         <Entries class="flex-grow-1">
-            <EntriesFilterRow class="entries-filter-row Box-header mx-0 d-flex flex-justify-between">
+            <EntriesFilterRow v-if="!isEmpty" class="entries-filter-row Box-header mx-0 d-flex flex-justify-between">
                 <slot name="entriesFilterRow">
                     <EntriesFilterItem class="px-3">Visibility</EntriesFilterItem>
                     <EntriesFilterItem class="px-3">Organization</EntriesFilterItem>
@@ -118,6 +118,10 @@
             perPage: {
                 type: Number,
                 default: 8
+            },
+            isEmpty: {
+                type: Boolean,
+                default: false
             }
             
         },
diff --git a/src/components/Label.vue b/src/components/Label.vue
index 311726e..04fc020 100644
--- a/src/components/Label.vue
+++ b/src/components/Label.vue
@@ -1,5 +1,5 @@
 <template>
-    <span class="d-inline-block label css-truncate" :style="{color:fontColor,background:color}">
+    <span class="d-inline-block label css-truncate" :style="{color:fontColor,background:`${color}!important`}">
         <span class="css-truncate-target" style="max-width: 100%">{{emojiHandledName}}</span>
     </span>
 </template>
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index aa92a8a..43b11b0 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -158,6 +158,7 @@
     }
 
     .loading-wrapper{
+        pointer-events: none;
         position: absolute;
         top: 0;
         bottom: 0;
diff --git a/src/network/api.js b/src/network/api.js
index b7dc621..17f83bf 100644
--- a/src/network/api.js
+++ b/src/network/api.js
@@ -136,6 +136,10 @@ export const API_REPOSITORY_RELEASE = payload => {
     return `${GITHUB_REST_API_BASE}/repos/${payload.owner}/${payload.repo}/releases/${payload.releaseId}`
 }
 
+export const API_REPOSITORY_LATESTRELEASE = payload => {
+    return `${GITHUB_REST_API_BASE}/repos/${payload.owner}/${payload.repo}/releases/latest`
+}
+
 export const API_REPOSITORY_RELEASE_ASSETS = payload => {
     return `${GITHUB_REST_API_BASE}/repos/${payload.owner}/${payload.repo}/releases/${payload.releaseId}/assets`
 }
diff --git a/src/pages/Repository/Compare/Compare.vue b/src/pages/Repository/Compare/Compare.vue
index e62ff96..cb591a7 100644
--- a/src/pages/Repository/Compare/Compare.vue
+++ b/src/pages/Repository/Compare/Compare.vue
@@ -217,7 +217,7 @@
             </p>
         </EmptyNotice>
 
-         <Modal ref="chooseBaseRefModal" title="Choose a base ref" :modalStyle="{height:'80vh'}" @show="() => network_getAvailableRefs('base')">
+         <Modal :loading="modalRefsData.base[modalRefsData.base.currentTab].loading" ref="chooseBaseRefModal" title="Choose a base ref" :modalStyle="{height:'80vh'}" @show="() => network_getAvailableRefs('base')">
             <div class="select-menu-text-filter">
                 <div class="p-3">
                     <input type="text" v-model="modalRefsData.base.searchQuery" class="form-control" placeholder="Find a branch" autofocus="" autocomplete="off"/>
@@ -227,18 +227,12 @@
                     <button class="SelectMenu-tab py-2" style="font-size:14px" @click="() => switchModalTab('base','tags')" :class="{'active-modal-tab':modalRefsData.base.currentTab == 'tags'}">Tags</button>
                 </ModalTab>
             </div>
-            <div v-if="modalRefsData.base[modalRefsData.base.currentTab].loading" class="flex-row-center height-full">
-                <ModalLoadingIcon></ModalLoadingIcon>
-            </div>
-            <EmptyNotice v-else-if="modalRefsData.base.currentTab == 'tags' && modalRefsData.base.tags.data.length == 0">
+            <EmptyNotice v-if="modalRefsData.base.currentTab == 'tags' && modalRefsData.base.tags.isEmpty">
                 <div  class="text-center SelectMenu-message">
                     Nothing to show
                 </div> 
-                <footer class="SelectMenu-footer">
-                    <router-link :to="`/${owner}/${repo}/tags`">View all tags</router-link>
-                </footer>
             </EmptyNotice>
-            <div v-else style="overflow:auto">
+            <div v-else-if="!modalRefsData.base[modalRefsData.base.currentTab].loading" style="overflow:auto">
                 <transition-group v-if="modalRefsData.base.currentTab == 'branches'" name="fade-group" appear>
                     <SelectMenuItem :key="defaultBranch" v-if="defaultBranch" @click.native="() => routerWithRef(defaultBranch,'base')" :selected="baseRef == defaultBranch">
                         <span class="flex-1">{{defaultBranch}}</span>    
@@ -252,11 +246,15 @@
                     <SelectMenuItem @click.native="() => routerWithRef(item,'base')" v-for="item in modalFilteredAvailableBaseTags" :key="item" :selected="baseRef == item">
                         <span>{{item}}</span>    
                     </SelectMenuItem>
+                    <footer key="footer" class="SelectMenu-footer">
+                        <router-link :to="`/${owner}/${repo}/tags`">View all tags</router-link>
+                    </footer>
                 </transition-group>
             </div>
+           
         </Modal>
 
-         <Modal ref="chooseHeadRefModal" title="Choose a head ref" :modalStyle="{height:'80vh'}" @show="() => network_getAvailableRefs('head')">
+         <Modal ref="chooseHeadRefModal" title="Choose a head ref" :loading="modalRefsData.head[modalRefsData.head.currentTab].loading" :modalStyle="{height:'80vh'}" @show="() => network_getAvailableRefs('head')">
             <div class="select-menu-text-filter">
                 <div class="p-3">
                     <input type="text" v-model="modalRefsData.head.searchQuery" class="form-control" placeholder="Find a branch" autofocus="" autocomplete="off"/>
@@ -266,18 +264,12 @@
                     <button class="SelectMenu-tab py-2" style="font-size:14px" @click="() => switchModalTab('head','tags')" :class="{'active-modal-tab':modalRefsData.head.currentTab == 'tags'}">Tags</button>
                 </ModalTab>
             </div>
-            <div v-if="modalRefsData.head[modalRefsData.head.currentTab].loading" class="flex-row-center height-full">
-                <ModalLoadingIcon></ModalLoadingIcon>
-            </div>
-            <EmptyNotice v-else-if="modalRefsData.head.currentTab == 'tags' && modalRefsData.head.tags.data.length == 0">
-                <div  class="text-center SelectMenu-message">
+            <EmptyNotice v-if="modalRefsData.head.currentTab == 'tags' && modalRefsData.head.tags.isEmpty">
+                <div class="text-center SelectMenu-message">
                     Nothing to show
                 </div> 
-                <footer class="SelectMenu-footer">
-                    <router-link :to="`/${owner}/${repo}/tags`">View all tags</router-link>
-                </footer>
             </EmptyNotice>
-            <div v-else style="overflow:auto">
+            <div v-else-if="!modalRefsData.head[modalRefsData.head.currentTab].loading" style="overflow:auto">
                 <transition-group v-if="modalRefsData.head.currentTab == 'branches'" name="fade-group" appear>
                     <SelectMenuItem :key="defaultBranch" v-if="defaultBranch" @click.native="() => routerWithRef(defaultBranch,'head')" :selected="headRef == defaultBranch">
                         <span class="flex-1">{{defaultBranch}}</span>    
@@ -291,32 +283,30 @@
                     <SelectMenuItem @click.native="() => routerWithRef(item,'head')" v-for="item in modalFilteredAvailableHeadTags" :key="item" :selected="headRef == item">
                         <span>{{item}}</span>    
                     </SelectMenuItem>
+                    <footer key="footer" class="SelectMenu-footer">
+                        <router-link :to="`/${owner}/${repo}/tags`">View all tags</router-link>
+                    </footer>
                 </transition-group>
             </div>
+             
         </Modal>
 
-         <Modal ref="chooseBaseRepoModal" title="Choose a base repostiory" :modalStyle="{height:'80vh'}" @show="network_getAvailableRepos">
+         <Modal ref="chooseBaseRepoModal" title="Choose a base repostiory" :loading="modalReposData.loading" :modalStyle="{height:'80vh'}" @show="network_getAvailableRepos">
             <div class="select-menu-text-filter p-3 position-sticky" style="top:0;z-index:2">
                 <input type="text" v-model="modalReposData.searchQuery" class="form-control" placeholder="Filter repos" autofocus="" autocomplete="off"/>
             </div>
-            <div v-if="modalReposData.loading" class="flex-row-center height-full">
-                <ModalLoadingIcon></ModalLoadingIcon>
-            </div>
-            <div v-else>
+            <div v-if="modalFiltermodalReposData.length > 0">
                 <SelectMenuItem @click.native="() => routerWithRefOwner(item,'base')" v-for="item in modalFiltermodalReposData" :key="item" :selected="`${owner}/${repo}` == item">
                     <span>{{item}}</span>    
                 </SelectMenuItem>
             </div>
         </Modal>
 
-         <Modal ref="chooseHeadRepoModal" title="Choose a head repostiory" :modalStyle="{height:'80vh'}" @show="network_getAvailableRepos">
+         <Modal ref="chooseHeadRepoModal" title="Choose a head repostiory" :loading="modalReposData.loading" :modalStyle="{height:'80vh'}" @show="network_getAvailableRepos">
             <div class="select-menu-text-filter p-3">
                 <input type="text" v-model="modalReposData.searchQuery" class="form-control" placeholder="Filter repos" autofocus="" autocomplete="off"/>
             </div>
-            <div v-if="modalReposData.loading" class="flex-row-center height-full">
-                <ModalLoadingIcon></ModalLoadingIcon>
-            </div>
-            <div v-else style="overflow:auto">
+            <div v-if="modalFiltermodalReposData.length" style="overflow:auto">
                 <transition-group name="fade-group" appear>
                     <SelectMenuItem @click.native="() => routerWithRefOwner(item,'head')" v-for="item in modalFiltermodalReposData" :key="item" :selected="`${headRefOwner}/${repo}` == item">
                         <span>{{item}}</span>    
@@ -600,6 +590,7 @@
                         }
                     )
                     this.modalRefsData[meta].tags.data = this.parseTagsFromHTML(res.data)
+                    if(this.modalRefsData[meta].tags.data.length == 0) this.modalRefsData[meta].tags.isEmpty = true
                 }catch(e) {
                     console.log(e)
                 }finally{
diff --git a/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue b/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue
index 8510357..bc8562b 100644
--- a/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue
+++ b/src/pages/Repository/Issues/IssueDetail/IssueDetail.vue
@@ -1,74 +1,11 @@
+
+
+
 <template>
     <CommonLoadingWrapper :loading="loading || timeline.loading || timeline.extraData.loading" :position="loading ? 'center' : 'corner'" class="px-3 bg-white flex-grow-1">
         
-        <Header>
-            <HeaderActions v-if="!titleEditPane.show" class="d-flex flex-justify-between flex-items-center mb-3">
-                <span>
-                    <AnimatedWidthWrapper class="v-align-bottom">
-                        <button v-if="extraData.data.viewerCanUpdate" @click="triggerShowTitleEditPane" class="btn btn-sm d-inline-block float-none mr-2">
-                            Edit
-                        </button>
-                    </AnimatedWidthWrapper>
-                    <router-link to="/" class="btn btn-primary d-inline-block btn-sm">
-                        New issue
-                    </router-link>
-                </span>
-                
 
-                <button class="btn-link" @click="scrollToBottom">Jump to bottom</button>
-            </HeaderActions>
-
-            <HeaderTitle v-if="!titleEditPane.show" class="title f1">
-                <transition-group name="fade-group">
-                    <Skeleton key="1" v-if="!data.id && loading">
-                        <SkeletonRectangle :height="20" style="width:100%"></SkeletonRectangle>
-                        <SkeletonRectangle :height="20" style="width:80%" class="mt-3"></SkeletonRectangle>
-                    </Skeleton>
-                    <div key="2" v-else> 
-                        {{data.title}}
-                        <span class="number">#{{data.number}}</span>
-                    </div> 
-                </transition-group>
-                
-            </HeaderTitle>
-
-            <TitleEditPane v-if="titleEditPane.show" class="mb-3">
-                <input :disabled="titleEditPane.loading" v-model="titleEditPane.title" ref="titleEditInput" class="form-control flex-auto input-lg input-contrast mr-0 width-full" autofocus="autofocus" autocomplete="off" type="text">
-                <div style="margin-top:12px">
-                    <button class="btn btn-sm mr-2" :disabled="titleEditPane.loading || !titleEditPane.title" @click="network_updateIssueTitle">{{titleEditPane.loading ? 'Saving' : 'Save'}}</button>
-                    <button class="btn btn-link" style="background:white" :disabled="titleEditPane.loading || !titleEditPane.title" @click="() => triggerShowTitleEditPane(false)">Cancel</button>
-                </div> 
-            </TitleEditPane>
-
-            <HeaderMeta class="d-flex mt-2 mb-3 flex-items-center header-meta">
-                <State v-if="!data.state"  class="State State--green mr-2 d-inline-flex flex-items-center"
-                        :class="{'State--green':data.state === 'open','State--red':data.state === 'closed'}" 
-                        style="text-transform:capitalize;border-radius: 2em">
-                    <IssueIcon class="flex-shrink-0 mr-1" color="#fff" :issue="data"></IssueIcon>
-                    &nbsp;
-                    &nbsp;
-                    &nbsp;
-                    &nbsp;
-                </State>   
-                <State v-else  class="State State--green mr-2 d-inline-flex flex-items-center"
-                        :class="{'State--green':data.state === 'open','State--red':data.state === 'closed'}" 
-                        style="text-transform:capitalize;border-radius: 2em">
-                    <IssueIcon class="flex-shrink-0 mr-1" color="#fff" :issue="data"></IssueIcon>
-                    {{data.state}}
-                </State>   
-
-                <Skeleton v-if="!data.id && loading" class="flex-grow-1">
-                    <SkeletonRectangle :height="16" style="width:100%"></SkeletonRectangle>   
-                </Skeleton>   
-
-                <MetaContent v-else class="meta-content">
-                    <router-link to="/" class="text-bold link-gray">{{data.user && data.user.login}}</router-link>
-                    {{data.state == 'open' ? 'opened' : data.state}} this issue
-                    <span class="no-wrap">on {{data.created_at | dateFormat('dd zzz yyyy')}}</span>
-                    · {{data.comments}} {{data.comments > 1 ? 'comments' : 'comment'}} 
-                </MetaContent>
-            </HeaderMeta>
-        </Header>
+        <IssueHeader :data="data" :viewerCanUpdate="extraData.data.viewerCanUpdate" :issueUpdateFunc="network_updateIssue"></IssueHeader>
         
 
         <Info  class="border-bottom border-top pt-3 mt-3" 
@@ -452,7 +389,7 @@
             SkeletonRectangle,
             HiddenItemLoading} from '@/components'
     import {ScrollTopListenerMixin,RouteUpdateAwareMixin} from '@/mixins'
-    import {TimelineItem,Comment,IssueBody,ProjectCard,CommentCreatePane,LoadMore} from './components'
+    import {TimelineItem,Comment,IssueBody,ProjectCard,CommentCreatePane,LoadMore,IssueHeader} from './components'
     import {IssueNotificationSettingPane,LockIssueButton} from '../../components'
     import {util_dateFormat} from '@/util'
     import {
@@ -648,12 +585,6 @@
                 createdComments: [],
                 deletedComments: [],
                 isDynamicDocumentTitle: true,
-                titleEditPane: {
-                    show: false,
-                    loading: false,
-                    title: ''
-                },
-            
             }
         },
        
@@ -1213,17 +1144,6 @@
                     throw(e)
                 }
             },
-            async network_updateIssueTitle() {
-                try {
-                    this.titleEditPane.loading = true
-                    await this.network_updateIssue({title: this.titleEditPane.title})
-                    this.titleEditPane.show = false
-                } catch (e) {
-                    
-                }finally{
-                    this.titleEditPane.loading = false
-                }
-            },
             triggerSubscription() {
                 if(this.extraData.data.viewerSubscription == 'SUBSCRIBED') {
                     this.network_setSubscription('UNSUBSCRIBED')
@@ -1271,14 +1191,6 @@
                     Object.assign(theComment,payload)
                 }
             },
-            triggerShowTitleEditPane(payload = true) {
-                this.titleEditPane.show = payload
-                if(payload) {
-                    this.$nextTick(() => {
-                        this.$refs.titleEditInput.focus()
-                    })
-                }
-            },
             changeLockStatusSuccessPostHandler(payload) {
                 this.data.locked = payload
             }
@@ -1292,6 +1204,7 @@
             },
         },
         components: {
+            IssueHeader,
             CommonLoadingWrapper,
             Label,
             Comment,
diff --git a/src/pages/Repository/Issues/IssueDetail/components/IssueHeader.vue b/src/pages/Repository/Issues/IssueDetail/components/IssueHeader.vue
new file mode 100644
index 0000000..280f37f
--- /dev/null
+++ b/src/pages/Repository/Issues/IssueDetail/components/IssueHeader.vue
@@ -0,0 +1,153 @@
+<template>
+    <Container>
+        <HeaderActions v-if="!showTitleEditPane" class="d-flex flex-justify-between flex-items-center mb-3">
+            <span>
+                <AnimatedWidthWrapper class="v-align-bottom">
+                    <button v-if="viewerCanUpdate" @click="triggerShowTitleEditPane" class="btn btn-sm d-inline-block float-none mr-2">
+                        Edit
+                    </button>
+                </AnimatedWidthWrapper>
+                <router-link v-if="type == 'issue'" to="/" class="btn btn-primary d-inline-block btn-sm">
+                    New issue
+                </router-link>
+            </span>
+
+            <button class="btn-link" @click="scrollToBottom">Jump to bottom</button>
+        </HeaderActions>
+
+        <HeaderTitle v-if="!showTitleEditPane" class="title f1">
+            <transition-group name="fade-group">
+                <Skeleton key="1" v-if="!data.id">
+                    <SkeletonRectangle :height="20" style="width:100%"></SkeletonRectangle>
+                    <SkeletonRectangle :height="20" style="width:80%" class="mt-3"></SkeletonRectangle>
+                </Skeleton>
+                <h1 class="gh-header-title mb-2 lh-condensed f1 mr-0 flex-auto break-word" key="2" v-else> 
+                    {{data.title}}
+                    <span class="number f1-light text-gray-light">#{{data.number}}</span>
+                </h1> 
+            </transition-group>
+            
+        </HeaderTitle>
+
+        <TitleEditPane v-if="showTitleEditPane" class="mb-3">
+            <input :disabled="loading" v-model="title" ref="titleEditInput" class="form-control flex-auto input-lg input-contrast mr-0 width-full" autofocus="autofocus" autocomplete="off" type="text">
+            <div style="margin-top:12px">
+                <button class="btn btn-sm mr-2" :disabled="loading || !title" @click="network_updateIssueTitle">{{loading ? 'Saving' : 'Save'}}</button>
+                <button class="btn btn-link" style="background:white" :disabled="loading || !title" @click="() => triggerShowTitleEditPane(false)">Cancel</button>
+            </div> 
+        </TitleEditPane>
+
+        <HeaderMeta class="d-flex mt-2 mb-3 flex-items-center header-meta">
+            <slot>
+                <State v-if="!data.state"  class="State State--green mr-2 d-inline-flex flex-items-center"
+                        style="text-transform:capitalize;border-radius: 2em">
+                    <IssueIcon class="flex-shrink-0 mr-1" color="#fff" :issue="data"></IssueIcon>
+                    &nbsp;
+                    &nbsp;
+                    &nbsp;
+                    &nbsp;
+                </State>   
+                <State v-else  class="State State--green mr-2 d-inline-flex flex-items-center"
+                        :class="{'State--green':data.state === 'open','State--red':data.state === 'closed'}" 
+                        style="text-transform:capitalize;border-radius: 2em">
+                    <IssueIcon class="flex-shrink-0 mr-1" color="#fff" :issue="data"></IssueIcon>
+                    {{data.state}}
+                </State>   
+
+                <Skeleton v-if="!data.id" class="flex-grow-1">
+                    <SkeletonRectangle :height="16" style="width:100%"></SkeletonRectangle>   
+                </Skeleton>   
+
+                <MetaContent v-else class="meta-content">
+                        <router-link :to="`/${data.user && data.user.login}`" class="text-bold link-gray">{{data.user && data.user.login}}</router-link>
+                        {{data.state == 'open' ? 'opened' : data.state}} this issue
+                        <span class="no-wrap">on {{data.created_at | dateFormat('dd zzz yyyy')}}</span>
+                        · {{data.comments}} {{data.comments > 1 ? 'comments' : 'comment'}} 
+                </MetaContent>
+            </slot>   
+        </HeaderMeta>
+    </Container>
+</template>
+<script>
+import styled from 'vue-styled-components'
+ import {AnimatedWidthWrapper,
+        SkeletonCircle,
+        IssueIcon,
+        SkeletonRectangle} from '@/components'
+export default {
+    props: {
+        data: {
+            type: Object,
+            default: () => ({})
+        },
+        type: {
+            type: String,
+            default: 'issue'
+        },
+        viewerCanUpdate: {
+            type: Boolean,
+            default: false,
+        },
+        issueUpdateFunc: {
+            type: Function,
+            required: true
+        }
+    },
+    data() {
+        return {
+            showTitleEditPane: false,
+            loading: false,
+            title: ''
+        }
+    },
+    methods: {
+        async network_updateIssueTitle() {
+            try {
+                this.loading = true
+                await this.issueUpdateFunc({title: this.title})
+                this.showTitleEditPane = false
+            } catch (e) {
+                this.handleError(e)
+            }finally{
+                this.loading = false
+            }
+        },
+        triggerShowTitleEditPane(flag = true) {
+            this.showTitleEditPane = flag
+            if(flag) {
+                this.title = this.data.title
+                this.$nextTick(() => {
+                    this.$refs.titleEditInput.focus()
+                })
+            }
+        }
+    },
+    components: {
+            SkeletonCircle,
+            SkeletonRectangle,
+            IssueIcon,
+            AnimatedWidthWrapper,
+            Container: styled.div``,
+            TitleEditPane: styled.div``,
+            Header: styled.div``,
+            HeaderActions: styled.div``,
+            HeaderTitle: styled.h1``,
+            HeaderMeta: styled.div``,
+            State: styled.div``,
+            MetaContent: styled.div``,
+            Info: styled.div``,
+            Skeleton: styled.div``,
+    }
+}
+</script>
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/labels/index.scss';
+@import 'node_modules/@primer/css/forms/index.scss';
+.gh-header-title {
+    margin-right: 150px;
+    margin-bottom: 0;
+    font-weight: 400;
+    line-height: 1.125;
+    word-wrap: break-word;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/Issues/IssueDetail/components/index.js b/src/pages/Repository/Issues/IssueDetail/components/index.js
index 32b095d..9e357b8 100644
--- a/src/pages/Repository/Issues/IssueDetail/components/index.js
+++ b/src/pages/Repository/Issues/IssueDetail/components/index.js
@@ -5,5 +5,6 @@ import ProjectCard from './ProjectCard'
 import CommentEditPane from './CommentEditPane'
 import CommentCreatePane from './CommentCreatePane'
 import LoadMore from './LoadMore'
+import IssueHeader from './IssueHeader'
 
-export {TimelineItem,Comment,IssueBody,ProjectCard,CommentEditPane,CommentCreatePane,LoadMore}
\ No newline at end of file
+export {TimelineItem,Comment,IssueBody,ProjectCard,CommentEditPane,CommentCreatePane,LoadMore,IssueHeader}
\ No newline at end of file
diff --git a/src/pages/Repository/Issues/IssuesBrowser.vue b/src/pages/Repository/Issues/IssuesBrowser.vue
index e59b351..a4c0ed5 100644
--- a/src/pages/Repository/Issues/IssuesBrowser.vue
+++ b/src/pages/Repository/Issues/IssuesBrowser.vue
@@ -27,6 +27,7 @@
                         :countByState="processedCountByState"
                         :baseQuery="`repo:${owner}/${repo} is:open is:${type}`"
                         :resetRouterLink="`/${owner}/${repo}/${routerPathFragment}`"
+                        :isEmpty="isEmpty"
                         :query="query">
             <template v-slot:searchInput>
                 <ButtonLeftSearchInput v-model="searchQuery" 
@@ -48,9 +49,9 @@
             </template>
 
             
-            <template v-if="emptyFlag && !noResultMatchedFlag" v-slot:emptyNotice>
+            <template v-if="isEmpty && !noResultMatchedFlag" v-slot:emptyNotice>
                 <slot name="emptyNotice">
-                    <div  class="blankslate blankslate-spacious blankslate-large border-0">
+                    <div  class="blankslate blankslate-spacious blankslate-large">
                         <div class="container-md">
                             <svg height="40" class="octicon octicon-issue-opened blankslate-icon" viewBox="0 0 24 24" version="1.1" width="40" aria-hidden="true"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zm1 9a1 1 0 11-2 0 1 1 0 012 0z"></path><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"></path></svg>
                             <h3>Welcome to issues!</h3>
@@ -62,7 +63,7 @@
 
             <template v-if="noResultMatchedFlag" v-slot:noResultMatchedNotice>
                 <slot name="noResultMatchedNotice">
-                    <div  class="blankslate blankslate-spacious blankslate-large border-0">
+                    <div  class="blankslate blankslate-spacious blankslate-large">
                         <div class="container-md">
                             <svg height="40" class="octicon octicon-issue-opened blankslate-icon" viewBox="0 0 24 24" version="1.1" width="40" aria-hidden="true"><path d="M12 7a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0112 7zm1 9a1 1 0 11-2 0 1 1 0 012 0z"></path><path fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"></path></svg>
                             <h3>No results matched your search.</h3>
@@ -270,7 +271,7 @@
                 assigneeModalSearchQuery: '',
                 data: [],
                 loading: false,
-                emptyFlag: false,
+                isEmpty: false,
                 noResultMatchedFlag: false,
                 extraData: {
                     data: [],
@@ -514,12 +515,12 @@
                     this.pageInfo = parse(res.headers.link) || {}
                     this.noResultMatchedFlag = false
                     if(res.data.total_count == 0) {
-                        this.emptyFlag = true
+                        this.isEmpty = true
                         if(this.searchQuery != `is:open is:${this.type}` && this.searchQuery != `is:${this.type} is:open`) {
                             this.noResultMatchedFlag = true
                         }
                     } else {
-                        this.emptyFlag = false
+                        this.isEmpty = false
                     }
                     //获取其他数据
                     if(this.accessToken && this.type == 'pr') this.network_getExtraData(res.data.items)
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/Conversation.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/Conversation.vue
new file mode 100644
index 0000000..1ead2a0
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/Conversation.vue
@@ -0,0 +1,1164 @@
+<template>
+    <CommonLoadingWrapper :loading="pullRequestProvided().loading || extraData.loading || timeline.loading || timeline.extraData.loading || reviewComments.loading" 
+    :position="pullRequestProvided().loading ? 'center' : 'corner'"
+    class="flex-grow-1">
+            <Header  class="px-3 pt-3">
+               <!--  <HeaderActions class="d-flex flex-justify-between flex-items-center">
+                   <State class="State mr-2 d-inline-flex flex-items-center" 
+                        :class="{'State--green':pullRequestProvided().data.state === 'open' && !pullRequestProvided().data.draft || !pullRequestProvided().data.node_id,'State--red':pullRequestProvided().data.state === 'closed'}" 
+                        style="text-transform:capitalize;border-radius:2em;padding: 5px 12px;min-width: 70px">
+                        <IssueIcon color="#fff" :issue="pullRequestProvided().data"></IssueIcon>
+                        &nbsp;{{pullRequestProvided().data.draft ? 'Draft' : pullRequestProvided().data.state}}
+                    </State>   
+
+                    <a href="javascript:return false" @click="scrollToBottom">Jump to bottom</a>
+                </HeaderActions>
+ -->
+                <Skeleton v-if="!pullRequestProvided().data.title">
+                    <div class="d-flex flex-items-center mt-3 pb-3 border-bottom">
+                        <SkeletonCircle :diameter="32" class="mr-2"></SkeletonCircle>
+                        <SkeletonRectangle :height="14" class="flex-grow-1"></SkeletonRectangle>
+                    </div>
+                    <SkeletonRectangle :height="16" class="ml-6 mt-3"></SkeletonRectangle>
+                    <SkeletonRectangle :height="16" class="mt-3"></SkeletonRectangle>
+                    <SkeletonRectangle :height="16" class="mr-6 my-3"></SkeletonRectangle>
+                </Skeleton>
+
+                <div v-else>
+                    <!-- <HeaderTitle class="title" style="font-weight: bold; margin-top:10px">
+                        {{pullRequestProvided().data.title}}
+                        <span class="text-normal text-gray">#{{pullRequestProvided().data.number}}</span>
+                    </HeaderTitle>
+
+                    <Branch class="branch">
+                        <span class="inner">
+                            <svg class="octicon octicon-git-branch" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 00-1-3.72C.88 1 0 1.89 0 3a2 2 0 001 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
+                            {{pullRequestProvided().data.head && pullRequestProvided().data.head.label}}
+                        </span>    
+                    </Branch> -->
+
+                    <AuthorAndLastEdit class="author-and-last-edit d-flex position-relative">
+                        <div class="flex-auto">
+                            <div class="avatar-parent-child float-left">
+                                <ImgWrapper>
+                                    <img class="avatar" :src="pullRequestProvided().data.user && pullRequestProvided().data.user.avatar_url" width="32" height="32" :alt="`@${pullRequestProvided().data.user && pullRequestProvided().data.user.login}`">
+                                </ImgWrapper>
+                            </div>
+
+                            <div style="margin-left:42px;">
+                                <router-link :to="`/${pullRequestProvided().data.user && pullRequestProvided().data.user.login}`">
+                                    <strong>{{pullRequestProvided().data.user && pullRequestProvided().data.user.login}}</strong>
+                                </router-link>  
+                                opened this pull request
+                                <br>
+                                {{pullRequestProvided().data.created_at | getDateDiff}}
+                            </div>
+                        </div> 
+
+                         <button class="ml-2 height-full" @click="() => showModal('popover')" v-if="extraData.data.viewerCanUpdate && repoOwnerType() == 'User'">
+                            <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+                        </button>
+
+                        <Popover ref="popover" :popoverStyle="{top: 'calc(100% - 16px)',right: '-4px',paddingTop: '4px',paddingBottom: '4px',width:'120px'}">
+                            <div v-if="extraData.data.viewerCanUpdate" class="dropdown-item" style="font-size:14px" @click="triggerShowPullRequestBodyEditor">
+                                <svg class="octicon octicon-pencil mr-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
+                                Edit
+                            </div>
+                        </Popover>
+                    </AuthorAndLastEdit>
+
+                   
+                </div> 
+
+            </Header>
+        
+        <div v-if="pullRequestProvided().data.node_id">
+
+            <Info  class="pt-3 px-3 bg-white " 
+                v-if="pullRequestProvided().data.labels && pullRequestProvided().data.labels.length !== 0"
+                    >
+                <!-- label --> 
+                <div class="pb-3" v-if="pullRequestProvided().data.labels && pullRequestProvided().data.labels.length !== 0">
+                    <div class="my-1 f6">Labels</div>    
+                    <router-link to="/" v-for="item in pullRequestProvided().data.labels" :key="item.name">
+                        <Label  class="mr-1 mt-1"
+                                :style="{height:'18px',fontSize:'10px'}"
+                                :name="item.name"
+                                :color="`#${item.color}`"></Label> 
+                    </router-link>
+                </div> 
+            </Info>
+
+            <PullRequestBody   
+                        v-if="!showPullRequestBodyEditor"
+                        class="bg-white" />
+
+
+            <PullRequestBodyEditor class="m-3" v-else @cancel="() => triggerShowPullRequestBodyEditor(false)"></PullRequestBodyEditor>
+
+            <transition-group tag="div" appear name="fade-group">
+                <div v-for="(item,index) in timeline.data.filter(i => !timeline.newestTimeline.data.some(i_ => i_.node_id == i.node_id))" :key="(item.id || '') + index">
+                    <TimelineItem @timeline-item-deleted.native.stop="timelineItemDeletedHook" :data="item" class="border-top"/>
+                </div> 
+            </transition-group>
+
+            <HiddenItemLoading v-if="(timeline.pageInfo.next || timeline.loading) && !noMoreTimelineToLoad"
+                                class="border-top"
+                                :loading="timeline.loading"
+                                :disabled="timeline.bufferTimeline.loading"
+                                :dataGetter="loadingMore">
+                                <p class="timeline-truncation-title" v-if="timelineRemainedCount > 0">
+                                    {{timelineRemainedCount}} items not shown.
+                                </p>
+            </HiddenItemLoading>
+
+           <!--   <transition-group tag="div" appear name="fade-group">
+                <div v-for="(item,index) in timeline.newestTimeline.data" :key="(item.id || '') + index">
+                    <TimelineItem :data="item" class="border-top"/>
+                </div> 
+            </transition-group> -->
+
+             <transition-group tag="div" appear name="fade-group">
+                <div v-for="(item,index) in newCreatedTimelines" :key="(item.id || '') + index">
+                    <TimelineItem :data="item" class="border-top"/>
+                </div> 
+            </transition-group>
+
+
+            <MergePull v-if="extraData.data.viewerCanUpdate && pullRequestProvided().data.merged == false && pullRequestProvided().data.state == 'open'" >
+                <Header class="header" v-if="extraData.data.id">
+                    Merge this pull request
+                </Header>
+                <div v-if="pullRequestProvided().data.mergeable_state == 'clean'" class="branch-action branch-action-with-icon">
+                    <svg class="octicon octicon-check branch-action-icon text-green mt-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>
+                    <h3 class="branch-action-heading">This branch has no conflicts with the base branch.</h3>
+                        Merging can be performed automatically.
+                </div>
+                <div v-else-if="pullRequestProvided().data.mergeable_state == 'dirty'" class="branch-action branch-action-with-icon">
+                    <svg class="octicon octicon-x branch-action-icon mt-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
+                    <h3 class="branch-action-heading">This branch has conflicts that must be resolved.</h3>
+                    Use the command line to resolve conflicts before continuing.
+                </div>
+                <div class="p-3 branch-action">
+                    <button :disabled="pullRequestProvided().data.mergeable_state != 'clean' || !pullRequestProvided().data.mergeable" class="btn btn-block js-mergeable-state-check">
+                        <svg class="octicon octicon-git-merge" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5 3.254V3.25v.005a.75.75 0 110-.005v.004zm.45 1.9a2.25 2.25 0 10-1.95.218v5.256a2.25 2.25 0 101.5 0V7.123A5.735 5.735 0 009.25 9h1.378a2.251 2.251 0 100-1.5H9.25a4.25 4.25 0 01-3.8-2.346zM12.75 9a.75.75 0 100-1.5.75.75 0 000 1.5zm-8.5 4.5a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
+                        <span class="mergeable-state-loading"></span>
+                        <span>Merge pull request</span>
+                    </button>
+                </div> 
+            </MergePull>
+
+            <div>
+                <Header class="header">
+                    Comment on pull request
+                </Header>
+                <PullRequestCommentCreator @pull-request-state-changed.native="pullRequestStateChangedHook"
+                        class="m-3">
+                </PullRequestCommentCreator>
+            </div>
+
+            <div v-if="extraData.data.viewerSubscription">
+                <Header class="header" >
+                    Notifications for this thread
+                </Header>
+
+                <IssueNotificationSettingPane class="p-3" :viewerSubscriptionInfo="extraData.data"></IssueNotificationSettingPane>
+            </div> 
+
+            <LockIssueButton 
+                @lock-status-changed.native="lockStatusChangedHook"
+                class="p-3 border-top"
+                v-if="extraData.data.viewerCanUpdate" 
+                :issue="pullRequestProvided().data" 
+                @lock-status-changed="changeLockStatusSuccessPostHandler"></LockIssueButton>
+
+        </div>
+
+        <transition name="fade" appear>
+            <StickyTop v-if="scrollTop > 300 && !newCreatedTimelineItem" class="sticky-top px-3 py-2">
+                <StickyTopContent class="d-flex flex-items-center flex-justify-between">
+                    <State class="State mr-2 d-inline-flex flex-items-center flex-shrink-0" :class="{'State--green':pullRequestProvided().data.state === 'open','State--red':pullRequestProvided().data.state === 'closed'}" style="text-transform:capitalize; border-radius:2em">
+                        <IssueIcon color="#fff" :issue="pullRequestProvided().data" class="mr-1"></IssueIcon>
+                        <span style="line-height:auto">
+                            {{pullRequestProvided().data.state}}
+                        </span>    
+                    </State>   
+
+                    <div class="min-width-0">
+                        <h1 class="d-flex text-bold f5">
+                            <router-link to="/" class="css-truncate css-truncate-target link-gray-dark width-fit">
+                                {{pullRequestProvided().data.title}}
+                            </router-link>
+                            <span class="text-gray-light pl-1 no-wrap text-normal">#{{pullRequestProvided().data.number}}</span>
+                        </h1>
+                        <div class="meta text-gray-light css-truncate css-truncate-target d-block width-fit f6">
+                            <router-link to="/" class="text-bold link-gray">{{pullRequestProvided().data.user && pullRequestProvided().data.user.login}}</router-link>  opened this pull request
+                            <span class="no-wrap">{{createdAt}}</span>
+                            · {{pullRequestProvided().data.comments}} {{pullRequestProvided().data.comments > 1 ? 'comments' : 'comment'}}
+                        </div>
+                    </div> 
+
+                </StickyTopContent>
+            </StickyTop>
+        </transition>     
+        
+    </CommonLoadingWrapper>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {CommonLoadingWrapper,
+            Label,
+            AnimatedHeightWrapper,
+            ImgWrapper,
+            LoadingIconEx,
+            Progress,
+            IssueIcon,
+            Subscription,
+            SkeletonCircle,
+            SkeletonRectangle,
+            Popover} from '@/components'
+    import {ScrollTopListenerMixin,RouteUpdateAwareMixin} from '@/mixins'
+    import {TimelineItem,Comment,HiddenItemLoading,PullRequestCommentCreator,ProjectCard,PullRequestBody,PullRequestBodyEditor} from './components'
+    import {IssueNotificationSettingPane,LockIssueButton} from '../../../components'
+    import {util_dateFormat} from '@/util'
+    import {
+        authRequiredGet,
+        authRequiredGitHubGraphqlApiQuery} from '@/network'
+    import * as api from '@/network/api'
+    import * as graphql from '../graphql'
+    import {mapState,mapMutations} from 'vuex'
+    import {MUTATION_PULL_REQUEST_DETAIL_RESET_STATE } from '@/store/modules/pullRequestDetail/mutationTypes'
+    var parse = require('parse-link-header');
+    export default {
+        name: 'pullRequest_detail_conversation',
+        inject: ['pullRequestProvided','repoOwnerType'],
+        mixins: [ScrollTopListenerMixin,RouteUpdateAwareMixin],
+        provide() {
+            return {
+                timelineExtraDataProvided: () => this.timeline.extraData.data,
+                reviewCommentsProvided: () => this.reviewComments.data,
+                pullRequestProvided: () => Object.assign({},this.extraData.data,this.pullRequestProvided().data),
+                commentCreatedHook: () => this.commentCreatedHook,
+                timelineItemDeletedHook: () => this.timelineItemDeletedHook,
+                reviewCommentsReplyHostDeletedHook: () => this.network_getReviewCommentReplies
+            }
+        },
+        data() {
+            return {
+                extraData: {
+                    data: {},
+                    loading: false
+                },
+                loading: false,
+                reviewComments: {
+                    data: [],
+                    loading: false
+                },
+                timeline: {
+                    data: [],
+                    loading: false,
+                    extraData: {
+                        data: [],
+                        loading: false
+                    },
+                    perPage: 5,
+                    pageInfo: {},
+                    graphqlCount: {
+                        data: 0,
+                        loading: false
+                    },
+                    restCount: {
+                        data: 0,
+                        loading: false
+                    },
+                    newestTimeline: {
+                        data: [],
+                        loading: false
+                    },
+                    //处理删除timeline产生的副作用
+                    bufferTimeline: {
+                        data: [],
+                        loading: false
+                    },
+                    newCreatedTimelinesCreatedAtConversations: [],
+                },
+                timelineTypes: [
+                    {
+                        graphql:'CROSS_REFERENCED_EVENT',
+                        rest:'cross-referenced',
+                    },
+                    {
+                        graphql:'REFERENCED_EVENT',
+                        rest:'referenced',
+                    },
+                    {
+                        graphql:'ISSUE_COMMENT',
+                        rest:'commented',
+                    },
+                    {
+                        graphql:'ASSIGNED_EVENT',
+                        rest:'assigned',
+                    },
+                    {
+                        graphql:'UNASSIGNED_EVENT',
+                        rest:'unassigned',
+                    },
+                    {
+                        graphql:'CLOSED_EVENT',
+                        rest:'closed',
+                    },
+                    {
+                        graphql:'REOPENED_EVENT',
+                        rest:'reopened',
+                    },
+                    {
+                        graphql:'COMMENT_DELETED_EVENT',
+                        rest:'comment_deleted',
+                    },
+                    {
+                        graphql:'MILESTONED_EVENT',
+                        rest:'milestoned',
+                    },
+                    {
+                        graphql:'DEMILESTONED_EVENT',
+                        rest:'demilestoned',
+                    },
+                    {
+                        graphql:'LABELED_EVENT',
+                        rest:'labeled',
+                    },
+                    {
+                        graphql:'UNLABELED_EVENT',
+                        rest:'unlabeled',
+                    },
+                    {
+                        graphql:'LOCKED_EVENT',
+                        rest:'locked',
+                    },
+                    {
+                        graphql:'UNLOCKED_EVENT',
+                        rest:'unlocked',
+                    },
+                    {
+                        graphql:'MARKED_AS_DUPLICATE_EVENT',
+                        rest:'marked_as_duplicate',
+                    },
+                    {
+                        graphql:'UNMARKED_AS_DUPLICATE_EVENT',
+                        rest:'unmarked_as_duplicate',
+                    },
+                    {
+                        graphql:'MOVED_COLUMNS_IN_PROJECT_EVENT',
+                        rest:'moved_columns_in_project',
+                    },
+                    {
+                        graphql:'PINNED_EVENT',
+                        rest:'pinned',
+                    },
+                    {
+                        graphql:'UNPINNED_EVENT',
+                        rest:'unpinned',
+                    },
+                    {
+                        graphql:'RENAMED_TITLE_EVENT',
+                        rest:'renamed',
+                    },
+                    {
+                        graphql:'TRANSFERRED_EVENT',
+                        rest:'transferred',
+                    },
+                    {
+                        graphql:'USER_BLOCKED_EVENT',
+                        rest:'user_blocked',
+                    },
+                    {
+                        graphql:'PULL_REQUEST_REVIEW',
+                        rest:'reviewed',
+                    },
+                    {
+                        graphql:'REVIEW_REQUESTED_EVENT',
+                        rest:'review_requested',
+                    },
+                    {
+                        graphql:'BASE_REF_FORCE_PUSHED_EVENT',
+                        rest:'base_ref_force_pushed',
+                    }
+                ],
+                loadingUpdatePullRequestBody: false,
+                showPullRequestBodyEditor: false
+            }
+        },
+       
+        computed: {
+            ...mapState({
+                state_newStartedReviews: state => state.pullRequestDetail.newStartedReviews,
+                state_newSubmittedReviews: state => state.pullRequestDetail.newSubmittedReviews,
+                state_deletedReviewComments: state => state.pullRequestDetail.deletedReviewComments
+            }), 
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            number() {
+                return this.$route.params.number
+            },
+            createdAt() {
+                let dateStr = util_dateFormat.getDateDiffOrDateFormatDependOnGap('on dd zzz yyyy', new Date(this.pullRequestProvided().data.created_at), 1000 * 60 * 60 * 24 * 365)
+                return dateStr
+            },
+            updatedAt() {
+                return util_dateFormat.dateFormat('dd zzz yyyy', new Date(this.pullRequestProvided().data.updated_at))
+            },
+            viewerCannotComment() {
+                return this.pullRequestProvided().data.locked && !this.extraData.data.viewerCanUpdate
+            },
+            timelineRemainedCount() {
+                let alreadyCount = 0
+                this.timeline.data.forEach(item => {
+                    if(this.timelineTypes.some(_item => {
+                        return _item.rest === item.event
+                    })){
+                        alreadyCount ++
+                    }
+                })
+                this.timeline.newestTimeline.data.forEach(item => {
+                    if(this.timelineTypes.some(_item => {
+                        return _item.rest === item.event
+                    })){
+                        alreadyCount ++
+                    }
+                })
+                return this.timeline.graphqlCount.data - alreadyCount
+            },
+            editHistory() {
+                return `opened this pull request ${this.createdAt} ${this.extraData.data.userContentEdits && this.extraData.data.userContentEdits.totalCount > 0 ? ' • edited ' + util_dateFormat.getDateDiff(this.extraData.data.userContentEdits.nodes[0].editedAt) : ''}`
+            },
+            newCreatedTimelines() {
+                let allNewCreatedTimelines = [
+                    ...this.state_newSubmittedReviews,
+                    ...this.state_newStartedReviews,
+                    ...this.timeline.newCreatedTimelinesCreatedAtConversations
+                ].sort((a,b) => (a.submitted_at || a.created_at) > (b.submitted_at || b.created_at))
+
+                let deDuplicatedAllNewCreatedTimelines = []
+
+                let magicArray = [
+                    ...this.timeline.newestTimeline.data,
+                    ...allNewCreatedTimelines
+                ]
+                magicArray.forEach(i => {
+                    if(!deDuplicatedAllNewCreatedTimelines.some(i_ => i_.id == i.id)) {
+                        deDuplicatedAllNewCreatedTimelines.push(i)
+                    }
+                })
+                return deDuplicatedAllNewCreatedTimelines
+            },
+            newCreatedTimelineItem() {
+                return this.$route.query.new_created_timeline_item
+            },
+            noMoreTimelineToLoad() {
+                if(!this.timeline.pageInfo.next) return true
+                return this.timeline.restCount.data <= (this.timeline.data.length + this.timeline.newestTimeline.data.length)
+            }
+        },
+        created() {
+            this.network_getData()
+        },
+        methods: {
+            loadingMore() {
+                if(this.timeline.loading) return
+                this.network_getTimeline()
+            },
+            async network_getData() {
+
+                //this.mutation_pullRequestDetailResetState()
+
+                if(this.accessToken) await this.network_getPullRequestExtraData()
+
+                //获取timeline(异步)
+                this.network_getTimeline()
+
+                //获取review comment replies
+                this.network_getReviewComments()
+
+                this.network_getTimelineRestCount()
+
+                if(this.accessToken) this.network_getTimelineGraphqlCount()
+            },
+            async network_getPullRequestExtraData() {
+                try {
+                    this.extraData.loading = true
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_PR,
+                        {   
+                            variables: {
+                                name: this.repo,
+                                owner: this.owner,
+                                number: parseInt(this.number),
+                            },
+                            cancelToken:this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_pull_request_extra_data')
+                        }
+                    )
+
+                    try{
+                        this.extraData.data = res.data.data.repository.pullRequest
+                    }catch(e) {
+                        this.handleGraphqlError(res)
+                    }
+                } catch(e){
+                    this.handleError(e)
+                }finally{
+                    this.extraData.loading = false
+                }
+            },
+            async network_getTimeline() {
+                try{
+                    this.timeline.loading = true
+                    let url_timeline
+                    if(this.timeline.pageInfo.next) {
+                        url_timeline = this.timeline.pageInfo.next.url
+                    } else {
+                        url_timeline = api.API_ISSUE_TIMELINE({
+                            repo: this.repo,
+                            owner: this.owner,
+                            number: this.number,
+                            params: {
+                                per_page: this.timeline.perPage
+                            }
+                        })
+                    }
+
+                    let config = {
+                        cancelToken: this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_timeline'),
+                        headers:{
+                            'Accept': 'application/vnd.github.mockingbird-preview,application/vnd.github.starfox-preview+json'
+                        }   
+                    }
+                    
+                    let res_timeline = await authRequiredGet(url_timeline,config)
+
+
+                    this.timeline.pageInfo = parse(res_timeline.headers.link) || {}
+
+                    if(this.timeline.bufferTimeline.data.length > 0) {
+                        this.timeline.data = this.timeline.data.concat(this.timeline.bufferTimeline.data)
+                        this.timeline.bufferTimeline.data = []
+                    }
+
+                    this.timeline.data = this.timeline.data.concat(res_timeline.data)
+
+                    this.timeline.loading = false
+
+                    if(res_timeline.data.length > 0) this.network_getTimelineExtraData(res_timeline.data)
+
+                    if(this.timeline.pageInfo.next && this.timeline.pageInfo.next.page == 2) {
+                        await this.network_getNewestTimelines()
+                    }
+
+                    if(this.newCreatedTimelineItem) this.scrollToNewestTimelineItem()
+
+
+                }catch(e){
+                    this.handleError(e)
+                }finally{
+                    this.timeline.loading = false
+                    this.timeline.extraData.loading = false
+                }
+            },
+            async network_getNewestTimelines() {
+                if(!this.timeline.pageInfo.last) return
+                 try{ 
+                    this.timeline.newestTimeline.loading = true
+                    let url = this.timeline.pageInfo.last.url
+
+                    let config = {
+                        cancelToken: this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_newest_timelines'),
+                        headers:{
+                            'Accept': 'application/vnd.github.mockingbird-preview,application/vnd.github.starfox-preview+json'
+                        }   
+                    }
+                    
+                    let res = await authRequiredGet(url,config)
+
+                    this.timeline.newestTimeline.data = res.data
+
+                    this.$nextTick(() => {
+                        this.scrollToNewestTimelineItem()
+                    })
+
+                    if(this.timeline.newestTimeline.data.length > 0) this.network_getTimelineExtraData(this.timeline.newestTimeline.data)
+
+                }catch(e){
+                    this.handleError(e)
+                }finally{
+                    this.timeline.newestTimeline.loading = false
+                }
+            },
+            //deprecated
+            async network_getNewestTimeline() {
+                let url_pageInfo = api.API_ISSUE_TIMELINE({
+                    repo: this.repo,
+                    owner: this.owner,
+                    number: this.number,
+                    params: {
+                        per_page: 1
+                    }
+                })
+
+                let res_pageInfo = await authRequiredGet(
+                    url_pageInfo,
+                    {
+                        headers: {
+                            "accept": "application/vnd.github.mockingbird-preview"
+                        }
+                    }
+                )
+
+                let pageInfo = parse(res_pageInfo.headers.link) || {}
+
+                if(!pageInfo.last) return
+
+                let url = pageInfo.last.url
+
+                let res = await authRequiredGet(
+                    url,
+                    {
+                        headers: {
+                            "accept": "application/vnd.github.mockingbird-preview"
+                        }
+                    }
+                )
+
+                res.data[0] && this.timeline.newestTimeline.data.push(res.data[0])
+                res.data[0] && this.network_getTimelineExtraData(res.data)
+            },
+            async network_getTimelineExtraData(timeline) {
+                let ids = timeline && timeline.map(i => i.node_id).filter(i => i)
+                try {
+                    this.timeline.extraData.loading = true
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_PULL_TIMELINE,
+                        {
+                            variables: {
+                                ids: ids ? ids : this.timeline.data
+                            },
+                            cancelToken: this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_timeline_extra_data')
+                        }
+                    )
+                    try{
+                        let extraData = Object.values(res.data.data.nodes)
+                        this.timeline.extraData.data = this.timeline.extraData.data.concat(extraData)
+
+                        this.$nextTick(() => {
+                            this.scrollToNewestTimelineItem()
+                        })
+                    }catch(e) { 
+                        this.handleGraphqlError(res)
+                    }
+                } catch (e) {
+                     console.log(e)
+                } finally {
+                    this.timeline.extraData.loading = false
+                }
+            },
+            async network_getTimelineRestCount() {
+                try {
+                    this.timeline.restCount.loading = true
+
+                    let url = api.API_ISSUE_TIMELINE({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number,
+                        params: {
+                            per_page: 1
+                        }
+                    })  
+
+                    let res = await authRequiredGet(
+                        url,
+                        {
+                            cancelToken: this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_timeline_rest_count'),
+                                headers: {
+                                "accept": "application/vnd.github.mockingbird-preview"
+                            }
+                        }
+                    )
+
+                    let countHolder = parse(res.headers.link) || {}
+                    this.timeline.restCount.data = countHolder.last ? countHolder.last.page : res.data.length
+                } catch (e) {
+                    console.log(e)
+                } finally {
+                    this.timeline.restCount.loading = false
+                }
+            },
+            async network_getTimelineGraphqlCount() {
+                try{
+                    this.timeline.graphqlCount.loading = true
+
+                    let itemTypes = this.timelineTypes.map(i => i.graphql)
+                    
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_PR_TIMELINE_COUNT,
+                        {
+                            variables: {
+                                itemTypes,
+                                repo: this.repo,
+                                owner: this.owner,
+                                number: parseInt(this.number)
+                            },
+                            cancelToken:this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + '_timeline_graphql_count')
+                        }
+                    )
+                    try{
+                        this.timeline.graphqlCount.data = res.data.data.repository.pullRequest.timelineItems.totalCount
+                    }catch(e) {
+                        this.handleGraphqlError(res)
+                    }
+
+                }catch(e){
+                    console.log(e)
+                }finally{
+                    this.timeline.graphqlCount.loading = false
+                }
+            },
+            //此处无法获取state为pending的review comment reply, 即使viewer为该review comment reply的author, 该数据可以在review组件中通过graphql api获取
+            async network_getReviewComments() {
+                try{
+                    let cancelToken = this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_review_comments')
+
+                    this.reviewComments.loading = true
+
+                    let pageInfo
+
+                    while((!pageInfo || (pageInfo && pageInfo.next)) && this.reviewComments.data.length < 300) {
+                        let url 
+                        if(pageInfo) {
+                            url = pageInfo.next.url
+                        } else {
+                            url = api.API_REVIEW_COMMENTS_OF_PULL_REQUEST({
+                                repo: this.repo,
+                                owner: this.owner,
+                                number: this.number,
+                                params: {
+                                    per_page: 100
+                                }
+                            })
+                        }
+
+                        let res = await authRequiredGet(
+                            url,
+                            {
+                                cancelToken,
+                                headers: {
+                                    "accept": "application/vnd.github.squirrel-girl-preview"
+                                }
+                            }
+                        )
+                        this.reviewComments.data = this.reviewComments.data.concat(res.data)
+
+                        pageInfo = parse(res.headers.link) || {}
+                    }
+                 
+                }catch(e){
+                    console.log(e)
+                }finally{
+                    this.reviewComments.loading = false
+                }
+            },
+            /* mergedTimelineData(timelineData) {
+                let mergedTimelineData = []
+                let lastOne = {}
+                timelineData.forEach(item => {
+                    //console.log(lastOne)
+                    switch(item.event) {
+                        case 'assigned':
+                        case 'unassigned':
+                            if(lastOne.event === 'assigned' || lastOne.event === 'unassigned') {
+                                if(mergedTimelineData[mergedTimelineData.length - 1].event === 'assigned' || mergedTimelineData[mergedTimelineData.length - 1].event === 'unassigned') {
+                                    let prev_assignedEvent = mergedTimelineData.pop()
+                                    let assignedEvent_merged = {
+                                        ...prev_assignedEvent,
+                                        event: 'assigned_merged',
+                                        assignee_added: [],
+                                        assignee_removed: [],
+                                    }
+                                    mergedTimelineData.push(assignedEvent_merged)
+                                    if(prev_assignedEvent.event === 'assigned') {
+                                        mergedTimelineData[mergedTimelineData.length - 1].assignee_added.push(prev_assignedEvent.assignee)
+                                    }else{
+                                        mergedTimelineData[mergedTimelineData.length - 1].assignee_removed.push(prev_assignedEvent.assignee)
+                                    }
+                                }
+                                if(item.event === 'assigned') {
+                                    mergedTimelineData[mergedTimelineData.length - 1].assignee_added.push(item.assignee)
+                                }else{
+                                    mergedTimelineData[mergedTimelineData.length - 1].assignee_removed.push(item.assignee)
+                                }
+                            }else{
+                                mergedTimelineData.push(item)
+                            }
+                            lastOne = item
+                            break
+                        case 'milestoned':
+                        case 'demilestoned':
+                            if(lastOne.event === 'milestoned' || lastOne.event === 'demilestoned') {
+                                if(mergedTimelineData[mergedTimelineData.length - 1].event === 'milestoned' || mergedTimelineData[mergedTimelineData.length - 1].event === 'demilestoned') {
+                                    let prev_milestonedEvent = mergedTimelineData.pop()
+                                    let milestonedEvent_merged = {
+                                        ...prev_milestonedEvent,
+                                        event: 'milestoned_merged',
+                                        milestones: [],
+                                    }
+                                    mergedTimelineData.push(milestonedEvent_merged)
+                                    mergedTimelineData[mergedTimelineData.length - 1].milestones.push(prev_milestonedEvent.milestone)
+                                }
+                                if(!mergedTimelineData[mergedTimelineData.length - 1].milestones.some(_item => {
+                                    return _item.title === item.milestone.title
+                                })) {
+                                    mergedTimelineData[mergedTimelineData.length - 1].milestones.push(item.milestone)
+                                }
+                            }else{
+                                mergedTimelineData.push(item)
+                            }
+                            lastOne = item
+                            break
+                        case 'labeled':
+                        case 'unlabeled':
+                            if(lastOne.event === 'labeled' || lastOne.event === 'unlabeled') {
+                                if(mergedTimelineData[mergedTimelineData.length - 1].event === 'labeled' || mergedTimelineData[mergedTimelineData.length - 1].event === 'unlabeled') {
+                                    let prev_labeledEvent = mergedTimelineData.pop()
+                                    let labeledEvent_merged = {
+                                        ...prev_labeledEvent,
+                                        event: 'labeled_merged',
+                                        labels_added: [],
+                                        labels_removed: [],
+                                    }
+                                    mergedTimelineData.push(labeledEvent_merged)
+                                    if(prev_labeledEvent.event === 'labeled') {
+                                        mergedTimelineData[mergedTimelineData.length - 1].labels_added.push(prev_labeledEvent.label)
+                                    }else{
+                                        mergedTimelineData[mergedTimelineData.length - 1].labels_removed.push(prev_labeledEvent.label)
+                                    }
+                                }
+                                if(item.event === 'labeled') {
+                                    mergedTimelineData[mergedTimelineData.length - 1].labels_added.push(item.label)
+                                }else{
+                                    mergedTimelineData[mergedTimelineData.length - 1].labels_removed.push(item.label)
+                                }
+                            }else{
+                                mergedTimelineData.push(item)
+                            }
+                            lastOne = item
+                            break
+                        case 'commented': 
+                            if(lastOne.event === 'commented' && lastOne.user.login === item.user.login && lastOne.body === item.body) {
+                                mergedTimelineData.push({
+                                    id: item.id,
+                                    event:'similar_comment',
+                                    comments: [item]
+                                })
+                                lastOne = mergedTimelineData[mergedTimelineData.length - 1]
+                            }else if(lastOne.event === 'similar_comment' && lastOne.comments[0].user.login === item.user.login && lastOne.comments[0].body === item.body){
+                                mergedTimelineData[mergedTimelineData.length - 1].comments.push(item)
+                                lastOne = mergedTimelineData[mergedTimelineData.length - 1]
+                            }else{
+                                mergedTimelineData.push(item)
+                                lastOne = item
+                            }
+                            break
+                        default:
+                            mergedTimelineData.push(item)
+                            lastOne = item
+                    }
+                })
+                return mergedTimelineData
+            }, */
+            async network_getBufferTimeline() {
+                try {
+                    this.timeline.bufferTimeline.loading = true
+                    let url = api.API_ISSUE_TIMELINE({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number,
+                        params: {
+                            per_page: 1,
+                            page: this.timeline.data.length
+                        }
+                    })
+
+                    let res = await authRequiredGet(
+                        url,
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.mockingbird-preview,application/vnd.github.starfox-preview+json"
+                            }
+                        }
+                    )
+
+                    res.data[0] && this.timeline.bufferTimeline.data.push(res.data[0])
+
+                } catch (e) {
+                    console.log(e)
+                } finally {
+                    this.timeline.bufferTimeline.loading = false
+                }
+            },
+            async timelineItemDeletedHook() {
+                //console.log("commentDeletedHook")
+                if(this.noMoreTimelineToLoad) return
+                await this.network_getBufferTimeline()
+            },
+            async commentCreatedHook(payload) {
+                this.timeline.newCreatedTimelinesCreatedAtConversations.push(payload) 
+                this.network_getTimelineExtraData([payload])
+            },
+            changeLockStatusSuccessPostHandler(payload) {
+                this.pullRequestProvided().data.locked = payload
+            },
+            generateRouterMeta() {
+                return this.$route.path
+            },
+            routeUpdateHook() {
+                this.network_getData()
+            },
+            routeResetHook() {
+                Object.assign(this.$data, this.$options.data())
+            },
+            scrollToNewestTimelineItem() {
+                if(this.newCreatedTimelineItem) {
+                    setTimeout(() => {
+                        let theEl = document.getElementById(this.newCreatedTimelineItem)
+                        theEl && theEl.scrollIntoView()
+                    },0)
+                }
+            },
+            triggerShowPullRequestBodyEditor(flag = true) {
+                this.showPullRequestBodyEditor = flag
+                this.closeModal()
+            },
+            lockStatusChangedHook(payload) {
+                this.timeline.newCreatedTimelinesCreatedAtConversations.push(payload.detail)
+            },
+            pullRequestStateChangedHook(payload) {
+                this.timeline.newCreatedTimelinesCreatedAtConversations.push(payload.detail)
+            }
+        },
+        watch: {
+          /*   state_deletedReviewComments(newOne, oldOne) {
+                if(newOne.length == 0) return
+                this.reviewComments.data.forEach((i,index) => {
+                    if(i.id == newOne[newOne.length - 1].id) {
+                        this.reviewComments.data.splice(index,1)
+                        let replies = this.reviewComments.data.filter(i_ => i_.in_reply_to_id == i.id).sort((a,b) => a.created_at > b.created_at)
+
+                        replies[0].in_reply_to_id = undefined
+                        replies.forEach(i__ => {
+                            if(i__.in_reply_to_id) {
+                                i__.in_reply_to_id = replies[0].id
+                            } 
+                        })
+                    }
+                })
+            }, */
+        },
+        activated() {
+            this.scrollToNewestTimelineItem()
+        },
+        components: {
+            CommonLoadingWrapper,
+            Label,
+            Comment,
+            TimelineItem,
+            HiddenItemLoading,
+            LoadingIconEx,
+            AnimatedHeightWrapper,
+            PullRequestCommentCreator,
+            Subscription,
+            ImgWrapper,
+            Progress,
+            PullRequestBody,
+            IssueIcon,
+            SkeletonCircle,
+            SkeletonRectangle,
+            IssueNotificationSettingPane,
+            LockIssueButton,
+            Popover,
+            PullRequestBodyEditor,
+            Container: styled.div``,
+            Header: styled.div``,
+            HeaderActions: styled.div``,
+            HeaderTitle: styled.h1``,
+            Branch: styled.div``,
+            AuthorAndLastEdit: styled.div``,
+            State: styled.div``,
+            Info: styled.div``,
+            Labels: styled.div``,
+            LoadingTimeline: styled.div``,
+            InfoBottom: styled.div``,
+            InfoBottomItem: styled.div``,
+            InfoBottomItemTitle: styled.div``,
+            StickyTop: styled.div``,
+            StickyTopContent: styled.div``,
+            Body: styled.div``,
+            Skeleton: styled.div``,
+            MergePull: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/labels/index.scss';
+@import 'node_modules/@primer/css/avatars/index.scss';
+@import 'node_modules/@primer/css/truncate/index.scss';
+@import 'node_modules/@primer/css/dropdown/index.scss';
+.title{
+    margin-bottom: 0;
+    font-size: 16px;
+    word-wrap: break-word;
+}
+
+.branch{
+    padding: 7.5px 0;
+    margin: 0;
+    font-size: 12px;
+    color: #959da5;
+    cursor: pointer;
+    .inner{
+        position: relative;
+        display: inline-block;
+        padding-left: 20px;
+        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+        color: #586069;
+    }
+    svg{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 16px;
+        text-align: left;
+    }
+}
+
+.author-and-last-edit{
+    padding: 10px 0 15px;
+    position: relative;
+    font-size: 12px;
+    line-height: 16px;
+    color: #586069;
+    background-color: #fff;
+    border-bottom: 1px solid #e1e4e8;
+    a{
+        font-weight: 600;
+        color: #444d56;
+    }
+}
+
+.body{
+    background: #fff;
+    border-bottom: 1px solid #dfe2e5;
+}
+
+.loading-timeline{
+    height: 200px;
+}
+
+.info-bottom-item:first-child{
+     margin-top: 0px;
+    border-top: 0px;
+}
+
+.info-bottom-item{
+    padding-top: 16px;
+    font-size: 12px;
+    color: #586069;
+    margin-top: 16px;
+    border-top: 1px solid #e1e4e8;
+    .info-bottom-item-title{
+        margin-bottom: 8px;
+        font-size: 12px;
+        color: #586069;
+        font-weight: 600!important;
+        svg{
+            float: right;
+            color: #959da5;
+            margin-top: 2px;
+        }
+        
+    }
+
+    .assignee-login{
+            max-width: 110px;
+            display: inline-block;
+            vertical-align: top;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-weight: 600;
+            color: #24292e;
+            font-size: 12px;
+        }
+    
+}
+
+.sticky-top{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 109;
+    display: block;
+    background-color: #fff;
+    border-bottom: 1px solid rgba(0,0,0,.15);
+}
+
+.header{
+    padding: 25px 15px 7.5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #586069;
+    background-color: #f6f8fa;
+    border-top: 1px solid #dfe2e5;
+    border-bottom: 1px solid #dfe2e5;
+}
+
+.branch-action {
+    padding: 15px;
+    font-size: 12px;
+    color: #586069;
+    background-color: #fff;
+    border-top: 1px solid #e1e4e8;
+}
+
+.branch-action-with-icon {
+    padding-left: 35px;
+}
+
+.discussion-block-header+.branch-action {
+    border-top-color: #dfe2e5;
+}
+
+.branch-action-heading {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: 14px;
+    color: #24292e;
+}
+
+.branch-action-icon {
+    float: left;
+    width: 16px;
+    margin-left: -23px;
+    text-align: center;
+}
+
+.timeline-truncation-title {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-weight: 600;
+    color: #586069;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Comment.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Comment.vue
new file mode 100644
index 0000000..b67f317
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Comment.vue
@@ -0,0 +1,296 @@
+<template> 
+    <Container v-if="!deleted" :class="{deleting:loadingDeleteThis}">
+        <div class="bubble m-0 bg-white">
+            <HideAndShowPane v-if="extraData.isMinimized" class="p-3 d-flex flex-justify-between p-3 text-gray text-small border-bottom">
+                <span class="text-italic">
+                    This comment was marked as {{extraData.minimizedReason}}.
+                </span>
+
+                <button class="btn-link text-gray" @click="triggerShowMinimized">
+                    <svg class="octicon octicon-fold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 9l3 3H8v3H6v-3H4l3-3zm3-6H8V0H6v3H4l3 3 3-3zm4 2c0-.55-.45-1-1-1h-2.5l-1 1h3l-2 2h-7l-2-2h3l-1-1H1c-.55 0-1 .45-1 1l2.5 2.5L0 10c0 .55.45 1 1 1h2.5l1-1h-3l2-2h7l2 2h-3l1 1H13c.55 0 1-.45 1-1l-2.5-2.5L14 5z"></path></svg>
+                        {{showMinimized ? 'Hide' : 'Show'}}
+                </button>
+            </HideAndShowPane>
+            <div v-show="showMinimized || !extraData.isMinimized">
+                <Header class="header" :style="headerStyle">
+                    <!-- <Action class="float-right mt-2 ml-2">
+                        <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+                    </Action> -->
+
+                    <button class="ml-2 mt-2 float-right" :disabled="loadingUpdatingComment" @click="() => showModal('popover')" v-if="extraData.viewerCanUpdate || extraData.viewerCanDelete">
+                        <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+                    </button>
+                    
+                    <Avatar class="float-left relative">
+                        <ImgWrapper>
+                            <img class="avatar" height="32" width="32" :alt="`@${propsData.user && propsData.user.login}`" :src="propsData.user && propsData.user.avatar_url">
+                        </ImgWrapper>
+                    </Avatar>
+
+                
+                    
+                    <Meta class="meta">
+                        <router-link :to="`/${propsData.user && propsData.user.login}`">
+                            {{propsData.user.login}}
+                        </router-link><br v-if="!withEditHistory">
+                        commented {{createdAt}}
+                        <span v-if="withEditHistory"> • edited {{editedAt}}</span>    
+                    </Meta>
+
+                    
+
+                    <Popover ref="popover" :popoverStyle="{top: '100%',right: '8px',paddingTop: '4px',paddingBottom: '4px',width:'120px'}">
+                        <div v-if="extraData.viewerCanUpdate" class="dropdown-item" @click="triggerShowCommentEditor">
+                            <svg class="octicon octicon-pencil mr-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
+                            Edit
+                        </div>
+                        <div v-if="extraData.viewerCanUpdate" class="division border-top my-1"></div> 
+                        <div v-if="extraData.viewerCanDelete" class="dropdown-item danger" @click="network_tryToDeleteThis">
+                            <svg class="octicon octicon-x mr-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
+                            <span class="text-red">
+                                Delete
+                            </span>    
+                        </div>
+                    </Popover>
+
+                </Header>
+
+                <Body v-if="!showCommentEditor" class="px-3 pt-3 pb-2">
+                    <BodyHTML v-html="bodyHTML" class="markdown-body f5 p-0">
+
+                    </BodyHTML>
+
+                    <Reactions   v-if="!extraData.isMinimized" 
+                                :data="reactions.data" 
+                                :commentId="propsData.id"
+                                :disabled="!extraData.viewerCanReact"></Reactions>
+                </Body>
+
+                <PullRequestCommentEditor v-else :comment="{...propsData,body}" @update-comment-success="updateCommentPostHandler" @cancel="() => triggerShowCommentEditor(false)" class="p-3"></PullRequestCommentEditor>
+
+            </div>
+        </div>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {util_dateFormat,util_markdownParse} from '@/util'
+    import {LoadingIconEx,Popover,ImgWrapper} from '@/components'
+    import ClipboardJS from 'clipboard';
+    import {Reactions} from '../../components'
+    import PullRequestCommentEditor from './PullRequestCommentEditor'
+    import {authRequiredGet,authRequiredDelete} from '@/network'
+    import * as api from '@/network/api'
+    export default {
+        inject: ['timelineExtraDataProvided','timelineItemDeletedHook'],
+        data() {
+            return {
+                deleted: false,
+                showMinimized: false,
+                reactions: {
+                    data: {},
+                    loading: false
+                },
+                showCommentEditor: false,
+                loadingUpdatingComment: false,
+                loadingDeleteThis: false,
+                body: ''
+            }
+        },
+        props: {
+            propsData: {
+                type: Object,
+                default: () => ({})
+            },
+            headerStyle: {
+                type: Object,
+                required: false
+            }
+        },
+        created() {
+            this.body = this.propsData.body
+            this.network_getReactions()
+        },
+        computed: {
+             repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            extraData() {
+                let extraData = this.timelineExtraDataProvided().filter(item => {
+                    return item.id === this.propsData.node_id
+                })[0] || {}
+                if(extraData.bodyHTML) {
+                    let pattern = /href="https:\/\/github\.com\/(\S+)"/g
+                    let execResult
+                    while((execResult = pattern.exec(extraData.bodyHTML)) !== null) {
+                        extraData.bodyHTML = extraData.bodyHTML.replace(execResult[0],`href="/${execResult[1]}"`)
+                    }
+                }
+                return extraData
+            },
+            createdAt() {
+                return util_dateFormat.getDateDiff(this.propsData.created_at)
+            },
+            editedAt() {
+                if(!this.extraData.userContentEdits.nodes) return
+                return util_dateFormat.getDateDiff(this.extraData.userContentEdits.nodes[0].editedAt)
+            },
+            withEditHistory() {
+                return this.extraData.userContentEdits && this.extraData.userContentEdits.totalCount > 0
+            },
+            location() {
+                return location
+            },
+            bodyHTML() {
+                return util_markdownParse.markdownToHTML(this.body)
+            }
+        },
+        methods: {
+            triggerShowMinimized() {
+                this.showMinimized = !this.showMinimized
+            },
+            async network_getReactions() {
+                try{
+                    this.reactions.loading = true
+                    let url = this.propsData.url
+                    if(url) {
+                        let res = await authRequiredGet(
+                            url,
+                            {
+                                headers: {
+                                    "accept": "application/vnd.github.squirrel-girl-preview+json"
+                                }
+                            }
+                        )
+                        this.reactions.data = res.data.reactions
+                    }
+
+                }catch(e) {
+                    console.log(e)
+                }finally{
+                    this.reactions.loading = false
+                }
+            },
+             async network_tryToDeleteThis() {
+                this.closeModal()
+                if(!confirm("Are you sure you want to delete this comment?")) return
+                try {
+                    this.loadingDeleteThis = true
+                    let url = api.API_ISSUE_COMMENT({
+                        repo: this.repo,
+                        owner: this.owner,
+                        commentId: this.propsData.id
+                    })
+                    await authRequiredDelete(
+                        url,
+                        {
+                            headers: {
+                                "accept":"application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    await this.timelineItemDeletedHook()()
+
+                    this.deleted = true
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loadingDeleteThis = false
+                }
+            },
+            triggerShowCommentEditor(flag = true) {
+                this.closeModal()
+                this.showCommentEditor = flag
+            },
+            updateCommentPostHandler(payload) {
+                this.showCommentEditor = false
+                this.body = payload.body
+            }
+        },
+        watch: {
+            'propsData.body':function(newOne,oldOne) {
+                this.body = newOne
+            }
+        },
+        components: {
+            LoadingIconEx,
+            Popover,
+            Reactions,
+            ImgWrapper,
+            PullRequestCommentEditor,
+            Container: styled.div``,
+            Inner: styled.div``,
+            Header: styled.div``,
+            Avatar: styled.div``,
+            Meta: styled.div``,
+            LoadingWrapper: styled.div``,
+            HeaderInner: styled.div``,
+            Main: styled.div``,
+            Body: styled.div``,
+            BodyHTML: styled.div``,
+            Action: styled.div``,
+            AuthorAssociation: styled.span``,
+            StretchCommentBtn: styled.div``,
+            HideAndShowPane: styled.div``
+        }
+    }
+</script>
+
+<style lang="scss">
+.user-mention {
+    font-weight: 600;
+    color: #24292e;
+}
+</style>
+
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/dropdown/index.scss';
+.header{
+    position: relative;
+    padding: 10px 15px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #586069;
+    background-color: #fff;
+    border-bottom: 1px solid #e1e4e8;
+    .meta{
+        margin-left: 42px;
+        a{
+            font-weight: 600;
+            color: #444d56;
+        }
+    }
+}
+
+.reaction-item{
+    font-size: 12px!important;
+    padding-top: 4px!important;
+    padding-bottom: 4px!important;
+    padding-right: 8px!important;
+    padding-left: 8px!important;
+    display: block;
+    margin-top: 4px!important;
+    margin-bottom: 4px!important;
+    margin-right: 8px!important;
+    border-radius: 3px!important;
+    border: 1px solid #e1e4e8!important;
+}
+
+
+    .loading-wrapper{
+        height: 120px;
+    }
+
+.deleting{
+    opacity: .4;
+}
+
+.dropdown-item{
+    font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/CommitComment.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/CommitComment.vue
new file mode 100644
index 0000000..53a9849
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/CommitComment.vue
@@ -0,0 +1,140 @@
+<template>
+    <Container class="p-3 relative container">
+        <Main class="main">
+             <Header class="header">
+                commented on <code>
+                    <router-link :to="commitRouteLink">{{commitComment.commit_id.substring(0,7)}}</router-link>  
+                </code>
+            </Header>
+
+            <transition-group name="fade" appear>
+                <CommitCommentItem v-for="item in commitComment.comments" :key="item.id" :data="item" style="border:none"/>
+            </transition-group>
+        </Main>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {Popover} from '@/components'
+    import CommitCommentItem from './CommitCommentItem'
+    import { authRequiredGitHubGraphqlApiQuery } from '@/network'
+    import * as graphql from '../../graphql'
+    export default {
+        provide() {
+            return {
+                commitCommentExtraData: () => this.extraData.data
+            }
+        },
+        props: {
+            commitComment: {
+                type: Object,
+                required: true
+            },
+        },
+        data() {
+            return {
+                extraData: {
+                    data: [],
+                    loading: false
+                }
+            }
+        },
+        computed: {
+            commitRouteLink() {
+                let routeLink = this.commitComment.comments[0].html_url.replace('https://github.com','').replace(/#.*$/g,'')
+                return routeLink
+            }
+        },
+        created() {
+            this.network_getCommitCommentsExtraData()
+        },
+        methods: {
+            async network_getCommitCommentsExtraData() {
+                if(this.commitComment.comments.length == 0) return
+                try{
+                    this.extraData.loading = true
+
+
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_COMMIT_COMMENT,
+                        {
+                            variables: {
+                                ids: this.commitComment.comments.map(i => i.node_id)
+                            }
+                        }
+                    )
+
+                    try{
+                        this.extraData.data =  res.data.data.nodes
+                    }catch(e) {
+                        this.handleGraphqlError(res)
+                    }
+                    
+                }catch(e) {
+                    console.log(e)
+                }finally{
+                    this.extraData.loading = false
+                }
+            }
+        },
+        components: {
+            CommitCommentItem,
+            Container: styled.div``,
+            Main: styled.div``,
+            Header: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+.container{
+    padding: 15px;
+    font-size: 13px;
+    color: #586069;
+}
+
+.main{
+    border: 1px solid #d1d5da;
+    border-radius: 3px;
+}
+
+.header{
+    position: relative;
+    padding: 7.5px 15px;
+    font-size: 12px;
+    color: #586069;
+    border-bottom: 1px solid #dfe2e5;
+}
+
+.header:before {
+    bottom: -8px;
+    left: 15px;
+    z-index: 10;
+    border-top: 8px solid #dfe2e5;
+    border-right: 8px solid transparent;
+    border-left: 8px solid transparent;
+    position: absolute;
+    width: 0;
+    height: 0;
+    content: "",
+}
+
+.header:after {
+    bottom: -7px;
+    left: 16px;
+    z-index: 20;
+    border-top: 7px solid #fff;
+    border-right: 7px solid transparent;
+    border-left: 7px solid transparent;
+    position: absolute;
+    width: 0;
+    height: 0;
+    content: "";
+}
+
+.loading-wrapper{
+    height: 120px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/CommitCommentItem.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/CommitCommentItem.vue
new file mode 100644
index 0000000..72334c4
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/CommitCommentItem.vue
@@ -0,0 +1,206 @@
+<template> 
+    <Container class="bubble m-0 bg-white">
+        <HideAndShowPane v-if="extraData.isMinimized" class="p-3 d-flex flex-justify-between p-3 text-gray text-small">
+            <span class="text-italic">
+                This comment was marked as {{extraData.minimizedReason}}.
+            </span>
+
+            <button class="btn-link text-gray">
+                <svg class="octicon octicon-fold" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 9l3 3H8v3H6v-3H4l3-3zm3-6H8V0H6v3H4l3 3 3-3zm4 2c0-.55-.45-1-1-1h-2.5l-1 1h3l-2 2h-7l-2-2h3l-1-1H1c-.55 0-1 .45-1 1l2.5 2.5L0 10c0 .55.45 1 1 1h2.5l1-1h-3l2-2h7l2 2h-3l1 1H13c.55 0 1-.45 1-1l-2.5-2.5L14 5z"></path></svg>
+                    {{showMinimized ? 'Hide' : 'Show'}}
+            </button>
+        </HideAndShowPane>
+        <AnimatedHeightWrapper :stretch="showMinimized || !extraData.isMinimized">
+          <!--   <Header class="header " :style="headerStyle">
+                <Action class="float-right mt-2 ml-2">
+                    <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+                </Action>
+                
+                <Avatar class="float-left relative">
+                    <img class="avatar" height="32" width="32" :alt="`@${data.user && data.user.login}`" :src="data.user && data.user.avatar_url">
+                </Avatar>
+                
+                <Meta class="meta">
+                    <router-link :to="`/${data.user && data.user.login}`">
+                        {{data.user.login}}
+                    </router-link><br v-if="!withEditHistory">
+                    commented {{data.created_at | getDateDiff}}
+                    <span v-if="withEditHistory"> • edited {{editedAt}}</span>    
+                </Meta>
+
+            </Header> -->
+
+            <WhoDidWhatAt class="d-flex flex-row px-3 pt-3"  :class="{'minimized-header  pl-5':extraData.isMinimized}">
+                <div class="flex-auto flex flex-items-center">
+                    <router-link :to="`/${data.user.login}`" class="d-inline-block">
+                        <ImgWrapper>
+                            <img class="v-align-middle" :src="data.user.avatar_url" :alt="`@${data.user.login}`" width="16" height="16">&nbsp;
+                        </ImgWrapper>
+                    </router-link>
+                    <router-link :to="`/${data.user.login}`" class="f5 text-bold link-gray-dark">{{data.user.login}}</router-link>
+                    <span class="text-gray">&nbsp;• {{data.created_at | getDateDiff}}</span>
+                </div>
+
+                <div class="ml-2 btn-link height-full muted-link">
+                    <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+                </div>
+            </WhoDidWhatAt>
+
+            <Body class="pt-2 px-3 pb-2" :class="{'pb-3 pl-5':extraData.isMinimized}">
+                <BodyHTML v-html="bodyHTML"  class="markdown-body f5 p-0">
+
+                </BodyHTML>
+
+                <Reactions  :data="reactions.data" 
+                            :disabled="!extraData.viewerCanReact"></Reactions>
+            </Body>
+
+        </AnimatedHeightWrapper>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {util_dateFormat,util_markdownParse} from '@/util'
+    import {LoadingIconEx,AnimatedHeightWrapper,Popover,ImgWrapper} from '@/components'
+    import ClipboardJS from 'clipboard';
+    import {Reactions} from '../../components'
+    import Comment from './Comment'
+    import { authRequiredGet } from '@/network';
+    export default {
+        inject: ['commitCommentExtraData'],
+        data() {
+            return {
+                showMinimized: false,
+                popoverStyle: {
+                    top: '100%',
+                    right: '-6px'
+                },
+                reactions: {
+                    data: {},
+                    loading: false
+                }
+            }
+        },
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            headerStyle: {
+                type: Object,
+                required: false
+            }
+        },
+        computed: {
+            bodyHTML() {
+                return util_markdownParse.markdownToHTML(this.data.body)
+            },
+            extraData() {
+                return this.commitCommentExtraData().filter(i => i.id == this.data.node_id)
+            }
+        },
+        methods: {
+            async network_getReactions() {
+                try {
+                    this.reactions.loading = true
+                    let res = await authRequiredGet(
+                        this.data.url,
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.squirrel-girl-preview"
+                            }
+                        }
+                    )
+                    this.reactions.data = res.data.reactions
+                } catch (e) {
+                    console.log(e)
+                } finally {
+                    this.reactions.loading = false
+                }
+            },
+            triggerShowMinimized() {
+                this.showMinimized = !this.showMinimized
+            },
+        },
+        components: {
+            LoadingIconEx,
+            AnimatedHeightWrapper,
+            Popover,
+            Reactions,
+            ImgWrapper,
+            Container: styled.div``,
+            Inner: styled.div``,
+            Header: styled.div``,
+            Avatar: styled.div``,
+            Meta: styled.div``,
+            LoadingWrapper: styled.div``,
+            HeaderInner: styled.div``,
+            Main: styled.div``,
+            Body: styled.div``,
+            BodyHTML: styled.div``,
+            Action: styled.div``,
+            AuthorAssociation: styled.span``,
+            StretchCommentBtn: styled.div``,
+            HideAndShowPane: styled.div``,
+            WhoDidWhatAt: styled.div``,
+        }
+    }
+</script>
+
+<style lang="scss">
+.user-mention {
+    font-weight: 600;
+    color: #24292e;
+}
+</style>
+
+<style scoped lang="scss">
+.header{
+    position: relative;
+    padding: 10px 15px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #586069;
+    background-color: #fff;
+    border-bottom: 1px solid #e1e4e8;
+    .meta{
+        margin-left: 42px;
+        a{
+            font-weight: 600;
+            color: #444d56;
+        }
+    }
+}
+
+.minimized-header{
+    padding-top: 0px !important;
+}
+
+.minimized-body{
+    padding-bottom: 0px !important;
+}
+
+.reaction-item{
+    font-size: 12px!important;
+    padding-top: 4px!important;
+    padding-bottom: 4px!important;
+    padding-right: 8px!important;
+    padding-left: 8px!important;
+    display: block;
+    margin-top: 4px!important;
+    margin-bottom: 4px!important;
+    margin-right: 8px!important;
+    border-radius: 3px!important;
+    border: 1px solid #e1e4e8!important;
+}
+
+
+    .loading-wrapper{
+        height: 120px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/HiddenItemLoading.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/HiddenItemLoading.vue
new file mode 100644
index 0000000..a1fac39
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/HiddenItemLoading.vue
@@ -0,0 +1,74 @@
+<template>
+    <Container class="py-3">
+        <Inner class="text-center">
+            <p class="mb-1 title">
+                <slot></slot>
+            </p>
+            <LoadMore class="text-center">
+                 <button class="ajax-pagination-btn no-underline pb-1 pt-0 px-4 mt-0 mb-1 border-0"
+                    :disabled="loading || disabled"
+                    :class="{'loading-animation':loading}"
+                    @click="dataGetter">
+                    {{loading ? 'Loading...' : 'Load more'}}
+                </button>
+            </LoadMore>    
+        </Inner>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    export default {
+        props: {
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            dataGetter: {
+                type: Function,
+                default: () => {console.log('getting data')}
+            }
+        },
+        components: {
+            Container: styled.div``,
+            Inner: styled.div``,
+            LoadMore: styled.div``,
+        }
+    }
+</script>
+
+<style scoped>
+.title {
+    font-weight: 600;
+    color: #586069;
+}
+
+button{
+    color: #0366d6;
+    padding: 0;
+    margin: 0;
+    background: none;
+    border: 0;
+}
+
+.loading-animation{
+    animation: kf-loading 2s infinite;
+}
+
+@keyframes kf-loading {
+    0%{
+        opacity: 0;
+    }
+    50%{
+        opacity: 1;
+    }
+    100%{
+        opacity: 0;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestBody.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestBody.vue
new file mode 100644
index 0000000..4d40106
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestBody.vue
@@ -0,0 +1,137 @@
+<template>
+    <Container class="pb-2 p-3">
+        <BodyHTML v-html="pullRequestBodyHTML"  class="markdown-body p-0 mb-3 " style="font-size:15px">
+
+        </BodyHTML>
+
+        <Reactions v-if="pullRequestProvided().viewerCanReact || reactions.data.total_count > 0" 
+                    :data="reactions.data" 
+                    :disabled="!pullRequestProvided().viewerCanReact"></Reactions>
+        
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {LoadingIconEx,AnimatedHeightWrapper} from '@/components'
+    import {util_markdownParse} from '@/util'
+    import {mapState} from 'vuex'
+    import {Reactions} from '../../components'
+    import * as api from '@/network/api'
+    import {authRequiredGet} from '@/network'
+    export default {
+        inject: ['pullRequestProvided'],
+        data() {
+            return {
+                showMinimized: false,
+                popoverStyle: {
+                    top: '100%',
+                    right: '-6px'
+                },
+                reactions: {
+                    data: {},
+                    loading: false
+                }
+            }
+        },
+        computed: {
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            number() {
+                return this.$route.params.number
+            },
+            pull() {
+                return this.pullRequestProvided()
+            },
+            pullRequestBodyHTML() {
+                return util_markdownParse.markdownToHTML(this.pullRequestProvided().body)
+            }
+        },
+        created() {
+            this.network_getPullRequestReactions()
+        },
+        methods: {
+            async network_getPullRequestReactions() {
+                try {
+                    this.reactions.loading = false
+
+                    let url = api.API_ISSUE({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.pullRequestProvided().number
+                    })
+
+                    let res = await authRequiredGet(
+                        url,
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.squirrel-girl-preview+json"
+                            }
+                        }
+                    )
+
+                    this.reactions.data = res.data.reactions
+
+                } catch (e) {
+                    console.log(e)
+                } finally {
+                    this.reactions.loading = true
+                }
+            }
+        },
+        components: {
+            LoadingIconEx,
+            AnimatedHeightWrapper,
+            Reactions,
+            Container: styled.div``,
+            LoadingWrapper: styled.div``,
+            BodyHTML: styled.div``,
+        }
+    }
+</script>
+
+<style lang="scss">
+@import 'node_modules/@primer/css/markdown/index.scss';
+</style>
+<style scoped lang="scss">
+
+.header{
+    position: relative;
+    padding: 10px 15px;
+    font-size: 12px;
+    line-height: 16px;
+    color: #586069;
+    background-color: #fff;
+    border-bottom: 1px solid #e1e4e8;
+    .meta{
+        margin-left: 42px;
+        a{
+            font-weight: 600;
+            color: #444d56;
+        }
+    }
+}
+
+.reaction-item{
+    font-size: 12px!important;
+    padding-top: 4px!important;
+    padding-bottom: 4px!important;
+    padding-right: 8px!important;
+    padding-left: 8px!important;
+    display: block;
+    margin-top: 4px!important;
+    margin-bottom: 4px!important;
+    margin-right: 8px!important;
+    border-radius: 3px!important;
+    border: 1px solid #e1e4e8!important;
+}
+
+
+    .loading-wrapper{
+        height: 120px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestBodyEditor.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestBodyEditor.vue
new file mode 100644
index 0000000..8daeda9
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestBodyEditor.vue
@@ -0,0 +1,116 @@
+<template>
+    <Container class="container flex-column flex-items-stretch">
+        <textarea  rows="5" 
+                    ref="textarea"
+                    placeholder="Leave a pullRequestBody"
+                    class="d-block form-control" 
+                    v-model="pullRequestBodyTextValue"></textarea>
+       
+        <Action class="d-flex flex-justify-end mt-2">
+            <button class="btn" v-if="pullRequestProvided().viewerCanUpdate" @click="() => this.$emit('cancel')" :disabled="loadingUpdatePullRequestBody">
+                Cancel
+            </button>
+            <button class="btn btn-primary ml-1" :disabled="pullRequestBodyTextValue === '' || loadingUpdatePullRequestBody" @click="network_updatePullRequestBody">
+                {{loadingUpdatePullRequestBody ? 'Updating...' : 'Update pull request body'}}
+            </button>
+        </Action>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {authRequiredPatch} from '@/network'
+    import * as api from '@/network/api'
+    export default {
+        inject: ['pullRequestProvided'],
+        data() {
+            return {
+                pullRequestBodyTextValue: '',
+                loadingUpdatePullRequestBody: false
+            }
+        },
+        created() {
+            this.pullRequestBodyTextValue = this.pullRequestProvided().body
+        },
+        mounted() {
+            this.$refs.textarea.focus()
+        },
+        computed:{
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+        },
+        methods: {
+            async network_updatePullRequestBody() {
+                try {
+                    this.loadingUpdatePullRequestBody = true
+                    let url = api.API_PULLREQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.pullRequestProvided().number
+                    })
+
+                    let res = await authRequiredPatch(
+                        url,
+                        {
+                            body: this.pullRequestBodyTextValue
+                        },
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    let event = new CustomEvent('pull-request-updated',{bubbles:true,detail:res.data})
+                    this.$el.dispatchEvent(event)
+                    this.$emit('cancel')
+
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loadingUpdatePullRequestBody = false
+                }
+            }
+        },
+        components: {
+            Container: styled.div``,
+            Header: styled.div``,
+            Action: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang='scss'>
+@import 'node_modules/@primer/css/forms/index.scss';
+.header{
+    padding: 25px 15px 7.5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #586069;
+    border-top: 1px solid #dfe2e5;
+    border-bottom: 1px solid #dfe2e5;
+}
+
+textarea{
+    max-height: 451.2px;
+    border-bottom: 1px solid #e1e4e8;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    display: block;
+    min-height: 100px;
+    padding: 8px;
+    resize: vertical;
+    width: 100%;
+    margin: 0;
+    line-height: 1.6;
+    background-color: #fafbfc;
+    overflow: auto;
+    height: 100px;
+    font-size: 14px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestCommentCreator.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestCommentCreator.vue
new file mode 100644
index 0000000..7bc87e5
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestCommentCreator.vue
@@ -0,0 +1,181 @@
+<template>
+    <Container>
+        <div v-if="accessToken" class="flex-column flex-items-stretch"> 
+            <textarea  rows="6" 
+                    :placeholder="placeholder"
+                    class="d-block form-control" 
+                    :disabled="locked || loading" 
+                    v-model="commentTextValue"></textarea>
+        
+            <Action class="d-flex flex-justify-end mt-2">
+                <button class="btn" @click="network_changePullRequestState" v-if="pullRequestProvided().viewerCanUpdate" :disabled="loading">
+                    <span v-if="pullRequestProvided().state == 'open'">{{loadingChangePullRequestState ? 'Trying...' : 'Close pull request'}}</span>
+                    <span v-else-if="pullRequestProvided().state == 'closed'">{{loadingChangePullRequestState ? 'Trying...' : 'Reopen pull request'}}</span>
+                </button>
+                <button class="btn btn-primary ml-1" :disabled="commentTextValue === '' || loading" @click="network_createPullRequestComment">
+                    <span>{{loadingCreatePullRequestComment ? 'Trying...' : 'Comment'}}</span>
+                </button>
+            </Action>
+        </div>
+        
+        <div v-else>
+            <button class="btn btn-block" @click="signIn">Sign in to comment</button>
+        </div>
+    </Container>
+
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {authRequiredPost,authRequiredPatch} from '@/network'
+    import * as api from '@/network/api'
+    export default {
+        inject: ['pullRequestProvided','commentCreatedHook'],
+        data() {
+            return {
+                commentTextValue: '',
+                loadingCreatePullRequestComment: false,
+                loadingChangePullRequestState: false
+            }
+        },
+        computed:{
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            number() {
+                return this.$route.params.number
+            },
+            locked() {
+                return this.pullRequestProvided().locked && !this.pullRequestProvided().viewerCanUpdate
+            },
+            lockedReason() {
+                return this.pullRequestProvided().activeLockReason
+            },
+            placeholder() {
+                if(!this.locked) return 'Leave a comment'
+                return `This conversation has been locked ${this.lockedReason} and limited to collaborators.`
+            },
+            loading() {
+                return this.loadingCreatePullRequestComment || this.loadingChangePullRequestState
+            }
+        },
+        methods: {
+            async network_createPullRequestComment() {
+                try {
+                    this.loadingCreatePullRequestComment = true
+                    let url = api.API_CREATE_ISSUE_COMMENT({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number
+                    })
+
+                    let res = await authRequiredPost(
+                        url,
+                        {
+                            body: this.commentTextValue
+                        },
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    this.commentCreatedHook()({
+                        ...res.data,
+                        event: 'commented',
+                    })
+                    Object.assign(this.$data,this.$options.data())
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loadingCreatePullRequestComment = false
+                }
+            },
+            async network_changePullRequestState() {
+                try {
+                    this.loadingChangePullRequestState = true
+                    let url = api.API_PULLREQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number
+                    })
+
+                    let res = await authRequiredPatch(
+                        url,
+                        {
+                            state: this.pullRequestProvided().state == 'open' ? 'closed' : 'open'
+                        },
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    let pullRequestUpdatedEvent = new CustomEvent('pull-request-updated',{bubbles: true, detail: res.data})
+                    this.$el.dispatchEvent(pullRequestUpdatedEvent)
+
+                    let pullRequestStateChangedEvent = new CustomEvent(
+                        'pull-request-state-changed',
+                        {
+                            bubbles: true, 
+                            detail: {
+                                created_at: (new Date()).toISOString(),
+                                id: (new Date()).getTime(),
+                                event: res.data.state == 'closed' ? 'closed' : 'reopened',
+                                actor: {
+                                    login: this.viewer.login,
+                                    avatar_url: this.viewer.avatarUrl
+                                }
+                            }
+                        }
+                    )
+                    this.$el.dispatchEvent(pullRequestStateChangedEvent)
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loadingChangePullRequestState = false
+                }
+            }
+        },
+        components: {
+            Container: styled.div``,
+            Header: styled.div``,
+            Action: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang='scss'>
+@import 'node_modules/@primer/css/forms/index.scss';
+.header{
+    padding: 25px 15px 7.5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #586069;
+    border-top: 1px solid #dfe2e5;
+    border-bottom: 1px solid #dfe2e5;
+}
+
+textarea{
+    max-height: 451.2px;
+    border-bottom: 1px solid #e1e4e8;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    display: block;
+    min-height: 100px;
+    padding: 8px;
+    resize: vertical;
+    width: 100%;
+    margin: 0;
+    line-height: 1.6;
+    background-color: #fafbfc;
+    overflow: auto;
+    height: 100px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestCommentEditor.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestCommentEditor.vue
new file mode 100644
index 0000000..f403102
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/PullRequestCommentEditor.vue
@@ -0,0 +1,118 @@
+<template>
+    <Container class="container flex-column flex-items-stretch">
+        <textarea  rows="5" 
+                    ref="textarea"
+                    placeholder="Leave a comment"
+                    class="d-block form-control" 
+                    v-model="commentTextValue"></textarea>
+       
+        <Action class="d-flex flex-justify-end mt-2">
+            <button class="btn" v-if="pullRequestProvided().viewerCanUpdate" @click="() => this.$emit('cancel')" :disabled="loadingUpdatePullRequestComment">
+                Cancel
+            </button>
+            <button class="btn btn-primary ml-1" :disabled="commentTextValue === '' || loadingUpdatePullRequestComment" @click="network_updatePullRequestComment">
+                {{loadingUpdatePullRequestComment ? 'Updating...' : 'Update Comment'}}
+            </button>
+        </Action>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {authRequiredPatch} from '@/network'
+    import * as api from '@/network/api'
+    export default {
+        inject: ['pullRequestProvided'],
+
+        props: {
+            comment: Object
+        },
+        data() {
+            return {
+                commentTextValue: '',
+                loadingUpdatePullRequestComment: false
+            }
+        },
+        created() {
+            this.commentTextValue = this.comment.body
+        },
+        mounted() {
+            this.$refs.textarea.focus()
+        },
+        computed:{
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+        },
+        methods: {
+            async network_updatePullRequestComment() {
+                try {
+                    this.loadingUpdatePullRequestComment = true
+                    let url = api.API_ISSUE_COMMENT({
+                        repo: this.repo,
+                        owner: this.owner,
+                        commentId: this.comment.id
+                    })
+
+                    let res = await authRequiredPatch(
+                        url,
+                        {
+                            body: this.commentTextValue
+                        },
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    this.$emit('update-comment-success',res.data)
+                    Object.assign(this.$data,this.$options.data())
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loadingUpdatePullRequestComment = false
+                }
+            }
+        },
+        components: {
+            Container: styled.div``,
+            Header: styled.div``,
+            Action: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang='scss'>
+@import 'node_modules/@primer/css/forms/index.scss';
+.header{
+    padding: 25px 15px 7.5px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #586069;
+    border-top: 1px solid #dfe2e5;
+    border-bottom: 1px solid #dfe2e5;
+}
+
+textarea{
+    max-height: 451.2px;
+    border-bottom: 1px solid #e1e4e8;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    display: block;
+    min-height: 100px;
+    padding: 8px;
+    resize: vertical;
+    width: 100%;
+    margin: 0;
+    line-height: 1.6;
+    background-color: #fafbfc;
+    overflow: auto;
+    height: 100px;
+    font-size: 14px;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Referenced.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Referenced.vue
new file mode 100644
index 0000000..03fe1fa
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Referenced.vue
@@ -0,0 +1,86 @@
+<template>
+    <Container class="p-3">
+        <Inner class="bubble m-0">
+            <Header class="bubble-title">
+                <router-link :to="`/${data.actor.login}`">
+                    {{data.actor.login}}
+                </router-link>
+                <strong>referenced</strong>
+                this pull request from another {{data.source.issue.pull_request ? 'pull request' : 'issue'}}
+            </Header>
+
+            <AnimatedHeightWrapper>
+                <Body class="p-3 bubble-content">
+                    <strong>
+                        <router-link :to="data.source.issue.url.replace('https://api.github.com/repos','')">
+                            #{{data.source.issue.number}} {{data.source.issue.title}}
+                        </router-link>
+                    </strong>
+                    <span v-if="data.source.issue.repository.full_name != `${owner}/${repo}`">in {{data.source.issue.repository.full_name}}</span>
+                </Body>
+            </AnimatedHeightWrapper>
+        </Inner>   
+            
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {LoadingIconEx,AnimatedHeightWrapper,Popover} from '@/components'
+    import {mapState} from 'vuex'
+    import ClipboardJS from 'clipboard';
+    export default {
+        data() {
+            return {
+                popoverStyle: {
+                    top: '100%',
+                    right: '-6px'
+                }
+            }
+        },
+        props: {
+            data: {
+                type: Object,
+                required: true
+            }
+        },
+        computed: {
+           owner() {
+               return this.$route.params.owner
+           },
+           repo() {
+               return this.$route.params.repo
+           },
+        },
+        methods: {
+           
+        },
+        components: {
+            LoadingIconEx,
+            AnimatedHeightWrapper,
+            Container: styled.div``,
+            Inner: styled.div``,
+            Header: styled.div``,
+            LoadingWrapper: styled.div``,
+            Body: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+.bubble-title{
+    font-size: 12px;
+    color: #6a737d;
+    background-color: #f6f8fa;
+    border-bottom: 1px solid #e1e4e8;
+    a{
+        color: #6a737d;
+    }
+}
+
+.bubble-content {
+    a{
+        color: #444d56;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Review.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Review.vue
new file mode 100644
index 0000000..1662401
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/Review.vue
@@ -0,0 +1,413 @@
+<template>
+    <Container v-show="!isSubmitted && !deleted" class="p-3 relative container" :id="propsData.id">
+        <Header class="d-flex position-relative pl-4">
+            
+            <div class="pr-simple-timeline-icon-wrapper">
+                <svg v-if="statusAction == 'approved'" class="octicon octicon-check" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>
+                <svg v-else class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
+            </div>
+           
+            <WhoDidWhat class="flex-grow-1">
+                <router-link :to="`/${propsData.user.login}`" class="d-inline-block">
+                    <ImgWrapper class="avatar mr-1">
+                        <img :src="propsData.user.avatar_url" :alt="`@${propsData.user.login}`" class="avatar" height="16" width="16">
+                    </ImgWrapper>
+                </router-link>
+                <router-link  :to="`/${propsData.user.login}`" class="text-bold link-gray-dark">
+                    {{propsData.user.login}}
+                </router-link>
+                {{statusAction}}
+                <span class="no-wrap">{{propsData.submitted_at | getDateDiff}}</span>
+
+                <button v-if="extraData.viewerCanUpdate" @click="triggerShowReivewBodyEditor" :disabled="showReviewBodyEditor" type="button" class="btn-link muted-link js-comment-edit-button float-right">
+                    <svg class="octicon octicon-pencil" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.013 1.427a1.75 1.75 0 012.474 0l1.086 1.086a1.75 1.75 0 010 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 01-.927-.928l.929-3.25a1.75 1.75 0 01.445-.758l8.61-8.61zm1.414 1.06a.25.25 0 00-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 000-.354l-1.086-1.086zM11.189 6.25L9.75 4.81l-6.286 6.287a.25.25 0 00-.064.108l-.558 1.953 1.953-.558a.249.249 0 00.108-.064l6.286-6.286z"></path></svg>
+                </button>
+
+            </WhoDidWhat>
+          
+            <!-- <Label class="ml-1 no-wrap" :name="propsData.state" :color="propsData.state == 'pending' ? '#fffbdd' : '#ffffff'" style="font-size: 10px;color:#735c0f" ></Label> -->
+        </Header>
+
+        <Body class="bubble mt-3" v-if="bodyHTML">
+            <BodyHTML v-if="!showReviewBodyEditor" class="markdown-body p-3" style="font-size:15px">
+                <div v-html="bodyHTML">
+
+                </div>
+            </BodyHTML>
+            <ReviewBodyEditor v-else :review="updatedReview || propsData" @review-updated="reviewUpdatedHook" @cancel="() => triggerShowReivewBodyEditor(false)"></ReviewBodyEditor>
+        </Body>
+       
+        <!-- <LoadingWrapper v-if="reviewComments.loading" class="loading-wrapper pt-3 d-flex flex-justify-center flex-items-center">
+            Loading...
+        </LoadingWrapper> -->
+
+        <ReviewCommentGroup v-for="item in rootReviewComments" :key="item.id" :rootReviewComment="item"/>
+        
+        <!-- <HiddenItemLoading v-if="reviewComments.pageInfo.next" style="padding-bottom:0px!important" :loading="reviewComments.loading" :dataGetter="network_getReviewComments">
+            {{reviewComments.totalCount - data.length}} {{reviewComments.totalCount - data.length > 1 ? 'reviewComments' : 'comment'}} remained.
+        </HiddenItemLoading> -->
+      
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {LoadingIconEx,AnimatedHeightWrapper,Popover,Label,ImgWrapper} from '@/components'
+    import {util_markdownParse} from '@/util'
+    import ReviewCommentGroup from './ReviewCommentGroup'
+    import HiddenItemLoading from './HiddenItemLoading'
+    import * as graphql from '../../graphql'
+    import * as api from '@/network/api'
+    import Comment from './Comment'
+    import ReviewBodyEditor from './ReviewBodyEditor'
+    import {authRequiredGet,authRequiredGitHubGraphqlApiQuery} from '@/network'
+    import {mapMutations, mapState} from 'vuex'
+    import { MUTATION_PULL_REQUEST_DETAIL_UPDATED_NEW_CREATED_REVIEW_COMMENT } from '@/store/modules/pullRequestDetail/mutationTypes'
+    let parse = require('parse-link-header')
+    export default {
+        mixins: [Comment],
+        inject: ['reviewCommentsProvided'],
+        provide() {
+            return {
+                reviewProvided: () => this.propsData,
+                reviewCommentsOfPendingReview: () => this.reviewComments.data,
+                //pendingReviewCommentRepliesDeletedHook: () => this.pendingReviewCommentRepliesDeletedHook
+            }
+        },
+        data() {
+            return {
+                reviewComments: {
+                    data: [],
+                    loading: false,
+                    pageInfo: {},
+                    totalCount: 0,
+                },
+                reactions: {
+                    data: {},
+                    loading: false
+                },
+                updatedReview: undefined,
+                showReviewBodyEditor: false,
+                deleted: false
+            }
+        },
+        computed: {
+            ...mapState({
+                state_newSubmittedReviews: state => state.pullRequestDetail.newSubmittedReviews,
+                state_deletedReviewComments: state => state.pullRequestDetail.deletedReviewComments,
+                state_newCreatedReviewComments: state => state.pullRequestDetail.newCreatedReviewComments
+            }),
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            number() {
+                return this.$route.params.number
+            },
+            statusAction() {
+                let status = 'approved'
+                switch(this.propsData.state.toLowerCase()) {
+                    case 'changes_requested':
+                        status = 'request changes'
+                        break
+                    case 'commented':
+                        status = 'reviewed'
+                        break
+                    case 'pending':
+                        status = 'start a review'
+                    default:
+                }
+                return status
+            },
+            bodyHTML() {
+                return util_markdownParse.markdownToHTML(this.updatedReview && this.updatedReview.body || this.propsData.body)
+            },
+            isSubmitted() {
+                return this.propsData.state && this.propsData.state.toLowerCase() == 'pending' && this.state_newSubmittedReviews.some(i => i.id == this.propsData.id)
+            },
+            rootReviewComments() {
+                return [...this.reviewComments.data, ...this.reviewCommentsProvided(),...this.state_newCreatedReviewComments].filter(i => i.pull_request_review_id == this.propsData.id && !i.in_reply_to_id).filter(i => !this.state_deletedReviewComments.some(i_ => i_.id == i.id)).sort((a,b) => a.created_at > b.created_at)
+            }
+        },
+        created() {
+            this.network_getData()
+        },
+        methods: {
+            ...mapMutations({
+                mutation_updateNewCreatedReviewComment: MUTATION_PULL_REQUEST_DETAIL_UPDATED_NEW_CREATED_REVIEW_COMMENT
+            }),
+            network_getData() {
+                if(this.propsData.state && this.propsData.state.toLowerCase() == 'pending') this.network_getReviewComments()
+                //this.network_getReviewCommentsCount()
+            },
+            async network_getReviewComments() {
+                try{
+                    this.reviewComments.loading = true
+                    
+                    let pageInfo
+                    let reviewComments = []
+                    while(!pageInfo || pageInfo.next) {
+                        let url = api.API_REVIEW_COMMENTS_OF_REVIEW({
+                            repo: this.repo,
+                            owner: this.owner,
+                            number: this.number,
+                            reviewId: this.propsData.id,
+                            params: {
+                                sort: 'created',
+                                direction: 'asc',
+                                per_page: 100
+                            }
+                        })
+
+                        let res = await authRequiredGet(
+                            url,
+                            {
+                                headers: {
+                                    "accept" :"application/vnd.github.squirrel-girl-preview+json"
+                                }
+                            }
+                        )
+                        pageInfo = parse(res.headers.link) || {}
+
+                        reviewComments = reviewComments.concat(res.data)
+                    }
+
+                    this.reviewComments.data = reviewComments
+
+                    //this.network_getReviewCommentsExtraData(this.reviewComments.data)
+                }catch(e) {
+                    console.log(e)
+                }finally{
+                    this.reviewComments.loading = false
+                }
+            },
+            async network_getReviewCommentsCount() {
+                try{
+                    let url = api.API_REVIEW_COMMENTS_OF_REVIEW({
+                            repo: this.repo,
+                            owner: this.owner,
+                            number: this.number,
+                            reviewId: this.propsData.id,
+                            params: {
+                                per_page: 1
+                            }
+                        })
+
+                    let res = await authRequiredGet(url)
+
+                    let pageInfo = parse(res.headers.link) || {}
+
+                    this.reviewComments.count = pageInfo.last ? pageInfo.last.page : res.data.length
+
+                }catch(e) {
+                    console.log(e)
+                }
+            },
+            triggerShowReivewBodyEditor(flag = true) {
+                this.showReviewBodyEditor = flag
+            },
+            reviewUpdatedHook(payload) {
+                this.showReviewBodyEditor = false
+                this.updatedReview = payload
+            },
+            /* pendingReviewCommentRepliesDeletedHook(event) {
+                if(this.reviewComments.data.length == 1) {
+                    this.deleted = true
+                }else{
+                    this.network_getReviewComments()
+                }
+            }, */
+           /*  async network_getCommentsOfPendingReview() {
+                try{
+                    this.reviewCommentsOfPendingReview.loading = true
+
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_PR_REVIEW_COMMENTS,
+                        {
+                            variables: {
+                                id: this.propsData.node_id,
+                                after: this.reviewCommentsOfPendingReview.pageInfo.hasNextPage ? this.reviewCommentsOfPendingReview.pageInfo.endCursor : undefined,
+                                first: 100
+                            }
+                        }
+                    )
+                   
+                    try{
+                        this.reviewCommentsOfPendingReview.data = this.reviewCommentsOfPendingReview.data.concat(res.data.data.node.reviewComments.nodes)
+                        this.reviewCommentsOfPendingReview.pageInfo = res.data.data.node.reviewComments.pageInfo
+                        this.reviewCommentsOfPendingReview.totalCount = res.data.data.node.reviewComments.totalCount
+                    }catch(e) {
+                        this.handleGraphqlError(res)
+                    }
+                    
+                }catch(e) {
+                    console.log(e)
+                }finally{
+                    this.reviewCommentsOfPendingReview.loading = false
+                }
+            } */
+        },
+        watch: {
+            state_deletedReviewComments(newOne, oldOne) {
+                if(newOne.length == 0) return
+                let deletedReviewComment = newOne[newOne.length - 1]
+                if(deletedReviewComment.in_reply_to_id) return 
+                if(deletedReviewComment.pull_request_review_id != this.propsData.id)  return
+
+                let replies = [
+                    ...this.reviewComments.data,
+                    ...this.state_newCreatedReviewComments,
+                    ...this.reviewCommentsProvided()
+                    ].filter(i => i.in_reply_to_id == deletedReviewComment.id).filter(i => !this.state_deletedReviewComments.some(i_ => i_.id == i.id)).sort((a,b) => a.created_at > b.created_at)
+
+                if(replies.length == 0) return
+
+                this.state_newCreatedReviewComments.forEach(i => {
+                    if(i.id == replies[0].id) {
+                        this.mutation_updateNewCreatedReviewComment({
+                            ...i,
+                            in_reply_to_id: undefined
+                        })
+                    }else if(i.in_reply_to_id == deletedReviewComment.id) {
+                        this.mutation_updateNewCreatedReviewComment({
+                            ...i,
+                            in_reply_to_id: replies[0].id
+                        })
+                    }
+                })
+
+                this.reviewCommentsProvided().forEach(i => {
+                    if(i.id == replies[0].id) {
+                         i.in_reply_to_id = undefined
+                    }else if(i.in_reply_to_id == deletedReviewComment.id) {
+                        i.in_reply_to_id = replies[0].id
+                    }
+                })
+
+                this.reviewComments.data.forEach(i => {
+                     if(i.id == replies[0].id) {
+                         i.in_reply_to_id = undefined
+                    }else if(i.in_reply_to_id == deletedReviewComment.id) {
+                        i.in_reply_to_id = replies[0].id
+                    }
+                })
+
+                /* replies.forEach((i,index) => {
+                    if(index > 0) {
+                        i.in_reply_to_id = replies[0].index
+                    }
+                }) */
+
+               /*  this.state_newCreatedReviewComments.forEach((i,index) => {
+                    if(i.id == deletedReviewComment.id && !i.in_reply_to_id) {
+                        let replies = this.state_newCreatedReviewComments.data.filter(i_ => i_.in_reply_to_id == i.id)
+                        if(replies.length == 0) return 
+                        this.mutation_updateNewCreatedReviewComment({
+                            ...replies[0],
+                            in_reply_to_id: undefined
+                        })
+                        replies.forEach(i__ => {
+                             this.mutation_updateNewCreatedReviewComment({
+                                ...i__,
+                                in_reply_to_id: replies[0].id
+                            })
+                        })
+                    }
+                })
+
+                this.reviewComments.data.forEach((i,index) => {
+                    if(i.id == deletedReviewComment.id && !i.in_reply_to_id) {
+                        let replies = this.reviewComments.data.filter(i_ => i_.in_reply_to_id == i.id)
+                        if(replies.length == 0) return 
+                        replies[0].in_reply_to_id = undefined
+                        replies.forEach(i__ => {
+                            if(i__.in_reply_to_id) {
+                                i__.in_reply_to_id = replies[0].id
+                            } 
+                        })
+                    }
+                }) */
+            },
+            rootReviewComments(newOne) {
+                if(this.propsData.state.toLowerCase() == 'pending' && newOne.length == 0) {
+                    let event = new CustomEvent('timeline-item-deleted')
+                    this.$el.dispatchEvent(event)
+                    this.deleted = true
+                }
+            }
+         },
+        components: {
+            LoadingIconEx,
+            AnimatedHeightWrapper,
+            Popover,
+            ImgWrapper,
+            ReviewCommentGroup,
+            HiddenItemLoading,
+            Label,
+            ReviewBodyEditor,
+            Container: styled.div``,
+            Header: styled.div``,
+            WhoDidWhat: styled.div``,
+            Body: styled.div``,
+            BodyHTML: styled.div``,
+            LoadingWrapper: styled.div``,
+        }
+    }
+</script>
+
+<style>
+.pr-simple-timeline-icon-wrapper{
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    margin-right: 10px;
+    color: #959da5;
+}
+</style>
+
+<style scoped lang="scss">
+.container{
+    padding: 15px;
+    font-size: 13px;
+    color: #586069;
+}
+
+.body {
+    min-width: 0;
+    max-width: 100%;
+    margin-top: 4px;
+    color: #444d56;
+    flex: auto;
+}
+
+.reaction-item{
+    font-size: 12px!important;
+    padding-top: 4px!important;
+    padding-bottom: 4px!important;
+    padding-right: 8px!important;
+    padding-left: 8px!important;
+    display: block;
+    margin-top: 4px!important;
+    margin-bottom: 4px!important;
+    margin-right: 8px!important;
+    border-radius: 3px!important;
+    border: 1px solid #e1e4e8!important;
+}
+
+.loading-wrapper{
+    font-weight: 600;
+    animation: breathe 1s linear infinite alternate;
+}
+
+@keyframes breathe {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewBodyEditor.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewBodyEditor.vue
new file mode 100644
index 0000000..04ef7ef
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewBodyEditor.vue
@@ -0,0 +1,87 @@
+<template>
+    <Container class="container">
+        <textarea ref="textarea" v-model="content" class="form-control" placeholder="Leave a comment" rows="5" style="width: 100%"></textarea>
+        <div class="text-right">
+            <button class="btn mt-2" @click="() => $emit('cancel')" :disabled="loading">Cancel</button>
+            <button class="btn mt-2 ml-1 btn-primary" @click="network_updateReview" :disabled="loading">{{loading ? 'Updating...' : 'Update Comment'}}</button>
+        </div>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {authRequiredPut} from '@/network'
+    import  * as api from '@/network/api'
+    export default {
+        props: {
+            review: Object
+        },
+        data() {
+            return {
+                content: '',
+                loading: false
+            }
+        },
+        computed: {
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            number() {
+                return this.$route.params.number
+            },
+        },
+        mounted() {
+            this.$refs.textarea.focus()
+            this.content = this.review.body
+        },
+        activated() {
+            this.$refs.textarea.focus()
+        },
+        methods: {
+            async network_updateReview() {
+                try {
+                    this.loading = true
+                    let url = api.API_REVIEW({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number,
+                        reviewId: this.review.id
+                    })
+                    let res = await authRequiredPut(
+                        url,
+                        {
+                            body: this.content
+                        },
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    this.$emit('review-updated',res.data)
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loading = false
+                }
+            }
+        },
+        components: {
+            Container: styled.div``
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/forms/index.scss';
+.container{
+    padding-right: 15px;
+    padding-left: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewComment.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewComment.vue
new file mode 100644
index 0000000..07bcaf2
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewComment.vue
@@ -0,0 +1,437 @@
+<template> 
+    <Container class="bg-white" :class="{deleting:loadingDeleteThis}">
+
+        <FileHeader v-if="isRoot" class="file-header" :class="{pending:reviewProvided().state && reviewProvided().state.toLowerCase() == 'pending'}">
+            <button class="btn-link text-gray float-right f6 d-block" v-if="reviewComment.outdated" @click="triggerShowOutdated">
+                <svg class="octicon octicon-fold position-relative mr-1" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 9l3 3H8v3H6v-3H4l3-3zm3-6H8V0H6v3H4l3 3 3-3zm4 2c0-.55-.45-1-1-1h-2.5l-1 1h3l-2 2h-7l-2-2h3l-1-1H1c-.55 0-1 .45-1 1l2.5 2.5L0 10c0 .55.45 1 1 1h2.5l1-1h-3l2-2h7l2 2h-3l1 1H13c.55 0 1-.45 1-1l-2.5-2.5L14 5z"></path></svg>
+                {{showOutdated ? 'Hide outdated' : 'Show outdated'}}
+            </button> 
+            <router-link to="/" class="link-gray-dark">
+                {{path}}
+            </router-link> 
+
+            <button v-if="outdated" @click="triggerShowOutdated" type="button" class="btn-link text-gray float-right f6 outdated-comment-label show-outdated-button">
+                <svg class="octicon octicon-unfold position-relative mr-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.177.677l2.896 2.896a.25.25 0 01-.177.427H8.75v1.25a.75.75 0 01-1.5 0V4H5.104a.25.25 0 01-.177-.427L7.823.677a.25.25 0 01.354 0zM7.25 10.75a.75.75 0 011.5 0V12h2.146a.25.25 0 01.177.427l-2.896 2.896a.25.25 0 01-.354 0l-2.896-2.896A.25.25 0 015.104 12H7.25v-1.25zm-5-2a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM6 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 016 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5zM12 8a.75.75 0 01-.75.75h-.5a.75.75 0 010-1.5h.5A.75.75 0 0112 8zm2.25.75a.75.75 0 000-1.5h-.5a.75.75 0 000 1.5h.5z"></path></svg>
+                {{showOutdated ? 'Hide' : 'Show'}} outdated
+            </button>
+        </FileHeader>
+
+        <div v-if="!outdated || showOutdated ">
+            <DiffView v-if="isRoot" class="diff-view">
+                <div :class="{'d-inline-block':!isProseFileType}" style="min-width: 100%;">
+                    <LinesNotShown class="text-shadow-light d-flex width-full" v-if="diffHunkEntries.hidden.length > 0 && !showHiddenDiffHunk" @click="triggerShowHiddenDiffHunk">
+                        <BlobNum class="blob-num position-sticky bg-white"  style="left:0px" data-line-number="..."></BlobNum>
+                        <BlobNum class="blob-num position-sticky bg-white" style="left:26px" data-line-number="..."></BlobNum>
+                        <BlobCode class="blob-code" :class="{'prose': isProseFileType}">{{diffHunkEntries.hidden.length}} lines not shown</BlobCode>
+                    </LinesNotShown>
+                    <CodeLine v-for="(item,index) in showHiddenDiffHunk ? diffHunkEntries.hidden : []" :key="index + 'hidden'" class="d-flex width-full">
+                        <BlobNum    class="blob-num position-sticky"  
+                                    style="left:0px" 
+                                    :data-line-number="item.deletionLineIndex == 0 ? '...' : item.deletionLineIndex" 
+                                    :class="{
+                                        'blob-num-addition':item.type === 'addition',
+                                        'blob-num-deletion':item.type === 'deletion',
+                                        'blob-num-context':item.type === 'context',
+                                        'blob-num-hunk':index === 0 && diffHunkEntries.hidden.length === 0 || (diffHunkEntries.deletionStartLineIndex === item.deletionLineIndex && diffHunkEntries.additionStartLineIndex === item.additionLineIndex)}"></BlobNum>
+
+                        <BlobNum    class="blob-num position-sticky" 
+                                    style="left:26px" 
+                                    :data-line-number="item.additionLineIndex == 0 ? '...' : item.additionLineIndex" 
+                                    :class="{'blob-num-addition':item.type === 'addition',
+                                            'blob-num-deletion':item.type === 'deletion',
+                                            'blob-num-context':item.type === 'context',
+                                            'blob-num-hunk':index === 0 && diffHunkEntries.hidden.length === 0 || (diffHunkEntries.deletionStartLineIndex === item.deletionLineIndex && diffHunkEntries.additionStartLineIndex === item.additionLineIndex)}"></BlobNum>
+
+                        <BlobCode   class="blob-code" 
+                                    :class="{
+                                        'prose': isProseFileType,
+                                        'blob-code-addition':item.type === 'addition',
+                                        'blob-code-deletion':item.type === 'deletion',
+                                        'blob-code-context':item.type === 'context',
+                                        'blob-num-hunk':index === 0 && diffHunkEntries.hidden.length === 0 || (diffHunkEntries.deletionStartLineIndex === item.deletionLineIndex && diffHunkEntries.additionStartLineIndex === item.additionLineIndex)}">{{item.code}}</BlobCode>
+                    </CodeLine>
+                    <CodeLine v-for="(item,index) in diffHunkEntries.showDefault" :key="index + 'showDefault'" class="d-flex width-full">
+                        <BlobNum    class="blob-num position-sticky" 
+                                    style="left:0px" 
+                                    :data-line-number="item.deletionLineIndex == 0 ? '...' : item.deletionLineIndex" 
+                                    :class="{
+                                        'blob-num-addition':item.type === 'addition',
+                                        'blob-num-deletion':item.type === 'deletion',
+                                        'blob-num-context':item.type === 'context',
+                                        'blob-num-hunk':index === 0 && diffHunkEntries.hidden.length === 0 || (diffHunkEntries.deletionStartLineIndex === item.deletionLineIndex && diffHunkEntries.additionStartLineIndex === item.additionLineIndex)}"></BlobNum>
+
+                        <BlobNum    class="blob-num position-sticky" 
+                                    style="left:26px" 
+                                    :data-line-number="item.additionLineIndex == 0 ? '...' : item.additionLineIndex" 
+                                    :class="{
+                                        'blob-num-addition':item.type === 'addition',
+                                        'blob-num-deletion':item.type === 'deletion',
+                                        'blob-num-context':item.type === 'context',
+                                        'blob-num-hunk':index === 0 && diffHunkEntries.hidden.length === 0 || (diffHunkEntries.deletionStartLineIndex === item.deletionLineIndex && diffHunkEntries.additionStartLineIndex === item.additionLineIndex)}"></BlobNum>
+
+                        <BlobCode   class="blob-code" 
+                                    :class="{
+                                        'prose': isProseFileType,
+                                        'blob-code-addition':item.type === 'addition',
+                                        'blob-code-deletion':item.type === 'deletion',
+                                        'blob-code-context':item.type === 'context',
+                                        'blob-num-hunk':index === 0 && diffHunkEntries.hidden.length === 0 || (diffHunkEntries.deletionStartLineIndex === item.deletionLineIndex && diffHunkEntries.additionStartLineIndex === item.additionLineIndex)}">{{item.code}}</BlobCode>
+                    </CodeLine>
+                </div>
+            </DiffView>
+
+             <CommentContent>
+                <div class="px-3 pt-3 pb-2" v-show="!showReviewCommentEditor">
+                    <WhoDidWhatAt class="d-flex flex-row position-relative">
+                        <div class="flex-auto">
+                            <router-link :to="`/${reviewComment.user.login}`" class="d-inline-block">
+                                <ImgWrapper>   
+                                    <img class="v-align-top" style="margin-top:2px" :src="reviewComment.user.avatar_url" :alt="`@${reviewComment.user.login}`" width="16" height="16">
+                                </ImgWrapper>
+                            </router-link>
+                            <router-link :to="`/${reviewComment.user.login}`" class="f5 text-bold link-gray-dark">{{reviewComment.user.login}}</router-link> 
+                            <span class="text-gray"> • {{reviewComment.created_at | getDateDiff}}</span>
+                        </div>
+
+                        <button class="ml-2 height-full" :disabled="loadingDeleteThis" @click="triggerShowPopover" v-if="(extraData.viewerCanUpdate || extraData.viewerCanDelete) && repoOwnerType() == 'User'">
+                            <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+                        </button>
+
+                        <Popover ref="popover" :popoverStyle="{top: 'calc(100% + 4px)',right: '-10px',paddingTop: '4px',paddingBottom: '4px'}">
+                            <div v-if="extraData.viewerCanUpdate" class="dropdown-item" @click="triggerShowReviewCommentEditor">
+                                Edit
+                            </div>
+                            <div v-if="extraData.viewerCanUpdate" class="division border-top my-1"></div> 
+                            <div v-if="extraData.viewerCanDelete" class="dropdown-item danger" @click="network_tryToDeleteThis">
+                                Delete
+                            </div>
+                        </Popover>
+                    </WhoDidWhatAt>
+
+                    <CommentBody v-html="markdownToHTML" class="markdown-body p-0 pt-2 f5">
+                    </CommentBody>
+                    
+                    <Reactions class="mt-2" :data="reviewComment.reactions || reactions.data || {}" :disabled="!extraData.viewerCanReact" commentType="reviewComment">
+                    </Reactions>
+                </div>
+
+                <ReviewCommentEditor v-show="showReviewCommentEditor" :comment="reviewComment" @cancel="() => triggerShowReviewCommentEditor(false)"></ReviewCommentEditor>
+            </CommentContent>
+        </div> 
+       
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {util_dateFormat,util_analyseFileType,util_markdownParse} from '@/util'
+    import ReviewCommentEditor from './ReviewCommentEditor'
+    import {Popover, ImgWrapper} from '@/components'
+    import {mapState,mapMutations} from 'vuex'
+    import {Reactions} from '../../components'
+    import * as api from '@/network/api'
+    import { authRequiredGitHubGraphqlApiQuery,authRequiredGet,authRequiredDelete} from '@/network'
+    import { MUTATION_PULL_REQUEST_DETAIL_PUSH_DELETED_REVIEW_COMMENT } from '@/store/modules/pullRequestDetail/mutationTypes'
+    export default {
+        inject: ['reviewProvided','pullRequestProvided','repoOwnerType','viewerIsCollaborator','reviewCommentsExtraData'],
+        data() {
+            return {
+                showHiddenDiffHunk: false,
+                showOutdated: false,
+                reactions: {
+                    data: {},
+                    loading: false
+                },
+                loadingDeleteThis: false,
+                showReviewCommentEditor: false,
+            }
+        },
+        props: {
+            reviewComment: {
+                type: Object,
+                required: true
+            },
+            isRoot: {
+                type: Boolean,
+                default: false
+            }
+        },
+        computed: {
+            ...mapState({
+                updatedReviewComments: state => state.pullRequestDetail.updatedReviewComments
+            }),
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            extraData() {
+                return this.reviewCommentsExtraData().filter(i => i.id == this.reviewComment.node_id)[0] || {}
+            },
+            diffHunkEntries() {
+                let diffHunk = this.reviewComment.diffHunk || this.reviewComment.diff_hunk
+                let hunkStatistic = (diffHunk.split('@@')[1]).replace(/@/g,'').trim().split(' ')
+                let deletionLineIndex,deletionStartLineIndex,addititonLineIndex,additionStartLineIndex
+                deletionLineIndex = deletionStartLineIndex = parseInt(hunkStatistic[0].split(',')[0].replace(/[-|\+]/g,'')) - 1
+                addititonLineIndex = additionStartLineIndex = parseInt(hunkStatistic[1].split(',')[0].replace(/[-|\+]/g,'')) - 1
+                let lines = diffHunk.split(/\n/)
+                let diffHunkEntries = []
+                lines.forEach(item => {
+                    switch(item[0]) {
+                        case '+':
+                            diffHunkEntries.push({
+                                type: 'addition',
+                                code: item.substring(1,item.length),
+                                additionLineIndex: addititonLineIndex
+                            })
+                            addititonLineIndex += 1
+                            break
+                        case '-':
+                            diffHunkEntries.push({
+                                type: 'deletion',
+                                code: item.substring(1,item.length),
+                                deletionLineIndex: deletionLineIndex
+                            })
+                            deletionLineIndex += 1
+                            break
+                        default:
+                             diffHunkEntries.push({
+                                type: 'context',
+                                code: item,
+                                additionLineIndex: addititonLineIndex,
+                                deletionLineIndex: deletionLineIndex
+                            })
+                            addititonLineIndex += 1
+                            deletionLineIndex += 1
+                    }
+                }) 
+                let showDefault = diffHunkEntries.reverse().slice(0,16).reverse()
+                let hidden = diffHunkEntries.slice(16,diffHunkEntries.length).reverse()
+                
+                return {
+                        showDefault,
+                        hidden,
+                        deletionStartLineIndex,
+                        additionStartLineIndex,
+                    }
+            },
+            path() {
+                if((this.reviewComment.path.match(/\//g) || []).length <= 3) return this.reviewComment.path
+                return `...${this.reviewComment.path.match(/(\/(([^\/])+)){3}$/g)[0]}`
+            },
+            isProseFileType() {
+                if(!this.reviewComment.path) return 
+                return util_analyseFileType.isProse(this.reviewComment.path)
+            },
+            outdated() {
+                return this.extraData.outdated
+            },
+            markdownToHTML() {
+                let updatedReviewComment = this.updatedReviewComments.filter(i => i.id == this.reviewComment.id)[0]
+                return util_markdownParse.markdownToHTML(updatedReviewComment ? updatedReviewComment.body : this.reviewComment.body)
+            }
+        },
+        created() {
+            this.network_getData()
+        },
+        methods: {
+            ...mapMutations({
+                mutation_pushDeletedReviewComment: MUTATION_PULL_REQUEST_DETAIL_PUSH_DELETED_REVIEW_COMMENT
+            }),
+            network_getData() {
+                this.network_getReactions()
+            },
+            async network_getReactions() {
+                if(this.reviewComment.reactions) return 
+                try {
+                    this.reactions.loading = true
+                    let url = api.API_REVIEW_COMMENT_OF_PULL_REQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        commentId: this.reviewComment.id
+                    })
+                    let res = await authRequiredGet(
+                        url,
+                        {
+                            headers: {
+                                "accept":"application/vnd.github.comfort-fade-preview+json,application/vnd.github.squirrel-girl-preview"
+                            }
+                        }
+                    )
+
+                    this.reactions.data = res.data.reactions
+                } catch (e) {
+                    console.log(e)
+                }finally{
+                    this.reactions.loading = false
+                }
+            },
+             async network_tryToDeleteThis() {
+                this.closeModal()
+                if(!confirm("Are you sure you want to delete this comment?")) return
+                try {
+                    this.loadingDeleteThis = true
+                    let url = api.API_REVIEW_COMMENT_OF_PULL_REQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        commentId: this.reviewComment.id
+                    })
+                    await authRequiredDelete(
+                        url,
+                        {
+                            headers: {
+                                "accept":"application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    this.mutation_pushDeletedReviewComment(this.reviewComment)
+
+                    /* if(this.reviewProvided().state.toLowerCase() == 'pending') {
+                        await this.pendingReviewCommentRepliesDeletedHook()()
+                    }else if(!this.reply.in_reply_to_id) {
+                        await this.reviewCommentsReplyHostDeletedHook()()
+                    } */
+
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loadingDeleteThis = false
+                }
+            },
+            triggerShowHiddenDiffHunk() {
+                this.showHiddenDiffHunk = true
+            },
+            triggerShowPopover(flag = true) {
+                this.$refs.popover.show = flag
+            },
+            triggerShowOutdated() {
+                this.showOutdated = !this.showOutdated
+            },
+            triggerShowReviewCommentEditor(flag = true) {
+                this.closeModal()
+                this.showReviewCommentEditor = flag
+            },
+        },
+        components: {
+            Popover,
+            Reactions,
+            ImgWrapper,
+            ReviewCommentEditor,
+            Container: styled.div``,
+            CommentContent: styled.div``,
+            FileHeader: styled.div``,
+            DiffView: styled.div``,
+            LinesNotShown: styled.div``,
+            CodeLine: styled.div``,
+            BlobNum: styled.div``,
+            BlobCode: styled.div``,
+            Comment: styled.div``,
+            WhoDidWhatAt: styled.div``,
+            CommentBody: styled.div``,
+            ResolveConversation: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/dropdown/index.scss';
+.deleting{
+    opacity: .4;
+}
+
+.dropdown-item{
+    min-width: 140px;
+}
+
+.file-header{
+    border-top: 0;
+    border-radius: 3px 3px 0 0;
+    padding: 3px 10px 5px;
+    background-color: #f6f8fa;
+    a{
+        font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+        font-size: 12px;
+    }
+}
+
+.diff-view{
+    position: relative;
+    border-top: 1px solid #d1d5da;
+    border-bottom: 1px solid #d1d5da;
+    overflow-y: hidden;
+    overflow-x: auto;
+}
+
+.blob-num{
+    min-width: 26px;
+    padding: 2px 3px;
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    font-size: 12px;
+    line-height: 18px;
+    color: rgba(27,31,35,.3);
+    text-align: right;
+    white-space: nowrap;
+    vertical-align: top;
+    flex-shrink: 0
+}
+
+.blob-num:before {
+    content: attr(data-line-number);
+}
+
+.blob-code{
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: #24292e;
+    width: 100%;
+    white-space: pre;
+    padding-right: 10px;
+    padding-left: 10px;
+    word-wrap: normal;
+    font-size: 12px;
+    line-height: 20px;
+    flex: auto;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.blob-code-addition {
+    background-color: #e6ffed;
+}
+.blob-code-deletion {
+    background-color: #ffeef0;
+}
+.blob-code-hunk {
+    background-color: #f8f5ff;
+}
+.blob-num-addition {
+    background-color: #cdffd8;
+    border-color: #bef5cb;
+}
+.blob-num-deletion {
+    background-color: #ffdce0;
+    border-color: #fdaeb7;
+}
+.blob-num-context {
+    background-color: white;
+}
+.blob-num-hunk {
+    background-color: #f8f5ff;
+}
+.reply{
+    padding: 10px 15px;
+}
+
+.loading-wrapper{
+    height: 120px;
+}
+
+.pending{
+    background-color: #fffbdd;
+}
+
+.prose{
+    white-space: pre-wrap;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentCreator.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentCreator.vue
new file mode 100644
index 0000000..74e5d47
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentCreator.vue
@@ -0,0 +1,166 @@
+<template>
+    <Container class="container">
+        <textarea ref="textarea" v-model="content" class="form-control" placeholder="Leave a comment" rows="5" style="width: 100%"></textarea>
+        <div class="text-right">
+            <button class="btn mt-2" @click="() => $emit('cancel')" :disabled="loading">Cancel</button>
+            <button class="btn mt-2 ml-1 btn-primary" @click="network_addReply" :disabled="loading">{{loading ? 'Trying...' : 'Add reply'}}</button>
+        </div>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {authRequiredPost,authRequiredGitHubGraphqlApiQuery} from '@/network'
+    import  * as api from '@/network/api'
+    import * as graphql from '../../graphql.js'
+    import {mapMutations} from 'vuex'
+    import { MUTATION_PULL_REQUEST_DETAIL_PUSH_NEW_CREATED_REVIEW_COMMENT } from '@/store/modules/pullRequestDetail/mutationTypes'
+    export default {
+        inject: ['reviewProvided'],
+        props: {
+            rootReviewComment: {
+                type: Object,
+                required: true
+            }
+        },
+        data() {
+            return {
+                content: '',
+                loading: false
+            }
+        },
+        computed: {
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            number() {
+                return this.$route.params.number
+            },
+        },
+        mounted() {
+            this.$refs.textarea.focus()
+        },
+        activated() {
+            this.$refs.textarea.focus()
+        },
+        methods: {
+            ...mapMutations({
+                mutation_pushNewCreatedReviewComment: MUTATION_PULL_REQUEST_DETAIL_PUSH_NEW_CREATED_REVIEW_COMMENT
+            }),
+            network_addReply() {
+                if(this.reviewProvided().state && this.reviewProvided().state.toLowerCase() == 'pending') {
+                    this.network_addReplyByGraphql()
+                    return 
+                }
+                this.network_addReplyByRest()
+            },
+            async network_addReplyByRest() {
+                try {
+                    this.loading = true
+                    let url = api.API_CREATE_REVIEW_REPLY({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number,
+                        commentId: this.rootReviewComment.id
+                    })
+                    let res = await authRequiredPost(
+                        url,
+                        {
+                            body: this.content
+                        },
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    this.mutation_pushNewCreatedReviewComment(res.data)
+
+                    /* let event = new CustomEvent('review-comment-created',{bubbles:true,detail:res.data})
+                    this.$el.dispatchEvent(event) */
+                    this.content = ''
+                    this.$emit('cancel')
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loading = false
+                }
+            },
+            async network_addReplyByGraphql() {
+                try {
+                    this.loading = true
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_ADD_PULL_REQUEST_REVIEW_COMMENT,
+                        {
+                            variables: {
+                                input: {
+                                    body: this.content,
+                                    inReplyTo: this.rootReviewComment.node_id,
+                                    pullRequestReviewId: this.reviewProvided().node_id,
+                                }
+                            }
+                        }
+                    )
+
+                    try {
+                        let returnComment = res.data.data.addPullRequestReviewComment.comment
+                        let createdReviewCommemt =  {
+                                        ...returnComment,
+                                        id: returnComment.databaseId,
+                                        node_id: returnComment.id,
+                                        created_at: returnComment.createdAt,
+                                        in_reply_to_id: returnComment.replyTo.databaseId,
+                                        pull_request_review_id: returnComment.pullRequestReview.databaseId,
+                                        user: {
+                                            login: returnComment.author.login,
+                                            avatar_url: returnComment.author.avatarUrl
+                                        },
+                                        reactions: {
+                                            '+1': returnComment.THUMBS_UP.totalCount,
+                                            '-1': returnComment.THUMBS_DOWN.totalCount,
+                                            hooray: returnComment.HOORAY.totalCount,
+                                            confused: returnComment.CONFUSED.totalCount,
+                                            eyes: returnComment.EYES.totalCount,
+                                            heart: returnComment.HEART.totalCount,
+                                            laugh: returnComment.LAUGH.totalCount,
+                                            rocket: returnComment.ROCKET.totalCount,
+                                            total_count: returnComment.reactions.totalCount
+                                        }
+                                    }
+                        this.mutation_pushNewCreatedReviewComment(createdReviewCommemt)
+
+                        let event = new CustomEvent('review-comment-created',{bubbles:true,detail:createdReviewCommemt})
+                        this.$el.dispatchEvent(event)
+
+                        this.content = ''
+                        this.$emit('cancel')
+                    } catch (e) {
+                        console.log(e)
+                        this.handleGraphqlError(res)
+                    }
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loading = false
+                }
+            }
+        },
+        components: {
+            Container: styled.div``
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/forms/index.scss';
+.container{
+    padding-right: 15px;
+    padding-left: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentEditor.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentEditor.vue
new file mode 100644
index 0000000..5983ca0
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentEditor.vue
@@ -0,0 +1,167 @@
+<template>
+    <Container class="container">
+        <textarea ref="textarea" v-model="content" class="form-control" placeholder="Leave a comment" rows="5" style="width: 100%"></textarea>
+        <div class="text-right">
+            <button class="btn mt-2" @click="() => $emit('cancel')" :disabled="loading">Cancel</button>
+            <button class="btn mt-2 ml-1 btn-primary" @click="network_updateComment" :disabled="loading">{{loading ? 'Updating...' : 'Update Comment'}}</button>
+        </div>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {authRequiredPost,authRequiredGitHubGraphqlApiQuery} from '@/network'
+    import  * as api from '@/network/api'
+    import * as graphql from '../../graphql.js'
+import { mapMutations } from 'vuex'
+import { MUTATION_PULL_REQUEST_DETAIL_PUSH_UPDATED_REVIEW_COMMENT } from '../../../../../../store/modules/pullRequestDetail/mutationTypes.js'
+    export default {
+        inject: ['reviewProvided'],
+        props: {
+            comment: Object
+        },
+        data() {
+            return {
+                content: '',
+                loading: false
+            }
+        },
+        computed: {
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            number() {
+                return this.$route.params.number
+            },
+        },
+        mounted() {
+            this.$refs.textarea.focus()
+            this.content = this.comment.body
+        },
+        activated() {
+            this.$refs.textarea.focus()
+        },
+        methods: {
+            ...mapMutations({
+                mutation_pushUpdatedReviewComments: MUTATION_PULL_REQUEST_DETAIL_PUSH_UPDATED_REVIEW_COMMENT
+            }),
+            network_updateComment() {
+                if(this.reviewProvided().state && this.reviewProvided().state.toLowerCase() == 'pending') {
+                    this.network_updateCommentByGraphql()
+                    return
+                }
+                this.network_updateCommentByRest()
+            },
+            async network_updateCommentByRest() {
+                try {
+                    this.loading = true
+                    let url = api.API_REVIEW_COMMENT_OF_PULL_REQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number,
+                        commentId: this.comment.id
+                    })
+                    let res = await authRequiredPost(
+                        url,
+                        {
+                            body: this.content
+                        },
+                        {
+                            headers: {
+                                "accept": "application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                     this.mutation_pushUpdatedReviewComments(res.data)
+
+                      this.$emit('cancel')
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loading = false
+                }
+            },
+            async network_updateCommentByGraphql() {
+                try {
+                    this.loading = true
+                    let url = api.API_REVIEW_COMMENT_OF_PULL_REQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number,
+                        commentId: this.comment.id
+                    })
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_UPDATE_PULL_REVIEW_COMMENT,
+                        {
+                            variables: {
+                                input: {
+                                    body: this.content,
+                                    pullRequestReviewCommentId: this.comment.node_id
+                                }
+                            }
+                        }
+                    )
+
+                    try{
+                        let graphqlReturnComment = res.data.data.updatePullRequestReviewComment.pullRequestReviewComment
+                    
+                        let updatedComment = {
+                            ...graphqlReturnComment,
+                            id: graphqlReturnComment.databaseId,
+                            node_id: graphqlReturnComment.id,
+                            created_at: graphqlReturnComment.createdAt,
+                            in_reply_to_id: graphqlReturnComment.replyTo.databaseId,
+                            pull_request_review_id: graphqlReturnComment.pullRequestReview.databaseId,
+                            user: {
+                                login: graphqlReturnComment.author.login,
+                                avatar_url: graphqlReturnComment.author.avatarUrl
+                            },
+                            reactions: {
+                                '+1': graphqlReturnComment.THUMBS_UP.totalCount,
+                                '-1': graphqlReturnComment.THUMBS_DOWN.totalCount,
+                                hooray: graphqlReturnComment.HOORAY.totalCount,
+                                confused: graphqlReturnComment.CONFUSED.totalCount,
+                                eyes: graphqlReturnComment.EYES.totalCount,
+                                heart: graphqlReturnComment.HEART.totalCount,
+                                laugh: graphqlReturnComment.LAUGH.totalCount,
+                                rocket: graphqlReturnComment.ROCKET.totalCount,
+                                total_count: graphqlReturnComment.reactions.totalCount
+                            }
+
+                        }
+                        
+                        this.mutation_pushUpdatedReviewComments(updatedComment)
+
+                        this.$emit('cancel')
+                        
+                    }catch(e) {
+                        console.log(e)
+                        this.handleGraphqlError(res)
+                    }
+                    
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loading = false
+                }
+            }
+        },
+        components: {
+            Container: styled.div``
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/forms/index.scss';
+.container{
+    padding-right: 15px;
+    padding-left: 15px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentGroup.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentGroup.vue
new file mode 100644
index 0000000..7b64388
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentGroup.vue
@@ -0,0 +1,134 @@
+<template> 
+    <Container v-show="reviewCommentGroup.length > 0" class="bubble bg-white" style="margin-top:15px" :class="{pending:reviewProvided().state && reviewProvided().state.toLowerCase() == 'pending'}">
+        
+        <ReviewComment v-for="(item,index) in reviewCommentGroup" :isRoot="index == 0" :reviewComment="item" :key="item.id"></ReviewComment>
+
+        <button @click="triggerShowReviewCommentCreator" v-if="!(pullRequestProvided().locked && !viewerIsCollaborator().data) && !showReviewCommentCreator && repoOwnerType() == 'User'" class="border-top reply btn-link text-bold text-left muted-link btn-block">
+            Reply...
+        </button>
+
+        <ReviewCommentCreator v-if="showReviewCommentCreator" class="border-top" :rootReviewComment="rootReviewComment" @cancel="() => triggerShowReviewCommentCreator(false)"></ReviewCommentCreator>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {mapState} from 'vuex'
+    import ReviewComment from './ReviewComment'
+    import ReviewCommentCreator from './ReviewCommentCreator'
+    import * as graphql from '../../graphql'
+    import { authRequiredGitHubGraphqlApiQuery } from '@/network'
+    export default {
+        inject: ['reviewCommentsProvided','reviewCommentsOfPendingReview','pullRequestProvided','repoOwnerType','viewerIsCollaborator','reviewProvided'],
+        provide() {
+            return {
+                reviewCommentsExtraData: () => this.reviewCommentsExtraData.data,
+            }
+        },
+        data() {
+            return {
+                showOutdated: false,
+                showReviewCommentCreator: false,
+                reviewCommentsExtraData: {
+                    data: [],
+                    loading: false
+                },
+            }
+        },
+        props: {
+            rootReviewComment: {
+                type: Object,
+                required: true
+            },
+        },
+        computed: {
+            ...mapState({
+                state_newCreatedReviewComments: state => state.pullRequestDetail.newCreatedReviewComments,
+                state_deletedReviewComments: state => state.pullRequestDetail.deletedReviewComments,
+            }),
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            reviewCommentGroup() {
+                let replies = [...this.reviewCommentsProvided(),...this.reviewCommentsOfPendingReview(),...this.state_newCreatedReviewComments].filter(item => {
+                    return item.in_reply_to_id == this.rootReviewComment.id
+                }).sort((a,b) => a.created_at > b.created_at)
+
+                let deDuplicatedReplies = []
+                replies.forEach(i => {
+                    if(!deDuplicatedReplies.some(i_ => i_.id == i.id)) {
+                        deDuplicatedReplies.push(i)
+                    }
+                })
+                return [
+                        this.rootReviewComment,
+                        ...deDuplicatedReplies
+                    ].filter(item => !this.state_deletedReviewComments.some(i => i.id == item.id))
+            },
+        },
+        created() {
+            this.network_getReviewCommentsExtraData()
+        },
+        methods: {
+            async network_getReviewCommentsExtraData() {
+                let reviewCommentsNeedToGetExtraData = []
+                this.reviewCommentGroup.forEach(i => {
+                    if(!this.reviewCommentsExtraData.data.some(i_ => i_.id == i.node_id)) {
+                        reviewCommentsNeedToGetExtraData.push(i.node_id)
+                    }
+                })
+                if(reviewCommentsNeedToGetExtraData.length == 0) return 
+                try{
+                    this.reviewCommentsExtraData.loading = true
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_PR_REVIEW_COMMENTS,
+                        {
+                            variables: {
+                                ids:reviewCommentsNeedToGetExtraData
+                            }
+                        }
+                    )
+
+                    try{
+                        this.reviewCommentsExtraData.data = this.reviewCommentsExtraData.data.concat(res.data.data.nodes)
+                    }catch(e) {
+                        this.handleGraphqlError(res)
+                    }
+                    
+                }catch(e) {
+                    console.log(e)
+                }finally{
+                    this.reviewCommentsExtraData.loading = false
+                }
+            },
+            triggerShowReviewCommentCreator(flag = true) {
+                this.showReviewCommentCreator = flag
+            },
+        },
+        watch: {
+          reviewCommentGroup(newOne) {
+              if(newOne.length == 0) return 
+              this.network_getReviewCommentsExtraData()
+          }
+        },
+        components: {
+            ReviewComment,
+            ReviewCommentCreator,
+            Container: styled.div``,
+            Replies: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+.reply{
+    padding: 10px 15px;
+}
+
+.pending{
+    border-color: #f9c513;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentReply.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentReply.vue
new file mode 100644
index 0000000..51137d0
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/ReviewCommentReply.vue
@@ -0,0 +1,194 @@
+<template> 
+    <Container v-if="!deleted">
+        <div class="px-3 pt-3 pb-2" :class="{deleting:loadingDeleteThis}" v-show="!showReviewCommentEditor">
+            <WhoDidWhatAt class="d-flex flex-row position-relative">
+                <div class="flex-auto">
+                    <router-link :to="`/${data.user.login}`" class="d-inline-block">
+                        <ImgWrapper>   
+                            <img class="v-align-top" style="margin-top:2px" :src="reply.user.avatar_url" :alt="`@${reply.user.login}`" width="16" height="16">
+                        </ImgWrapper>
+                    </router-link>
+                    <router-link :to="`/${data.user.login}`" class="f5 text-bold link-gray-dark">{{data.user.login}}</router-link> 
+                    <span class="text-gray"> • {{data.created_at | getDateDiff}}</span>
+                </div>
+
+                <button class="ml-2 height-full" :disabled="loadingDeleteThis" @click="triggerShowPopover" v-if="(extraData.viewerCanUpdate || extraData.viewerCanDelete) && repoOwnerType() == 'User'">
+                    <svg class="octicon octicon-kebab-horizontal" viewBox="0 0 13 16" version="1.1" width="13" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm5 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM13 7.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path></svg>
+                </button>
+
+                <Popover ref="popover" :popoverStyle="{top: 'calc(100% + 4px)',right: '-10px',paddingTop: '4px',paddingBottom: '4px'}">
+                    <div v-if="extraData.viewerCanUpdate" class="dropdown-item" @click="triggerShowReviewCommentEditor">
+                        Edit
+                    </div>
+                    <div v-if="extraData.viewerCanUpdate" class="division border-top my-1"></div> 
+                    <div v-if="extraData.viewerCanDelete" class="dropdown-item danger" @click="network_tryToDeleteThis">
+                        Delete
+                    </div>
+                </Popover>
+            </WhoDidWhatAt>
+
+            <CommentBody v-html="bodyHTML" class="markdown-body p-0 pt-2 f5">
+            </CommentBody>
+            
+            <Reactions class="mt-2" :data="reply.reactions || reactions.data || {}" :disabled="!extraData.viewerCanReact" commentType="reviewComment">
+            </Reactions>
+        </div>
+
+        <ReviewCommentEditor v-show="showReviewCommentEditor" :comment="data" @cancel="() => triggerShowReviewCommentEditor(false)" @update-success="reviewCommentUpdateSuccessHandler"></ReviewCommentEditor>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {util_markdownParse} from '@/util'
+    import {ImgWrapper,Popover} from '@/components'
+    import {Reactions} from '../../components'
+    import ReviewCommentEditor from './ReviewCommentEditor'
+    import {authRequiredGet,authRequiredDelete} from '@/network'
+    import * as api from '@/network/api'
+    import {MUTATION_PULL_REQUEST_DETAIL_PUSH_DELETED_REVIEW_COMMENT} from '@/store/modules/pullRequestDetail/mutationTypes'
+    import {mapState,mapMutations } from 'vuex'
+    export default {
+        inject: ['repliesExtraData','repoOwnerType','reviewProvided','reviewCommentsReplyHostDeletedHook','pendingReviewCommentRepliesDeletedHook'],
+        data() {
+            return {
+                data: {},
+                reactions: {
+                    data: undefined,
+                    loading: false,
+                },
+                showReviewCommentEditor: false,
+                loadingDeleteThis: false,
+            }
+        },
+        props: {
+            reply: {
+                type: Object,
+                required: true
+            },
+        },
+        computed: {
+            ...mapState({
+                deletedReviewComments: state => state.pullRequestDetail.deletedReviewComments
+            }),
+            repo() {
+                return this.$route.params.repo
+            },
+            owner() {
+                return this.$route.params.owner
+            },
+            bodyHTML() {
+                return util_markdownParse.markdownToHTML(this.data.body)
+            },
+            extraData() {
+                return this.repliesExtraData().filter(i => i.id == this.data.node_id)[0] || {}
+            },
+            deleted() {
+                return this.deletedReviewComments.some(i => i.id == this.reply.id)
+            }
+        },
+        created() {
+            this.data = this.reply
+            this.network_getData()
+        },
+        methods: {
+            ...mapMutations({
+                mutation_pushDeletedReviewComment: MUTATION_PULL_REQUEST_DETAIL_PUSH_DELETED_REVIEW_COMMENT
+            }),
+            network_getData() {
+                this.network_getReactions()
+            },
+            async network_getReactions() {
+                if(this.reply.reactions) return 
+                try {
+                    this.reactions.loading = true
+                    let url = api.API_REVIEW_COMMENT_OF_PULL_REQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        commentId: this.data.id
+                    })
+                    let res = await authRequiredGet(
+                        url,
+                        {
+                            headers: {
+                                "accept":"application/vnd.github.squirrel-girl-preview"
+                            }
+                        }
+                    )
+
+                    this.reactions.data = res.data.reactions
+                } catch (e) {
+                    console.log(e)
+                }finally{
+                    this.reactions.loading = false
+                }
+            },
+            async network_tryToDeleteThis() {
+                this.closeModal()
+                if(!confirm("Are you sure you want to delete this comment?")) return
+                try {
+                    this.loadingDeleteThis = true
+                    let url = api.API_REVIEW_COMMENT_OF_PULL_REQUEST({
+                        repo: this.repo,
+                        owner: this.owner,
+                        commentId: this.data.id
+                    })
+                    await authRequiredDelete(
+                        url,
+                        {
+                            headers: {
+                                "accept":"application/vnd.github.v3+json"
+                            }
+                        }
+                    )
+
+                    this.mutation_pushDeletedReviewComment(this.reply)
+
+                    /* if(this.reviewProvided().state.toLowerCase() == 'pending') {
+                        await this.pendingReviewCommentRepliesDeletedHook()()
+                    }else if(!this.reply.in_reply_to_id) {
+                        await this.reviewCommentsReplyHostDeletedHook()()
+                    } */
+
+                } catch (e) {
+                    this.handleError(e)
+                } finally {
+                    this.loadingDeleteThis = false
+                }
+            },
+            triggerShowPopover(flag = true) {
+                this.$refs.popover.show = flag
+            },
+            triggerShowReviewCommentEditor(flag = true) {
+                this.closeModal()
+                this.showReviewCommentEditor = flag
+            },
+            reviewCommentUpdateSuccessHandler(payload) {
+                this.showReviewCommentEditor = false
+                this.data = payload
+            } 
+        },
+        components: {
+            ImgWrapper,
+            Reactions,
+            ReviewCommentEditor,
+            Popover,
+            Container: styled.div``,
+            WhoDidWhatAt: styled.div``,
+            CommentBody: styled.div``,
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+@import 'node_modules/@primer/css/dropdown/index.scss';
+.dropdown-item{
+    min-width: 140px;
+}
+
+.deleting{
+    opacity: .4;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/SimpleTimelineItem.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/SimpleTimelineItem.vue
new file mode 100644
index 0000000..75e7d65
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/SimpleTimelineItem.vue
@@ -0,0 +1,89 @@
+<template>
+    <Container class="p-3 relative container">
+        <Inner class="d-flex position-relative pl-4">
+
+            <div class="pr-simple-timeline-icon-wrapper"  :style="badgeStyle">
+                 <slot name="icon">
+                    <svg class="octicon" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 0H1C.27 0 0 .27 0 1v15l5-3.09L10 16V1c0-.73-.27-1-1-1zm-.78 4.25L6.36 5.61l.72 2.16c.06.22-.02.28-.2.17L5 6.6 3.12 7.94c-.19.11-.25.05-.2-.17l.72-2.16-1.86-1.36c-.17-.16-.14-.23.09-.23l2.3-.03.7-2.16h.25l.7 2.16 2.3.03c.23 0 .27.08.09.23h.01z"></path></svg>
+                </slot>
+            </div>
+           
+            <WhoDidWhat>
+                <router-link v-if="showActor" to="/" class="text-bold link-gray-dark">
+                    {{data.actor ? data.actor.login : (data.author && data.author.name)}}
+                </router-link>
+                <slot name="action"></slot>
+                <span class="no-wrap">{{createdAt}}</span>
+            </WhoDidWhat>
+        </Inner>
+        <slot name="additional">
+        </slot>
+    </Container>
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import {util_dateFormat} from '@/util'
+    export default {
+        props: {
+            data: {
+                type: Object,
+                required: true
+            },
+            badgeStyle: {
+                type: Object,
+                default: () => ({})
+            },
+            showActor: {
+                type: Boolean,
+                default: true
+            },
+            showActorAvatar: {
+                type: Boolean,
+                default: true
+            },
+            date: {
+                type: String,
+                required: false
+            }
+        },
+    
+        computed: {
+            createdAt() {
+                if(this.date) return util_dateFormat.getDateDiff(this.date)
+                if(this.data.created_at) return util_dateFormat.getDateDiff(this.data.created_at)
+            }
+        },
+        components: {
+            Container: styled.div``,
+            Inner: styled.div``,
+            WhoDidWhat: styled.div``,
+        }
+    }
+</script>
+
+<style>
+.pr-simple-timeline-icon-wrapper{
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    margin-right: 10px;
+    color: #959da5;
+}
+</style>
+
+<style scoped lang="scss">
+.container{
+    padding: 15px;
+    font-size: 13px;
+    color: #586069;
+}
+
+.body {
+    min-width: 0;
+    max-width: 100%;
+    margin-top: 4px;
+    color: #444d56;
+    flex: auto;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/TimelineItem.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/TimelineItem.vue
new file mode 100644
index 0000000..8cb6010
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/TimelineItem.vue
@@ -0,0 +1,751 @@
+<template>
+        <Comment :propsData="data" v-if="data.event === 'commented'" class="p-3"></Comment>
+        <!-- review -->
+        <Review v-else-if="data.event === 'reviewed'" :propsData="data"></Review>
+        <!-- committed  -->
+        <SimpleTimelineItem v-else-if="data.event === 'committed'" :data="data" :date="data.committer.date">
+            <template v-slot:icon>
+                <svg class="octicon octicon-repo-push" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 3H3V2h1v1zM3 5h1V4H3v1zm4 0L4 9h2v7h2V9h2L7 5zm4-5H1C.45 0 0 .45 0 1v12c0 .55.45 1 1 1h4v-1H1v-2h4v-1H2V1h9.02L11 10H9v1h2v2H9v1h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+                added a commit
+            </template>
+            <template v-slot:additional>
+                <Commit class="py-1 d-flex" style="margin-top:7.5px">
+                    <div class="d-flex">
+                        <AnimatedWidthWrapper class="flex-shrink-0">
+                             <router-link v-if="commit.author && commit.author.avatar_url" :to="`/${commit.author && commit.author.login}`" class="pr-2 d-inline-block">
+                                <ImgWrapper>
+                                    <img class="avatar v-align-top" style="margin-top:2px" width="16" height="16" :src="commit.author && commit.author.avatar_url" :alt="`@${commit.author && commit.author.login}`">
+                                </ImgWrapper>
+                            </router-link>
+                        </AnimatedWidthWrapper>
+                       
+                        <router-link :to="`/${owner()}/${repo()}/commit/${commit.sha}`" class="link-gray" style="word-break: break-word;">
+                            <code>
+                            {{data.message && parseEmoji(data.message.replace(/[\n\r]{2}[\S\s]*/g,''))}}
+                            </code>
+                        </router-link> 
+                    </div> 
+                    
+                    <CommitMeta class="commit-meta flex-grow-1 flex-shrink-0 text-right" >
+                        <CommitStatusIcon :sha="data.sha"></CommitStatusIcon>
+                    </CommitMeta>
+                </Commit>
+            </template>
+        </SimpleTimelineItem>
+        <!-- commit-commented -->
+        <CommitComment v-else-if="data.event === 'commit-commented'" :commitComment="data"></CommitComment>
+        <!-- head_ref_deleted  -->
+        <SimpleTimelineItem v-else-if="data.event === 'head_ref_deleted'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-repo-push" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 3H3V2h1v1zM3 5h1V4H3v1zm4 0L4 9h2v7h2V9h2L7 5zm4-5H1C.45 0 0 .45 0 1v12c0 .55.45 1 1 1h4v-1H1v-2h4v-1H2V1h9.02L11 10H9v1h2v2H9v1h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+                deleted the 
+                <code class="css-truncate css-truncate-target text-bold v-align-middle" style="max-width:165px;font-size:13px">{{headRefName}}</code>
+                branch
+            </template>
+        </SimpleTimelineItem>
+        <!-- head_ref_force_pushed  -->
+        <SimpleTimelineItem v-else-if="data.event === 'head_ref_force_pushed'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-repo-push" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 3H3V2h1v1zM3 5h1V4H3v1zm4 0L4 9h2v7h2V9h2L7 5zm4-5H1C.45 0 0 .45 0 1v12c0 .55.45 1 1 1h4v-1H1v-2h4v-1H2V1h9.02L11 10H9v1h2v2H9v1h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+                force pushed changes to this branch
+            </template>
+        </SimpleTimelineItem>
+        <!-- pinned  -->
+        <SimpleTimelineItem v-else-if="data.event === 'pinned'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-pin" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1.2V2l.5 1L6 6H2.2c-.44 0-.67.53-.34.86L5 10l-4 5 5-4 3.14 3.14a.5.5 0 00.86-.34V10l3-4.5 1 .5h.8c.44 0 .67-.53.34-.86L10.86.86a.5.5 0 00-.86.34z"></path></svg>
+            </template>
+            <template v-slot:action>
+                pinned this issue
+            </template>
+        </SimpleTimelineItem>
+        <!-- unpinned  -->
+        <SimpleTimelineItem v-else-if="data.event === 'unpinned'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-pin" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 1.2V2l.5 1L6 6H2.2c-.44 0-.67.53-.34.86L5 10l-4 5 5-4 3.14 3.14a.5.5 0 00.86-.34V10l3-4.5 1 .5h.8c.44 0 .67-.53.34-.86L10.86.86a.5.5 0 00-.86.34z"></path></svg>
+            </template>
+            <template v-slot:action>
+                 unpinned this issue
+            </template>
+        </SimpleTimelineItem>
+        <!-- added_to_project  -->
+        <SimpleTimelineItem v-else-if="data.event === 'added_to_project'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon" :class="{'loading-animation':loading}" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+                added this to <strong>{{data.project_card.column_name}}</strong> 
+                <span v-if="project.name">
+                    in <strong>{{project.name}}</strong>
+                </span>    
+            </template>
+        </SimpleTimelineItem>
+        <!-- removed_from_project  -->
+        <SimpleTimelineItem v-else-if="data.event === 'removed_from_project'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon" :class="{'loading-animation':loading}" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+                removed this from <strong>{{data.project_card.column_name}}</strong>
+                <span v-if="project.name">
+                    in <strong>{{project.name}}</strong>
+                </span>   
+            </template>
+        </SimpleTimelineItem>
+        <!-- moved_columns_in_project  -->
+        <SimpleTimelineItem v-else-if="data.event === 'moved_columns_in_project'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon" :class="{'loading-animation':loading}" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+                moved this from <strong>{{data.project_card.previous_column_name}}</strong> to <strong>{{data.project_card.column_name}}</strong> in {{project.name}}
+            </template>
+        </SimpleTimelineItem>
+        <!-- assigned  -->
+        <SimpleTimelineItem v-else-if="data.event === 'assigned'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 14.002a.998.998 0 01-.998.998H1.001A1 1 0 010 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"></path></svg>
+            </template>
+            <template v-slot:action>
+                assigned <strong>{{data.assignee.login}}</strong>
+            </template>
+        </SimpleTimelineItem>
+        <!-- unassigned  -->
+        <SimpleTimelineItem v-else-if="data.event === 'unassigned'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 14.002a.998.998 0 01-.998.998H1.001A1 1 0 010 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"></path></svg>
+            </template>
+            <template v-slot:action>
+                unassigned <strong>{{data.assignee.login}}</strong>
+            </template>
+        </SimpleTimelineItem>
+        <!-- assigned_merged  -->
+        <SimpleTimelineItem v-else-if="data.event === 'assigned_merged'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 14.002a.998.998 0 01-.998.998H1.001A1 1 0 010 13.999V13c0-2.633 4-4 4-4s.229-.409 0-1c-.841-.62-.944-1.59-1-4 .173-2.413 1.867-3 3-3s2.827.586 3 3c-.056 2.41-.159 3.38-1 4-.229.59 0 1 0 1s4 1.367 4 4v1.002z"></path></svg>
+            </template>
+            <template v-slot:action>
+                <span v-if="data.assignee_added">
+                    <span v-for="(item,index) in data.assignee_added" :key="item.id">
+                       {{index === 0 ? 'assigned' : 'and'}} <strong>{{item.login}}</strong>
+                    </span>
+                </span>
+                <span v-if="data.assignee_removed && data.assignee_removed.length > 0">and</span>
+                <span v-if="data.assignee_removed">
+                    <span v-for="(item,index) in data.assignee_removed" :key="item.id">
+                       {{index === 0 ? 'unassigned' : 'and'}} <strong>{{item.login}}</strong>
+                    </span>
+                </span>
+            </template>
+        </SimpleTimelineItem>
+        <!-- closed  -->
+        <SimpleTimelineItem v-else-if="data.event === 'closed'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-circle-slash text-red" :class="{'loading-animation':loading}" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0 1.3c1.3 0 2.5.44 3.47 1.17l-8 8A5.755 5.755 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zm0 11.41c-1.3 0-2.5-.44-3.47-1.17l8-8c.73.97 1.17 2.17 1.17 3.47 0 3.14-2.56 5.7-5.7 5.7z"></path></svg>
+            </template>
+            <template v-slot:action>
+                closed this
+                <router-link to="/" v-if="data.commit_id">in {{`${owner()}/${repo()}@${commit.sha && commit.sha.substring(0,7)}`}}</router-link>
+            </template>
+        </SimpleTimelineItem>
+        <!-- reopened  -->
+        <SimpleTimelineItem v-else-if="data.event === 'reopened'" :data="data" :badgeStyle="{color:'#28a745'}">
+            <template v-slot:icon>
+                <svg class="octicon octicon-primitive-dot" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"></path></svg>
+            </template>
+            <template v-slot:action>
+                reopened this
+            </template>
+        </SimpleTimelineItem>
+        <!-- cross-referenced -->
+        <Referenced v-else-if="data.event === 'cross-referenced'" :data="data">
+        </Referenced>
+        <!-- referenced  -->
+        <SimpleTimelineItem v-else-if="data.event === 'referenced'" :data="data" :showActorAvatar="false">
+            <template v-slot:icon>
+                <svg class="octicon octicon-bookmark" :class="{'loading-animation':loading}" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 0H1C.27 0 0 .27 0 1v15l5-3.09L10 16V1c0-.73-.27-1-1-1zm-.78 4.25L6.36 5.61l.72 2.16c.06.22-.02.28-.2.17L5 6.6 3.12 7.94c-.19.11-.25.05-.2-.17l.72-2.16-1.86-1.36c-.17-.16-.14-.23.09-.23l2.3-.03.7-2.16h.25l.7 2.16 2.3.03c.23 0 .27.08.09.23h.01z"></path></svg>
+            </template>
+            <template v-slot:action>
+                added a commit to {{repoFullNameOfCommit}} that referenced this issue
+            </template>
+            <template v-slot:additional>
+                <SourceCommit class="mt-3 flex">
+                    <ImgWrapper>
+                        <img class="mr-2" :src="data.actor.avatar_url" :alt="`@${data.actor.login}`" height="20" width="20">
+                    </ImgWrapper>
+
+                    <code class="d-inline-block mr-1 flex-grow-1 mr-3">
+                        <router-link to="/" class="link-gray" v-html="referenceHighlightMessageOfCommit"></router-link>
+                    </code>
+
+                    <code class="flex-shrink-0">
+                        <router-link to="/" class="link-gray">{{commit.sha && commit.sha.substring(0,7)}}</router-link>
+                    </code>
+                </SourceCommit>
+            </template>
+        </SimpleTimelineItem>
+        <!-- milestoned  -->
+        <SimpleTimelineItem v-else-if="data.event === 'milestoned'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-milestone" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z"></path></svg>
+            </template>
+            <template v-slot:action>
+                added this to the <strong>{{data.milestone.title}}</strong> milestone
+            </template>
+        </SimpleTimelineItem>
+        <!-- demilestoned  -->
+        <SimpleTimelineItem v-else-if="data.event === 'demilestoned'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-milestone" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z"></path></svg>
+            </template>
+            <template v-slot:action>
+                removed this from the <strong>{{data.milestone.title}}</strong> milestone
+            </template>
+        </SimpleTimelineItem>
+        <!-- milestoned_merged  -->
+        <SimpleTimelineItem v-else-if="data.event === 'milestoned_merged'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-milestone" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2H6V0h2v2zm4 5H2c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h10l2 2-2 2zM8 4H6v2h2V4zM6 16h2V8H6v8z"></path></svg>
+            </template>
+            <template v-slot:action>
+                modified the milestones:
+                <strong v-for="(item,index) in data.milestones" :key="item.title">{{item.title}}{{index < data.milestones.length - 1 ? ', ' : ''}}</strong>
+            </template>
+        </SimpleTimelineItem>
+        <!-- labeled  -->
+        <SimpleTimelineItem v-else-if="data.event === 'labeled'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg>
+            </template>
+            <template v-slot:action>
+                added the
+                <Label :name="data.label.name" :color="`#${data.label.color}`" style="font-size:10px"/>
+                label
+            </template>
+        </SimpleTimelineItem>
+        <!-- unlabeled  -->
+        <SimpleTimelineItem v-else-if="data.event === 'unlabeled'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg>
+            </template>
+            <template v-slot:action>
+                removed the
+                <Label :name="data.label.name" :color="`#${data.label.color}`" style="font-size:10px"/>
+                label
+            </template>
+        </SimpleTimelineItem>
+        <!-- labeled-merge  -->
+        <SimpleTimelineItem v-else-if="data.event === 'labeled_merged'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-tag" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg>
+            </template>
+            <template v-slot:action>
+                <span v-if="data.labels_added">
+                    add
+                    <Label class="mr-1" v-for="item in data.labels_added" :key="item.name" :name="item.name" :color="`#${item.color}`"></Label>
+                </span>
+                <span v-if="data.labels_added && data.labels_removed">and</span>
+                <span v-if="data.labels_removed">
+                    removed
+                    <Label class="mr-1" v-for="item in data.labels_removed" :key="item.name" :name="item.name" :color="`#${item.color}`"></Label>
+                </span>
+                labels
+            </template>
+        </SimpleTimelineItem>
+        <!-- locked  -->
+        <SimpleTimelineItem v-else-if="data.event === 'locked'" 
+                :showActor="data.actor.login !== owner && data.actor.login !== 'ghost'" 
+                :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-lock" :class="{'loading-animation':loading}" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 13H3v-1h1v1zm8-6v7c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h1V4c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1c.55 0 1 .45 1 1zM3.8 6h4.41V4c0-1.22-.98-2.2-2.2-2.2-1.22 0-2.2.98-2.2 2.2v2H3.8zM11 7H2v7h9V7zM4 8H3v1h1V8zm0 2H3v1h1v-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+               {{data.actor.login === owner || data.actor.login === 'ghost' ? "Repository owner" : ''}} locked as <strong>{{data.lock_reason || lockReason.toLowerCase()}}</strong> and limited conversation to collaborators
+            </template>
+        </SimpleTimelineItem>
+        <!-- unlocked  -->
+        <SimpleTimelineItem  v-else-if="data.event === 'unlocked'" 
+                :showActor="data.actor.login !== owner && data.actor.login !== 'ghost'" 
+                :data="data" 
+                :badgeStyle="{backgroundColor: '#24292e',color:'#fff'}">
+            <template v-slot:icon>
+                <svg class="octicon octicon-lock issue-event-icon issue-event-icon-unlocked text-green" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 13H3v-1h1v1zm8-6v7c0 .55-.45 1-1 1H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h1V4c0-2.2 1.8-4 4-4s4 1.8 4 4v2h1c.55 0 1 .45 1 1zM3.8 6h4.41V4c0-1.22-.98-2.2-2.2-2.2-1.22 0-2.2.98-2.2 2.2v2H3.8zM11 7H2v7h9V7zM4 8H3v1h1V8zm0 2H3v1h1v-1z"></path></svg>
+            </template>
+            <template v-slot:action>
+                {{data.actor.login === owner || data.actor.login === 'ghost' ? "Repository owner" : ''}} unlocked this conversation
+            </template>
+        </SimpleTimelineItem>
+         <!-- renamed  -->
+        <SimpleTimelineItem v-else-if="data.event === 'renamed'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
+            </template>
+            <template v-slot:action>
+                changed the title 
+                <del class="text-bold">{{data.rename.from}}</del>
+                <strong>{{data.rename.to}}</strong>
+            </template>
+        </SimpleTimelineItem>
+         <!-- transferred  -->
+        <SimpleTimelineItem v-else-if="data.event === 'transferred'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-primitive-dot" :class="{'loading-animation':loading}" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"></path></svg>
+            </template>
+            <template v-slot:action>
+                 transferred this issue from {{transferredFrom}}<!-- {{transferredEvent.fromRepository.owner}}/{{transferredEvent.fromRepository.repo}} -->
+            </template>
+        </SimpleTimelineItem>
+        <!-- marked_as_duplicate  -->
+        <SimpleTimelineItem v-else-if="data.event === 'marked_as_duplicate'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-bookmark" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 0H1C.27 0 0 .27 0 1v15l5-3.09L10 16V1c0-.73-.27-1-1-1zm-.78 4.25L6.36 5.61l.72 2.16c.06.22-.02.28-.2.17L5 6.6 3.12 7.94c-.19.11-.25.05-.2-.17l.72-2.16-1.86-1.36c-.17-.16-.14-.23.09-.23l2.3-.03.7-2.16h.25l.7 2.16 2.3.03c.23 0 .27.08.09.23h.01z"></path></svg>
+            </template>
+            <template v-slot:action>
+                marked this as a duplicate
+            </template>
+        </SimpleTimelineItem>
+        <!-- unmarked_as_duplicate  -->
+        <SimpleTimelineItem v-else-if="data.event === 'unmarked_as_duplicate'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-bookmark" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M9 0H1C.27 0 0 .27 0 1v15l5-3.09L10 16V1c0-.73-.27-1-1-1zm-.78 4.25L6.36 5.61l.72 2.16c.06.22-.02.28-.2.17L5 6.6 3.12 7.94c-.19.11-.25.05-.2-.17l.72-2.16-1.86-1.36c-.17-.16-.14-.23.09-.23l2.3-.03.7-2.16h.25l.7 2.16 2.3.03c.23 0 .27.08.09.23h.01z"></path></svg>
+            </template>
+            <template v-slot:action>
+                marked this as not a duplicate
+            </template>
+        </SimpleTimelineItem>
+        <!-- user_blocked  -->
+        <SimpleTimelineItem v-else-if="data.event === 'user_blocked'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-primitive-dot" :class="{'loading-animation':loading}" viewBox="0 0 8 16" version="1.1" width="8" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 8c0-2.2 1.8-4 4-4s4 1.8 4 4-1.8 4-4 4-4-1.8-4-4z"></path></svg>
+            </template>
+            <template v-slot:action>
+                blocked <strong>{{blockedUser.login}}</strong> 
+            </template>
+        </SimpleTimelineItem>
+         <!-- comment_deleted  -->
+        <SimpleTimelineItem v-else-if="data.event === 'comment_deleted'" 
+                :data="data"  
+                :showActor="(data.actor.login !== owner && data.actor.login !== 'ghost') || data.actor.type === 'Organization'" >
+            <template v-slot:icon>
+                <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
+            </template>
+            <template v-slot:action>
+               {{(data.actor.login === owner || data.actor.login === 'ghost') && data.actor.type !== 'Organization'? "Repository owner" : ''}} deleted a comment 
+            </template>
+        </SimpleTimelineItem>
+        
+
+        <!-- review_requested  -->
+        <SimpleTimelineItem v-else-if="data.event === 'review_requested'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
+            </template>
+            <template v-slot:action>
+                requested review from 
+                <strong>{{data.requested_reviewer ? data.requested_reviewer.login : data.requested_team.login}}</strong>
+            </template>
+        </SimpleTimelineItem>
+
+        <!-- base_ref_force_pushed  -->
+        <SimpleTimelineItem v-else-if="data.event === 'base_ref_force_pushed'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-repo-push issue-event-icon" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z"></path></svg>
+            </template>
+            <template v-slot:action>
+                force pushed changes tto the base branch 
+            </template>
+        </SimpleTimelineItem>
+
+
+         <!-- review_request_removed  -->
+        <!-- <SimpleTimelineItem v-else-if="data.event === 'review_request_removed'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
+            </template>
+            <template v-slot:action>
+                 removed the request for review from 
+                <strong>{{data.requested_reviewer ? data.requested_reviewer.login : data.requested_team.login}}</strong>
+            </template>
+        </SimpleTimelineItem> -->
+         <!-- review_dismissed  -->
+        <!-- <SimpleTimelineItem v-else-if="data.event === 'review_dismissed'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
+            </template>
+            <template v-slot:action>
+                 dismissed the review for <strong>{{data.dismissed_review.dismissal_message}}</strong>
+            </template>
+        </SimpleTimelineItem> -->
+         <!-- reviewed  -->
+        <!-- <SimpleTimelineItem v-else-if="data.event === 'review_dismissed'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
+            </template>
+            <template v-slot:action>
+                 dismissed the review for <strong>{{data.dismissed_review.dismissal_message}}</strong>
+            </template>
+        </SimpleTimelineItem> -->
+        <!-- review_requested_merged  -->
+        <!-- <SimpleTimelineItem v-else-if="data.event === 'review_requested_merged'" :data="data">
+            <template v-slot:icon>
+                <svg class="octicon octicon-eye" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
+            </template>
+            <template v-slot:action>
+                requested review from 
+                <strong v-for="(item,index) in data.requested_reviewers" :key="item.id">
+                    {{item.login}} {{data.requested_reviewers.length > index ? 'and' : ''}}
+                </strong>
+            </template>
+        </SimpleTimelineItem> -->
+</template>
+
+<script>
+    import styled from 'vue-styled-components'
+    import Comment from './Comment'
+    import SimpleTimelineItem from './SimpleTimelineItem'
+    import Referenced from './Referenced'
+    import Review from './Review'
+    import {util_emoji} from '@/util'
+    import {Label,AnimatedHeightWrapper,AnimatedWidthWrapper,ImgWrapper} from '@/components'
+    import {CommitStatusIcon} from '../../../../components'
+    import CommitComment from './CommitComment.vue'
+    import {authRequiredGet,authRequiredGitHubGraphqlApiQuery} from '@/network'
+    export default {
+        inject: ['owner','repo','pullRequestProvided'],
+        provided() {
+            timelineItemProvided: () => this.data
+        },
+        props: { 
+            data: {
+                type: Object,
+                required: true,
+            }
+        },
+        data() {
+            return {
+                loading: false,
+                project: {}, //adde_to_proj
+                lockReason: '', //locked
+                commit: {}, // referenced closed committed
+                transferredFrom: '', //transferred
+                blockedUser: {}, //user blocked
+                commitStatus: undefined, //committed
+                headRefName: '', //HeadRefDeletedEvent
+            }
+        },
+        computed: {
+            issueNumber() {
+                return this.$route.params.number
+            },
+            repoFullNameOfCommit() {
+                if(!this.commit.url) return ''
+                return this.commit.url.replace('https://api.github.com/repos/','').replace(/\/commits\/\S*/g,'')
+            },
+            referenceHighlightMessageOfCommit() {
+                if(!this.commit.commit) return ''
+                let message = this.commit.commit.message
+                let matchArr = message.match( /https:\/\/github.com\/\S+\/\S+\/(issues|pulls)\/[1-9][0-9]*/g)
+                if(matchArr) {
+                     matchArr.forEach(item => {
+                        let repoFullName = item.replace('https://github.com/','').replace(/\/(issues|pulls)\/[1-9][0-9]*/g,'')
+                        let commitNumber = item.replace(/https:\/\/github.com\/\S+\/\S+\/(issues|pulls)\//g,'#')
+                        message = message.replace(item,`<a href="/"><strong>${repoFullName}${commitNumber}</strong></a>`)
+                    })
+                }
+                message = message.replace(`#${this.issueNumber}`,`<strong>#${this.issueNumber}</strong>`)
+                return message
+            },
+            pullRequestTaskProgress() {
+                if(!this.pullRequest.bodyHTML) return undefined
+                let reg_allCheckboxInput = /<input type="checkbox" [\s\S]*?>/g
+                let reg_checkedCheckboxInput = /<input type="checkbox" [\s\S]*?checked[\s\S]*?>/g
+                let checkboxMatches = this.pullRequest.bodyHTML.match(reg_allCheckboxInput)
+                let checkedCheckboxMatches =this.pullRequest.bodyHTML.match(reg_checkedCheckboxInput)
+                if((!checkedCheckboxMatches) && (!checkboxMatches)) return undefined
+                return {
+                    checked: checkedCheckboxMatches ? checkedCheckboxMatches.length : 0,
+                    all: checkboxMatches ? checkboxMatches.length : 0,
+                }
+            },
+            isTheLatestCommit() {
+                return this.pullRequestProvided().statuses_url.replace(/https:\/\/api\.github\.com\/repos\/[\S\s]+?\/[\S\s]+?\/statuses\//i,'') === this.data.sha
+            }
+        },
+        watch: {
+            commit() {
+                
+            }
+        },
+        mounted() {
+            this.network_getAdditionalData()
+        },
+        methods: {
+            async network_getAdditionalData() {
+                 try{
+                    switch(this.data.event){
+                        case "added_to_project":
+                        case "moved_columns_in_project":
+                        case "removed_from_project":
+                            await this.getRelevantProject()
+                            break
+                        case "locked":
+                            if(!this.data.lock_reason) await this.getLockReason()
+                            break
+                        case "referenced":
+                        case "closed":
+                        case "committed":
+                            await this.getRelevantCommit()
+                           
+                            break
+                        case "transferred":
+                            await this.getTransferredFrom()
+                            break
+                        case "user_blocked":
+                            await this.getBlockedUser()
+                            break
+                        case "head_ref_deleted":
+                            await this.getHeadRefDeletedName(this.data.node_id)
+                            break
+                       /*  case "cross-referenced":
+                            if(this.data.source.issue.pull_request) {
+                                this.getRelevantPullRequest()
+                            }
+                            break */
+                        default:
+                    }
+                }catch(e) {
+                    console.log(e)
+                }finally {
+                    this.loading = false
+                }
+            },
+            async getRelevantCommit() {
+                let url = this.data.commit_url || this.data.url
+                if(!url) return
+                this.loading = true
+                let res = await authRequiredGet(
+                    url.replace('/git','')
+                )
+                this.commit = res.data
+                this.loading = false
+            },
+            /* async getRelevantPullRequest() {
+                this.loading = true
+                let graphql = `
+                    {
+                        node(id: "${this.data.source.issue.node_id}") {
+                            ... on PullRequest {
+                                id
+                                merged
+                                state
+                                bodyHTML
+                            }
+                        }
+                    }
+                `
+                let res = await authRequiredGitHubGraphqlApiQuery(graphql)
+                this.pullRequest = res.data.data.node
+                this.loading = false
+            }, */
+            async getRelevantProject() {
+                if(!this.data.project_card || !this.data.project_card.project_url ) return
+                
+                this.loading = true
+                let res = await authRequiredGet(
+                    this.data.project_card.project_url,
+                    {
+                        headers: {
+                            "Accept": "application/vnd.github.inertia-preview+json"
+                        }
+                    }
+                )
+                this.project = res.data
+                this.loading = false
+            },
+            async getTransferredFrom() {
+                if(!this.accessToken) return
+                this.loading = true
+                let res = await authRequiredGitHubGraphqlApiQuery(
+                    `
+                    {
+                        node(id: "${this.data.node_id}") {
+                            ... on TransferredEvent {
+                                fromRepository {
+                                    nameWithOwner
+                                }
+                            }
+                        }
+                    }
+                    `
+                )
+                try{
+                    this.transferredFrom = res.data.data.node.fromRepository.nameWithOwner
+                }catch(e) {
+                    this.handleGraphqlError(res)
+                }
+                
+                this.loading = false
+            },
+            async getBlockedUser() {
+                if(!this.accessToken) return
+                this.loading = true
+                
+                let res = await authRequiredGitHubGraphqlApiQuery(
+                    `
+                    {
+                        node(id: "${this.data.node_id}") {
+                            ... on UserBlockedEvent {
+                                subject{
+                                    login
+                                }
+                            }
+                        }
+                    }
+                    `
+                )
+                
+                try{
+                    this.blockedUser = res.data.data.node.subject
+                }catch(e) {
+                    this.handleGraphqlError(res)
+                }
+                this.loading = false
+            },
+            async getLockReason() {
+                if(!this.accessToken) return
+                this.loading = true
+                let res = await authRequiredGitHubGraphqlApiQuery(
+                    `
+                    {
+                        node(id: "${this.data.node_id}") {
+                            ... on LockedEvent {
+                                lockReason
+                            }
+                        }
+                    }
+                    `
+                )
+                
+                try{
+                    this.lockReason = res.data.data.node.lockReason
+                }catch(e) {
+                    this.handleGraphqlError(res)
+                }
+                this.loading = false
+            },
+            async getHeadRefDeletedName(nodeId) {
+                if(!this.accessToken) return
+                try{
+                    let res = await authRequiredGitHubGraphqlApiQuery(`
+                        {
+                            node(id: "${nodeId}") {
+                                ... on HeadRefDeletedEvent {
+                                   headRefName
+                                }
+                            }
+                        }
+                    `)
+                    
+                    try{
+                        this.headRefName = res.data.data.node.headRefName
+                    }catch(e) {
+                        this.handleGraphqlError(res)
+                    }
+                }catch(e) {
+                    console.log(e)
+                }
+            },
+           
+            parseEmoji(raw) {
+                return util_emoji.parse(raw)
+            }
+        },
+        components: {
+            Comment,
+            SimpleTimelineItem,
+            Label,
+            AnimatedHeightWrapper,
+            ImgWrapper,
+            Referenced,
+            Review,
+            CommitComment,
+            AnimatedWidthWrapper,
+            CommitStatusIcon,
+            CommentWrapper: styled.div``,
+            SourceIssue: styled.div``,
+            IssueTitle: styled.div``,
+            IssueState: styled.div``,
+            SourceCommit: styled.div``,
+            TaskProgress: styled.div``,
+            ProgressBar: styled.span``,
+            Commit: styled.div` `,
+            CommitMeta: styled.div` `,
+        }
+    }
+</script>
+
+<style scoped lang='scss'>
+@import 'node_modules/@primer/css/avatars/index.scss';
+.issue-state{
+    text-transform: Capitalize
+}
+.task-progress{
+    color: #586069;
+    text-decoration: none;
+    vertical-align: top;
+    .task-progress-counts{
+        display: inline-block;
+        margin-right: 6px;
+        margin-left: -2px;
+        font-size: 12px;
+    }
+    svg{
+        color: #ccc;
+    vertical-align: bottom;
+        margin-right: 5px;
+    }
+}
+
+.progress-bar {
+    display: inline-block;
+    overflow: hidden;
+    border-radius: 3px;
+    width: 80px;
+    height: 5px;
+    vertical-align: 2px;
+    background-color: #eee;
+    .progress {
+        display: block;
+        height: 100%;
+        background-color: #ccc;
+    }
+}
+
+.commit-meta{
+    width: 36px;
+    text-align: right;
+}
+
+.loading-animation{
+    animation: kf-loading 2s infinite;
+}
+
+@keyframes kf-loading {
+    0%{
+        opacity: 0;
+    }
+    50%{
+        opacity: 1;
+    }
+    100%{
+        opacity: 0;
+    }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/index.js b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/index.js
new file mode 100644
index 0000000..e6f01e1
--- /dev/null
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation(deprecated)/components/index.js
@@ -0,0 +1,15 @@
+import TimelineItem from './TimelineItem.vue'
+import Comment from './Comment.vue'
+import PullRequestBody from './PullRequestBody.vue'
+import HiddenItemLoading from './HiddenItemLoading.vue'
+import PullRequestCommentCreator from './PullRequestCommentCreator.vue'
+import ReviewCommentEditor from './ReviewCommentEditor.vue'
+import PullRequestBodyEditor from './PullRequestBodyEditor.vue'
+
+export {TimelineItem,
+        Comment,
+        HiddenItemLoading,
+        PullRequestCommentCreator,
+        ReviewCommentEditor,
+        PullRequestBodyEditor,
+        PullRequestBody}
\ No newline at end of file
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation/Conversation.vue b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation/Conversation.vue
index 1ead2a0..47b3db9 100644
--- a/src/pages/Repository/PullRequests/PullRequestDetail/Conversation/Conversation.vue
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/Conversation/Conversation.vue
@@ -1,20 +1,9 @@
 <template>
-    <CommonLoadingWrapper :loading="pullRequestProvided().loading || extraData.loading || timeline.loading || timeline.extraData.loading || reviewComments.loading" 
+    <CommonLoadingWrapper :loading="pullRequestProvided().loading || timeline.loading || timeline.extraData.loading || reviewComments.loading" 
     :position="pullRequestProvided().loading ? 'center' : 'corner'"
     class="flex-grow-1">
             <Header  class="px-3 pt-3">
-               <!--  <HeaderActions class="d-flex flex-justify-between flex-items-center">
-                   <State class="State mr-2 d-inline-flex flex-items-center" 
-                        :class="{'State--green':pullRequestProvided().data.state === 'open' && !pullRequestProvided().data.draft || !pullRequestProvided().data.node_id,'State--red':pullRequestProvided().data.state === 'closed'}" 
-                        style="text-transform:capitalize;border-radius:2em;padding: 5px 12px;min-width: 70px">
-                        <IssueIcon color="#fff" :issue="pullRequestProvided().data"></IssueIcon>
-                        &nbsp;{{pullRequestProvided().data.draft ? 'Draft' : pullRequestProvided().data.state}}
-                    </State>   
-
-                    <a href="javascript:return false" @click="scrollToBottom">Jump to bottom</a>
-                </HeaderActions>
- -->
-                <Skeleton v-if="!pullRequestProvided().data.title">
+                <Skeleton v-if="!pullRequestProvided().title">
                     <div class="d-flex flex-items-center mt-3 pb-3 border-bottom">
                         <SkeletonCircle :diameter="32" class="mr-2"></SkeletonCircle>
                         <SkeletonRectangle :height="14" class="flex-grow-1"></SkeletonRectangle>
@@ -25,33 +14,21 @@
                 </Skeleton>
 
                 <div v-else>
-                    <!-- <HeaderTitle class="title" style="font-weight: bold; margin-top:10px">
-                        {{pullRequestProvided().data.title}}
-                        <span class="text-normal text-gray">#{{pullRequestProvided().data.number}}</span>
-                    </HeaderTitle>
-
-                    <Branch class="branch">
-                        <span class="inner">
-                            <svg class="octicon octicon-git-branch" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 5c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v.3c-.02.52-.23.98-.63 1.38-.4.4-.86.61-1.38.63-.83.02-1.48.16-2 .45V4.72a1.993 1.993 0 00-1-3.72C.88 1 0 1.89 0 3a2 2 0 001 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2 1.11 0 2-.89 2-2 0-.53-.2-1-.53-1.36.09-.06.48-.41.59-.47.25-.11.56-.17.94-.17 1.05-.05 1.95-.45 2.75-1.25S8.95 7.77 9 6.73h-.02C9.59 6.37 10 5.73 10 5zM2 1.8c.66 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2C1.35 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2zm0 12.41c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm6-8c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg>
-                            {{pullRequestProvided().data.head && pullRequestProvided().data.head.label}}
-                        </span>    
-                    </Branch> -->
-
                     <AuthorAndLastEdit class="author-and-last-edit d-flex position-relative">
                         <div class="flex-auto">
                             <div class="avatar-parent-child float-left">
                                 <ImgWrapper>
-                                    <img class="avatar" :src="pullRequestProvided().data.user && pullRequestProvided().data.user.avatar_url" width="32" height="32" :alt="`@${pullRequestProvided().data.user && pullRequestProvided().data.user.login}`">
+                                    <img class="avatar" :src="pullRequestProvided().user && pullRequestProvided().user.avatar_url" width="32" height="32" :alt="`@${pullRequestProvided().user && pullRequestProvided().user.login}`">
                                 </ImgWrapper>
                             </div>
 
                             <div style="margin-left:42px;">
-                                <router-link :to="`/${pullRequestProvided().data.user && pullRequestProvided().data.user.login}`">
-                                    <strong>{{pullRequestProvided().data.user && pullRequestProvided().data.user.login}}</strong>
+                                <router-link :to="`/${pullRequestProvided().user && pullRequestProvided().user.login}`">
+                                    <strong>{{pullRequestProvided().user && pullRequestProvided().user.login}}</strong>
                                 </router-link>  
                                 opened this pull request
                                 <br>
-                                {{pullRequestProvided().data.created_at | getDateDiff}}
+                                {{pullRequestProvided().created_at | getDateDiff}}
                             </div>
                         </div> 
 
@@ -67,20 +44,19 @@
                         </Popover>
                     </AuthorAndLastEdit>
 
-                   
                 </div> 
 
             </Header>
         
-        <div v-if="pullRequestProvided().data.node_id">
+        <div v-if="pullRequestProvided().node_id">
 
             <Info  class="pt-3 px-3 bg-white " 
-                v-if="pullRequestProvided().data.labels && pullRequestProvided().data.labels.length !== 0"
+                v-if="pullRequestProvided().labels && pullRequestProvided().labels.length !== 0"
                     >
                 <!-- label --> 
-                <div class="pb-3" v-if="pullRequestProvided().data.labels && pullRequestProvided().data.labels.length !== 0">
+                <div class="pb-3" v-if="pullRequestProvided().labels && pullRequestProvided().labels.length !== 0">
                     <div class="my-1 f6">Labels</div>    
-                    <router-link to="/" v-for="item in pullRequestProvided().data.labels" :key="item.name">
+                    <router-link to="/" v-for="item in pullRequestProvided().labels" :key="item.name">
                         <Label  class="mr-1 mt-1"
                                 :style="{height:'18px',fontSize:'10px'}"
                                 :name="item.name"
@@ -125,22 +101,22 @@
             </transition-group>
 
 
-            <MergePull v-if="extraData.data.viewerCanUpdate && pullRequestProvided().data.merged == false && pullRequestProvided().data.state == 'open'" >
+            <MergePull v-if="extraData.data.viewerCanUpdate && pullRequestProvided().merged == false && pullRequestProvided().state == 'open'" >
                 <Header class="header" v-if="extraData.data.id">
                     Merge this pull request
                 </Header>
-                <div v-if="pullRequestProvided().data.mergeable_state == 'clean'" class="branch-action branch-action-with-icon">
+                <div v-if="pullRequestProvided().mergeable_state == 'clean'" class="branch-action branch-action-with-icon">
                     <svg class="octicon octicon-check branch-action-icon text-green mt-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>
                     <h3 class="branch-action-heading">This branch has no conflicts with the base branch.</h3>
                         Merging can be performed automatically.
                 </div>
-                <div v-else-if="pullRequestProvided().data.mergeable_state == 'dirty'" class="branch-action branch-action-with-icon">
+                <div v-else-if="pullRequestProvided().mergeable_state == 'dirty'" class="branch-action branch-action-with-icon">
                     <svg class="octicon octicon-x branch-action-icon mt-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"></path></svg>
                     <h3 class="branch-action-heading">This branch has conflicts that must be resolved.</h3>
                     Use the command line to resolve conflicts before continuing.
                 </div>
                 <div class="p-3 branch-action">
-                    <button :disabled="pullRequestProvided().data.mergeable_state != 'clean' || !pullRequestProvided().data.mergeable" class="btn btn-block js-mergeable-state-check">
+                    <button :disabled="pullRequestProvided().mergeable_state != 'clean' || !pullRequestProvided().mergeable" class="btn btn-block js-mergeable-state-check">
                         <svg class="octicon octicon-git-merge" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5 3.254V3.25v.005a.75.75 0 110-.005v.004zm.45 1.9a2.25 2.25 0 10-1.95.218v5.256a2.25 2.25 0 101.5 0V7.123A5.735 5.735 0 009.25 9h1.378a2.251 2.251 0 100-1.5H9.25a4.25 4.25 0 01-3.8-2.346zM12.75 9a.75.75 0 100-1.5.75.75 0 000 1.5zm-8.5 4.5a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
                         <span class="mergeable-state-loading"></span>
                         <span>Merge pull request</span>
@@ -169,7 +145,7 @@
                 @lock-status-changed.native="lockStatusChangedHook"
                 class="p-3 border-top"
                 v-if="extraData.data.viewerCanUpdate" 
-                :issue="pullRequestProvided().data" 
+                :issue="pullRequestProvided()" 
                 @lock-status-changed="changeLockStatusSuccessPostHandler"></LockIssueButton>
 
         </div>
@@ -177,24 +153,24 @@
         <transition name="fade" appear>
             <StickyTop v-if="scrollTop > 300 && !newCreatedTimelineItem" class="sticky-top px-3 py-2">
                 <StickyTopContent class="d-flex flex-items-center flex-justify-between">
-                    <State class="State mr-2 d-inline-flex flex-items-center flex-shrink-0" :class="{'State--green':pullRequestProvided().data.state === 'open','State--red':pullRequestProvided().data.state === 'closed'}" style="text-transform:capitalize; border-radius:2em">
-                        <IssueIcon color="#fff" :issue="pullRequestProvided().data" class="mr-1"></IssueIcon>
+                    <State class="State mr-2 d-inline-flex flex-items-center flex-shrink-0" :class="{'State--green':pullRequestProvided().state === 'open','State--red':pullRequestProvided().state === 'closed'}" style="text-transform:capitalize; border-radius:2em">
+                        <IssueIcon color="#fff" :issue="pullRequestProvided()" class="mr-1"></IssueIcon>
                         <span style="line-height:auto">
-                            {{pullRequestProvided().data.state}}
+                            {{pullRequestProvided().state}}
                         </span>    
                     </State>   
 
                     <div class="min-width-0">
                         <h1 class="d-flex text-bold f5">
                             <router-link to="/" class="css-truncate css-truncate-target link-gray-dark width-fit">
-                                {{pullRequestProvided().data.title}}
+                                {{pullRequestProvided().title}}
                             </router-link>
-                            <span class="text-gray-light pl-1 no-wrap text-normal">#{{pullRequestProvided().data.number}}</span>
+                            <span class="text-gray-light pl-1 no-wrap text-normal">#{{pullRequestProvided().number}}</span>
                         </h1>
                         <div class="meta text-gray-light css-truncate css-truncate-target d-block width-fit f6">
-                            <router-link to="/" class="text-bold link-gray">{{pullRequestProvided().data.user && pullRequestProvided().data.user.login}}</router-link>  opened this pull request
+                            <router-link to="/" class="text-bold link-gray">{{pullRequestProvided().user && pullRequestProvided().user.login}}</router-link>  opened this pull request
                             <span class="no-wrap">{{createdAt}}</span>
-                            · {{pullRequestProvided().data.comments}} {{pullRequestProvided().data.comments > 1 ? 'comments' : 'comment'}}
+                            · {{pullRequestProvided().comments}} {{pullRequestProvided().comments > 1 ? 'comments' : 'comment'}}
                         </div>
                     </div> 
 
@@ -221,6 +197,7 @@
     import {ScrollTopListenerMixin,RouteUpdateAwareMixin} from '@/mixins'
     import {TimelineItem,Comment,HiddenItemLoading,PullRequestCommentCreator,ProjectCard,PullRequestBody,PullRequestBodyEditor} from './components'
     import {IssueNotificationSettingPane,LockIssueButton} from '../../../components'
+    
     import {util_dateFormat} from '@/util'
     import {
         authRequiredGet,
@@ -238,7 +215,6 @@
             return {
                 timelineExtraDataProvided: () => this.timeline.extraData.data,
                 reviewCommentsProvided: () => this.reviewComments.data,
-                pullRequestProvided: () => Object.assign({},this.extraData.data,this.pullRequestProvided().data),
                 commentCreatedHook: () => this.commentCreatedHook,
                 timelineItemDeletedHook: () => this.timelineItemDeletedHook,
                 reviewCommentsReplyHostDeletedHook: () => this.network_getReviewCommentReplies
@@ -406,14 +382,14 @@
                 return this.$route.params.number
             },
             createdAt() {
-                let dateStr = util_dateFormat.getDateDiffOrDateFormatDependOnGap('on dd zzz yyyy', new Date(this.pullRequestProvided().data.created_at), 1000 * 60 * 60 * 24 * 365)
+                let dateStr = util_dateFormat.getDateDiffOrDateFormatDependOnGap('on dd zzz yyyy', new Date(this.pullRequestProvided().created_at), 1000 * 60 * 60 * 24 * 365)
                 return dateStr
             },
             updatedAt() {
-                return util_dateFormat.dateFormat('dd zzz yyyy', new Date(this.pullRequestProvided().data.updated_at))
+                return util_dateFormat.dateFormat('dd zzz yyyy', new Date(this.pullRequestProvided().updated_at))
             },
             viewerCannotComment() {
-                return this.pullRequestProvided().data.locked && !this.extraData.data.viewerCanUpdate
+                return this.pullRequestProvided().locked && !this.pullRequestProvided().viewerCanUpdate
             },
             timelineRemainedCount() {
                 let alreadyCount = 0
@@ -434,7 +410,7 @@
                 return this.timeline.graphqlCount.data - alreadyCount
             },
             editHistory() {
-                return `opened this pull request ${this.createdAt} ${this.extraData.data.userContentEdits && this.extraData.data.userContentEdits.totalCount > 0 ? ' • edited ' + util_dateFormat.getDateDiff(this.extraData.data.userContentEdits.nodes[0].editedAt) : ''}`
+                return `opened this pull request ${this.createdAt} ${this.pullRequestProvided().userContentEdits && this.pullRequestProvided().userContentEdits.totalCount > 0 ? ' • edited ' + util_dateFormat.getDateDiff(this.pullRequestProvided().userContentEdits.nodes[0].editedAt) : ''}`
             },
             newCreatedTimelines() {
                 let allNewCreatedTimelines = [
@@ -476,7 +452,7 @@
 
                 //this.mutation_pullRequestDetailResetState()
 
-                if(this.accessToken) await this.network_getPullRequestExtraData()
+                //if(this.accessToken) await this.network_getPullRequestExtraData()
 
                 //获取timeline(异步)
                 this.network_getTimeline()
@@ -488,7 +464,7 @@
 
                 if(this.accessToken) this.network_getTimelineGraphqlCount()
             },
-            async network_getPullRequestExtraData() {
+           /*  async network_getPullRequestExtraData() {
                 try {
                     this.extraData.loading = true
                     let res = await authRequiredGitHubGraphqlApiQuery(
@@ -504,7 +480,7 @@
                     )
 
                     try{
-                        this.extraData.data = res.data.data.repository.pullRequest
+                        this.pullRequestProvided() = res.data.data.repository.pullRequest
                     }catch(e) {
                         this.handleGraphqlError(res)
                     }
@@ -513,7 +489,7 @@
                 }finally{
                     this.extraData.loading = false
                 }
-            },
+            }, */
             async network_getTimeline() {
                 try{
                     this.timeline.loading = true
@@ -917,7 +893,7 @@
                 this.network_getTimelineExtraData([payload])
             },
             changeLockStatusSuccessPostHandler(payload) {
-                this.pullRequestProvided().data.locked = payload
+                this.pullRequestProvided().locked = payload
             },
             generateRouterMeta() {
                 return this.$route.path
diff --git a/src/pages/Repository/PullRequests/PullRequestDetail/PullRequestDetail.vue b/src/pages/Repository/PullRequests/PullRequestDetail/PullRequestDetail.vue
index 18dd5eb..54d9ade 100644
--- a/src/pages/Repository/PullRequests/PullRequestDetail/PullRequestDetail.vue
+++ b/src/pages/Repository/PullRequests/PullRequestDetail/PullRequestDetail.vue
@@ -1,55 +1,48 @@
 <template>
     <Container>
-        <Header class="px-3">
-            <AnimatedHeightWrapper :appear="false">
-                <transition-group name="fade-group">
-                    <Skeleton key="1" v-if="!data.id && loading" class="pb-3">
-                        <SkeletonRectangle :height="20" style="width:100%"></SkeletonRectangle>
-                        <SkeletonRectangle :height="20" style="width:80%" class="mt-3"></SkeletonRectangle>
-                    </Skeleton>
-                    <h1 v-else key="0" class="break-word f1 my-0 text-normal lh-condensed pb-2"> 
-                        {{data.title}}
-                        <span class="f1-light text-gray-light">#{{data.number}}</span>
-                    </h1>
-                </transition-group>
-            </AnimatedHeightWrapper>
-            
-            <TheMeta class="d-flex flex-items-center mb-3 gh-header-meta">
-                
-                    <State class="flex-shrink-0 mr-2 State pt-1 transition-all" :class="{'State--green':data.state == 'open' && !data.draft || loading,'State--red':data.state == 'closed' && !data.merged,'State--purple':data.merged}" style="text-transform: capitalize; border-radius: 2em; padding: 5px 12px; min-width: 70px;min-height:30px">
-                        <IssueIcon v-if="data.number" class="v-align-bottom" color="white" :issue="data" issueType="pullRequest"/>
-                        {{(data.merged && 'merged') || (data.draft && 'draft') || data.state || '   '}}
-                    </State>
 
-                    <Skeleton key="0" v-if="!data.number && loading" class="flex-grow-1">
-                        <SkeletonRectangle :height="14" style="width:100%"></SkeletonRectangle>   
-                        <SkeletonRectangle :height="14" style="width:40%" class="mt-2"></SkeletonRectangle>   
-                    </Skeleton>   
+        <IssueHeader :data="data" 
+                    class="px-3"
+                    :viewerCanUpdate="extraData.data.viewerCanUpdate" 
+                    :issueUpdateFunc="network_updateIssue" 
+                    type="pullRequest">
+                <State class="flex-shrink-0 mr-2 State pt-1 transition-all" :class="{'State--green':data.state == 'open' && !data.draft || loading,'State--red':data.state == 'closed' && !data.merged,'State--purple':data.merged}" style="text-transform: capitalize; border-radius: 2em; padding: 5px 12px; min-width: 70px;min-height:30px">
+                <IssueIcon v-if="data.number" class="v-align-middle" color="white" :issue="data" issueType="pullRequest"/>
+                <span class="v-align-middle">
+                    {{(data.merged && 'merged') || (data.draft && 'draft') || data.state || '   '}}
+                </span> 
+            </State>
+
+            <Skeleton key="0" v-if="!data.number && loading" class="flex-grow-1">
+                <SkeletonRectangle :height="14" style="width:100%"></SkeletonRectangle>   
+                <SkeletonRectangle :height="14" style="width:40%" class="mt-2"></SkeletonRectangle>   
+            </Skeleton>   
 
-                    <div key="1" v-else-if="data.number" class="flex-auto min-width-0">
-                        <router-link class="text-bold link-gray" v-if="data.user" :to="`/${data.user.login}`">{{data.user.login}}</router-link>
-                        {{(data.merged && 'merged') || 'wants to merge'}}
-                        {{data.commits}}
-                        {{data.commits > 1 ? 'commits' : 'commit'}}
-                        into 
-                        <span  class="commit-ref css-truncate">
-                            <router-link class="css-truncate-target" :to="`/${owner}/${repo}/tree/${data.base.ref}`">
-                                {{data.base.ref}}
-                            </router-link>
-                        </span>
-                        
-                        from
-                        <span class="commit-ref css-truncate">
-                            <router-link class="css-truncate-target" :to="`/${data.head.repo.full_name}/tree/${data.head.ref}`">
-                                <span v-if="data.head.repo.owner.login != owner">{{data.head.repo.owner.login}}:</span>
-                                {{data.head.ref}}
-                            </router-link>
-                        </span>
-                        
-                       <!--  <svg class="octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon text-gray" fill='currentColor' viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg> -->
-                    </div>
-            </TheMeta>
-        </Header>
+            <div key="1" v-else-if="data.number" class="flex-auto min-width-0">
+                <router-link class="text-bold link-gray" v-if="data.user" :to="`/${data.user.login}`">{{data.user.login}}</router-link>
+                {{(data.merged && 'merged') || 'wants to merge'}}
+                {{data.commits}}
+                {{data.commits > 1 ? 'commits' : 'commit'}}
+                into 
+                <span  class="commit-ref css-truncate">
+                    <router-link class="css-truncate-target" :to="`/${owner}/${repo}/tree/${data.base.ref}`">
+                        {{data.base.ref}}
+                    </router-link>
+                </span>
+                
+                from
+                <span class="commit-ref css-truncate">
+                    <router-link class="css-truncate-target" :to="`/${data.head.repo.full_name}/tree/${data.head.ref}`">
+                        <span v-if="data.head.repo.owner.login != owner">{{data.head.repo.owner.login}}:</span>
+                        {{data.head.ref}}
+                    </router-link>
+                </span>
+                
+                <!--  <svg class="octicon-clippy d-inline-block mx-1 js-clipboard-clippy-icon text-gray" fill='currentColor' viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg> -->
+            </div>
+        </IssueHeader>
+        
+        
         <PageTopTab :tabs="tabs" style="margin-top: -32px;"></PageTopTab>
         <keep-alive>
             <router-view @pull-request-updated.native="pullRequestUpdatedHook" @lock-status-changed.native="pullRequestUpdatedHook"></router-view>
@@ -61,9 +54,12 @@
 <script>
     import styled from 'vue-styled-components'
     import {PageTopTab,IssueIcon,SkeletonRectangle,SkeletonCircle,AnimatedHeightWrapper} from '@/components'
+    import {IssueHeader} from '../../Issues/IssueDetail/components'
     import {RouteUpdateAwareMixin} from '@/mixins'
     import {
         authRequiredGet,
+        authRequiredPatch,
+        authRequiredGitHubGraphqlApiQuery,
         cancelAndUpdateAxiosCancelTokenSource} from '@/network'
     import * as api from '@/network/api'
     import * as graphql from './graphql'
@@ -75,12 +71,16 @@
         provide() {
             return {
                 number:() => this.number,
-                pullRequestProvided: () => this.$data,
+                pullRequestProvided: () => Object.assign({},this.extraData.data,this.data),
             }
         },
         data() {
             return {
                 data: {},
+                extraData: {
+                    data: {},
+                    loading: false
+                },
                 loading: false,
                 isDynamicDocumentTitle: true,
                 newSubmittedReviews: [],
@@ -133,7 +133,11 @@
                     this.emitNotFoundEvent(this.$el)
                 }
             },
-            async network_getData() {
+            network_getData() {
+                this.network_getRestData()
+                if(this.accessToken) this.network_getGraphqlData()
+            },
+            async network_getRestData() {
                 this.mutation_pullRequestDetailResetState()
                 try{
                     //获取基本数据
@@ -159,6 +163,53 @@
                     this.loading = false
                 }
             },
+            async network_getGraphqlData() {
+                try {
+                    this.extraData.loading = true
+                    let res = await authRequiredGitHubGraphqlApiQuery(
+                        graphql.GRAPHQL_PR,
+                        {   
+                            variables: {
+                                name: this.repo,
+                                owner: this.owner,
+                                number: parseInt(this.number),
+                            },
+                            cancelToken:this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_pull_request_extra_data')
+                        }
+                    )
+
+                    try{
+                        this.extraData.data = res.data.data.repository.pullRequest
+                    }catch(e) {
+                        this.handleGraphqlError(res)
+                    }
+                } catch(e){
+                    this.handleError(e)
+                }finally{
+                    this.extraData.loading = false
+                }
+            },
+            async network_updateIssue(data) {
+                try {
+                    let url = api.API_ISSUE({
+                        repo: this.repo,
+                        owner: this.owner,
+                        number: this.number
+                    })
+
+                    let res = await authRequiredPatch(
+                        url,
+                        {
+                            ...data
+                        }
+                    )
+                    
+                    this.data = Object.assign(this.data,res.data)
+                } catch (e) {
+                    this.handleError(e)
+                    throw(e)
+                }
+            },
             pullRequestUpdatedHook(payload) {
                 this.data = payload.detail
             },
@@ -171,6 +222,7 @@
             }
         },
         components: {
+            IssueHeader,
             PageTopTab,
             IssueIcon,
             SkeletonRectangle,
diff --git a/src/pages/Repository/PullRequests/PullRequestsBrowser.vue b/src/pages/Repository/PullRequests/PullRequestsBrowser.vue
index c3d9205..c75cb7c 100644
--- a/src/pages/Repository/PullRequests/PullRequestsBrowser.vue
+++ b/src/pages/Repository/PullRequests/PullRequestsBrowser.vue
@@ -1,7 +1,7 @@
 <template>
     <IssuesBrowser ref="issueBrowser" type="pr" routerPathFragment="pulls" :routerLinkToNew="`/${owner}/${repo}/compare`">
         <template v-slot:emptyNotice>
-            <div class="blankslate blankslate-spacious blankslate-large border-0">
+            <div class="blankslate blankslate-spacious blankslate-large border-top">
                 <div class="container-md">
                     <svg height="40" class="octicon octicon-git-pull-request blankslate-icon" viewBox="0 0 24 24" version="1.1" width="40" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 3a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zM1.5 4.75a3.25 3.25 0 116.5 0 3.25 3.25 0 01-6.5 0zM4.75 17.5a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zM1.5 19.25a3.25 3.25 0 116.5 0 3.25 3.25 0 01-6.5 0zm17.75-1.75a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zM16 19.25a3.25 3.25 0 116.5 0 3.25 3.25 0 01-6.5 0z"></path><path fill-rule="evenodd" d="M4.75 7.25A.75.75 0 015.5 8v8A.75.75 0 014 16V8a.75.75 0 01.75-.75zm8.655-5.53a.75.75 0 010 1.06L12.185 4h4.065A3.75 3.75 0 0120 7.75v8.75a.75.75 0 01-1.5 0V7.75a2.25 2.25 0 00-2.25-2.25h-4.064l1.22 1.22a.75.75 0 01-1.061 1.06l-2.5-2.5a.75.75 0 010-1.06l2.5-2.5a.75.75 0 011.06 0z"></path></svg>
                     <h3>Welcome to pull requests!</h3>
@@ -10,7 +10,7 @@
             </div>
         </template>
         <template v-slot:noResultMatchedNotice>
-            <div class="blankslate blankslate-spacious blankslate-large border-0 rounded-top-0">
+            <div class="blankslate blankslate-spacious blankslate-large rounded-top-0">
                 <div class="container-md">
                     <svg height="40" class="octicon octicon-git-pull-request blankslate-icon" viewBox="0 0 24 24" version="1.1" width="40" aria-hidden="true"><path fill-rule="evenodd" d="M4.75 3a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zM1.5 4.75a3.25 3.25 0 116.5 0 3.25 3.25 0 01-6.5 0zM4.75 17.5a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zM1.5 19.25a3.25 3.25 0 116.5 0 3.25 3.25 0 01-6.5 0zm17.75-1.75a1.75 1.75 0 100 3.5 1.75 1.75 0 000-3.5zM16 19.25a3.25 3.25 0 116.5 0 3.25 3.25 0 01-6.5 0z"></path><path fill-rule="evenodd" d="M4.75 7.25A.75.75 0 015.5 8v8A.75.75 0 014 16V8a.75.75 0 01.75-.75zm8.655-5.53a.75.75 0 010 1.06L12.185 4h4.065A3.75 3.75 0 0120 7.75v8.75a.75.75 0 01-1.5 0V7.75a2.25 2.25 0 00-2.25-2.25h-4.064l1.22 1.22a.75.75 0 01-1.061 1.06l-2.5-2.5a.75.75 0 010-1.06l2.5-2.5a.75.75 0 011.06 0z"></path></svg>
                     <h3>No results matched your search.</h3>
diff --git a/src/pages/Repository/Releases/ReleaseCreator/ReleaseCreator.vue b/src/pages/Repository/Releases/ReleaseCreator/ReleaseCreator.vue
index 5ed4084..39f186e 100644
--- a/src/pages/Repository/Releases/ReleaseCreator/ReleaseCreator.vue
+++ b/src/pages/Repository/Releases/ReleaseCreator/ReleaseCreator.vue
@@ -25,8 +25,8 @@
                         @input="tagNameInputInputHandler" 
                         :disabled="inputDisabled"
                         type="text" placeholder="Tag version" autocomplete="off" v-model="releaseData.tag_name" class="form-control width-full mr-0">
-                <div v-if="tagIsExisted.loading || tagNameIsInvalid.loading || tagNameAutoCompleteResults.loading" class="position-absolute input-loading-icon-wrapper d-flex flex-justify-end flex-items-center">
-                    <LoadingIcon :size="22" class="mr-1"/>
+                <div v-if="tagNameIsInvalid.loading || tagNameAutoCompleteResults.loading" class="position-absolute input-loading-icon-wrapper d-flex flex-justify-end flex-items-center">
+                    <LoadingIcon :size="21" class="mr-1"/>
                 </div>
                 <div v-if="tagNameAutoCompleteResults.data.length > 0" class="position-absolute autocomplete-results">
                     <AutoCompleteItem @click="() => chooseTheAutoCompleteItem(item)" class="autocomplete-item" v-for="item in tagNameAutoCompleteResults.data" :key="item">{{item}}</AutoCompleteItem>
@@ -35,7 +35,13 @@
 
             <div v-if="!tagIsExisted.data">
                 <button :disabled="!releaseData.target_commitish || tagIsExisted.loading || loading" class="btn mt-2 width-full" @click="() => showModal('PickBranchOrRecentCommitModal')">
-                    <div class="d-flex flex-items-center">
+                    <div v-if="tagIsExisted.loading" class="text-normal text-gray f6 d-flex flex-items-center flex-justify-between" style="margin-right:-16px;margin-left:-4px">
+                        <span class="d-block">
+                            Checking if the tag exists
+                        </span>    
+                         <LoadingIcon :size="21" class="mr-1 d-block"/>
+                    </div>
+                    <div v-else class="d-flex flex-items-center">
                         <svg class="octicon octicon-git-branch mr-1" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>
                         <i>Target:</i>
                         <span class="flex-auto ml-1 text-left">{{releaseData.target_commitish}}</span>
@@ -64,7 +70,7 @@
 
             <textarea v-if="editorTab == 'Write'" 
                         rows="6" 
-                        :disabled="loading"
+                        :disabled="inputDisabled"
                         placeholder="Describe this release"
                         class="mt-3 d-block width-full form-control input-contrast" 
                         v-model="releaseData.body"
@@ -79,8 +85,8 @@
                 <ul v-if="assets.length > 0" class="uploaded-files">
                     <UploadFileItem v-for="item in assets.filter(i => !i.deleted)" :key="item.id" class="border-bottom p-2">
                         <div class="d-flex flex-items-center">
-                            <input :disabled="loadingDeleteAssets.some(i => i.id == item.id)" @change="(e) => network_updateReleaseAsset(item)" v-model="item.name" type="text" class="col-8 text-mono mr-2 form-control bg-white">
-                            <span class="col-2 f6 text-gray flex-shrink-0">
+                            <input :disabled="loadingDeleteAssets.some(i => i.id == item.id)" @change="(e) => network_updateReleaseAsset(item)" v-model="item.name" type="text" class="text-mono mr-2 form-control bg-white" style="width: 66.6%!important;">
+                            <span class="col-2 f6 text-gray flex-shrink-0 no-wrap">
                                 ({{item.size | fileSize}})
                             </span>
                             <div class="col-2 text-right pr-2 flex-shrink-0">
@@ -119,11 +125,11 @@
                 </span>
             </div>
 
-            <div>
-                <button @click="() => network_updateRelease(false)" :disabled="!publishable" class="btn btn-primary">
+            <div v-if="releaseData.draft || !releaseData.id">
+                <button @click="() => network_updateRelease(false)" :disabled="!publishable" class="btn btn-primary mb-2">
                     {{loadingCreatePublishedRelease ? 'Trying...' : 'Publish release'}}
                 </button>
-                <button :disabled="!draftCanBeSaved" @click="() => network_updateRelease(true)" class="btn js-save-draft" type="submit">
+                <button :disabled="!draftCanBeSaved" @click="() => network_updateRelease(true)" class="btn js-save-draft mb-2" type="submit">
                     <span class="js-save-draft-button-state" data-state="default">
                         <LoadingIcon class="v-align-text-bottom" v-if="loadingSaveDraft" :size="16"></LoadingIcon>
                         {{(loadingSaveDraft || loadingUpdateAsset || loadingUpdateAsset) ? 'Saving release...' : (saved ? 'Saved!' : 'Save draft')}}
@@ -131,6 +137,12 @@
                 </button>
             </div>
 
+            <div v-else>
+                <button @click="() => network_updateRelease(false)" :disabled="!publishable" class="btn btn-primary">
+                    {{loadingCreatePublishedRelease ? 'Trying...' : 'Update release'}}
+                </button>
+            </div>
+
         </Editor>
 
          <Modal ref="PickBranchOrRecentCommitModal" :loading="modalData.branches.loading || modalData.recentCommits.loading" title="Pick a branch or recent commit" :modalStyle="{height:'80vh'}" @show="network_getModalData">
@@ -338,6 +350,8 @@
 
                     this.releaseData = Object.assign(this.releaseData,res.data)
 
+                    this.network_checkIfTagNameIsExisted()
+
                     await this.network_getDraftReleaseAssets()
                 } catch (e) {
                     this.handleError(e)
@@ -542,6 +556,14 @@
                     )
                     this.releaseData = res.data
                     if(isDraft) this.saved = true
+                    //if(isDraft && !this.$route.params.id) this.$router.replace(`/${this.owner}/${this.repo}/releases/edit/${res.data.id}`)
+                    if(isDraft && !this.$route.params.id){
+                        window.addEventListener(
+                            'beforeunload', 
+                            this.windowBeforeUnloadHandler,
+                            false
+                        );
+                    }
 
                 } catch (error) {
                     this.handleError(e)
@@ -669,7 +691,7 @@
                     if(draft) this.loadingSaveDraft = false
                     if(!draft) {
                         this.loadingCreatePublishedRelease = false
-                        this.$router.push(`/${this.owner}/${this.repo}/releases?new=${this.releaseData.id}`)
+                        location.href = `${location.protocol}//${location.host}/${this.owner}/${this.repo}/releases?new=${this.releaseData.id}`
                     }
                 }
             },
@@ -713,14 +735,26 @@
                 this.$refs.fileInput.value = ""
                 this.$refs.fileInput.type = "file"
             },
+            windowBeforeUnloadHandler(e) {
+                e.returnValue = ' '
+            },
+        },
+        beforeRouteLeave(to,from,next) {
+            if(this.releaseData.id && !this.$route.params.id) {
+                if(confirm('正在编辑，你确定要离开吗?')) {
+                    window.removeEventListener('beforeunload',this.windowBeforeUnloadHandler)
+                    next()
+                }
+                return
+            }
+            window.removeEventListener('beforeunload',this.windowBeforeUnloadHandler)
+            next()
         },
         watch: {
             defaultBranch(newOne) {
                 if(newOne && !this.releaseData.target_commitish) this.releaseData.target_commitish = newOne
             },
-            "releaseData.tag_name": function() {
-                this.network_checkIfTagNameIsExisted()
-            }
+
         },
         components: {
             PaddingPageTopTab,
@@ -798,7 +832,6 @@
 
 .select-menu-text-filter{
     background-color: #f6f8fa;
-    border-bottom: 1px solid #dfe2e5;
     input {
         display: block;
         width: 100%;
diff --git a/src/pages/Repository/Releases/ReleaseDetail.vue b/src/pages/Repository/Releases/ReleaseDetail.vue
index 5c6c2c8..512a8de 100644
--- a/src/pages/Repository/Releases/ReleaseDetail.vue
+++ b/src/pages/Repository/Releases/ReleaseDetail.vue
@@ -3,7 +3,7 @@
         <transition name="fade" appear>
             <PaddingPageTopTab class="subnav" style="margin-right:-16px;margin-left:-16px;" :style="{marginBottom: data.draft ? '0px' :'16px'}" :tabs="tabs"></PaddingPageTopTab>
         </transition>  
-        <div v-if="viewerPermission().data == 'ADMIN'" class="text-right mb-3">
+        <div v-if="viewerPermission().data == 'ADMIN' && data.id" class="text-right mb-3">
             <span class="BtnGroup">
                 <router-link :to="`/${owner}/${repo}/releases/edit/${data.id}`" class="btn BtnGroup-item">Edit</router-link>
                 <button @click="() => showModal('deleteDraftModal')" class="btn btn-danger BtnGroup-item">
@@ -124,7 +124,7 @@
             </div>
             <div class="Box-body overflow-auto">
                 <button :disabled="loadingDeleteDraft" class="btn btn-danger btn-block" @click="network_deleteDraft">
-                    {{loadingDeleteDraft ? 'Trying...' : 'Delete this draft'}}
+                    {{loadingDeleteDraft ? 'Trying...' : `Delete this ${data.draft ? 'draft' : 'release'}`}}
                 </button>
             </div>
         </Modal>
@@ -439,6 +439,10 @@
 
                     this.closeModal()
 
+                    if(this.data.draft) this.topNoticeShow('repository', `The draft was discarded`,'normal',true)
+                    
+                    if(!this.data.draft) this.topNoticeShow('repository', `Your release was removed`,'normal',true)
+
                     this.$router.push(`/${this.owner}/${this.repo}/releases?deleted=${this.data.id}`)
 
                 } catch (e) {
diff --git a/src/pages/Repository/Releases/ReleaseListItem.vue b/src/pages/Repository/Releases/ReleaseListItem.vue
index 6b78462..fa6c1f3 100644
--- a/src/pages/Repository/Releases/ReleaseListItem.vue
+++ b/src/pages/Repository/Releases/ReleaseListItem.vue
@@ -8,7 +8,7 @@
                 <span v-else-if="release.prerelease" class="flex-shrink-0 ml-2 mt-2 Label Label--outline Label--prerelease float-right px-2" style="border-radius:2em">
                     Pre-release
                 </span>
-                <span v-if="!release.draft && isLatestRelease" class="flex-shrink-0 ml-2 mt-2 Label Label--outline Label--outline-green float-right px-2" style="border-radius:2em">
+                <span v-if="!release.draft && isLatest" class="flex-shrink-0 ml-2 mt-2 Label Label--outline Label--outline-green float-right px-2" style="border-radius:2em">
                     Latest release
                 </span>
                 <router-link :to="to">
@@ -19,25 +19,25 @@
                 <TheMeta class="d-flex flex-items-center flex-justify-between">
                     <div>
                         <router-link class="muted-link mr-1" :to="resourcePath">
-                            <svg class="octicon octicon-tag v-align-text-bottom" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg>
+                            <svg class="octicon octicon-tag v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
                             {{release.tag_name}}
                         </router-link> 
                         <transition appear name="fade"> 
-                            <router-link class="muted-link d-inline-block" v-if="commitSha" :to="extraDataHolder.tag.target.commitResourcePath">
+                            <router-link class="muted-link d-inline-block" v-if="commitaAbbreviatedOid" :to="extraDataHolder.tag.target.target.resourcePath">
                                 <svg class="octicon octicon-git-commit v-align-text-bottom" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41 1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86 0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22 0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0 2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"></path></svg>
-                                {{commitSha.substring(0,7)}}
+                                {{commitaAbbreviatedOid}}
                             </router-link> 
                         </transition>
                     </div>
-                    <div class="d-flex flex-items-center">
+                    <div v-if="release.tag_name" class="d-flex flex-items-center">
                         <button class="btn btn-sm select-menu-button text-md-left" @click="() => showModal('chooseTagToCompareModal')">
                             Compare
                         </button>
-                        <transition appear name="fade"> 
+                        <!-- <transition appear name="fade"> 
                             <button class="verify-state-badge position-relative ml-2 px-2" v-if="commitIsVerified" @click="() => showModal('verifiedNoticeModal')">
                                 Verified
                             </button>
-                        </transition>
+                        </transition> -->
                     </div>
                     
                 </TheMeta>
@@ -67,7 +67,7 @@
 
         </Body>
 
-        <Assets class="border-top pt-3 mt-4 mb-2">
+        <Assets class="border-top pt-3 mt-4 mb-2" v-if="release.zipball_url || release.tarball_url || release.assets.length > 0">
             <div class="d-flex flex-items-center mb-2" @click="triggerAssetsStretch">
                 <span class="mr-2">
                     <svg v-if="assetsStretched" class="octicon octicon-triangle-down v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"></path></svg>
@@ -76,52 +76,50 @@
                 <span class="text-bold">Assets</span>
                 <span class="ml-1 Counter">{{assetListLength}}</span>
             </div>
-            <AnimatedHeightWrapper :stretch="assetsStretched"> 
-                <div class="Box Box--condensed">
+                <div v-if="assetsStretched" class="Box Box--condensed">
                     <AssetItem v-for="item in release.assets" :key="item.id" class="d-flex flex-justify-between flex-items-center py-2 Box-body px-2">
-                        <a :href="item.browser_download_url">
-                            <svg class="octicon octicon-package flex-shrink-0 text-gray" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1 4.27v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97V4.27c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 00-.5 0L1.75 3.3c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59V5l6 1.61v6.75zM2 4l2.5-.67L11 5.06l-2.5.67L2 4zm13 7.77l-6 1.59V6.61l2-.55V8.5l2-.53V5.53L15 5v6.77zm-2-7.24L6.5 2.8l2-.53L15 4l-2 .53z"></path></svg>
+                        <a class="d-flex flex-items-center" :href="item.browser_download_url">
+                            <svg class="octicon octicon-package flex-shrink-0 text-gray" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg>
                             <span class="pl-2 flex-auto min-width-0 text-bold">{{item.name}}</span>
                         </a> 
                         <small class="pl-2 text-gray flex-shrink-0">{{item.size | fileSize}}</small>
                     </AssetItem>
 
                     <AssetItem v-if="release.zipball_url" class="d-flex flex-justify-between flex-items-center py-2 Box-body px-2">
-                        <a :href="release.zipball_url">
-                            <svg class="octicon octicon-file-zip flex-shrink-0 text-gray" width="16" height="16" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M8.5 1H1a1 1 0 00-1 1v12a1 1 0 001 1h10a1 1 0 001-1V4.5L8.5 1zM11 14H1V2h3v1h1V2h3l3 3v9zM5 4V3h1v1H5zM4 4h1v1H4V4zm1 2V5h1v1H5zM4 6h1v1H4V6zm1 2V7h1v1H5zM4 9.28A2 2 0 003 11v1h4v-1a2 2 0 00-2-2V8H4v1.28zM6 10v1H4v-1h2z"></path></svg>
+                        <a class="d-flex flex-items-center" :href="release.zipball_url">
+                            <svg class="octicon octicon-file-zip flex-shrink-0 text-gray" width="16" height="16" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M3.5 1.75a.25.25 0 01.25-.25h3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h2.086a.25.25 0 01.177.073l2.914 2.914a.25.25 0 01.073.177v8.586a.25.25 0 01-.25.25h-.5a.75.75 0 000 1.5h.5A1.75 1.75 0 0014 13.25V4.664c0-.464-.184-.909-.513-1.237L10.573.513A1.75 1.75 0 009.336 0H3.75A1.75 1.75 0 002 1.75v11.5c0 .649.353 1.214.874 1.515a.75.75 0 10.752-1.298.25.25 0 01-.126-.217V1.75zM8.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM6 5.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5A.75.75 0 016 5.25zm2 1.5A.75.75 0 018.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 6.75zm-1.25.75a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM8 9.75A.75.75 0 018.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 9.75zm-.75.75a1.75 1.75 0 00-1.75 1.75v3c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-3a1.75 1.75 0 00-1.75-1.75h-.5zM7 12.25a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v2.25H7v-2.25z"></path></svg>
                             <span class="pl-2 flex-auto min-width-0 text-bold">Source code</span>&nbsp;(zip)
                         </a> 
                     </AssetItem>
 
                     <AssetItem v-if="release.tarball_url" class="d-flex flex-justify-between flex-items-center py-2 Box-body px-2">
-                        <a :href="release.tarball_url">
-                            <svg class="octicon octicon-file-zip flex-shrink-0 text-gray" width="16" height="16" viewBox="0 0 12 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M8.5 1H1a1 1 0 00-1 1v12a1 1 0 001 1h10a1 1 0 001-1V4.5L8.5 1zM11 14H1V2h3v1h1V2h3l3 3v9zM5 4V3h1v1H5zM4 4h1v1H4V4zm1 2V5h1v1H5zM4 6h1v1H4V6zm1 2V7h1v1H5zM4 9.28A2 2 0 003 11v1h4v-1a2 2 0 00-2-2V8H4v1.28zM6 10v1H4v-1h2z"></path></svg>
+                        <a class="d-flex flex-items-center" :href="release.tarball_url">
+                            <svg class="octicon octicon-file-zip flex-shrink-0 text-gray" width="16" height="16" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M3.5 1.75a.25.25 0 01.25-.25h3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h2.086a.25.25 0 01.177.073l2.914 2.914a.25.25 0 01.073.177v8.586a.25.25 0 01-.25.25h-.5a.75.75 0 000 1.5h.5A1.75 1.75 0 0014 13.25V4.664c0-.464-.184-.909-.513-1.237L10.573.513A1.75 1.75 0 009.336 0H3.75A1.75 1.75 0 002 1.75v11.5c0 .649.353 1.214.874 1.515a.75.75 0 10.752-1.298.25.25 0 01-.126-.217V1.75zM8.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM6 5.25a.75.75 0 01.75-.75h.5a.75.75 0 010 1.5h-.5A.75.75 0 016 5.25zm2 1.5A.75.75 0 018.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 6.75zm-1.25.75a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM8 9.75A.75.75 0 018.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 018 9.75zm-.75.75a1.75 1.75 0 00-1.75 1.75v3c0 .414.336.75.75.75h2.5a.75.75 0 00.75-.75v-3a1.75 1.75 0 00-1.75-1.75h-.5zM7 12.25a.25.25 0 01.25-.25h.5a.25.25 0 01.25.25v2.25H7v-2.25z"></path></svg>
                             <span class="pl-2 flex-auto min-width-0 text-bold">Source code</span>&nbsp;(tar.gz)
                         </a> 
                     </AssetItem>
                 </div>
-            </AnimatedHeightWrapper>
         </Assets>
 
-        <Modal v-if="commitIsVerified" ref="verifiedNoticeModal" title="Verified commit">
+        <!-- <Modal v-if="commitIsVerified" ref="verifiedNoticeModal" title="Verified commit">
             <div class="p-3 d-flex" style="background-color: #f6f8fa;">
                 <div>
                     <svg height="32" class="octicon octicon-verified mr-2" style="color: #28a745;" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M15.67 7.066l-1.08-1.34a1.5 1.5 0 01-.309-.77l-.19-1.698a1.51 1.51 0 00-1.329-1.33l-1.699-.19c-.3-.03-.56-.159-.78-.329L8.945.33a1.504 1.504 0 00-1.878 0l-1.34 1.08a1.5 1.5 0 01-.77.31l-1.698.19c-.7.08-1.25.63-1.33 1.329l-.19 1.699c-.03.3-.159.56-.329.78L.33 7.055a1.504 1.504 0 000 1.878l1.08 1.34c.17.22.28.48.31.77l.19 1.698c.08.7.63 1.25 1.329 1.33l1.699.19c.3.03.56.159.78.329l1.339 1.08c.55.439 1.329.439 1.878 0l1.34-1.08c.22-.17.48-.28.77-.31l1.698-.19c.7-.08 1.25-.63 1.33-1.329l.19-1.699c.03-.3.159-.56.329-.78l1.08-1.339a1.504 1.504 0 000-1.878zM6.5 12.01L3 8.51l1.5-1.5 2 2 5-5L13 5.56l-6.5 6.45z"></path></svg>
                 </div>
                 <div>
                     This commit was signed with a <strong class="signed-commit-verified-label">verified signature</strong>
-                    <span v-if="extraDataHolder.tag.target.signature.wasSignedByGitHub">
+                    <span v-if="extraDataHolder.tag.target.target.signature.wasSignedByGitHub">
                         using GitHub’s key.
                     </span>
                 </div>
             </div>
-            <div class="p-3" v-if="extraDataHolder.tag.target.signature.keyId">
-                <span class="d-block">GPG key ID: <span class="text-gray">{{extraDataHolder.tag.target.signature.keyId}}</span></span>
+            <div class="p-3" v-if="extraDataHolder.tag.target.target.signature.keyId">
+                <span class="d-block">GPG key ID: <span class="text-gray">{{extraDataHolder.tag.target.target.signature.keyId}}</span></span>
                 <HyperlinkWrapper>
                     <a href="https://help.github.com/articles/signing-commits-with-gpg/">Learn about signing commits</a>
                 </HyperlinkWrapper>
             </div>
-        </Modal>
+        </Modal> -->
 
         <Modal ref="chooseTagToCompareModal" :title="`Choose a tag to compare with ${name}`" :modalStyle="{height: '80vh',position:'relative',display:'flex'}" @show="network_getAvailableTagsToCompare">
             <div style="padding:10px" class="bg-white border-bottom">
@@ -132,8 +130,8 @@
             </div> 
             <div style="overflowY:auto" class="flex-grow-1">
                 <transition-group name="fade-group" appear>
-                    <router-link class="d-block" v-for="item in filteredTags" :key="item" :to="`/${owner}/${repo}/compare/${item}...${name}`">
-                        <SelectMenuItem :selected="item == name">
+                    <router-link class="d-block" v-for="item in filteredTags" :key="item" :to="`/${owner}/${repo}/compare/${item}...${release.tag_name}`">
+                        <SelectMenuItem :selected="item == release.tag_name">
                             {{item}}
                         </SelectMenuItem>
                     </router-link>
@@ -142,7 +140,7 @@
                     </div>
                 </transition-group>
             </div>
-            <footer class="SelectMenu-footer bg-white">
+            <footer class="SelectMenu-footer bg-white" style="border-top: none">
                 <router-link :to="`/${owner}/${repo}/tags`">View all tags</router-link>
             </footer>
         </Modal>
@@ -163,7 +161,7 @@
                 type: Object,
                 required: true
             },
-            isLatestRelease: {
+            isLatest: {
                 type: Boolean,
                 default: false
             },
@@ -202,10 +200,10 @@
             extraDataHolder() {
                 return this.extraDataProvided().filter(i => i.id == this.release.node_id)[0]
             },
-            commitSha() {
+            commitaAbbreviatedOid() {
                 if(!this.extraDataHolder) return
                 try{
-                    return this.extraDataHolder.tag.target.oid
+                    return this.extraDataHolder.tag.target.target.abbreviatedOid
                 }catch(e) {
                     console.log(e)
                 }
@@ -213,15 +211,15 @@
             resourcePath() {
                 return `/${this.owner}/${this.repo}/tree/${this.release.tag_name}`
             },
-            commitIsVerified() {
+           /*  commitIsVerified() {
                 if(!this.extraDataHolder) return
                 if(!this.extraDataHolder.tag) return
                 try{
-                    return this.extraDataHolder.tag.target.signature.isValid
+                    return this.extraDataHolder.tag.target.target.signature.isValid
                 }catch(e) {
                     console.log(e)
                 }
-            },
+            }, */
             filteredTags() {
                 return this.tagsToCompare.data.filter( i => {
                     return i.toLowerCase().indexOf(this.tagsToCompare.searchQuery.toLowerCase()) > -1
@@ -232,10 +230,11 @@
                 if(this.release.zipball_url) ret += 1
                 if(this.release.tarball_url) ret += 1
                 return ret
-            }
+            },
         },
         created() {
             this.network_getData()
+            if(this.$route.name == 'repositoryReleaseDetail') this.assetsStretched = true
         },
         methods: {
             async network_getData() {
diff --git a/src/pages/Repository/Releases/Releases.vue b/src/pages/Repository/Releases/Releases.vue
index 65e32f1..72652fa 100644
--- a/src/pages/Repository/Releases/Releases.vue
+++ b/src/pages/Repository/Releases/Releases.vue
@@ -4,7 +4,7 @@
             <PaddingPageTopTab class="subnav" style="margin-right:-16px;margin-left:-16px;" :tabs="tabs"></PaddingPageTopTab>
         </transition>  
         <transition-group name="fade-group" appear>
-            <ReleaseListItem v-for="(item,index) in data" :key="item.node_id" :release="item" :isLatestRelease="(!pageInfo.prev) && index == 0" class="border-top"></ReleaseListItem>
+            <ReleaseListItem v-for="item in data" :key="item.node_id" :release="item" class="border-top" :isLatest="latestRelease.data.id == item.id"></ReleaseListItem>
         </transition-group>
         <SimplePaginationRest v-if="firstLoadedFlag && (pageInfo.prev || pageInfo.next)" :loading="loading" :pageInfo="pageInfo"></SimplePaginationRest>
 
@@ -40,7 +40,7 @@
         mixins: [RouteUpdateAwareMixin],
         provide() {
             return {
-                extraDataProvided: () => this.extraData.data
+                extraDataProvided: () => this.extraData.data,
             }
         },
         data() {
@@ -54,6 +54,10 @@
                 extraData: {
                     data: [],
                     loading: false
+                },
+                latestRelease: {
+                    data: {},
+                    loading: false
                 }
             }
         },
@@ -82,9 +86,13 @@
             },
             documentTitle() {
                 return `Releases · ${this.owner}/${this.repo}`
+            },
+            repoFullName() {
+                return `${this.owner}/${this.repo}`
             }
         },
         async created() {
+            this.network_getLatestRelease()
             this.network_getData()
         },
         methods: {
@@ -147,9 +155,37 @@
                     this.extraData.loading = false
                 }
             },
+            async network_getLatestRelease() {
+                try {
+                    this.latestRelease.loading = true
+                    let url = api.API_REPOSITORY_LATESTRELEASE({
+                        repo: this.repo,
+                        owner: this.owner
+                    })
+
+                    let res = await authRequiredGet(
+                        url,
+                        {
+                            cancelToken: this.cancelAndUpdateAxiosCancelTokenSource(this.$options.name + ' get_latest_release')
+                        }
+                    )
+
+                    this.latestRelease.data = res.data || {}
+                } catch (e) {
+                    this.handleError()
+                } finally {
+                    this.latestRelease.loading = false
+                }
+            },
            /*  scrollToTop() {
                 if(window) window.scrollTo(0,0)
             } */
+            
+        },
+        watch: {
+            repoFullName() {
+                this.network_getLatestRelease()
+            }
         },
        
         components: {
diff --git a/src/pages/Repository/Releases/graphql.js b/src/pages/Repository/Releases/graphql.js
index 140b55a..aaa7678 100644
--- a/src/pages/Repository/Releases/graphql.js
+++ b/src/pages/Repository/Releases/graphql.js
@@ -4,27 +4,21 @@ export const GRAPHQL_RELEASES = payload => {
         graphql = `
             ${graphql}
             release${index}:node(id: "${item.node_id}") {
-                ... on Release {
-                id
-                tag {
-                        target {
-                            commitResourcePath
-                            oid
-                            ... on Commit {
-                                id
-                                abbreviatedOid
-                                signature {
-                                    isValid
-                                    state
-                                    wasSignedByGitHub
-                                    ... on GpgSignature {
-                                      keyId
-                                    }
-                                }
-                            }
+              ... on Release {
+              id
+              tag {
+                target {
+                    ... on Tag {
+                      target {
+                        ... on Commit {
+                          abbreviatedOid
+                          resourcePath
                         }
+                      }
                     }
+                  }
                 }
+              }
             }
         `.trim()
     })
diff --git a/src/pages/Repository/Tags/Tags.vue b/src/pages/Repository/Tags/Tags.vue
index d4ee3ed..9df18a2 100644
--- a/src/pages/Repository/Tags/Tags.vue
+++ b/src/pages/Repository/Tags/Tags.vue
@@ -7,7 +7,7 @@
         <div class="Box" v-if="firstLoadedFlag && data.length > 0">
             <div class="Box-header">
                 <h3 class="Box-title">
-                    <svg class="octicon octicon-tag" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.73 1.73C7.26 1.26 6.62 1 5.96 1H3.5C2.13 1 1 2.13 1 3.5v2.47c0 .66.27 1.3.73 1.77l6.06 6.06c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 000-1.41L7.73 1.73zM2.38 7.09c-.31-.3-.47-.7-.47-1.13V3.5c0-.88.72-1.59 1.59-1.59h2.47c.42 0 .83.16 1.13.47l6.14 6.13-4.73 4.73-6.13-6.15zM3.01 3h2v2H3V3h.01z"></path></svg>
+                    <svg class="octicon octicon-tag v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
                     Tags
                 </h3>
             </div>