Change favicon again

Author: Stigmatoz

src/assets/css/dashboard.css

@@ -46,6 +46,7 @@ body {
 
 .url-list li span{
   font-weight: 600;
+  margin-left: 10px;
 }
 
 input[type='text'] {

src/components/Favicon.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="container">
-    <img v-if="faviconValid" class="favicon no-favicon" height="22" :src="NO_FAVICON" />
-    <img v-else class="favicon" height="30" :src="faviconUrl" />
+    <img v-if="faviconNotValid" class="favicon no-favicon" height="22" :src="NO_FAVICON" />
+    <img v-else class="favicon" height="30" :src="favicon" />
   </div>
 </template>
 
@@ -17,15 +17,17 @@ import { NO_FAVICON } from '../utils/consts';
 import { TypeOfUrl } from '../utils/enums';
 
 const props = defineProps<{
-  url: string;
+  favicon: string | undefined;
   type: TypeOfUrl;
 }>();
 
-const faviconValid = computed(
-  () => props.url.startsWith('chrome://favicon/') || props.type == TypeOfUrl.Document,
+const faviconNotValid = computed(
+  () =>
+    props.favicon == undefined ||
+    props.favicon == '' ||
+    props.favicon.startsWith('chrome://favicon/') ||
+    props.type == TypeOfUrl.Document,
 );
-
-const faviconUrl = computed(() => `https://www.google.com/s2/favicons?domain=${props.url}&sz=64`);
 </script>
 
 <style scoped>

src/components/ListWithTime.vue

@@ -8,7 +8,8 @@
           height="16"
           @click="editItemFromList(limit.domain, limit.time)"
         />
-        <Favicon :url="limit.domain" :type="TypeOfUrl.WebSite" /> <span>{{ limit.domain }}</span>
+        <Favicon :type="TypeOfUrl.WebSite" :favicon="getFavicon(limit.domain)" />
+        <span>{{ limit.domain }}</span>
         <p class="time-value">{{ t('limit.message') }} : {{ getTime(limit.time) }}</p>
       </div>
     </li>
@@ -40,6 +41,7 @@ export default {
 
 <script lang="ts" setup>
 import Favicon from './Favicon.vue';
+import { getFavicon } from '../utils/favicon';
 import { useNotification } from '@kyvg/vue3-notification';
 import { useI18n } from 'vue-i18n';
 import { injecStorage } from '../storage/inject-storage';

src/components/TabItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tab-item">
-    <Favicon :url="item.url" :type="typeOfUrl" />
+    <Favicon :favicon="item.favicon" :type="typeOfUrl" />
     <div class="ml-10 flex-grow-2">
       <div class="first-block">
         <div :class="listType == TypeOfList.All ? 'w-60' : 'w-80'">

src/components/WhiteList.vue

@@ -5,7 +5,8 @@
       <li v-for="(url, i) of whiteList" :key="i">
         <div>
           <img src="../assets/icons/delete.png" height="16" @click="deleteFromWhiteList(url)" />
-          <Favicon :url="url" :type="TypeOfUrl.WebSite" /> <span>{{ url }}</span>
+          <Favicon :type="TypeOfUrl.WebSite" :favicon="getFavicon(url)" />
+          <span>{{ url }}</span>
         </div>
       </li>
     </ul>
@@ -35,6 +36,7 @@ export default {
 
 <script lang="ts" setup>
 import Favicon from './Favicon.vue';
+import { getFavicon } from '../utils/favicon';
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { TypeOfUrl } from '../utils/enums';

src/utils/favicon.ts

@@ -0,0 +1,3 @@
+export function getFavicon(url: string) {
+  return `https://www.google.com/s2/favicons?domain=${url}&sz=64`;
+}