From 74159677dbb28d88796032869232300a150e3c9c Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Sun, 12 Feb 2023 02:52:23 +0800
Subject: [PATCH] feat: add search watch history in history page

---
 src/background/apis/history.ts               |  41 +-
 src/components/Button.vue                    |  84 ++++
 src/components/Input.vue                     |  14 +
 src/contentScripts/views/History/History.vue | 427 +++++++++++++------
 src/styles/variables.scss                    |  99 ++++-
 src/utils/index.ts                           |   4 +
 6 files changed, 513 insertions(+), 156 deletions(-)
 create mode 100644 src/components/Button.vue
 create mode 100644 src/components/Input.vue

diff --git a/src/background/apis/history.ts b/src/background/apis/history.ts
index ae39559a..57e6701c 100644
--- a/src/background/apis/history.ts
+++ b/src/background/apis/history.ts
@@ -10,13 +10,52 @@ export const setupHistoryAPIs = () => {
         .then(data => (data))
         .catch(error => console.error(error))
     }
+    else if (message.contentScriptQuery === 'searchHistoryList') {
+      const url = `https://api.bilibili.com/x/web-goblin/history/search?pn=${message.pn}&keyword=${message.keyword}&business=all`
+      return fetch(url)
+        .then(response => response.json())
+        .then(data => (data))
+        .catch(error => console.error(error))
+    }
     // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E5%88%A0%E9%99%A4%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95
     else if (message.contentScriptQuery === 'deleteHistoryItem') {
-      const url = `https://api.bilibili.com/x/v2/history/delete?kid=${message.kid}&csrf=${message.csrf}`
+      const url = 'https://api.bilibili.com/x/v2/history/delete'
+      return fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+        },
+        body: JSON.stringify({ kid: message.kid, csrf: message.csrf }),
+      })
+        .then(response => response.json())
+        .then(data => (data))
+        .catch(error => console.error(error))
+    }
+    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E6%9F%A5%E8%AF%A2%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95%E5%81%9C%E7%94%A8%E7%8A%B6%E6%80%81
+    else if (message.contentScriptQuery === 'getHistoryPauseStatus') {
+      const url = 'https://api.bilibili.com/x/v2/history/shadow'
       return fetch(url)
         .then(response => response.json())
         .then(data => (data))
         .catch(error => console.error(error))
     }
+    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/history&toview/history.md#%E5%81%9C%E7%94%A8%E5%8E%86%E5%8F%B2%E8%AE%B0%E5%BD%95
+    else if (message.contentScriptQuery === 'setHistoryPauseStatus') {
+      const url = 'https://api.bilibili.com/x/v2/history/shadow/set'
+      return fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
+          'origin': 'https://www.bilibili.com',
+        },
+        body: new URLSearchParams({
+          switch: message.switch,
+          csrf: message.csrf,
+        }),
+      })
+        .then(response => response.json())
+        .then(data => (data))
+        .catch(error => console.error(error))
+    }
   })
 }
diff --git a/src/components/Button.vue b/src/components/Button.vue
new file mode 100644
index 00000000..bf7b2347
--- /dev/null
+++ b/src/components/Button.vue
@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+type Type =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+type Size = 'small' | 'medium' | 'large'
+
+interface Props {
+  type?: Type
+  size?: Size
+  /** @description enable frosted glass effect */
+  frosted?: boolean
+}
+
+// const props = withDefaults(defineProps<Props>(), {})
+const props = defineProps<Props>()
+
+const emit = defineEmits(['click'])
+
+const handleClick = (evt: MouseEvent) => {
+  emit('click', evt)
+}
+</script>
+
+<template>
+  <button
+    class="b-button"
+    :class="`
+      b-button--type-${props.type ?? 'default'}
+      b-button--size-${props.size ?? 'medium'}
+      ${props.frosted ? 'frosted-glass' : ''}
+    `"
+    @click="handleClick"
+  >
+    <slot name="left" />
+    <slot />
+    <slot name="right" />
+  </button>
+</template>
+
+<style lang="scss" scoped>
+.b-button {
+  --b-color: var(--bew-content-solid-1);
+  --b-color-hover: var(--bew-content-solid-1-hover);
+  --b-text-color: var(--bew-text-1);
+  --b-radius: var(--bew-radius);
+  --b-padding: 10px 14px;
+  --b-font-size: 14px;
+  --b-icon-size: 15px;
+
+  --at-apply: bg-$b-color hover:bg-$b-color-hover
+    rounded-$b-radius p-$b-padding transform-gpu active:scale-95
+    duration-300 flex items-center gap-2 text-size-$b-font-size;
+
+    & svg {
+      --at-apply: text-size-$b-icon-size
+    }
+
+    &.frosted-glass {
+      --b-color: var(--bew-content-1);
+      --b-color-hover: var(--bew-content-1-hover);
+      backdrop-filter: var(--bew-filter-glass);
+    }
+
+  &--type-default {
+  }
+
+  &--size-small {
+    --b-padding: 6px 12px;
+    --b-font-size: 14px;
+    --b-icon-size: 14px;
+  }
+
+  &--size-large {
+    --b-padding: 12px 16px;
+    --b-font-size: 15px;
+    --b-icon-size: 16px;
+  }
+}
+</style>
diff --git a/src/components/Input.vue b/src/components/Input.vue
new file mode 100644
index 00000000..c1df4355
--- /dev/null
+++ b/src/components/Input.vue
@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+type Size = 'small' | 'medium' | 'large'
+interface Props {
+  size?: Size
+}
+</script>
+
+<template>
+  <input type="text" class="b-input">
+</template>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/contentScripts/views/History/History.vue b/src/contentScripts/views/History/History.vue
index c8f76733..84457ee7 100644
--- a/src/contentScripts/views/History/History.vue
+++ b/src/contentScripts/views/History/History.vue
@@ -1,14 +1,42 @@
 <script setup lang="ts">
 import { useDateFormat } from '@vueuse/core'
 import type { HistoryItem } from './types'
-import { calcCurrentTime, removeHttpFromUrl } from '~/utils'
+import {
+  calcCurrentTime,
+  getCSRF,
+  openLinkToNewTab,
+  removeHttpFromUrl,
+} from '~/utils'
 
 const isLoading = ref<boolean>()
 const noMoreContent = ref<boolean>()
 const historyList = reactive<Array<HistoryItem>>([])
+const currentPageNum = ref<number>(1)
+const keyword = ref<string>()
+const historyStatus = ref<boolean>()
+
+watch(() => keyword.value, (newValue, oldValue) => {
+  window.onscroll = () => {
+    if (
+      window.innerHeight + window.scrollY
+      >= document.body.scrollHeight - 20
+    ) {
+      if (isLoading.value)
+        return
+
+      if (!noMoreContent.value) {
+        if (keyword.value)
+          searchHistoryList()
+        else
+          getHistoryList()
+      }
+    }
+  }
+})
 
 onMounted(() => {
   getHistoryList()
+  getHistoryPauseStatus()
 
   window.onscroll = () => {
     if (
@@ -18,7 +46,12 @@ onMounted(() => {
       if (isLoading.value)
         return
 
-      getHistoryList()
+      if (!noMoreContent.value) {
+        if (keyword.value)
+          searchHistoryList()
+        else
+          getHistoryList()
+      }
     }
   }
 })
@@ -60,8 +93,54 @@ function getHistoryList() {
     })
 }
 
-function deleteHistoryItem() {
+function searchHistoryList() {
+  isLoading.value = true
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'searchHistoryList',
+      pn: currentPageNum.value++,
+      keyword: keyword.value,
+    })
+    .then((res) => {
+      if (res.code === 0) {
+        if (historyList.length !== 0 && res.data.list.length < 20) {
+          isLoading.value = false
+          noMoreContent.value = true
+          return
+        }
 
+        res.data.list.forEach((item: HistoryItem) => {
+          historyList.push(item)
+        })
+
+        noMoreContent.value = false
+      }
+      isLoading.value = false
+    })
+}
+
+function handleSearch() {
+  historyList.length = 0
+  currentPageNum.value = 1
+  if (keyword.value)
+    searchHistoryList()
+  else
+    getHistoryList()
+}
+
+function deleteHistoryItem(index: number, historyItem: HistoryItem) {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'deleteHistoryItem',
+      kid: `${historyItem.history.business}_${historyItem.history.oid}`,
+      csrf: getCSRF(),
+    })
+    .then((res) => {
+      console.log(res)
+
+      if (res.code === 0)
+        historyList.splice(index, 1)
+    })
 }
 
 /**
@@ -80,156 +159,238 @@ function getHistoryUrl(item: HistoryItem) {
   // else if (activatedTab.value === 2)
   //   return `/read/cv${item.history.oid}`
 
-  return ''
+  return item.history.bvid
+}
+
+function getHistoryPauseStatus() {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'getHistoryPauseStatus',
+    })
+    .then((res) => {
+      if (res.code === 0)
+        historyStatus.value = res.data
+    })
+}
+
+function setHistoryPauseStatus(isPause: boolean) {
+  browser.runtime
+    .sendMessage({
+      contentScriptQuery: 'setHistoryPauseStatus',
+      csrf: getCSRF(),
+      switch: isPause,
+    })
+    .then((res) => {
+      if (res.code === 0)
+        getHistoryPauseStatus()
+    })
+}
+
+function handlePauseWatchHistory() {
+  // eslint-disable-next-line no-alert
+  const result = confirm('Pause watch history?\nAre you sure you want to pause watch history?')
+  if (result)
+    setHistoryPauseStatus(true)
+}
+
+function handleTurnOnWatchHistory() {
+  // eslint-disable-next-line no-alert
+  const result = confirm('t=Turn on watch history?\nAre you sure you want to turn on watch history?')
+  if (result)
+    setHistoryPauseStatus(false)
 }
 </script>
 
 <template>
-  <div>
-    <h3 mb-6 text="3xl $bew-text-1" font-bold>
-      Watch History
-    </h3>
-    <!-- historyList -->
-    <transition-group name="list">
-      <a
-        v-for="historyItem in historyList"
-        :key="historyItem.kid"
-        :href="getHistoryUrl(historyItem)"
-        target="_blank"
-        block
-        class="group"
-        flex
-      >
-        <div
-          mr-4
-          px-4
-          b-l="~ 2px dashed $bew-fill-2"
-          group-hover:b-l="$bew-theme-color-40"
+  <div flex gap-4>
+    <main w="80%" mb-6>
+      <h3 text="3xl $bew-text-1" font-bold mb-6>
+        Watch History
+      </h3>
+      <!-- historyList -->
+      <transition-group name="list">
+        <a
+          v-for="(historyItem, index) in historyList"
+          :key="historyItem.kid"
+          block
+          class="group"
           flex
-          items-center
-          justify-center
-          shrink-0
-          relative
-          duration-300
+          cursor-pointer
+          @click="openLinkToNewTab(`${getHistoryUrl(historyItem)}`)"
         >
-          <!-- Dot -->
-          <i
-            pos="absolute left--1px"
-            w-2
-            h-2
-            rounded-6
-            bg="$bew-fill-3"
-            group-hover:bg="$bew-theme-color"
-            transform="~ translate-x--1/2"
-            duration-300
-          />
           <div
-            text="sm $bew-text-3"
-            group-hover:text="$bew-theme-color"
-            bg="$bew-fill-1"
-            group-hover:bg="$bew-theme-color-20"
-            p="x-3 y-1"
-            rounded-8
+            mr-4
+            px-4
+            b-l="~ 2px dashed $bew-fill-2"
+            group-hover:b-l="$bew-theme-color-40"
+            flex
+            items-center
+            justify-center
+            shrink-0
+            relative
             duration-300
           >
-            {{
-              useDateFormat(historyItem.view_at * 1000, 'YYYY-MM-DD HH:mm:ss')
-                .value
-            }}
-          </div>
-        </div>
-        <section
-          rounded="$bew-radius"
-          flex="~ gap-4"
-          item-start
-          relative
-          group-hover:bg="$bew-fill-2"
-          duration-300
-          w-full
-          p="2"
-        >
-          <!-- Cover -->
-          <div
-            pos="relative"
-            bg="$bew-fill-5"
-            w="200px"
-            flex="shrink-0"
-            rounded="$bew-radius"
-            overflow-hidden
-          >
-            <img
-              w="300px"
-              class="aspect-video"
-              :src="`${removeHttpFromUrl(historyItem.cover)}@672w_378h_1c`"
-              :alt="historyItem.title"
-              object-cover
-            >
+            <!-- Dot -->
+            <i
+              pos="absolute left--1px"
+              w-2
+              h-2
+              rounded-6
+              bg="$bew-fill-3"
+              group-hover:bg="$bew-theme-color"
+              transform="~ translate-x--1/2"
+              duration-300
+            />
             <div
-              pos="absolute bottom-0 right-0"
-              bg="black opacity-60"
-              m="2"
-              p="x-2 y-1"
-              text="white xs"
+              text="sm $bew-text-3"
+              group-hover:text="$bew-theme-color"
+              bg="$bew-fill-1"
+              group-hover:bg="$bew-theme-color-20"
+              p="x-3 y-1"
               rounded-8
+              duration-300
             >
-              <!--  When progress = -1 means that the user watched the full video -->
               {{
-                `${
-                  historyItem.progress === -1
-                    ? calcCurrentTime(historyItem.duration)
-                    : calcCurrentTime(historyItem.progress)
-                } /
-                    ${calcCurrentTime(historyItem.duration)}`
+                useDateFormat(historyItem.view_at * 1000, 'YYYY-MM-DD HH:mm:ss')
+                  .value
               }}
             </div>
-            <div w-full pos="absolute bottom-0" bg="white opacity-60">
-              <Progress
-                :percentage="
-                  (historyItem.progress / historyItem.duration) * 100
-                "
-              />
-            </div>
           </div>
-
-          <!-- Description -->
-          <div flex justify-between w-full>
-            <div>
-              <h3
-                class="keep-two-lines"
-                overflow="hidden"
-                text="lg overflow-ellipsis"
+          <section
+            rounded="$bew-radius"
+            flex="~ gap-4"
+            item-start
+            relative
+            group-hover:bg="$bew-fill-2"
+            duration-300
+            w-full
+            p="2"
+          >
+            <!-- Cover -->
+            <div
+              pos="relative"
+              bg="$bew-fill-5"
+              w="200px"
+              flex="shrink-0"
+              rounded="$bew-radius"
+              overflow-hidden
+            >
+              <img
+                w="300px"
+                class="aspect-video"
+                :src="`${removeHttpFromUrl(historyItem.cover)}@672w_378h_1c`"
+                :alt="historyItem.title"
+                object-cover
               >
-                {{ historyItem.title }}
-              </h3>
-              <div text="$bew-text-2 sm" m="t-4" flex="~" items-center>
-                <img
-                  :src="historyItem.author_face"
-                  w-8
-                  aspect-square
-                  alt=""
-                  rounded="$bew-radius-half"
-                  mr-2
-                >
-                {{ historyItem.author_name }}
-                <!-- <span
-                  v-if="historyItem.live_status === 1"
-                  text="$bew-theme-color"
-                  m="l-2"
-                ><tabler:live-photo />
-                  Live
-                </span> -->
+              <div
+                pos="absolute bottom-0 right-0"
+                bg="black opacity-60"
+                m="2"
+                p="x-2 y-1"
+                text="white xs"
+                rounded-8
+              >
+                <!--  When progress = -1 means that the user watched the full video -->
+                {{
+                  `${
+                    historyItem.progress === -1
+                      ? calcCurrentTime(historyItem.duration)
+                      : calcCurrentTime(historyItem.progress)
+                  } /
+                      ${calcCurrentTime(historyItem.duration)}`
+                }}
+              </div>
+              <div w-full pos="absolute bottom-0" bg="white opacity-60">
+                <Progress
+                  :percentage="
+                    (historyItem.progress / historyItem.duration) * 100
+                  "
+                />
               </div>
             </div>
 
-            <button text="2xl" p-4>
-              <tabler:trash />
-            </button>
-          </div>
-        </section>
-      </a>
-    </transition-group>
-    <!-- loading -->
-    <loading v-if="isLoading && historyList.length !== 0" m="-t-4" />
+            <!-- Description -->
+            <div flex justify-between w-full>
+              <div>
+                <h3
+                  class="keep-two-lines"
+                  overflow="hidden"
+                  text="lg overflow-ellipsis"
+                >
+                  {{ historyItem.title }}
+                </h3>
+                <div text="$bew-text-2 sm" m="t-4" flex="~" items-center>
+                  <img
+                    :src="historyItem.author_face"
+                    w-8
+                    aspect-square
+                    alt=""
+                    rounded="$bew-radius-half"
+                    mr-2
+                  >
+                  {{ historyItem.author_name }}
+                  <!-- <span
+                    v-if="historyItem.live_status === 1"
+                    text="$bew-theme-color"
+                    m="l-2"
+                  ><tabler:live-photo />
+                    Live
+                  </span> -->
+                </div>
+              </div>
+
+              <button
+                text="2xl $bew-text-3"
+                hover:color="$bew-error-color"
+                opacity="0 group-hover:100"
+                p-4
+                duration-300
+                @click.stop="deleteHistoryItem(index, historyItem)"
+              >
+                <tabler:trash />
+              </button>
+            </div>
+          </section>
+        </a>
+      </transition-group>
+      <!-- loading -->
+      <loading v-if="isLoading && historyList.length !== 0 && !noMoreContent" m="-t-4" />
+    </main>
+
+    <aside relative w="20%">
+      <div pos="sticky top-120px" flex="~ col gap-4" justify-start my-10 w-full>
+        <input
+          v-model.lazy.trim="keyword"
+          type="text"
+          placeholder="Search watch history"
+          p="x-14px y-10px"
+          rounded="$bew-radius"
+          bg="$bew-content-solid-1"
+          shadow="$bew-shadow-1"
+          outline-none
+          w-full
+          @keyup.enter="handleSearch"
+        >
+        <Button shadow="$bew-shadow-1">
+          <template #left>
+            <tabler:trash />
+          </template>
+          Clear all watch history
+        </Button>
+        <Button v-if="!historyStatus" shadow="$bew-shadow-1" @click="handlePauseWatchHistory">
+          <template #left>
+            <ph:pause-circle-bold />
+          </template>
+          Pause watch history
+        </Button>
+        <Button v-else shadow="$bew-shadow-1" @click="handleTurnOnWatchHistory">
+          <template #left>
+            <ph:play-circle-bold />
+          </template>
+          Turn on watch history
+        </Button>
+      </div>
+    </aside>
   </div>
 </template>
 
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index e68ae762..22f4398b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -4,6 +4,7 @@
 
   --bew-filter-glass: blur(20px) saturate(180%);
 
+  // #region shadow
   --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.1),
     0 2px 4px -2px rgb(0 0 0 / 0.1);
   --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1),
@@ -11,28 +12,85 @@
   --bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.1),
     0 8px 10px -6px rgb(0 0 0 / 0.1);
   --bew-shadow-4: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-
-  --bew-theme-color: rgb(0, 161, 214);
-  --bew-theme-color-10: rgba(0, 161, 214, 0.1);
-  --bew-theme-color-20: rgba(0, 161, 214, 0.2);
-  --bew-theme-color-30: rgba(0, 161, 214, 0.3);
-  --bew-theme-color-40: rgba(0, 161, 214, 0.4);
-  --bew-theme-color-50: rgba(0, 161, 214, 0.5);
-  --bew-theme-color-60: rgba(0, 161, 214, 0.6);
-  --bew-theme-color-70: rgba(0, 161, 214, 0.7);
-  --bew-theme-color-80: rgba(0, 161, 214, 0.8);
-  --bew-theme-color-90: rgba(0, 161, 214, 0.9);
-  --bew-theme-color-100: var(--bew-theme-color);
+  // #endregion
 
   --bew-logo-color: var(--bew-theme-color);
 
+  // #region colors
+  --bew-theme-color: rgb(0 161 214);
+  --bew-theme-color-10: rgba(0 161 214 / 0.1);
+  --bew-theme-color-20: rgba(0 161 214 / 0.2);
+  --bew-theme-color-30: rgba(0 161 214 / 0.3);
+  --bew-theme-color-40: rgba(0 161 214 / 0.4);
+  --bew-theme-color-50: rgba(0 161 214 / 0.5);
+  --bew-theme-color-60: rgba(0 161 214 / 0.6);
+  --bew-theme-color-70: rgba(0 161 214 / 0.7);
+  --bew-theme-color-80: rgba(0 161 214 / 0.8);
+  --bew-theme-color-90: rgba(0 161 214 / 0.9);
+
+  --bew-info-color: rgb(56 189 248);
+  --bew-info-color-10: rgba(56 189 248 / 0.1);
+  --bew-info-color-20: rgba(56 189 248 / 0.2);
+  --bew-info-color-30: rgba(56 189 248 / 0.3);
+  --bew-info-color-40: rgba(56 189 248 / 0.4);
+  --bew-info-color-50: rgba(56 189 248 / 0.5);
+  --bew-info-color-60: rgba(56 189 248 / 0.6);
+  --bew-info-color-70: rgba(56 189 248 / 0.7);
+  --bew-info-color-80: rgba(56 189 248 / 0.8);
+  --bew-info-color-90: rgba(56 189 248 / 0.9);
+
+  --bew-success-color: rgb(110 231 183);
+  --bew-success-color-10: rgba(110 231 183 / 0.1);
+  --bew-success-color-20: rgba(110 231 183 / 0.2);
+  --bew-success-color-30: rgba(110 231 183 / 0.3);
+  --bew-success-color-40: rgba(110 231 183 / 0.4);
+  --bew-success-color-50: rgba(110 231 183 / 0.5);
+  --bew-success-color-60: rgba(110 231 183 / 0.6);
+  --bew-success-color-70: rgba(110 231 183 / 0.7);
+  --bew-success-color-80: rgba(110 231 183 / 0.8);
+  --bew-success-color-90: rgba(110 231 183 / 0.9);
+
+  --bew-warning-color: rgb(250 204 21);
+  --bew-warning-color-10: rgba(250 204 21 / 0.1);
+  --bew-warning-color-20: rgba(250 204 21 / 0.2);
+  --bew-warning-color-30: rgba(250 204 21 / 0.3);
+  --bew-warning-color-40: rgba(250 204 21 / 0.4);
+  --bew-warning-color-50: rgba(250 204 21 / 0.5);
+  --bew-warning-color-60: rgba(250 204 21 / 0.6);
+  --bew-warning-color-70: rgba(250 204 21 / 0.7);
+  --bew-warning-color-80: rgba(250 204 21 / 0.8);
+  --bew-warning-color-90: rgba(250 204 21 / 0.9);
+
+  --bew-error-color: rgb(251 114 153);
+  --bew-error-color-10: rgba(251 114 153 / 0.1);
+  --bew-error-color-20: rgba(251 114 153 / 0.2);
+  --bew-error-color-30: rgba(251 114 153 / 0.3);
+  --bew-error-color-40: rgba(251 114 153 / 0.4);
+  --bew-error-color-50: rgba(251 114 153 / 0.5);
+  --bew-error-color-60: rgba(251 114 153 / 0.6);
+  --bew-error-color-70: rgba(251 114 153 / 0.7);
+  --bew-error-color-80: rgba(251 114 153 / 0.8);
+  --bew-error-color-90: rgba(251 114 153 / 0.9);
+  // #endregion
+
+  // #region text colors
   --bew-text-1: hsl(217, 33%, 17%);
   --bew-text-2: hsl(215, 19%, 35%);
   --bew-text-3: hsl(215, 19%, 55%);
+  --bew-text-4: hsl(215, 19%, 72%);
+  // #endregion
+
+  --bew-bg: hsl(220, 14%, 94%);
+
+  --bew-content-opacity: 0.6;
+
+  // #region content colors, used to buttons, cards, popover and so on
+  --bew-content-1: hsl(0 0% 100% / var(--bew-content-opacity));
+  --bew-content-1-hover: hsl(0 0% 85% / var(--bew-content-opacity));
 
-  --bew-bg: rgb(243 244 246);
-  --bew-content-1: hsl(0 0% 100% / 60%);
   --bew-content-solid-1: hsl(0 0% 100%);
+  --bew-content-solid-1-hover: hsl(0 0% 85%);
+  // #endregion
 
   --bew-fill-1: rgb(120 120 128 / 12%);
   --bew-fill-2: rgb(120 120 128 / 22%);
@@ -49,18 +107,15 @@
   --bew-text-3: hsl(215, 19%, 50%);
 
   --bew-bg: hsl(230 12% 6%);
-  --bew-content-1: hsl(230 12% 13% / 60%);
+
+  --bew-content-1: hsl(230 12% 13% / var(--bew-content-opacity));
+  --bew-content-1-hover: hsl(230 12% 25% / var(--bew-content-opacity));
+
   --bew-content-solid-1: hsl(230 12% 13%);
+  --bew-content-solid-1-hover: hsl(230 12% 25%);
 
   --bew-fill-1: rgb(120 120 128 / 16%);
   --bew-fill-2: rgb(120 120 128 / 26%);
   --bew-fill-3: rgb(120 120 128 / 36%);
   --bew-fill-4: rgb(120 120 128 / 46%);
 }
-
-@supports not (backdrop-filter: blur(15px)) {
-  :root,
-  :root.dark {
-    --bew-content-1: var(--bew-content-solid-1);
-  }
-}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e3f1029b..90ebc411 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -48,3 +48,7 @@ export const getCSRF = () => getCookie('bili_jct')
 export const removeHttpFromUrl = (url: string) => {
   return url.replace(/^https?:/, '')
 }
+
+export const openLinkToNewTab = (url: string) => {
+  window.open(url, '_blank')
+}