Add links for tab item

Author: Stigmatoz

src/assets/css/general.css

@@ -61,12 +61,6 @@ select {
 .w-100 {
   width: 100%;
 }
-.w-80 {
-  width: 80%;
-}
-.w-60 {
-  width: 60%;
-}
 input[type='button'] {
   background: #428bff;
   color: #fff;

src/assets/icons/details-link.svg

@@ -1,11 +1,27 @@
 <template>
   <div class="tab-item">
     <Favicon :favicon="item.favicon" :type="typeOfUrl" />
-    <div class="ml-10 flex-grow-2">
+    <div
+      class="ml-10 flex-grow-2"
+      @mouseover="isShowCmdButtons = true"
+      @mouseleave="isShowCmdButtons = false"
+    >
       <div class="first-block">
-        <div :class="listType == TypeOfList.All ? 'w-60' : 'w-80'">
-          <p class="url" @click="openUrl(item.url)">{{ url }}</p>
+        <div>
+          <p class="url">{{ url }}</p>
           <BadgeIcons :url="url" :type="typeOfUrl" :listType="listType" />
+          <p class="links" v-if="isShowCmdButtons" title="Statistics">
+            <img class="link" src="../assets/icons/details-link.svg" height="18" />
+          </p>
+
+          <p class="links" v-if="isShowCmdButtons" title="Open website">
+            <img
+              class="link"
+              src="../assets/icons/open-link.svg"
+              height="18"
+              @click="openUrl(item.url)"
+            />
+          </p>
         </div>
         <p class="text-right time">{{ summaryTimeForTab }}</p>
       </div>
@@ -33,6 +49,7 @@ export default {
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Favicon from './Favicon.vue';
+import TabItemLink from './TabItemLink.vue';
 import BadgeIcons from './BadgeIcons.vue';
 import { convertSummaryTimeToString } from '../utils/converter';
 import { getPercentage } from '../utils/common';
@@ -47,6 +64,8 @@ const props = defineProps<{
   listType: TypeOfList;
 }>();
 
+const isShowCmdButtons = ref<boolean>();
+
 const typeOfUrl = computed(() =>
   props.item.url.startsWith('file:') ? TypeOfUrl.Document : TypeOfUrl.WebSite,
 );
@@ -91,12 +110,21 @@ const showWarningMessage = ref<boolean>();
 .tab-item:hover {
   border: 1px rgb(202, 202, 202) solid;
 }
+
+.tab-item .links {
+  display: inline-block;
+  margin: 0;
+  cursor: pointer;
+  margin: 0 5px;
+}
+.tab-item .links .link {
+  vertical-align: middle;
+}
 .tab-item .url {
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   overflow-wrap: anywhere;
-  max-width: 80%;
   display: inline-block;
 }
 .tab-item .url:hover {