fix links in statuses

routes/_components/AccountProfile.html

@@ -6,7 +6,9 @@
         <img src="{{profile.avatar}}" aria-hidden="true">
       </div>
       <div class="account-profile-name">
-        {{profile.display_name}}
+        <a rel="noopener" target="_blank" href="{{profile.url}}">
+          {{profile.display_name}}
+        </a>
       </div>
       <div class="account-profile-username">
         {{'@' + profile.acct}}
@@ -127,6 +129,14 @@
     text-overflow: ellipsis;
     min-width: 0;
   }
+  .account-profile-name a {
+    color: var(--body-text-color);
+    text-decoration: none;
+  }
+  .account-profile-name a:hover {
+    color: var(--body-text-color);
+    text-decoration: underline;
+  }
   .account-profile-note {
     grid-area: note;
     padding: 10px 0;

routes/_components/status/Status.html

@@ -7,22 +7,37 @@
         <use xlink:href="#fa-retweet" />
       </svg>
       <span>
-        <a href="/accounts/{{status.account.id}}">
+        {{#if timelineType === 'account' && timelineValue === status.account.id}}
-          {{status.account.username}}
+          <a rel="noopener" target="_blank"  href="{{status.account.url}}">{{status.account.username}}</a>
-        </a> boosted
+        {{else}}
+          <a href="/accounts/{{status.account.id}}">{{status.account.username}}</a>
+        {{/if}}
+        boosted
       </span>
     </div>
   {{/if}}
   <div class="status-author">
-    <a class="status-author-name" href="/accounts/{{originalAccount.id}}">
+    {{#if timelineType === 'account' && timelineValue === originalAccount.id}}
-      {{originalAccount.display_name || originalAccount.username}}
+      <a class="status-author-name" rel="noopener" target="_blank" href="{{originalAccount.url}}">
-    </a>
+        {{originalAccount.display_name || originalAccount.username}}
+      </a>
+    {{else}}
+      <a class="status-author-name" href="/accounts/{{originalAccount.id}}">
+        {{originalAccount.display_name || originalAccount.username}}
+      </a>
+    {{/if}}
     <span class="status-author-handle">
       {{'@' + originalAccount.acct}}
     </span>
-    <a class="status-author-date" href="/statuses/{{originalStatus.id}}">
+    {{#if timelineType === 'status'}}
-      <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
+      <a class="status-author-date" rel="noopener" target="_blank" href="{{originalStatus.url}}">
-    </a>
+        <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
+      </a>
+    {{else}}
+      <a class="status-author-date" href="/statuses/{{originalStatus.id}}">
+        <time datetime={{createdAtDate}} title="{{relativeDate}}">{{relativeDate}}</time>
+      </a>
+    {{/if}}
   </div>
   <Avatar account={{originalAccount}} className="status-sidebar"/>
   {{#if originalStatus.spoiler_text}}

routes/_components/timeline/StatusListItem.html

@@ -1,4 +1,9 @@
-<Status status="{{virtualProps}}" index="{{virtualIndex}}" length="{{virtualLength}}" on:recalculateHeight />
+<Status status="{{virtualProps.status}}"
+        timelineType="{{virtualProps.timelineType}}"
+        timelineValue="{{virtualProps.timelineValue}}"
+        index="{{virtualIndex}}"
+        length="{{virtualLength}}"
+        on:recalculateHeight />
 <script>
   import Status from '../status/Status.html'
 

routes/_components/timeline/Timeline.html

@@ -33,7 +33,11 @@
       LoadingFooter: LoadingFooter
     }),
     computed: {
-      makeProps: ($currentInstance) => (statusId) => database.getStatus($currentInstance, statusId),
+      makeProps: ($currentInstance, timelineType, timelineValue) => async (statusId) => ({
+        timelineType: timelineType,
+        timelineValue: timelineValue,
+        status: await database.getStatus($currentInstance, statusId)
+      }),
       label: (timeline, $currentInstance, timelineType, timelineValue) => {
         if (timelines[timeline]) {
           return `${timelines[timeline].label} timeline for ${$currentInstance}`