Change popup UI and add settings page

Author: Stigmatoz

src/assets/css/main.css

@@ -1,5 +1,6 @@
 :root {
     --main-color: #6ebf5d;
+    --popup-header: #d7d7d7;
 }
 ::-webkit-scrollbar-track {
     border-radius: 10px;
@@ -25,6 +26,9 @@
 .ml-10{
     margin-left: 10px;
 }
+.mr-10{
+    margin-right: 10px;
+}
 .text-right{
     text-align: right;
 }

src/background.ts

@@ -1,16 +1,11 @@
 import Browser from 'webextension-polyfill';
 import { initTracker } from './tracker';
 import { logger } from './compositions/logger';
-import { useFavicon } from './compositions/update-favicon';
 
 logger.log('Start background script');
 
 Browser.runtime.onInstalled.addListener(details => {
   logger.log('Extension installed:', details);
 });
 
-Browser.webNavigation.onCompleted.addListener(async function (details) {
-  await useFavicon(details.tabId);
-});
-
 initTracker();

src/components/Favicon.vue

@@ -1,7 +1,7 @@
 <template>
   <img
     v-if="favicon == undefined || favicon == ''"
-    class="favicon"
+    class="favicon no-favicon"
     height="22"
     :src="NO_FAVICON_URL"
   />
@@ -31,4 +31,7 @@ const props = defineProps<{
 .favicon {
   padding: 5px;
 }
+.no-favicon {
+  margin: 0 5px;
+}
 </style>

src/components/TabItem.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="tab-item">
     <Favicon :favicon="tab.favicon" />
-    <div class="ml-10 display-inline-block">
-      <p class="url">{{ tab.url }}</p>
-      <p>{{ sessions }}</p>
-    </div>
-    <div class="display-inline-block float-right">
-      <p class="text-right time">{{ summaryTimeForTab }}</p>
-      <p class="text-right">{{ percent }} %</p>
-    </div>
-    <div class="progress-bar">
-      <div :style="styleForProgressBar"></div>
+    <div class="ml-10 flex-grow-2">
+      <div class="display-inline-block">
+        <p class="url">{{ tab.url }}</p>
+        <p>{{ sessions }}</p>
+      </div>
+      <div class="display-inline-block float-right">
+        <p class="text-right time">{{ summaryTimeForTab }}</p>
+        <p class="text-right">{{ percent }} %</p>
+      </div>
+      <div class="progress-bar">
+        <div :style="styleForProgressBar"></div>
+      </div>
     </div>
   </div>
 </template>
@@ -54,6 +56,9 @@ const styleForProgressBar = computed(() => `width: ${percent}%`);
   border: 1px transparent solid;
   border-radius: 10px;
   margin: 10px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
 }
 .tab-item:hover {
   border: 1px rgb(202, 202, 202) solid;
@@ -74,12 +79,15 @@ const styleForProgressBar = computed(() => `width: ${percent}%`);
   font-weight: 600;
 }
 .tab-item .progress-bar {
-  margin: 5px 0 0 45px;
+  margin: 5px 0 0 5px;
   border-radius: 10px;
   border: 1px rgb(225 224 224) solid;
 }
 .tab-item .progress-bar div {
   height: 6px;
   background-color: var(--main-color);
 }
+.flex-grow-2 {
+  flex-grow: 2;
+}
 </style>

src/components/TabList.vue

@@ -37,7 +37,8 @@ onMounted(async () => {
   let unSortedTabs = repo.getTodayTabs();
   tabs.value = unSortedTabs?.sort(function (a: Tab, b: Tab) {
     return (
-      b.days.find(s => s.date === todayLocalDate())!.summary - a.days.find(s => s.date === todayLocalDate())!.summary
+      b.days.find(s => s.date === todayLocalDate())!.summary -
+      a.days.find(s => s.date === todayLocalDate())!.summary
     );
   });
 });

src/pages/Blocked.vue

@@ -0,0 +1,3 @@
+<template></template>
+
+<script lang="ts" setup></script>

src/pages/Popup.vue

@@ -1,22 +1,31 @@
 <template>
   <div class="headerBlock">
     <p class="header">Web Activity Time Tracker</p>
-    <div class="float-right">
+    <div class="float-right mr-10">
       <img
         height="20"
         src="../assets/icons/dark-mode.svg"
       />
       <img
         height="20"
         src="../assets/icons/settings.svg"
+        @click="openSettings()"
       />
     </div>
   </div>
   <TabList />
 </template>
 
 <script lang="ts" setup>
+import Browser from 'webextension-polyfill';
 import TabList from '../components/TabList.vue';
+
+async function openSettings() {
+  await Browser.tabs.create({
+    url: Browser.runtime.getURL('settings.html'),
+    active: true,
+  });
+}
 </script>
 
 <style>
@@ -30,15 +39,15 @@ body {
 
 .headerBlock {
   height: 50px;
-  background-color: var(--main-color);
+  background-color: var(--popup-header);
 }
 
 .headerBlock .header {
   font-size: 16px;
   padding: 0 20px;
   display: inline-block;
   font-weight: 600;
-  color: white;
+  color: rgb(0, 0, 0);
 }
 
 .headerBlock img {

src/pages/Settings.vue

@@ -0,0 +1,5 @@
+<template>settings</template>
+
+<script lang="ts" setup></script>
+
+<style></style>

src/popup.html

@@ -13,16 +13,15 @@
     <title>Popup</title>
   </head>
 
-  <body></body>
+  <body>
+    <script
+      type="module"
+      src="./popup.ts"
+    ></script>
+  </body>
 
   <link
     rel="stylesheet"
     href="assets/css/main.css"
   />
-  <script type="module">
-    import Popup from './pages/Popup.vue';
-    import { createApp } from 'vue';
-
-    createApp(Popup).mount('body');
-  </script>
 </html>

src/popup.ts

@@ -0,0 +1,5 @@
+import Popup from './pages/Popup.vue';
+import { router } from './router';
+import { createApp } from 'vue';
+
+createApp(Popup).use(router).mount('body');