Replace svg imports with static paths

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Changed
+
+- Don't revoke auth token when handling timeline loading error.
+
 ## [1.18.0] - 2023-03-21
 
 ### Added

src/components/CryptoAddress.vue

@@ -2,7 +2,7 @@
   <div class="crypto-address">
     <input :value="address" readonly>
     <button class="copy-btn" title="Copy address" @click="copyAddress()">
-      <img :src="require('@/assets/forkawesome/files-o.svg')">
+      <img src="@/assets/forkawesome/files-o.svg">
     </button>
   </div>
 </template>
@@ -50,6 +50,8 @@ function copyAddress() {
     img {
       filter: $link-colorizer;
       height: 100%;
+      object-fit: contain;
+      width: 100%;
     }
 
     &:hover img {

src/components/Post.vue

@@ -33,7 +33,7 @@
         @mouseleave="highlight(null)"
         @click.prevent="scrollTo(post.in_reply_to_id)"
       >
-        <img :src="require('@/assets/tabler/corner-left-up.svg')">
+        <img src="@/assets/tabler/corner-left-up.svg">
       </a>
       <span
         class="icon icon-small"
@@ -102,7 +102,7 @@
         title="View replies"
         :to="{ name: 'post', params: { postId: post.id }}"
       >
-        <img :src="require('@/assets/forkawesome/comment-o.svg')">
+        <img src="@/assets/forkawesome/comment-o.svg">
         <span>{{ post.replies_count }}</span>
       </router-link>
       <button
@@ -111,11 +111,11 @@
         title="Reply"
         @click="commentFormVisible = !commentFormVisible"
       >
-        <img :src="require('@/assets/forkawesome/comment-o.svg')">
+        <img src="@/assets/forkawesome/comment-o.svg">
         <span>{{ post.replies_count }}</span>
       </button>
       <span v-else class="icon">
-        <img :src="require('@/assets/forkawesome/comment-o.svg')">
+        <img src="@/assets/forkawesome/comment-o.svg">
         <span>{{ post.replies_count }}</span>
       </span>
       <button
@@ -125,11 +125,11 @@
         title="Repost"
         @click="toggleRepost()"
       >
-        <img :src="require('@/assets/feather/repeat.svg')">
+        <img src="@/assets/feather/repeat.svg">
         <span>{{ post.reblogs_count }}</span>
       </button>
       <span v-else class="icon">
-        <img :src="require('@/assets/feather/repeat.svg')">
+        <img src="@/assets/feather/repeat.svg">
         <span>{{ post.reblogs_count }}</span>
       </span>
       <button
@@ -139,11 +139,11 @@
         title="Like"
         @click="toggleLike()"
       >
-        <img :src="require('@/assets/forkawesome/thumbs-o-up.svg')">
+        <img src="@/assets/forkawesome/thumbs-o-up.svg">
         <span>{{ post.favourites_count }}</span>
       </button>
       <span v-else class="icon">
-        <img :src="require('@/assets/forkawesome/thumbs-o-up.svg')">
+        <img src="@/assets/forkawesome/thumbs-o-up.svg">
         <span>{{ post.favourites_count }}</span>
       </span>
       <a
@@ -154,7 +154,7 @@
         target="_blank"
         rel="noreferrer"
       >
-        <img :src="require('@/assets/ipfs.svg')">
+        <img src="@/assets/ipfs.svg">
       </a>
       <router-link
         v-if="isTokenized()"
@@ -162,14 +162,14 @@
         title="View token"
         :to="{ name: 'post-overlay', params: { postId: post.id }}"
       >
-        <img :src="require('@/assets/forkawesome/diamond.svg')">
+        <img src="@/assets/forkawesome/diamond.svg">
       </router-link>
       <a
         v-if="isWaitingForToken"
         class="icon tokenize-progress"
         title="Tokenizing..."
       >
-        <img :src="require('@/assets/forkawesome/diamond.svg')">
+        <img src="@/assets/forkawesome/diamond.svg">
       </a>
       <div
         class="dropdown-menu-wrapper"
@@ -177,7 +177,7 @@
         v-click-away="hideMenu"
       >
         <button class="icon" title="More" @click="toggleMenu()">
-          <img :src="require('@/assets/feather/more-horizontal.svg')">
+          <img src="@/assets/feather/more-horizontal.svg">
         </button>
         <menu v-if="menuVisible" class="dropdown-menu">
           <li v-if="canSaveToIpfs()">
@@ -186,7 +186,7 @@
               title="Save to IPFS"
               @click="hideMenu(); saveToIpfs()"
             >
-              <img :src="require('@/assets/ipfs.svg')">
+              <img src="@/assets/ipfs.svg">
               <span>Save to IPFS</span>
             </button>
           </li>
@@ -196,7 +196,7 @@
               title="Mint NFT"
               @click="hideMenu(); onMintToken()"
             >
-              <img :src="require('@/assets/forkawesome/diamond.svg')">
+              <img src="@/assets/forkawesome/diamond.svg">
               <span>Mint NFT</span>
             </button>
           </li>
@@ -206,7 +206,7 @@
               title="Delete post"
               @click="hideMenu(); onDeletePost()"
             >
-              <img :src="require('@/assets/feather/trash.svg')">
+              <img src="@/assets/feather/trash.svg">
               <span>Delete post</span>
             </button>
           </li>

src/components/PostEditor.vue

@@ -35,7 +35,7 @@
             title="Remove attachment"
             @click.prevent="removeAttachment(index)"
           >
-            <img :src="require('@/assets/feather/x.svg')">
+            <img src="@/assets/feather/x.svg">
           </button>
           <img v-if="attachment.type === 'image'" :src="attachment.url">
           <div v-else class="placeholder">{{ attachment.url }}</div>
@@ -49,7 +49,7 @@
           :disabled="!canAttachFile()"
           @click="selectAttachment()"
         >
-          <img :src="require('@/assets/feather/paperclip.svg')">
+          <img src="@/assets/feather/paperclip.svg">
           <input
             type="file"
             ref="attachmentUploadInputRef"
@@ -95,8 +95,8 @@
           title="Toggle preview"
           @click="togglePreview()"
         >
-          <img v-if="preview === null" :src="require('@/assets/feather/eye.svg')">
-          <img v-else :src="require('@/assets/feather/eye-off.svg')">
+          <img v-if="preview === null" src="@/assets/feather/eye.svg">
+          <img v-else src="@/assets/feather/eye-off.svg">
         </button>
         <div class="character-counter" title="Characters left">
           {{ getCharacterCount() }}

src/components/PostOrRepost.vue

@@ -1,7 +1,7 @@
 <template>
   <template v-if="post.reblog">
     <div class="action">
-      <img :src="require('@/assets/feather/repeat.svg')">
+      <img src="@/assets/feather/repeat.svg">
       <router-link
         :to="{ name: 'profile-by-acct', params: { acct: post.account.acct }}"
         :title="getActorAddress(post.account)"

src/components/Search.vue

@@ -2,10 +2,10 @@
   <form class="search" @submit.prevent="search()">
     <input type="search" placeholder="Search..." v-model="q">
     <button v-if="q" type="button" @click="clear()">
-      <img :src="require('@/assets/feather/delete.svg')">
+      <img src="@/assets/feather/delete.svg">
     </button>
     <button type="submit" :disabled="!q">
-      <img :src="require('@/assets/feather/search.svg')">
+      <img src="@/assets/feather/search.svg">
     </button>
   </form>
 </template>

src/components/Sidebar.vue

@@ -2,17 +2,17 @@
   <div v-if="isUserAuthenticated()" class="sidebar">
     <router-link class="sidebar-link" to="/notifications">
       <div class="icon">
-        <img :src="require('@/assets/feather/bell.svg')">
+        <img src="@/assets/feather/bell.svg">
         <div v-if="unreadNotificationCount > 0" class="icon-badge">{{ unreadNotificationCount }}</div>
       </div>
       <span>Notifications</span>
     </router-link>
     <router-link class="sidebar-link" to="/local">
-      <div class="icon"><img :src="require('@/assets/feather/server.svg')"></div>
+      <div class="icon"><img src="@/assets/feather/server.svg"></div>
       <span>Local</span>
     </router-link>
     <router-link class="sidebar-link" to="/profile-directory">
-      <div class="icon"><img :src="require('@/assets/feather/users.svg')"></div>
+      <div class="icon"><img src="@/assets/feather/users.svg"></div>
       <span>Profile directory</span>
     </router-link>
     <router-link
@@ -20,19 +20,19 @@
       class="sidebar-link"
       :to="{ name: 'subscriptions-settings' }"
     >
-      <div class="icon"><img :src="require('@/assets/tabler/coin.svg')"></div>
+      <div class="icon"><img src="@/assets/tabler/coin.svg"></div>
       <span>Subscriptions</span>
     </router-link>
     <router-link class="sidebar-link" :to="{ name: 'settings' }">
-      <div class="icon"><img :src="require('@/assets/feather/settings.svg')"></div>
+      <div class="icon"><img src="@/assets/feather/settings.svg"></div>
       <span>Settings</span>
     </router-link>
     <router-link class="sidebar-link" to="/about">
-      <div class="icon"><img :src="require('@/assets/feather/help-circle.svg')"></div>
+      <div class="icon"><img src="@/assets/feather/help-circle.svg"></div>
       <span>About</span>
     </router-link>
     <a class="sidebar-link" @click="logout()">
-      <div class="icon"><img :src="require('@/assets/feather/log-out.svg')"></div>
+      <div class="icon"><img src="@/assets/feather/log-out.svg"></div>
       <span>Logout</span>
     </a>
   </div>
@@ -92,6 +92,8 @@ async function logout() {
 @import "../styles/layout";
 @import "../styles/theme";
 
+$sidebar-icon-size: 20px;
+
 .sidebar {
   background-color: $background-color;
   box-sizing: border-box;
@@ -112,16 +114,18 @@ async function logout() {
   font-size: 18px;
 
   .icon {
-    height: 20px;
+    /* margin + padding + width ~= avatar-size */
+    height: $sidebar-icon-size;
     margin-left: 8px;
     margin-right: 10px;
     position: relative;
     text-align: center;
-    width: 25px;
+    width: $sidebar-icon-size + 5px;
 
     img {
       filter: $link-colorizer;
-      height: 100%;
+      height: $sidebar-icon-size;
+      width: $sidebar-icon-size;
     }
 
     .icon-badge {

src/components/SidebarLayout.vue

@@ -7,7 +7,7 @@
           :to="{ name: 'home' }"
           @click.prevent="showHomeTimeline()"
         >
-          <img :src="require('@/assets/feather/home.svg')">
+          <img src="@/assets/feather/home.svg">
           <span>Home</span>
         </router-link>
         <search />
@@ -112,6 +112,7 @@ header {
       filter: $text-colorizer;
       height: 1.2em;
       margin-right: 5px;
+      width: 1.2em;
     }
 
     span {

src/components/StaticPage.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="page-content">
       <router-link class="back" to="/" title="Back">
-        <img :src="require('@/assets/feather/arrow-left.svg')">
+        <img src="@/assets/feather/arrow-left.svg">
       </router-link>
       <h1 class="page-heading"><slot name="heading"></slot></h1>
       <div class="static-text"><slot name="text"></slot></div>
@@ -35,6 +35,7 @@
 
   img {
     filter: $text-colorizer;
+    height: 40px;
     width: 40px;
   }
 }

src/components/SubscriptionEthereum.vue

@@ -11,7 +11,7 @@
         <div class="wallet-address">{{ walletAddress ? walletAddress.toLowerCase() : '?' }}</div>
       </component>
       <div class="separator">
-        <img :src="require('@/assets/feather/arrow-right.svg')">
+        <img src="@/assets/feather/arrow-right.svg">
       </div>
       <router-link
         class="profile-card"
@@ -77,7 +77,7 @@
           </output>
           <span>{{ subscriptionConfig.tokenSymbol }}</span>
           <button @click.prevent="refreshTokenBalance()">
-            <img :src="require('@/assets/feather/refresh-ccw.svg')">
+            <img src="@/assets/feather/refresh-ccw.svg">
           </button>
         </div>
       </div>

src/components/SubscriptionMonero.vue

@@ -10,7 +10,7 @@
         <profile-display-name :profile="sender"></profile-display-name>
       </component>
       <div class="separator">
-        <img :src="require('@/assets/feather/arrow-right.svg')">
+        <img src="@/assets/feather/arrow-right.svg">
       </div>
       <router-link
         class="profile-card"

src/components/VisibilityIcon.vue

@@ -1,8 +1,8 @@
 <template>
-  <img v-if="visibility === 'public'" :src="require('@/assets/feather/globe.svg')">
-  <img v-else-if="visibility === 'private'" :src="require('@/assets/tabler/users.svg')">
-  <img v-else-if="visibility === 'subscribers'" :src="require('@/assets/tabler/coin.svg')">
-  <img v-else-if="visibility === 'direct'" :src="require('@/assets/forkawesome/envelope-o.svg')">
+  <img v-if="visibility === 'public'" src="@/assets/feather/globe.svg">
+  <img v-else-if="visibility === 'private'" src="@/assets/tabler/users.svg">
+  <img v-else-if="visibility === 'subscribers'" src="@/assets/tabler/coin.svg">
+  <img v-else-if="visibility === 'direct'" src="@/assets/forkawesome/envelope-o.svg">
 </template>
 
 <script setup lang="ts">

src/views/LandingPage.vue

@@ -65,7 +65,7 @@
             >
           </div>
           <div class="wallet-required" v-if="loginType === 'eip4361'">
-            <img :src="require('@/assets/forkawesome/ethereum.svg')">
+            <img src="@/assets/forkawesome/ethereum.svg">
             <router-link :to="{ name: 'ethereum' }">Ethereum Wallet</router-link> is required
           </div>
           <button
@@ -456,6 +456,7 @@ $text-color: #fff;
     img {
       filter: $btn-text-colorizer;
       height: 1em;
+      width: 1em;
     }
 
     a {

src/views/NotificationList.vue

@@ -7,16 +7,16 @@
         :key="notification.id"
       >
         <div class="action">
-          <img v-if="notification.type === 'follow'" :src="require('@/assets/feather/user-plus.svg')">
-          <img v-else-if="notification.type === 'reply'" :src="require('@/assets/forkawesome/comment-o.svg')">
-          <img v-else-if="notification.type === 'favourite'" :src="require('@/assets/forkawesome/thumbs-o-up.svg')">
-          <img v-else-if="notification.type === 'mention'" :src="require('@/assets/forkawesome/comment-o.svg')">
-          <img v-else-if="notification.type === 'reblog'" :src="require('@/assets/feather/repeat.svg')">
+          <img v-if="notification.type === 'follow'" src="@/assets/feather/user-plus.svg">
+          <img v-else-if="notification.type === 'reply'" src="@/assets/forkawesome/comment-o.svg">
+          <img v-else-if="notification.type === 'favourite'" src="@/assets/forkawesome/thumbs-o-up.svg">
+          <img v-else-if="notification.type === 'mention'" src="@/assets/forkawesome/comment-o.svg">
+          <img v-else-if="notification.type === 'reblog'" src="@/assets/feather/repeat.svg">
           <img
             v-else-if="notification.type === 'subscription' || notification.type === 'subscription_expiration'"
-            :src="require('@/assets/tabler/coin.svg')"
+            src="@/assets/tabler/coin.svg"
           >
-          <img v-else-if="notification.type === 'move'" :src="require('@/assets/feather/truck.svg')">
+          <img v-else-if="notification.type === 'move'" src="@/assets/feather/truck.svg">
           <router-link
             :title="getSenderInfo(notification)"
             :to="{ name: 'profile-by-acct', params: { acct: notification.account.acct } }"

src/views/PostOverlay.vue

@@ -2,7 +2,7 @@
   <div v-if="post && token" class="post-overlay wide">
     <div v-if="canGoBack()" class="back-btn-wrapper">
       <a class="back-btn" title="Back" @click="goBack()">
-        <img :src="require('@/assets/feather/arrow-left.svg')">
+        <img src="@/assets/feather/arrow-left.svg">
       </a>
     </div>
     <div class="token">
@@ -28,7 +28,7 @@
           target="_blank"
           rel="noreferrer"
         >
-          <img :src="require('@/assets/forkawesome/ethereum.svg')">
+          <img src="@/assets/forkawesome/ethereum.svg">
           <div>0x{{ post.token_tx_id }}</div>
         </a>
         <a
@@ -39,7 +39,7 @@
           target="_blank"
           rel="noreferrer"
         >
-          <img :src="require('@/assets/ipfs.svg')">
+          <img src="@/assets/ipfs.svg">
           <div>{{ post.ipfs_cid }}</div>
         </a>
         <div class="created-at">
@@ -154,6 +154,7 @@ $page-width: $wide-content-width + $content-gap + $wide-sidebar-width;
 
     img {
       filter: $text-colorizer;
+      height: 40px;
       width: 40px;
     }
   }

src/views/Profile.vue

@@ -34,7 +34,7 @@
               v-click-away="hideProfileMenu"
             >
               <button title="More" @click="toggleProfileMenu()">
-                <img :src="require('@/assets/feather/more-vertical.svg')">
+                <img src="@/assets/feather/more-vertical.svg">
               </button>
               <menu v-if="profileMenuVisible" class="dropdown-menu">
                 <li v-if="!isLocalUser()">
@@ -130,7 +130,7 @@
                 <img
                   v-if="profile.locked"
                   title="Manually approves followers"
-                  :src="require('@/assets/forkawesome/lock.svg')"
+                  src="@/assets/forkawesome/lock.svg"
                 >
               </button>
               <button v-if="canUnfollow()" class="unfollow btn" @click="onUnfollow()">
@@ -171,7 +171,7 @@
               <div class="value" v-html="field.value"></div>
               <div class="verified-icon" v-if="field.verified_at">
                 <img
-                  :src="require('@/assets/forkawesome/check.svg')"
+                  src="@/assets/forkawesome/check.svg"
                   title="Verified"
                 >
               </div>

src/views/ProfileForm.vue

@@ -60,7 +60,7 @@
               title="Remove item"
               @click="removeExtraField(index)"
             >
-              <img :src="require('@/assets/feather/x-circle.svg')">
+              <img src="@/assets/feather/x-circle.svg">
             </a>
           </div>
           <button
@@ -69,7 +69,7 @@
             class="add-extra-field"
             @click="addExtraField()"
           >
-            <img :src="require('@/assets/feather/plus-circle.svg')">
+            <img src="@/assets/feather/plus-circle.svg">
             Add new item
           </button>
         </div>
@@ -271,6 +271,7 @@ async function save() {
       filter: $link-hover-colorizer;
       height: $icon-size;
       vertical-align: middle;
+      width: $icon-size;
     }
   }
 
@@ -292,6 +293,7 @@ async function save() {
     height: $icon-size;
     margin-right: 5px;
     vertical-align: middle;
+    width: $icon-size;
   }
 
   &:hover img {