Merge branch 'dev' into feat/theme-switch

.eslintignore

@@ -2,3 +2,4 @@ dist
 node_modules
 public
 extension
+extension-firefox

.github/workflows/sync-bugfixes.yml

@@ -0,0 +1,24 @@
+name: Sync Back to Bugfixes
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{secrets.SYNC_TOKEN}}
+          FROM_BRANCH: main
+          TO_BRANCH: bugfixes

.github/workflows/sync-dev-firefox.yml

@@ -0,0 +1,24 @@
+name: Sync Back to Dev Firefox
+on:
+  push:
+    branches:
+      - dev
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{secrets.SYNC_TOKEN}}
+          FROM_BRANCH: dev
+          TO_BRANCH: dev-firefox

.github/workflows/sync-dev.yml

@@ -0,0 +1,24 @@
+name: Sync Back to Dev
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  sync-branches:
+    runs-on: ubuntu-latest
+    name: Syncing branches
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Set up Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Opening pull request
+        id: pull
+        uses: tretuna/[email protected]
+        with:
+          GITHUB_TOKEN: ${{secrets.SYNC_TOKEN}}
+          FROM_BRANCH: main
+          TO_BRANCH: dev

.gitignore

@@ -11,6 +11,7 @@
 dist
 dist-ssr
 extension/
+extension-firefox/
 node_modules
 src/auto-imports.d.ts
 src/components.d.ts

package.json

@@ -8,24 +8,26 @@
   "homepage": "https://github.com/hakadao/BewlyBewly",
   "scripts": {
     "dev": "npm run clear && cross-env NODE_ENV=development run-p dev:*",
-    "dev-firefox": "npm run clear && cross-env NODE_ENV=development FIREFOX=true run-p dev:*",
+    "dev-firefox": "npm run clear-firefox && cross-env NODE_ENV=development FIREFOX=true run-p dev:*",
     "dev:prepare": "esno scripts/prepare.ts",
     "dev:web": "vite",
     "dev:js": "npm run build:js -- --mode development",
     "dev:bg": "tsup --watch ./src",
     "build": "cross-env NODE_ENV=production run-s clear build:web build:prepare build:js build:bg",
-    "build-firefox": "cross-env NODE_ENV=production FIREFOX=true run-s clear build:web build:prepare build:js build:bg",
+    "build-firefox": "cross-env NODE_ENV=production FIREFOX=true run-s clear-firefox build:web build:prepare build:js build:bg",
     "build:prepare": "esno scripts/prepare.ts",
     "build:web": "vite build",
     "build:js": "vite build --config vite.config.content.ts",
     "build:bg": "tsup",
     "pack": "cross-env NODE_ENV=production run-p pack:*",
     "pack:zip": "rimraf extension.zip && jszip-cli add extension/* -o ./extension.zip",
+    "pack:zip-firefox": "rimraf extension-firefox.zip && jszip-cli add extension-firefox/* -o ./extension-firefox.zip",
     "pack:crx": "crx pack extension -o ./extension.crx",
-    "pack:xpi": "cross-env WEB_EXT_ARTIFACTS_DIR=./ FIREFOX=true web-ext build --source-dir ./extension --filename extension.xpi --overwrite-dest",
+    "pack:xpi": "cross-env WEB_EXT_ARTIFACTS_DIR=./ FIREFOX=true web-ext build --source-dir ./extension-firefox --filename extension.xpi --overwrite-dest",
     "start:chromium": "web-ext run --source-dir ./extension --target=chromium",
-    "start:firefox": "web-ext run --source-dir ./extension --target=firefox-desktop",
+    "start:firefox": "web-ext run --source-dir ./extension-firefox --target=firefox-desktop",
     "clear": "rimraf extension extension.*",
+    "clear-firefox": "rimraf extension-firefox extension-firefox.*",
     "lint": "eslint .",
     "test": "vitest test",
     "postinstall": "npx simple-git-hooks"

scripts/manifest.ts

@@ -1,9 +1,9 @@
 import fs from 'fs-extra'
 import { getManifest } from '../src/manifest'
-import { log, r } from './utils'
+import { isFirefox, log, r } from './utils'
 
 export async function writeManifest() {
-  await fs.writeJSON(r('extension/manifest.json'), await getManifest(), { spaces: 2 })
+  await fs.writeJSON(r(isFirefox ? 'extension-firefox/manifest.json' : 'extension/manifest.json'), await getManifest(), { spaces: 2 })
   log('PRE', 'write manifest.json')
 }
 

scripts/prepare.ts

@@ -2,7 +2,7 @@
 import { execSync } from 'node:child_process'
 import fs from 'fs-extra'
 import chokidar from 'chokidar'
-import { isDev, log, r } from './utils'
+import { isDev, isFirefox, log, r } from './utils'
 
 /**
  * Stub index.html to use Vite in development
@@ -14,12 +14,12 @@ async function stubIndexHtml() {
   ]
 
   for (const view of views) {
-    await fs.ensureDir(r(`extension/dist/${view}`))
+    await fs.ensureDir(r(isFirefox ? `extension-firefox/dist/${view}` : `extension/dist/${view}`))
     let data = await fs.readFile(r(`src/${view}/index.html`), 'utf-8')
     data = data
       .replace('"./main.ts"', `"/${view}/main.ts.js"`)
       .replace('<div id="app"></div>', '<div id="app">Vite server did not start</div>')
-    await fs.writeFile(r(`extension/dist/${view}/index.html`), data, 'utf-8')
+    await fs.writeFile(r(isFirefox ? `extension-firefox/dist/${view}/index.html` : `extension/dist/${view}/index.html`), data, 'utf-8')
     log('PRE', `stub ${view}`)
   }
 }
@@ -28,8 +28,8 @@ function writeManifest() {
   execSync('npx esno ./scripts/manifest.ts', { stdio: 'inherit' })
 }
 
-fs.ensureDirSync(r('extension'))
-fs.copySync(r('assets'), r('extension/assets'))
+fs.ensureDirSync(r(isFirefox ? 'extension-firefox' : 'extension'))
+fs.copySync(r('assets'), r(isFirefox ? 'extension-firefox/assets' : 'extension/assets'))
 writeManifest()
 
 if (isDev) {

src/components/Dock/Dock.vue

@@ -153,23 +153,33 @@ function toggleDockHide(hide: boolean) {
 <template>
   <aside
     class="dock-wrap"
-    :class="{
-      left: settings.dockPosition === 'left',
-      right: settings.dockPosition === 'right',
-      bottom: settings.dockPosition === 'bottom',
-      hide: hideDock,
-    }"
-    pos="absolute top-0" flex="~ col" h-full justify-center z-1
-    pointer-events-none
-    @mouseenter="toggleDockHide(false)"
-    @mouseleave="toggleDockHide(true)"
+    pos="absolute top-0" flex="~ col justify-center items-center" w-full h-full
+    z-1 pointer-events-none
   >
+    <!-- Edge div -->
+    <div
+      v-if="settings.autoHideDock"
+      class="dock-edge"
+      :class="`dock-edge-${settings.dockPosition}`"
+      @mouseenter="toggleDockHide(false)"
+      @mouseleave="toggleDockHide(true)"
+    />
+
     <div
       class="dock-content"
+      :class="{
+        left: settings.dockPosition === 'left',
+        right: settings.dockPosition === 'right',
+        bottom: settings.dockPosition === 'bottom',
+        hide: hideDock,
+      }"
+      absolute duration-300 ease-in-out
       p-2 m-2 bg="$bew-content-1" flex="~ col gap-2 shrink-0"
       rounded="$bew-radius" border="1px $bew-border-color"
       shadow="$bew-shadow-2"
-      backdrop-glass pointer-events-auto
+      backdrop-glass
+      @mouseenter="toggleDockHide(false)"
+      @mouseleave="toggleDockHide(true)"
     >
       <template v-for="dockItemVisibility in settings.dockItemVisibilityList" :key="dockItemVisibility.page">
         <template v-if="dockItemVisibility.visible">
@@ -221,15 +231,30 @@ function toggleDockHide(hide: boolean) {
 
 <style lang="scss" scoped>
 .dock-wrap {
-  --at-apply: duration-300 ease-in-out
-    after:content-empty after:absolute
-    after:w-[calc(100%+14px)] after:h-[calc(100%+14px)] after:z--1
-    after:pointer-events-auto;
+  > * {
+    --at-apply: pointer-events-auto;
+  }
+}
 
-  svg {
-    --at-apply: block align-middle;
+.dock-edge {
+  &-left, &-right, &-bottom {
+    --at-apply: absolute z--1;
   }
 
+  &-left {
+    --at-apply: left-0 top-0 w-14px h-full hover:w-60px;
+  }
+
+  &-right {
+    --at-apply: right-0 top-0 w-14px h-full hover:w-60px;
+  }
+
+  &-bottom {
+    --at-apply: left-0 bottom-0 w-full h-14px hover-h-60px;
+  }
+}
+
+.dock-content {
   &.left {
     --at-apply: left-2 after:right--4px;
   }
@@ -245,12 +270,7 @@ function toggleDockHide(hide: boolean) {
   }
 
   &.bottom {
-    --at-apply: top-unset bottom-0 items-center w-full h-[fit-content]
-      after:top--10px after:w-full;
-
-    .dock-content {
-      --at-apply: flex-row;
-    }
+    --at-apply: top-unset bottom-0 flex-row;
   }
   &.bottom.hide {
     --at-apply: opacity-0 translate-y-100%;
@@ -263,35 +283,35 @@ function toggleDockHide(hide: boolean) {
   &.bottom .divider {
     --at-apply: w-2px h-auto my-0 mx-2;
   }
+}
 
-  .dock-item {
-    --shadow: 0 0 30px 4px var(--bew-theme-color-50);
-    --shadow-dark: 0 0 30px 4px rgba(255, 255, 255, 0.6);
-    --shadow-active: 0 0 20px var(--bew-theme-color-50);
-    --shadow-dark-active: 0 0 20px rgba(255, 255, 255, 0.6);
-
-    --at-apply: transform active:scale-90
-      md:w-45px w-35px
-      md:lh-45px lh-35px
-      p-0 flex items-center justify-center
-      aspect-square relative
-      leading-0 duration-300
-      rounded-$bew-radius
-      bg-$bew-fill-2 cursor-pointer
-      hover:bg-$bew-theme-color hover:text-white hover:shadow-$shadow
-      active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active
-      dark-hover:bg-white dark-hover:text-black dark-hover:shadow-$shadow-dark;
-
-    &.active {
-      --at-apply: bg-$bew-theme-color dark-bg-white
-        text-white dark-text-black
-        shadow-$shadow dark:shadow-$shadow-dark
-        active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active;
-    }
+.dock-item {
+  --shadow: 0 0 30px 4px var(--bew-theme-color-50);
+  --shadow-dark: 0 0 30px 4px rgba(255, 255, 255, 0.6);
+  --shadow-active: 0 0 20px var(--bew-theme-color-50);
+  --shadow-dark-active: 0 0 20px rgba(255, 255, 255, 0.6);
+
+  --at-apply: transform active:scale-90
+    md:w-45px w-35px
+    md:lh-45px lh-35px
+    p-0 flex items-center justify-center
+    aspect-square relative
+    leading-0 duration-300
+    rounded-$bew-radius
+    bg-$bew-fill-2 cursor-pointer
+    hover:bg-$bew-theme-color hover:text-white hover:shadow-$shadow
+    active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active
+    dark-hover:bg-white dark-hover:text-black dark-hover:shadow-$shadow-dark;
+
+  &.active {
+    --at-apply: bg-$bew-theme-color dark-bg-white
+      text-white dark-text-black
+      shadow-$shadow dark:shadow-$shadow-dark
+      active:shadow-$shadow-active dark-active:shadow-$shadow-dark-active;
+  }
 
-    svg {
-      --at-apply: md:w-22px w-18px md:h-22px h-18px;
-    }
+  svg {
+    --at-apply: md:w-22px w-18px md:h-22px h-18px block align-middle;
   }
 }
 </style>

src/components/SearchBar/SearchBar.vue

@@ -203,7 +203,7 @@ function handleClearSearchHistory() {
         v-if="
           isFocus
             && searchHistory.length !== 0
-            && suggestions.length === 0
+            && keyword.length === 0
         "
         id="search-history"
       >
@@ -218,13 +218,16 @@ function handleClearSearchHistory() {
           <div class="history-item-container p2 flex flex-wrap gap-x-4 gap-y-2">
             <div
               v-for="item in searchHistory" :key="item.timestamp" ref="historyItemRef"
-              class="history-item flex justify-between items-center" @click="navigateToSearchResultPage(item.value)"
+              class="history-item group"
+              flex justify-between items-center
+              @click="navigateToSearchResultPage(item.value)"
             >
               <span> {{ item.value }}</span>
               <button
-                class="delete" rounded-full duration-300 pointer-events-auto cursor-pointer
-                text="base $bew-text-2"
-                leading-0 p-0 @click.stop="handleDelete(item.value)"
+                rounded-full duration-300 pointer-events-auto cursor-pointer p-1
+                text="xs $bew-text-2 hover:white" leading-0 bg="$bew-fill-2 hover:$bew-error-color"
+                pos="absolute top-0 right-0" scale-80 opacity-0 group-hover:opacity-100
+                @click.stop="handleDelete(item.value)"
               >
                 <ic-baseline-clear />
               </button>
@@ -234,9 +237,9 @@ function handleClearSearchHistory() {
       </div>
     </Transition>
 
-    <Transition>
+    <Transition name="result-list">
       <div
-        v-if="isFocus && suggestions.length !== 0"
+        v-if="isFocus && suggestions.length !== 0 && keyword.length > 0"
         id="search-suggestion"
       >
         <div
@@ -254,8 +257,8 @@ function handleClearSearchHistory() {
 </template>
 
 <style lang="scss" scoped>
-:global(.suggest_high_light) {
-  --at-apply: text-$bew-theme-color mx-[0.05em] not-italic;
+::v-deep(.suggest_high_light) {
+  --at-apply: text-$bew-theme-color not-italic;
 }
 
 .result-list-enter-active,
@@ -348,19 +351,8 @@ function handleClearSearchHistory() {
 
       .history-item-container {
         .history-item {
-          --at-apply: relative cursor-pointer hover:hover:text-$bew-theme-color;
-          --at-apply: py-2 px-6 bg-$bew-fill-2 rounded-2;
-
-          .delete {
-            --at-apply: absolute rounded-full hover:text-$bew-theme-color;
-            padding: 0.15em;
-            right: calc( -1em / 2 );
-            top: calc( -1em / 2 );
-          }
-
-          &.active {
-            --at-apply: text-$bew-text-5;
-          }
+          --at-apply: relative cursor-pointer hover:bg-$bew-fill-2 duration-300;
+          --at-apply: py-2 px-6 bg-$bew-fill-1 rounded-$bew-radius-half;
         }
       }
     }