Upgrade vue cli

Co-authored-by: tabris <tabrisdong@gmail.com>

.github/workflows/release.yml

@@ -9,16 +9,14 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v1
-      - uses: actions/cache@v2
-        id: cache
+        uses: actions/setup-node@v4
         with:
-          path: node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-      - run: yarn install --frozen-lockfile
-        if: steps.cache.outputs.cache-hit != 'true'
+          node-version: '16'
+      - run: |
+          corepack enable
+          yarn install --frozen-lockfile
       
       - name: Set env
         run: echo "RELEASE_FILE=qb-web-${GITHUB_REF#refs/*/}.zip" >> $GITHUB_ENV

.github/workflows/test.yml

@@ -6,16 +6,14 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v4
     - name: Use Node.js
-      uses: actions/setup-node@v1
-    - uses: actions/cache@v2
-      id: cache
+      uses: actions/setup-node@v4
       with:
-        path: node_modules
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-    - run: yarn install --frozen-lockfile
-      if: steps.cache.outputs.cache-hit != 'true'
+        node-version: '16'
+    - run: |
+        corepack enable
+        yarn install --frozen-lockfile
 
     - run: yarn run lint --no-fix --max-warnings 0
     - run: yarn run test:unit

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -8,7 +8,7 @@
 ## Features
 Keywords: SPA, RSS, Search, Responsive Design, Modern Design, i18n
 
-Languages: English, 中文
+Languages: English, 中文, Русский, Türkçe
 
 [TODO](https://github.com/CzBiX/qb-web/projects/2)
 
@@ -17,7 +17,7 @@ see: [Wiki](https://github.com/CzBiX/qb-web/wiki/How-to-use)
 
 ## Wiki
 
-[Use Nginx to running multi WebUI at the same time](https://github.com/CzBiX/qb-web/wiki/Use-Nginx-to-running-multi-WebUI-at-the-same-time)
+[Running multi WebUI at the same time](https://github.com/CzBiX/qb-web/wiki/Running-multi-WebUI-at-the-same-time)
 
 ## Screenshot
 

bin/fix-site-icon-size.mjs

@@ -0,0 +1,74 @@
+/* eslint-disable no-console */
+import path from 'path'
+import fs from 'fs/promises'
+import { execSync } from 'child_process'
+
+const ICON_DIR = 'src/assets/site_icons'
+const ICON_SIZE = 48
+
+function execShell(command) {
+  const output = execSync(command)
+  return output.toString().trim()
+}
+
+function isIconFile(iconPath) {
+  const output = execShell(`file -b --mime-type ${iconPath}`)
+  return output.includes('image/vnd.microsoft.icon')
+}
+
+function getIconIndex(iconPath) {
+  const output = execShell(`magick identify -format "%s:%w\\n" ${iconPath}`) 
+  let lastIndex = 0
+  for (const line of output.split('\n')) {
+    const [index, width] = line.split(':')
+    const size = parseInt(width)
+    if (size >= ICON_SIZE) {
+      return index
+    }
+
+    lastIndex = index
+  }
+
+  return lastIndex
+}
+
+function convertIcon(iconPath, outputPath) {
+  const iconIndex = getIconIndex(iconPath)
+  execShell(`magick convert -thumbnail "${ICON_SIZE}x${ICON_SIZE}>" ${iconPath}[${iconIndex}] ${outputPath}`)
+}
+
+async function fixSiteIcon(name) {
+  const iconPath = path.join(ICON_DIR, name)
+  if (!isIconFile(iconPath)) {
+    return
+  }
+
+  const tmpPath = path.join(ICON_DIR, '_tmp.ico')
+  await fs.copyFile(iconPath, tmpPath)
+  try {
+    convertIcon(tmpPath, iconPath)
+  } finally {
+    await fs.unlink(tmpPath)
+  }
+
+  console.log(`Converted ${name}`)
+}
+
+async function main() {
+  let files = []
+  if (process.argv.length > 2) {
+    files = process.argv.slice(2)
+  } else {
+    files = await fs.readdir(ICON_DIR)
+  }
+
+  files = files.filter(name => {
+    return name.endsWith('.png')
+  })
+
+  for (const name of files) {
+    await fixSiteIcon(name)
+  }
+}
+
+main()

package.json

@@ -11,44 +11,46 @@
   "dependencies": {
     "@mdi/font": "^5.0.45",
     "@types/node-polyglot": "^0.4.34",
-    "@vue/composition-api": "^0.5.0",
-    "axios": "^0.19.2",
+    "@vue/composition-api": "^1.0.5",
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.8.23",
     "debug": "^4.1.1",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.21",
     "node-polyglot": "^2.4.0",
-    "register-service-worker": "^1.7.1",
     "roboto-fontface": "*",
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.3",
-    "vue-property-decorator": "^8.4.2",
+    "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.2.0",
-    "vuetify": "^2.2.20",
+    "vuetify": "^2.5.8",
     "vuex": "^3.4.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.5",
     "@types/jest": "^25.1.4",
     "@types/lodash": "^4.14.149",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.6",
-    "@vue/cli-plugin-eslint": "~4.5.6",
-    "@vue/cli-plugin-pwa": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.6",
-    "@vue/cli-plugin-typescript": "~4.5.6",
-    "@vue/cli-plugin-unit-jest": "~4.5.6",
-    "@vue/cli-plugin-vuex": "~4.5.6",
-    "@vue/cli-service": "~4.5.6",
-    "@vue/eslint-config-typescript": "^5.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-pwa": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-typescript": "~5.0.8",
+    "@vue/cli-plugin-unit-jest": "~5.0.8",
+    "@vue/cli-plugin-vuex": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
+    "@vue/eslint-config-typescript": "^9.1.0",
     "@vue/test-utils": "1.0.0-beta.29",
-    "eslint": "^6.8.0",
-    "eslint-plugin-vue": "^6.2.2",
+    "@vue/vue2-jest": "^27.0.0-alpha.3",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "jest": "^27.1.0",
     "lint-staged": "^10.1.1",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2",
-    "typescript": "~3.9.3",
+    "ts-jest": "^27.0.4",
+    "typescript": "~4.5.5",
     "vue-cli-plugin-vuetify": "^2.0.5",
     "vue-template-compiler": "^2.6.11",
     "vuetify-loader": "^1.4.3"
@@ -61,9 +63,5 @@
       "vue-cli-service lint"
     ]
   },
-  "resolutions": {
-    "babel-jest": "^25.0.0",
-    "ts-jest": "^25.0.0",
-    "jest": "^25.0.0"
-  }
+  "packageManager": "yarn@3.5.0"
 }

src/Api.ts

@@ -174,13 +174,7 @@ class Api {
   }
 
   public getTorrentTracker(hash: string) {
-    const params = {
-      hash,
-    };
-
-    return this.axios.get('/torrents/trackers', {
-      params,
-    }).then(Api.handleResponse);
+    return this.actionTorrent('trackers', hash);
   }
 
   public getTorrentPeers(hash: string, rid?: number) {
@@ -195,7 +189,7 @@ class Api {
   }
 
   public editTracker(hash: string, origUrl: string, newUrl: string) {
-    return this.actionTorrents('editTracker', [hash], { origUrl, newUrl });
+    return this.actionTorrent('editTracker', hash, { origUrl, newUrl });
   }
 
   public setTorrentLocation(hashes: string[], location: string) {
@@ -351,6 +345,15 @@ class Api {
     return this.axios.post('/search/enablePlugin', body).then(Api.handleResponse);
   }
 
+  private actionTorrent(action: string, hash: string, extra?: any) {
+    const params: any = {
+      hash,
+      ...extra,
+    };
+    const data = new URLSearchParams(params);
+    return this.axios.post(`/torrents/${action}`, data).then(Api.handleResponse);
+  }
+
   private actionTorrents(action: string, hashes: string[], extra?: any) {
     const params: any = {
       hashes: hashes.join('|'),

src/components/Drawer.vue

@@ -60,12 +60,12 @@
 </template>
 
 <script lang="ts">
-import { sortBy, sumBy, defaultTo, isUndefined } from 'lodash';
+import { sortBy, sumBy, isUndefined } from 'lodash';
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
 
 import { tr } from '@/locale';
-import { Torrent, Category } from '@/types';
+import { Torrent, Category, Tag } from '@/types';
 import FilterGroup from './drawer/FilterGroup.vue';
 import api from '../Api';
 import { formatSize } from '@/filters';
@@ -132,6 +132,14 @@ interface MenuChildrenItem extends MenuItem {
   append?: string;
 }
 
+function getTopDomain(host: string) {
+  const parts = host.split('.');
+  if (parts.length > 2) {
+    return parts.slice(-2).join('.');
+  }
+  return host;
+}
+
 @Component({
   components: {
     FilterGroup,
@@ -141,7 +149,9 @@ interface MenuChildrenItem extends MenuItem {
       'isDataReady',
       'allTorrents',
       'allCategories',
+      'allTags',
       'torrentGroupByCategory',
+      'torrentGroupByTag',
       'torrentGroupBySite',
       'torrentGroupByState',
     ]),
@@ -154,10 +164,10 @@ export default class Drawer extends Vue {
   endItems: MenuItem[] = [
     { icon: 'mdi-delta', title: tr('logs'), click: () => this.updateOptions('showLogs', true) },
     { icon: 'mdi-card-search-outline', title: tr('search'), click: () => this.updateOptions('showSearch', true) },
+    { icon: 'mdi-rss-box', title: 'RSS', click: () => this.updateOptions('showRss', true) },
   ]
 
   pcItems: MenuItem[] = [
-    { icon: 'mdi-rss-box', title: 'RSS', click: () => this.updateOptions('showRss', true) },
     { icon: 'mdi-cog-box', title: tr('settings'), click: () => this.updateOptions('showSettings', true) },
     { icon: 'mdi-history', title: tr('label.switch_to_old_ui'), click: this.switchUi },
   ]
@@ -165,7 +175,9 @@ export default class Drawer extends Vue {
   isDataReady!: boolean
   allTorrents!: Torrent[]
   allCategories!: Category[]
+  allTags!: Tag[]
   torrentGroupByCategory!: {[category: string]: Torrent[]}
+  torrentGroupByTag!: {[tag: string]: Torrent[]}
   torrentGroupBySite!: {[site: string]: Torrent[]}
   torrentGroupByState!: {[state: string]: Torrent[]}
 
@@ -214,12 +226,31 @@ export default class Drawer extends Vue {
     });
   }
 
+  buildTagGroup(): MenuChildrenItem[] {
+    return [{
+      key: '',
+      name: tr('untagged'),
+    }].concat(this.allTags).map((tag) => {
+      let value = this.torrentGroupByTag[tag.key];
+      if (isUndefined(value)) {
+        value = [];
+      }
+      const size = formatSize(sumBy(value, 'size'));
+      const title = `${tag.name} (${value.length})`;
+      const append = `[${size}]`;
+      return {
+        icon: 'mdi-folder', title, key: tag.key, append,
+      };
+    });
+  }
+
   buildSiteGroup(): MenuChildrenItem[] {
     return sortBy(Object.entries(this.torrentGroupBySite).map(([key, value]) => {
       const size = formatSize(sumBy(value, 'size'));
-      const site = SiteMap[key];
+      const domain = getTopDomain(key);
+      const site = SiteMap[domain];
       const title = `${site ? site.name : (key || tr('others'))} (${value.length})`;
-      const icon = defaultTo(site ? site.icon : null, 'mdi-server');
+      const icon = site?.icon ?? 'mdi-server';
       const append = `[${size}]`;
       return {
         icon, title, key, append,
@@ -263,6 +294,20 @@ export default class Drawer extends Vue {
       ],
     });
 
+    filterGroups.push({
+      icon: 'mdi-menu-up',
+      'icon-alt': 'mdi-menu-down',
+      title: tr('tag', 0),
+      model: null,
+      select: 'tag',
+      children: [
+        {
+          icon: 'mdi-folder', title: `${tr('all')} (${this.allTorrents.length})`, key: null, append: `[${totalSize}]`,
+        },
+        ...this.buildTagGroup(),
+      ],
+    });
+
     filterGroups.push({
       icon: 'mdi-menu-up',
       'icon-alt': 'mdi-menu-down',

src/components/Footer.vue

@@ -39,10 +39,24 @@
         class="mx-2"
         v-if="!phoneLayout"
       />
-      <div class="icon-label">
-        <v-icon>mdi-nas</v-icon>
-        {{ info.free_space_on_disk | formatSize }}
-      </div>
+      <v-tooltip top>
+        <template v-slot:activator="{ on }">
+          <div
+            class="icon-label"
+            v-on="on"
+          >
+            <v-icon>mdi-nas</v-icon>
+            {{ info.free_space_on_disk | formatSize }}
+          </div>
+        </template>
+        <span>
+          Queued I/O jobs: {{ info.queued_io_jobs }}
+        </span>
+        <br>
+        <span>
+          Avg queue time: {{ info.average_time_queue }} ms
+        </span>
+      </v-tooltip>
       <v-divider
         vertical
         class="mx-2"

src/components/GlobalDialog.vue

@@ -117,7 +117,7 @@ export default {
       }
 
       clickBtn(null);
-    }, { lazy: true });
+    });
 
     const btns = computed(() => {
       const c = config.value;

src/components/MainToolbar.vue

@@ -45,12 +45,11 @@ import { mapMutations } from 'vuex';
 
 import Component from 'vue-class-component';
 import { Prop, Emit } from 'vue-property-decorator';
-import { ConfigPayload } from '@/store/types';
 
 @Component({
   methods: {
     ...mapMutations([
-      'updateConfig',
+      'setQuery',
     ]),
   },
 })
@@ -58,12 +57,12 @@ export default class MainToolbar extends Vue {
   @Prop(Boolean)
   readonly value!: boolean
 
-  updateConfig!: (_: ConfigPayload) => void
+  setQuery!: (_: string | null) => void
 
   focusedSearch = false
 
   get searchQuery() {
-    return this.$store.getters.config.filter.query;
+    return this.$store.state.query;
   }
 
   get phoneLayout() {
@@ -82,12 +81,7 @@ export default class MainToolbar extends Vue {
   onSearch = throttle(async (v: string) => {
     // avoid input lag
     await this.$nextTick();
-    this.updateConfig({
-      key: 'filter',
-      value: {
-        query: v,
-      },
-    });
+    this.setQuery(v || null);
   }, 400)
 }
 </script>

src/components/Torrents.vue

@@ -248,7 +248,7 @@ import api from '../Api'
 import { formatSize } from '@/filters'
 import { DialogType, TorrentFilter, ConfigPayload, DialogConfig, SnackBarConfig } from '@/store/types'
 import Component from 'vue-class-component'
-import { Torrent, Category } from '@/types'
+import { Torrent, Category, Tag } from '@/types'
 import { Watch } from 'vue-property-decorator'
 
 function getStateInfo(state: string) {
@@ -337,8 +337,10 @@ function getStateInfo(state: string) {
     ...mapGetters([
       'isDataReady',
       'allTorrents',
+      'allTags',
       'allCategories',
       'torrentGroupByCategory',
+      'torrentGroupByTag',
       'torrentGroupBySite',
       'torrentGroupByState',
     ]),
@@ -346,6 +348,9 @@ function getStateInfo(state: string) {
       filter(state, getters) {
         return getters.config.filter;
       },
+      query(state: any) {
+        return state.query;
+      },
     }),
   },
   filters: {
@@ -413,10 +418,13 @@ export default class Torrents extends Vue {
   isDataReady!: boolean
   allTorrents!: Torrent[]
   allCategories!: Category[]
+  allTags!: Tag[]
   torrentGroupByCategory!: {[category: string]: Torrent[]}
+  torrentGroupByTag!: {[tag: string]: Torrent[]}
   torrentGroupBySite!: {[site: string]: Torrent[]}
   torrentGroupByState!: {[state: string]: Torrent[]}
   filter!: TorrentFilter
+  query!: string | null
 
   updateConfig!: (_: ConfigPayload) => void
   showSnackBar!: (_: SnackBarConfig) => void
@@ -444,11 +452,14 @@ export default class Torrents extends Vue {
     if (this.filter.category !== null) {
       list = intersection(list, this.torrentGroupByCategory[this.filter.category]);
     }
+    if (this.filter.tag !== null) {
+      list = intersection(list, this.torrentGroupByTag[this.filter.tag]);
+    }
     if (this.filter.state !== null) {
       list = intersection(list, this.torrentGroupByState[this.filter.state]);
     }
-    if (this.filter.query) {
-      const q = this.filter.query.toLowerCase();
+    if (this.query) {
+      const q = this.query.toLowerCase();
 
       list = list.filter(t => {
         return t.name.toLowerCase().includes(q) ||

src/components/dialogs/InfoDialog.vue

@@ -15,16 +15,16 @@
       <v-card-text>
         <v-tabs v-model="tabSync">
           <v-tab href="#general">
-            General
+            {{ $t("prop_tab_bar.general") }}
           </v-tab>
           <v-tab href="#trackers">
-            Trackers
+            {{ $t("prop_tab_bar.trackers") }}
           </v-tab>
           <v-tab href="#peers">
-            Peers
+            {{ $t("prop_tab_bar.peers") }}
           </v-tab>
           <v-tab href="#content">
-            Content
+            {{ $t("prop_tab_bar.content") }}
           </v-tab>
         </v-tabs>
         <v-tabs-items

src/components/dialogs/Peers.vue

@@ -50,6 +50,7 @@ import { formatSize } from '../../filters';
 import BaseTorrentInfo from './baseTorrentInfo';
 import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
+import { tr } from '@/locale'
 
 @Component({
   filters: {
@@ -74,17 +75,17 @@ export default class Peers extends BaseTorrentInfo {
   readonly hash!: string
 
   headers = [
-    { text: 'IP', value: 'ip' },
-    { text: 'Connection', value: 'connection' },
-    { text: 'Flags', value: 'flags' },
-    { text: 'Client', value: 'client' },
-    { text: 'Progress', value: 'progress' },
-    { text: 'DL Speed', value: 'dl_speed' },
-    { text: 'Downloaded', value: 'downloaded' },
-    { text: 'UP Speed', value: 'up_speed' },
-    { text: 'Uploaded', value: 'uploaded' },
-    { text: 'Relevance', value: 'relevance' },
-    { text: 'Files', value: 'files' },
+    { text: tr('properties_widget.ip'), value: 'ip' },
+    { text: tr('properties_widget.connection'), value: 'connection' },
+    { text: tr('properties_widget.flags'), value: 'flags' },
+    { text: tr('properties_widget.client'), value: 'client' },
+    { text: tr('properties_widget.progress'), value: 'progress' },
+    { text: tr('properties_widget.downloadSpeed'), value: 'dl_speed' },
+    { text: tr('properties_widget.downloaded'), value: 'downloaded' },
+    { text: tr('properties_widget.uploadSpeed'), value: 'up_speed' },
+    { text: tr('properties_widget.uploaded'), value: 'uploaded' },
+    { text: tr('properties_widget.relevance'), value: 'relevance' },
+    { text: tr('properties_widget.files'), value: 'files' },
   ]
 
   peersObj: any = null

src/components/dialogs/RssDialog.vue

@@ -76,118 +76,119 @@
           </v-btn>
         </div>
         <v-divider />
-        <div class="content">
-          <div class="content-inner">
-            <div
-              v-if="!rssNode"
-              class="loading"
-            >
-              <v-progress-circular indeterminate />
-            </div>
-            <template v-else>
-              <div class="rss-items">
-                <v-treeview
-                  open-on-click
-                  open-all
-                  :items="rssTree"
-                  item-key="path"
-                  activatable
-                  dense
-                  @update:active="selectNode = $event[0]"
-                >
-                  <template v-slot:prepend="row">
-                    <v-progress-circular
-                      v-if="isItemLoading(row)"
-                      indeterminate
-                      size="22"
-                      width="2"
-                    />
-                    <v-icon
-                      v-else
-                      v-text="getRowIcon(row)"
-                    />
-                  </template>
-                  <template v-slot:label="row">
-                    {{ row.item.name }}
-                    <template v-if="row.item.children">
-                      ({{ row.item.children.length }})
-                    </template>
-                  </template>
-                </v-treeview>
-              </div>
-              <v-divider vertical />
-              <div class="rss-details">
-                <div class="rss-info">
-                  <p>
-                    {{ $t('title._') }}:
-                    <a
-                      v-if="selectItem"
-                      target="_blank"
-                      :href="selectItem.url"
-                    >{{ selectItem.title }}</a>
-                  </p>
-                  <p>{{ $t('date') }}: {{ (selectItem ? selectItem.lastBuildDate : null) | date }}</p>
-                </div>
-                <v-divider />
-                <div class="list-wrapper">
-                  <v-list
-                    v-if="selectItem"
-                    dense
-                  >
-                    <v-list-item-group
-                      v-model="selectArticle"
-                      color="primary"
-                    >
-                      <v-list-item
-                        v-for="article in sortArticles(selectItem.articles)"
-                        :key="article.id"
-                        :value="article"
-                      >
-                        <v-list-item-content>
-                          <v-list-item-title>
-                            <span
-                              :title="article.title"
-                              v-text="article.title"
-                            />
-                          </v-list-item-title>
-                        </v-list-item-content>
-                        <v-list-item-action>
-                          <v-btn
-                            icon
-                            @click.stop="downloadTorrent(article)"
-                          >
-                            <v-icon>mdi-download</v-icon>
-                          </v-btn>
-                        </v-list-item-action>
-                      </v-list-item>
-                    </v-list-item-group>
-                  </v-list>
-                </div>
-              </div>
-              <v-divider vertical />
-              <div class="rss-desc">
-                <div class="rss-info">
-                  <p>
-                    {{ $t('title._') }}:
-                    <a
-                      v-if="selectArticle"
-                      target="_blank"
-                      :href="selectArticle.link"
-                    >{{ selectArticle.title }}</a>
-                  </p>
-                  <p>{{ `${$t('category', 1)}: ${selectArticle ? selectArticle.category: ''}` }}</p>
-                  <p>{{ $t('date') }}: {{ (selectArticle ? selectArticle.date: null) | date }}</p>
-                </div>
-                <v-divider />
-                <iframe
-                  class="iframe"
-                  sandbox="allow-same-origin"
-                  v-if="selectArticle"
-                  v-body="selectArticle.description"
-                />
-              </div>
-            </template>
+        <div
+          class="content"
+          :class="{phone: $vuetify.breakpoint.smAndDown}"
+        >
+          <div
+            v-if="!rssNode"
+            class="loading"
+          >
+            <v-progress-circular indeterminate />
           </div>
+          <template v-else>
+            <div class="rss-items">
+              <v-treeview
+                open-on-click
+                open-all
+                :items="rssTree"
+                item-key="path"
+                activatable
+                dense
+                @update:active="selectNode = $event[0]"
+              >
+                <template v-slot:prepend="row">
+                  <v-progress-circular
+                    v-if="isItemLoading(row)"
+                    indeterminate
+                    size="22"
+                    width="2"
+                  />
+                  <v-icon
+                    v-else
+                    v-text="getRowIcon(row)"
+                  />
+                </template>
+                <template v-slot:label="row">
+                  {{ row.item.name }}
+                  <template v-if="row.item.children">
+                    ({{ row.item.children.length }})
+                  </template>
+                </template>
+              </v-treeview>
+            </div>
+            <v-divider :vertical="!phoneLayout" />
+            <div class="rss-details">
+              <div class="rss-info">
+                <p>
+                  {{ $t('title._') }}:
+                  <a
+                    v-if="selectItem"
+                    target="_blank"
+                    :href="selectItem.url"
+                  >{{ selectItem.title }}</a>
+                </p>
+                <p>{{ $t('date') }}: {{ (selectItem ? selectItem.lastBuildDate : null) | date }}</p>
+              </div>
+              <v-divider />
+              <div class="list-wrapper">
+                <v-list
+                  v-if="selectItem"
+                  dense
+                >
+                  <v-list-item-group
+                    v-model="selectArticle"
+                    color="primary"
+                  >
+                    <v-list-item
+                      v-for="article in sortArticles(selectItem.articles)"
+                      :key="article.id"
+                      :value="article"
+                    >
+                      <v-list-item-content>
+                        <v-list-item-title>
+                          <span
+                            :title="article.title"
+                            v-text="article.title"
+                          />
+                        </v-list-item-title>
+                      </v-list-item-content>
+                      <v-list-item-action>
+                        <v-btn
+                          icon
+                          @click.stop="downloadTorrent(article)"
+                        >
+                          <v-icon>mdi-download</v-icon>
+                        </v-btn>
+                      </v-list-item-action>
+                    </v-list-item>
+                  </v-list-item-group>
+                </v-list>
+              </div>
+            </div>
+            <v-divider :vertical="!phoneLayout" />
+            <div class="rss-desc">
+              <div class="rss-info">
+                <p>
+                  {{ $t('title._') }}:
+                  <a
+                    v-if="selectArticle"
+                    target="_blank"
+                    :href="selectArticle.link"
+                  >{{ selectArticle.title }}</a>
+                </p>
+                <p>{{ `${$t('category', 1)}: ${selectArticle ? selectArticle.category: ''}` }}</p>
+                <p>{{ $t('date') }}: {{ (selectArticle ? selectArticle.date: null) | date }}</p>
+              </div>
+              <v-divider />
+              <iframe
+                class="iframe"
+                sandbox="allow-same-origin"
+                v-if="selectArticle"
+                v-body="selectArticle.description"
+              />
+            </div>
+          </template>
         </div>
       </v-card-text>
     </v-card>
@@ -289,6 +290,10 @@ export default class RssDialog extends HasTask {
   showSnackBar!: (_: SnackBarConfig) => void
   closeSnackBar!: () => void
 
+  get phoneLayout() {
+    return this.$vuetify.breakpoint.smAndDown;
+  }
+
   get rssTree() {
     if (!this.rssNode) {
       return [];
@@ -535,14 +540,10 @@ export default class RssDialog extends HasTask {
 
 .content {
   flex: 1;
-  position: relative;
+  display: flex;
 
-  .content-inner {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    display: flex;
+  &.phone {
+    flex-direction: column;
   }
 }
 

src/components/dialogs/TorrentInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="torrent-info">
     <div class="progress">
-      <span>Progress:</span>
+      <span>{{ $t('properties_widget.progress') }}:</span>
       <canvas
         ref="canvas"
         class="progress-inner"
@@ -9,7 +9,7 @@
       <span>{{ torrent.progress | progress }}</span>
     </div>
     <fieldset>
-      <legend>Transfer</legend>
+      <legend>{{ $t('properties_widget.transfer') }}</legend>
       <v-container
         v-if="properties"
         class="pa-1"
@@ -41,7 +41,7 @@
       </v-container>
     </fieldset>
     <fieldset>
-      <legend>Information</legend>
+      <legend>{{ $t('properties_widget.information') }}</legend>
       <v-container
         v-if="properties"
         class="pa-1"
@@ -85,6 +85,7 @@ import {Torrent, TorrentProperties} from '@/types'
 import Component from 'vue-class-component'
 import {Prop, Watch} from 'vue-property-decorator'
 import BaseTorrentInfo from './baseTorrentInfo'
+import { tr } from '@/locale'
 
 interface Item {
   label: string;
@@ -108,33 +109,33 @@ export default class TorrentInfo extends BaseTorrentInfo {
 
   transfer: Item[] = [
     {
-      label: 'Time active',
-      value: prop => formatDuration(prop.time_elapsed) + (prop.seeding_time ? ` (seeded ${formatDuration(prop.seeding_time)})` : ''),
+      label: tr('properties_widget.timeActive'),
+      value: prop => formatDuration(prop.time_elapsed) + (prop.seeding_time ? ` ($tr('properties_widget.seeded') ${formatDuration(prop.seeding_time)})` : ''),
     },
-    { label: 'ETA', value: prop => formatDuration(prop.eta, { dayLimit: 100 }) },
-    { label: 'Connections', value: prop => `${prop.nb_connections} (${prop.nb_connections_limit} max)` },
-    { label: 'Downloaded', value: prop => `${formatSize(prop.total_downloaded_session)}/${formatSize(prop.total_downloaded)}` },
-    { label: 'Uploaded', value: prop => `${formatSize(prop.total_uploaded_session)}/${formatSize(prop.total_uploaded)}` },
-    { label: 'Seeds', value: prop => `${prop.seeds} (${prop.seeds_total} total)` },
-    { label: 'DL speed', value: prop => `${formatSize(prop.dl_speed)}/s` },
-    { label: 'UP speed', value: prop => `${formatSize(prop.up_speed)}/s` },
-    { label: 'Peers', value: prop => `${prop.peers} (${prop.peers_total} total)` },
-    { label: 'Wasted', value: prop => formatSize(prop.total_wasted) },
-    { label: 'Share ratio', value: prop => toPrecision(prop.share_ratio, 3) },
-    { label: 'Reannounce', value: prop => formatDuration(prop.reannounce) },
-    { label: 'Last seen', value: prop => formatTimestamp(prop.last_seen) },
+    { label: tr('properties_widget.eta'), value: prop => formatDuration(prop.eta, { dayLimit: 100 }) },
+    { label: tr('properties_widget.connections'), value: prop => `${prop.nb_connections} (${prop.nb_connections_limit} ${tr('properties_widget.max')})` },
+    { label: tr('properties_widget.downloaded'), value: prop => `${formatSize(prop.total_downloaded_session)}/${formatSize(prop.total_downloaded)}` },
+    { label: tr('properties_widget.uploaded'), value: prop => `${formatSize(prop.total_uploaded_session)}/${formatSize(prop.total_uploaded)}` },
+    { label: tr('properties_widget.seeds'), value: prop => `${prop.seeds} (${prop.seeds_total} ${tr('properties_widget.total')})` },
+    { label: tr('properties_widget.downloadSpeed'), value: prop => `${formatSize(prop.dl_speed)}/${tr('properties_widget.second')}` },
+    { label: tr('properties_widget.uploadSpeed'), value: prop => `${formatSize(prop.up_speed)}/${tr('properties_widget.second')}` },
+    { label: tr('properties_widget.peers'), value: prop => `${prop.peers} (${prop.peers_total} ${tr('properties_widget.total')})` },
+    { label: tr('properties_widget.wasted'), value: prop => formatSize(prop.total_wasted) },
+    { label: tr('properties_widget.shareRatio'), value: prop => toPrecision(prop.share_ratio, 3) },
+    { label: tr('properties_widget.reannounce'), value: prop => formatDuration(prop.reannounce) },
+    { label: tr('properties_widget.lastSeen'), value: prop => formatTimestamp(prop.last_seen) },
   ]
 
   information: Item[] = [
-    { label: 'Total size', value: prop => formatSize(prop.total_size) },
-    { label: 'Pieces', value: prop => `${prop.pieces_num} x ${formatSize(prop.piece_size)} (have ${prop.pieces_have})` },
-    { label: 'Created by', value: prop => prop.created_by },
-    { label: 'Created on', value: prop => formatTimestamp(prop.creation_date) },
-    { label: 'Added on', value: prop => formatTimestamp(prop.addition_date) },
-    { label: 'Completed on', value: prop => formatTimestamp(prop.completion_date) },
-    { label: 'Torrent hash', value: () => this.torrent.hash },
-    { label: 'Save path', value: prop => prop.save_path },
-    { label: 'Comment', value: prop => prop.comment },
+    { label: tr('properties_widget.totalSize'), value: prop => formatSize(prop.total_size) },
+    { label: tr('properties_widget.pieces'), value: prop => `${prop.pieces_num} x ${formatSize(prop.piece_size)} (${tr('properties_widget.have')} ${prop.pieces_have})` },
+    { label: tr('properties_widget.createdBy'), value: prop => prop.created_by },
+    { label: tr('properties_widget.createdOn'), value: prop => formatTimestamp(prop.creation_date) },
+    { label: tr('properties_widget.addedOn'), value: prop => formatTimestamp(prop.addition_date) },
+    { label: tr('properties_widget.completedOn'), value: prop => formatTimestamp(prop.completion_date) },
+    { label: tr('properties_widget.torrentHash'), value: () => this.torrent.hash },
+    { label: tr('properties_widget.savePath'), value: prop => prop.save_path },
+    { label: tr('properties_widget.comment'), value: prop => prop.comment },
   ]
   pieces: PieceState[] = []
   canvas: CanvasRenderingContext2D | null = null

src/components/dialogs/Trackers.vue

@@ -25,16 +25,17 @@ import api from '../../Api';
 import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
 import BaseTorrentInfo from './baseTorrentInfo';
+import { tr } from '@/locale'
 
 @Component({
   filters: {
     formatTrackerStatus(status: number) {
       const map = [
-        'Disabled',
-        'Not contacted',
-        'Working',
-        'Updating',
-        'Not working',
+        tr('properties_widget.disabled'),
+        tr('properties_widget.notContracted'),
+        tr('properties_widget.working'),
+        tr('properties_widget.updating'),
+        tr('properties_widget.notWorking'),
       ];
 
       return map[status];
@@ -53,14 +54,14 @@ export default class Trackers extends BaseTorrentInfo {
   readonly hash!: string
 
   readonly headers = [
-    { text: '#', value: 'tier' },
-    { text: 'URL', value: 'url' },
-    { text: 'Status', value: 'status' },
-    { text: 'Peers', value: 'num_peers' },
-    { text: 'Seeds', value: 'num_seeds' },
-    { text: 'Leeches', value: 'num_leeches' },
-    { text: 'Downloaded', value: 'num_downloaded' },
-    { text: 'Message', value: 'msg' },
+    { text: tr('properties_widget.tier'), value: 'tier' },
+    { text: tr('properties_widget.url'), value: 'url' },
+    { text: tr('properties_widget.status'), value: 'status' },
+    { text: tr('properties_widget.numPeers'), value: 'num_peers' },
+    { text: tr('properties_widget.numSeeds'), value: 'num_seeds' },
+    { text: tr('properties_widget.numLeeches'), value: 'num_leeches' },
+    { text: tr('properties_widget.numDownloaded'), value: 'num_downloaded' },
+    { text: tr('properties_widget.msg'), value: 'msg' },
   ]
 
   trackers = []

src/components/dialogs/settingsDialog/DownloadSettings.vue

@@ -46,6 +46,7 @@
     >
       <preference-row i18n-key="auto_tmm_enabled">
         <v-select
+          dense
           :items="torrentMode"
           :value="preferences.auto_tmm_enabled ? torrentMode[0] : torrentMode[1]"
           @change="changeSettings('auto_tmm_enabled', $event == torrentMode[0])"
@@ -53,6 +54,7 @@
       </preference-row>
       <preference-row i18n-key="torrent_changed_tmm_enabled">
         <v-select
+          dense
           :items="torrentAction"
           :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
           @change="changeSettings('torrent_changed_tmm_enabled', $event == torrentAction[1])"
@@ -60,6 +62,7 @@
       </preference-row>
       <preference-row i18n-key="save_path_changed_tmm_enabled">
         <v-select
+          dense
           :items="torrentAction"
           :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
           @change="changeSettings('save_path_changed_tmm_enabled', $event == torrentAction[1])"
@@ -67,6 +70,7 @@
       </preference-row>
       <preference-row i18n-key="category_changed_tmm_enabled">
         <v-select
+          dense
           :items="torrentAction"
           :value="preferences.category_changed_tmm_enabled ? torrentAction[1] : torrentAction[0]"
           @change="changeSettings('category_changed_tmm_enabled', $event == torrentAction[1])"
@@ -74,6 +78,7 @@
       </preference-row>
       <preference-row i18n-key="save_path">
         <v-text-field
+          dense
           :value="preferences.save_path"
           @change="changeSettings('save_path', $event)"
           lazy
@@ -82,6 +87,7 @@
       <preference-row i18n-key="temp_path">
         <template v-slot:header>
           <v-checkbox
+            dense
             :value="preferences.temp_path_enabled"
             @change="changeSettings('temp_path_enabled', $event)"
           />
@@ -91,6 +97,7 @@
           :value="preferences.temp_path"
           @change="changeSettings('temp_path', $event)"
           lazy
+          dense
         />
       </preference-row>
       <preference-row

src/components/dialogs/settingsDialog/PreferenceRow.vue

@@ -3,18 +3,19 @@
     align="center"
     dense
   >
-    <v-col cols="3">
-      <v-subheader v-text="$t('preferences.' + this.$props.i18nKey)" />
-    </v-col>
-    <v-col cols="4">
-      <slot />
-    </v-col>
     <v-col
       cols="auto"
       v-if="$slots.header"
+      class="header"
     >
       <slot name="header" />
     </v-col>
+    <v-col>
+      <span v-text="$t('preferences.' + this.$props.i18nKey)" />
+    </v-col>
+    <v-col>
+      <slot />
+    </v-col>
   </v-row>
 </template>
 
@@ -28,3 +29,9 @@ export default class PreferenceRow extends Vue {
   readonly i18nKey?: string
 }
 </script>
+
+<style lang="scss" scoped>
+.header {
+  height: 48px;
+}
+</style>

src/components/dialogs/settingsDialog/RssSettings.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-container>
+    <v-switch
+      :input-value="preferences.rss_processing_enabled"
+      :label="$t('preferences.rss_processing_enabled')"
+      @change="changeSettings('rss_processing_enabled', !preferences.rss_processing_enabled)"
+    />
+    <v-switch
+      :input-value="preferences.rss_auto_downloading_enabled"
+      :label="$t('preferences.rss_auto_downloading_enabled')"
+      @change="changeSettings('rss_auto_downloading_enabled', !preferences.rss_auto_downloading_enabled)"
+    />
+    <v-text-field
+      suffix="min"
+      type="number"
+      :value="preferences.rss_refresh_interval"
+      :label="$t('preferences.rss_refresh_interval')"
+      @change="changeSettings('rss_refresh_interval', $event)"
+    />
+  </v-container>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import {Preferences} from '@/types'
+import {Component} from 'vue-property-decorator'
+import {mapActions, mapGetters} from 'vuex'
+
+@Component({
+  components: {},
+  computed: {
+    ...mapGetters({
+      preferences: 'allPreferences',
+    }),
+  },
+  methods: {
+    ...mapActions({
+      updatePreferencesRequest: 'updatePreferencesRequest',
+    }),
+  },
+})
+export default class SpeedSettings extends Vue {
+  preferences!: Preferences
+
+  updatePreferencesRequest!: (_: any) => void
+
+  changeSettings(property: string, value: string | boolean | number) {
+    this.updatePreferencesRequest({[property]: value})
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles.scss";
+
+.v-input--switch {
+  margin: 0
+}
+
+@include dialog-title;
+</style>

src/components/dialogs/settingsDialog/SettingsDialog.vue

@@ -1,58 +1,59 @@
 <template>
-  <div>
-    <v-dialog
-      :value="value"
-      @input="$emit('input', $event)"
-      scrollable
-      persistent
-      fullscreen
-    >
-      <v-card>
-        <v-card-title class="headline">
-          <v-icon class="mr-2">mdi-cog</v-icon>
-          <span v-text="$t('settings')" />
-          <v-spacer />
-          <v-btn
-            icon
-            @click="closeDialog"
+  <v-dialog
+    :value="value"
+    @input="$emit('input', $event)"
+    scrollable
+    persistent
+    max-width="720px"
+  >
+    <v-card>
+      <v-card-title class="headline">
+        <v-icon class="mr-2">mdi-cog</v-icon>
+        <span v-text="$t('settings')" />
+        <v-spacer />
+        <v-btn
+          icon
+          @click="closeDialog"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-card-text>
+        <v-tabs v-model="tab">
+          <v-tab
+            v-for="item of tabList"
+            :key="item"
           >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </v-card-title>
-        <v-card-text>
-          <v-tabs v-model="tab">
-            <v-tab
-              v-for="item of tabList"
-              :key="item"
-            >
-              {{ $t('preferences.' + item) }}
-            </v-tab>
-          </v-tabs>
-          <v-fade-transition>
-            <v-alert
-              dense
-              text
-              type="success"
-              v-show="preferenceUpdated"
-            >
-              {{ $t('preferences.change_applied') }}
-            </v-alert>
-          </v-fade-transition>
-          <v-tabs-items v-model="tab">
-            <v-tab-item key="downloads">
-              <download-settings />
-            </v-tab-item>
-            <v-tab-item key="speed">
-              <speed-settings />
-            </v-tab-item>
-            <v-tab-item key="webui">
-              <web-u-i-settings />
-            </v-tab-item>
-          </v-tabs-items>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
-  </div>
+            {{ $t('preferences.' + item) }}
+          </v-tab>
+        </v-tabs>
+        <v-fade-transition>
+          <v-alert
+            dense
+            text
+            type="success"
+            v-show="preferenceUpdated"
+          >
+            {{ $t('preferences.change_applied') }}
+          </v-alert>
+        </v-fade-transition>
+        <v-tabs-items v-model="tab">
+          <v-tab-item key="downloads">
+            <download-settings />
+          </v-tab-item>
+          <v-tab-item key="speed">
+            <speed-settings />
+          </v-tab-item>
+          <v-tab-item key="rss">
+            <rss-settings />
+          </v-tab-item>
+          <v-tab-item key="webui">
+            <web-u-i-settings />
+          </v-tab-item>
+        </v-tabs-items>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script lang="ts">
@@ -62,7 +63,8 @@ import DownloadSettings from './DownloadSettings.vue'
 import SpeedSettings from './SpeedSettings.vue'
 import {mapGetters} from 'vuex'
 import {Preferences} from '@/types'
-import WebUISettings from '@/components/dialogs/settingsDialog/WebUISettings.vue'
+import WebUISettings from './WebUISettings.vue'
+import RssSettings from './RssSettings.vue'
 import {Config} from '@/store/config'
 import { timeout } from '@/utils'
 
@@ -71,6 +73,7 @@ import { timeout } from '@/utils'
     DownloadSettings,
     SpeedSettings,
     WebUISettings,
+    RssSettings,
   },
   computed: {
     ...mapGetters({
@@ -87,8 +90,8 @@ export default class SettingsDialog extends Vue {
   config!: Config
 
   preferenceUpdated = false
-  tabList = ['downloads', 'speed', 'webui']
-  tab = 'speed'
+  tabList = ['downloads', 'speed', 'rss', 'webui']
+  tab = 'download'
 
   @Watch('preferences')
   @Watch('config')
@@ -109,4 +112,7 @@ export default class SettingsDialog extends Vue {
 @import "~@/assets/styles.scss";
 
 @include dialog-title;
+
+::v-deep .v-card__text {
+}
 </style>

src/filters.ts

@@ -3,9 +3,15 @@ import Vue from 'vue';
 
 /* eslint-disable no-param-reassign */
 export function toPrecision(value: number, precision: number) {
-  if (value >= (10 ** precision)) {
+  const limit = 10 ** precision;
+  if (value >= limit) {
     return value.toString();
-  } if (value >= 1) {
+  }
+  if (value >= 1) {
+    if (value >= limit - 1) {
+      return limit.toString();
+    }
+
     return value.toPrecision(precision);
   }
 
@@ -14,18 +20,20 @@ export function toPrecision(value: number, precision: number) {
 
 export function formatSize(value: number): string {
   const units = 'KMGTP';
-  let index = -1;
+  let index = value ? Math.floor(Math.log2(value) / 10) : 0;
 
-  while (value >= 1000) {
+  value = value / (1024 ** index);
+  if (value >= 999) {
     value /= 1024;
     index++;
   }
 
-  const unit = index < 0 ? 'B' : `${units[index]}iB`;
+  const unit = index === 0 ? 'B' : `${units[index - 1]}iB`;
 
-  if (index < 0) {
+  if (index === 0) {
     return `${value} ${unit}`;
   }
+
   return `${toPrecision(value, 3)} ${unit}`;
 }
 

src/locale/en.ts

@@ -53,6 +53,8 @@ export default {
   all: 'All',
   category: 'Category |||| Categories',
   uncategorized: 'Uncategorized',
+  tag: 'Tag |||| Tags',
+  untagged: 'Untagged',
   others: 'Others',
   sites: 'Sites',
   files: 'Files',
@@ -109,6 +111,11 @@ export default {
     connection: 'Connections',
     bittorrent: 'BitTorrent',
 
+    rss: 'RSS',
+    rss_processing_enabled: 'Enable fetching RSS feeds',
+    rss_auto_downloading_enabled: 'Enable auto downloading of RSS torrents',
+    rss_refresh_interval: 'Feeds refresh interval',
+
     webui: 'Web UI',
     data_update_interval: 'Data Update Interval (ms)',
     webui_remote_control: 'Web User Interface (Remote control)',
@@ -119,7 +126,7 @@ export default {
     web_ui_username: 'Username',
     web_ui_password: 'Password',
     bypass_local_auth: 'Bypass authentication for clients on localhost',
-    bypass_auth_subnet_whitelist: 'Bypass authentication for clients on localhost',
+    bypass_auth_subnet_whitelist: 'Bypass authentication for clients in whitelisted IP subnets',
     web_ui_session_timeout: 'Session timeout',
     web_ui_max_auth_fail_count: 'Ban client after consecutive failures',
     web_ui_ban_duration: 'ban for',
@@ -175,30 +182,30 @@ export default {
       text: 'Are you sure you want to exit qBittorrent?',
     },
     add_torrents: {
-      placeholder: 'Upload torrents by drop them here,\nor click attachment button at right to select.',
+      placeholder: 'Upload torrents by dropping them here,\nor click attachment button at right to select.',
       hint: 'One link per line',
     },
     delete_torrents: {
-      msg: 'Are you sure to delete selected torrents from transfer list?',
+      msg: 'Are you sure you want to delete selected torrents from transfer list?',
       also_delete_same_name_torrents: 'Also delete one same named torrent |||| Also delete %{smart_count} same named torrents',
     },
     set_category: {
-      move: 'Are you sure to move selected torrents to category %{category}?',
-      reset: 'Are you sure to reset category of selected torrents?',
+      move: 'Are you sure you want to move selected torrents to category %{category}?',
+      reset: 'Are you sure you want to reset category of selected torrents?',
       also_move_same_name_torrents: 'Also move one same named torrent |||| Also move %{smart_count} same named torrents',
     },
     switch_locale: {
-      msg: 'Are you sure to switch language to %{lang}?\nThis action will reload page.',
+      msg: 'Are you sure you want to switch language to %{lang}?\nThis action will reload page.',
     },
     recheck_torrents: {
-      msg: 'Are you sure want to recheck torrents?',
+      msg: 'Are you sure you want to recheck torrents?',
     },
     rss: {
       add_feed: 'Add Feed',
       feed_url: 'Feed URL',
       auto_refresh: 'Auto Refresh',
       auto_download: 'Auto Download',
-      delete_feeds: 'Are you sure to delete selected feeds?',
+      delete_feeds: 'Are you sure you want to delete selected feeds?',
       date_format: '%{date} (%{duration} ago)',
     },
     rss_rule: {
@@ -253,4 +260,69 @@ export default {
     moving: 'moving',
     unknown: 'unknown',
   },
+
+
+  prop_tab_bar: {
+    general: 'General',
+    trackers: 'Trackers',
+    peers: 'Peers',
+    // httpSource: 'HTTP Sources',
+    content: 'Content',
+  },
+  properties_widget: {
+    disabled: 'Disabled',
+    notContracted: 'Not contacted',
+    working: 'Working',
+    updating: 'Updating',
+    notWorking: 'Not working',
+
+    tier: '#',
+    url: 'URL',
+    status: 'Status',
+    numPeers: 'Peers',
+    numSeeds: 'Seeds',
+    numLeeches: 'Leeches',
+    numDownloaded: 'Downloaded',
+    msg: 'Message',
+
+    progress: 'Progress',
+    transfer: 'Transfer',
+    information: 'Information',
+
+    timeActive: 'Time active',
+    eta: 'ETA',
+    connections: 'Connections',
+    downloaded: 'Downloaded',
+    uploaded: 'Uploaded',
+    seeds: 'Seeds',
+    downloadSpeed: 'DL speed',
+    uploadSpeed: 'UP speed',
+    peers: 'Peers',
+    wasted: 'Wasted',
+    shareRatio: 'Share ratio',
+    reannounce: 'Reannounce',
+    lastSeen: 'Last seen',
+    totalSize: 'Total size',
+    pieces: 'Pieces',
+    CreatedBy: 'Created by',
+    CreatedOn: 'Created on',
+    addedOn: 'Added on',
+    completedOn: 'Completed on',
+    torrentHash: 'Torrent hash',
+    savePath: 'Save path',
+    comment: 'Comment',
+
+    ip: 'IP',
+    connection: 'Connection',
+    flags: 'Flags',
+    client: 'Client',
+    relevance: 'Relevance',
+    files: 'Files',
+
+    seeded: 'seeded',
+    second: 's',
+    total: 'Total',
+    max: 'max',
+    have: 'have',
+  },
 }

src/locale/index.ts

@@ -4,6 +4,7 @@ import langRu from './ru';
 import langTr from './tr';
 import langZhCn from './zh-CN';
 import langZhTw from './zh-TW';
+import langNl from './nl';
 
 import { loadConfig } from '@/store/config';
 
@@ -13,6 +14,7 @@ export const translations = {
   'tr': langTr,
   'zh-CN': langZhCn,
   'zh-TW': langZhTw,
+  'nl': langNl,
 }
 
 export type LocaleKey = keyof typeof translations | null;

src/locale/nl.ts

@@ -0,0 +1,263 @@
+/* eslint-disable @typescript-eslint/camelcase */
+export default {
+    lang: 'Nederlands',
+    auto: 'Automatisch',
+  
+    close: 'Afsluiten',
+    no: 'Nee',
+    yes: 'Ja',
+    cancel: 'Annuleren',
+    ok: 'OK',
+  
+    start: 'Start',
+    stop: 'Stop',
+    submit: 'Verzend',
+    edit: 'Aanpassen',
+    delete: 'Verwijderen',
+    todo: 'Takenlijst',
+    resume: 'Hervat',
+    pause: 'Pauzeren',
+    force_start: 'Forceer Starten',
+    toggle_sequential: 'Sequentiële Downloads Inschakelen',
+    info: 'Informatie',
+    reset: 'Reset',
+    login: 'Inloggen',
+    search: 'Zoeken',
+    refresh: 'Vernieuwen',
+    location: 'Locatie',
+    rename: 'Hernoemen',
+    trigger_application_shutdown: 'qBittorrent afsluiten',
+    reannounce: 'Opnieuw Aankondigen',
+    recheck: 'Opnieuw Controleren',
+  
+    username: 'Gebruikersnaam',
+    password: 'Wachtwoord',
+  
+    name: 'Naam',
+    size: 'Grootte',
+    progress: 'Vooruitgang',
+    status: 'Status',
+    seeds: 'Seeds',
+    peers: 'Peers',
+    dl_speed: 'DL Snelheid',
+    up_speed: 'UP Snelheid',
+    eta: 'Resterende Tijd',
+    ratio: 'Deelverhouding',
+    added_on: 'Toegevoegd Op',
+  
+    settings: 'Instellingen',
+    logs: 'Logs',
+    light: 'Licht',
+    dark: 'Donker',
+  
+    all: 'Alles',
+    category: 'Categorie |||| Categoriën',
+    uncategorized: 'Zonder Categorie',
+    tag: 'Label |||| Labels',
+    untagged: 'Zonder Label',
+    others: 'Overige',
+    sites: 'Sites',
+    files: 'Bestanden',
+    less: 'Minder',
+    more: 'Meer',
+    feed: 'Feed',
+    date: 'Datum',
+    query: 'Aanvraag',
+    plugin: 'Plugin |||| Plugins',
+    action: 'Actie |||| Acties',
+    search_engine: 'Zoekmachine',
+    usage: 'Gebruik',
+    plugin_manager: 'Plugins Beheren',
+    update_plugins: 'Plugins Updaten',
+  
+    preferences: {
+      change_applied: 'Nieuwe voorkeuren opgeslagen',
+      downloads: 'Downloads',
+      adding_torrent: 'Bij het toevoegen van een torrent',
+      create_subfolder_enabled: 'Maak een subfolder voor torrents met meerdere bestanden',
+      start_paused_enabled: 'Downloads niet automatisch starten',
+      auto_delete_mode: '.torrent bestanden automatisch verwijderen',
+      preallocate_all: 'Schijfruime toewijzen voor alle bestanden',
+      incomplete_files_ext: 'Voeg .!qB-extensie toe aan onvolledige bestanden',
+      saving_management: 'Opslag Beheer',
+      auto_tmm_enabled: 'Standaard Torrent Beheermodus',
+      torrent_changed_tmm_enabled: 'Bij wijziging van Torrent Categorie',
+      save_path_changed_tmm_enabled: 'Bij wijziging van standaard opslagpad',
+      category_changed_tmm_enabled: 'Bij wijziging van Categorie opslagpad',
+      auto_mode: 'Automatisch',
+      manual_mode: 'Handmatig',
+      switch_torrent_mode_to_manual: 'Schakel deze torrent over naar handmatige modus',
+      move_affected_torrent: 'Verplaats de betreffende torrents',
+      save_path: 'Standaard opslagpad',
+      temp_path: 'Opslagpad onvolledige torrents',
+      export_dir: 'Kopieer .torrent bestanden naar',
+      export_dir_fin: 'Kopieer .torrent bestanden voor voltooide downloads naar',
+  
+      speed: 'Snelheid',
+      global_rate_limits: 'Globale snelheidslimieten',
+      alternate_rate_limits: 'Alternatieve snelheidslimieten',
+      alternate_schedule_enable_time: 'Alternatieve snelheidlimieten inplannen',
+      apply_speed_limit: 'Instellingen snelheidslimieten',
+      dl_limit: 'Downloaden (KiB/s)',
+      up_limit: 'Uploaden (KiB/s)',
+      zero_for_unlimited: '0 betekent onbeperkt',
+      schedule_from: 'Van',
+      schedule_to: 'Tot',
+      scheduler_days: 'Dagen',
+      limit_utp_rate: 'Pas snelheidslimiet toe op het µTP-protocol',
+      limit_tcp_overhead: 'Pas snelheidslimiet toe op transport overhead',
+      limit_lan_peers: 'Pas snelheidslimiet toe op peers op LAN',
+  
+      connection: 'Verbindingen',
+      bittorrent: 'BitTorrent',
+  
+      rss: 'RSS',
+      rss_processing_enabled: 'Ophalen van RSS-feeds inschakelen',
+      rss_auto_downloading_enabled: 'Automatisch downloaden van RSS-torrents inschakelen',
+      rss_refresh_interval: 'RSS-feed verversingsinterval',
+  
+      webui: 'Web Gebruikersinterface',
+      data_update_interval: 'Gegevens Update Interval (ms)',
+      webui_remote_control: 'Web Gebruikersinterface (Bediening op afstand)',
+      ip_address: 'IP-adres',
+      ip_port: 'Poort',
+      enable_upnp: 'Gebruik UPnP / NAT-PMP om de poort van mijn router door te sturen',
+      authentication: 'Authenticatie',
+      web_ui_username: 'Gebruikersnaam',
+      web_ui_password: 'Wachtwoord',
+      bypass_local_auth: 'Authenticatie omzeilen voor clients op localhost',
+      bypass_auth_subnet_whitelist: 'Authenticatie omzeilen voor clients in gewhiteliste IP-subnetten',
+      web_ui_session_timeout: 'Sessie time-out',
+      web_ui_max_auth_fail_count: 'Verban client na opeenvolgende mislukte pogingen',
+      web_ui_ban_duration: 'verban voor',
+      web_ui_seconds: 'seconden',
+      new_password: 'Wijzig huidig wachtwoord...',
+  
+      display_speed_in_title: 'Toon downloadsnelheid in paginatitel',
+    },
+  
+    title: {
+      _: 'Titel',
+      add_torrents: 'Torrents Toevoegen',
+      delete_torrents: 'Torrents Verwijderen',
+      set_category: 'Categorie Instellen',
+      edit_tracker: 'Tracker Bewerken',
+      set_location: 'Locatie Instellen',
+      recheck_torrents: 'Torrents Opnieuw Controleren',
+    },
+  
+    label: {
+      switch_to_old_ui: 'Schakel naar oude gebruikersinterface',
+      create_subfolder: 'Maak submap aan',
+      start_torrent: 'Start torrent',
+      skip_hash_check: 'Sla hashcontroler over',
+      in_sequential_order: 'Op volgorde',
+      first_and_last_pieces_first: 'Eerste en laatste delen eerst',
+  
+      also_delete_files: 'Verwijder ook bestanden',
+  
+      auto_tmm: 'Automatische TMM',
+  
+      adding: 'Toevoegen…',
+      reloading: 'Herladen…',
+      deleting: 'Verwijderen…',
+      moving: 'Verplaatsen…',
+      moved: 'Verplaatst',
+      next: 'Volgende',
+      back: 'Vorige',
+      confirm: 'Bevestigen',
+      reannounced: 'Heraangekondigd',
+      rechecking: 'Hercontroleren…',
+      dht_nodes: '%{smart_count} node |||| %{smart_count} nodes',
+      base_url: 'Base URL',
+    },
+  
+    msg: {
+      item_is_required: '%{item} is vereist',
+    },
+  
+    dialog: {
+      trigger_exit_qb: {
+        title: 'qBittorrent afsluiten',
+        text: 'Weet u zeker dat u qBittorrent wilt afsluiten?',
+      },
+      add_torrents: {
+        placeholder: 'Upload torrents door ze naar hier te slepen,\nof click rechts op de bijlageknop om ze te selecteren.',
+        hint: 'Één link per regel',
+      },
+      delete_torrents: {
+        msg: 'Weet u zeker dat u de geselecteerde torrents uit de tranferlijst wilt verwijderen?',
+        also_delete_same_name_torrents: 'Verwijder ook een torrent met dezelfde naam |||| Verwijder ook %{smart_count} torrents met dezelfde naam',
+      },
+      set_category: {
+        move: 'Weet u zeker dat u de geselecteerde torrents naar de categorie %{category} wilt verplaatsen?',
+        reset: 'Weet u zeker dat u de categorie van geselecteerde torrents wilt resetten?',
+        also_move_same_name_torrents: 'Verplaats ook een torrent met dezelfde naam |||| Verplaats ook %{smart_count} torrents met dezelfde naam',
+      },
+      switch_locale: {
+        msg: 'Weet u zeker dat u de taal wilt veranderen naar %{lang}?\nDeze actie zal de pagina herladen.',
+      },
+      recheck_torrents: {
+        msg: 'Weet u zeker dat u de torrents opnieuw wilt controleren?',
+      },
+      rss: {
+        add_feed: 'Feed toevoegen',
+        feed_url: 'Feed URL',
+        auto_refresh: 'Automatisch Vernieuwen',
+        auto_download: 'Automatisch Downloaden',
+        delete_feeds: 'Weet u zeker dat u de selecteerde feeds wilt verwijderen?',
+        date_format: '%{date} (%{duration} geleden)',
+      },
+      rss_rule: {
+        add_rule: 'Regel Toevoegen',
+        new_rule_name: 'Naam van de nieuwe regel',
+        delete_rule: 'Weet u zeker dat u de geselecteerde regel wilt verwijderen?',
+        title: 'RSS Downloader',
+        rule_settings: 'Regelinstellingen',
+  
+        use_regex: 'Gebruik Regex',
+        must_contain: 'Moet Bevatten',
+        must_not_contain: 'Mag Niet Bevatten',
+        episode_filter: 'Filter Op Aflevering',
+        smart_episode: 'Gebruik Slimme Aflevering Filter',
+        assign_category: 'Assign Category',
+  
+        apply_to_feeds: 'Pas Regel Toe op Feeds',
+      },
+    },
+  
+    category_state: {
+      _: 'Status',
+  
+      downloading: 'Downloaden',
+      seeding: 'Seeding',
+      completed: 'Voltooid',
+      resumed: 'Hervat',
+      paused: 'Gepauzeerd',
+      active: 'Actief',
+      inactive: 'Niet Actief',
+      errored: 'Fout',
+    },
+  
+    torrent_state: {
+      error: 'fout',
+      missingFiles: 'ontbrekendeBestanden',
+      uploading: 'uploaden',
+      pausedUP: 'gepauzeerdUP',
+      queuedUP: 'wachtrijdUP',
+      stalledUP: 'vastgelopenUP',
+      checkingUP: 'controleUP',
+      forcedUP: 'geforceerdUP',
+      allocating: 'toewijzen',
+      downloading: 'downloaden',
+      metaDL: 'metaDL',
+      pausedDL: 'gepauzeerdDL',
+      queuedDL: 'wachtrijdDL',
+      stalledDL: 'vastgelopenDL',
+      checkingDL: 'controleDL',
+      forceDL: 'geforceerdDL',
+      checkingResumeData: 'controleHervattingsData',
+      moving: 'verplaatsen',
+      unknown: 'onbekend',
+    },
+  }

src/locale/zh-CN.ts

@@ -18,6 +18,7 @@ export default {
   resume: '恢复',
   pause: '暂停',
   force_start: '强制继续',
+  toggle_sequential: '切换顺序下载',
   info: '信息',
   reset: '重置',
   login: '登录',
@@ -45,7 +46,6 @@ export default {
   added_on: '添加时间',
 
   settings: '设置',
-
   logs: '日志',
   light: '亮色',
   dark: '暗色',
@@ -53,6 +53,8 @@ export default {
   all: '全部',
   category: '分类',
   uncategorized: '未分类',
+  tag: '标签',
+  untagged: '无标签',
   others: '其他',
   sites: '站点',
   files: '文件',
@@ -64,6 +66,9 @@ export default {
   plugin: '插件',
   action: '操作',
   search_engine: '搜索引擎',
+  usage: '用法',
+  plugin_manager: '插件管理',
+  update_plugins: '更新插件',
 
   preferences: {
     change_applied: '配置已保存',
@@ -106,6 +111,11 @@ export default {
     connection: '连接',
     bittorrent: 'BitTorrent',
 
+    rss: 'RSS',
+    rss_processing_enabled: '启用自动刷新',
+    rss_auto_downloading_enabled: '启用自动下载种子',
+    rss_refresh_interval: '订阅刷新间隔',
+
     webui: 'Web UI',
     data_update_interval: '数据更新频率(ms)',
     webui_remote_control: 'Web 用户界面(远程控制)',
@@ -159,6 +169,7 @@ export default {
     reannounced: '已重新通告',
     rechecking: '重新检查中…',
     dht_nodes: '%{smart_count} 节点',
+    base_url: 'Base URL',
   },
 
   msg: {
@@ -249,4 +260,68 @@ export default {
     moving: '移动中',
     unknown: '未知',
   },
+
+  prop_tab_bar: {
+    general: '普通',
+    trackers: 'Tracker',
+    peers: '用户',
+    // httpSource: 'HTTP 源',
+    content: '内容',
+  },
+  properties_widget: {
+    disabled: '禁用',
+    notContracted: '未联系',
+    working: '工作',
+    updating: '更新...',
+    notWorking: '未工作',
+
+    tier: '层级',
+    url: 'URL',
+    status: '状态',
+    numPeers: '用户',
+    numSeeds: '种子',
+    numLeeches: '下载',
+    numDownloaded: '下载次数',
+    msg: '消息',
+
+    progress: '进度',
+    transfer: '传输',
+    information: '信息',
+
+    timeActive: '活动时间',
+    eta: '剩余时间',
+    connections: '连接',
+    downloaded: '已下载',
+    uploaded: '已上传',
+    seeds: '种子',
+    downloadSpeed: '下载速度',
+    uploadSpeed: '上传速度',
+    peers: '用户',
+    wasted: '已丢弃',
+    shareRatio: '分享率',
+    reannounce: '下次汇报',
+    lastSeen: '最后完整可见',
+    totalSize: '总大小',
+    pieces: '区块',
+    createdBy: '创建',
+    createdOn: '创建于',
+    addedOn: '添加于',
+    completedOn: '完成于',
+    torrentHash: '种子哈希',
+    savePath: '保存路径',
+    comment: '注释',
+
+    ip: 'IP',
+    connection: '连接',
+    flags: '标志',
+    client: '客户端',
+    relevance: '文件关联',
+    files: '文件',
+
+    seeded: '已做种',
+    second: '秒',
+    total: '总计',
+    max: '最大',
+    have: '已完成',
+  },
 }

src/main.ts

@@ -15,7 +15,6 @@ import App from './App.vue';
 
 import 'roboto-fontface/css/roboto/roboto-fontface.css';
 import '@mdi/font/css/materialdesignicons.css';
-import './registerServiceWorker';
 
 Vue.config.productionTip = false;
 

src/plugins/vuetify.ts

@@ -5,7 +5,17 @@ import i18n from '@/locale';
 Vue.use(Vuetify);
 
 let locale = i18n.locale();
-locale = locale === 'zh-CN' ? 'zh-Hans' : locale.split('-', 1)[0];
+switch (locale) {
+  case 'zh-CN':
+    locale = 'zh-Hans';
+    break;
+  case 'zh-TW':
+    locale = 'zh-Hant';
+    break;
+  default:
+    locale = locale.split('-', 1)[0];
+    break;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { default: translation } = require('vuetify/src/locale/' + locale);

src/registerServiceWorker.ts

@@ -1,32 +0,0 @@
-/* eslint-disable no-console */
-
-import { register } from 'register-service-worker'
-
-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB',
-      )
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated () {
-      console.log('New content is available; please refresh.')
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    },
-  })
-}

src/sites.ts

@@ -4,16 +4,16 @@ function getSiteIcon(name: string): string {
 
 export interface SiteInfo {
   name: string;
-  icon: string;
+  icon?: string;
 }
 
 const sites: {[key: string]: SiteInfo} = {
-  'tracker.m-team.cc': {
+  'm-team.cc': {
     name: 'M-Team',
     icon: getSiteIcon('m-team'),
   },
-  'tracker.keepfrds.com': {
-    name: 'FRDS',
+  'keepfrds.com': {
+    name: 'PT@KEEPFRDS',
     icon: getSiteIcon('keepfrds'),
   },
   'springsunday.net': {
@@ -30,12 +30,106 @@ const sites: {[key: string]: SiteInfo} = {
   },
   'hdhome.org': {
     name: 'HDHome',
-    icon: getSiteIcon('hdhome'),
+    icon: getSiteIcon('nexusphp'),
   },
-  'u2.dmhy.org': {
+  'dmhy.org': {
     name: 'U2',
     icon: getSiteIcon('u2'),
   },
+  'dmhy.best': {
+    name: 'U2',
+    icon: getSiteIcon('u2'),
+  },
+  'totheglory.im': {
+    name: 'TTG',
+    icon: getSiteIcon('totheglory'),
+  },
+  'oshen.win': {
+    name: 'OshenPT',
+    icon: getSiteIcon('nexusphp'),
+  },
+  'soulvoice.club': {
+    name: '铃音Club',
+    icon: getSiteIcon('soulvoice'),
+  },
+  'ourbits.club': {
+    name: 'OurBits',
+    icon: getSiteIcon('ourbits'),
+  },
+  'btschool.club': {
+    name: 'BTSCHOOL',
+  },
+  'ptsbao.club': {
+    name: '烧包',
+    icon: getSiteIcon('ptsbao'),
+  },
+  'pterclub.com': {
+    name: 'PTer',
+    icon: getSiteIcon('pterclub'),
+  },
+  'hdtime.org': {
+    name: 'HDTime',
+    icon: getSiteIcon('hdtime'),
+  },
+  'hddolby.com': {
+    name: 'HD Dolby',
+  },
+  'lemonhd.org': {
+    name: 'LemonHD',
+    icon: getSiteIcon('lemonhd'),
+  },
+  'hares.top': {
+    name: 'HaresClub',
+    icon: getSiteIcon('hares'),
+  },
+  'pthome.net': {
+    name: 'PTHOME',
+    icon: getSiteIcon('pthome'),
+  },
+  'hdsky.me': {
+    name: 'HDSky',
+    icon: getSiteIcon('hdsky'),
+  },
+  'hdfans.org': {
+    name: 'HDFans',
+    icon: getSiteIcon('nexusphp'),
+  },
+  'hdatmos.club': {
+    name: 'HDAtmos',
+    icon: getSiteIcon('nexusphp'),
+  },
+  'hdzone.me': {
+    name: 'HDZone',
+    icon: getSiteIcon('nexusphp'),
+  },
+  'open.cd': {
+    name: 'OpenCD',
+    icon: getSiteIcon('opencd'),
+  },
+  '1ptba.com': {
+    name: '1PTBar',
+    icon: getSiteIcon('nexusphp'),
+  },
+  'pttime.org': {
+    name: 'PTTime',
+    icon: getSiteIcon('pttime'),
+  },
+  'beitai.pt': {
+    name: '备胎',
+    icon: getSiteIcon('nexusphp'),
+  },
+  'kamept.com': {
+    name: 'kamept',
+    icon: getSiteIcon('kamept'),
+  },
+  'nicept.net': {
+    name: 'NicePT',
+    icon: getSiteIcon('nexusphp'),
+  },
+  '2xfree.org': {
+    name: '2xfree',
+    icon: getSiteIcon('2xfree'),
+  },
 };
 
 export default sites;

src/store/config.ts

@@ -13,7 +13,6 @@ export interface Config {
     state: string | null;
     category: string | null;
     site: string | null;
-    query: string | null;
   };
   locale: string | null;
   darkMode: string | null;
@@ -30,7 +29,6 @@ const defaultConfig = {
     state: null,
     category: null,
     site: null,
-    query: null,
   },
   locale: null,
   darkMode: null,

src/store/index.ts

@@ -1,4 +1,4 @@
-import { cloneDeep, merge, map, groupBy, sortBy } from 'lodash';
+import { merge, map, groupBy, sortBy } from 'lodash';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { computed, Ref } from '@vue/composition-api';
@@ -11,7 +11,9 @@ import { AllStateTypes } from '../consts';
 import { torrentIsState } from '../utils';
 import searchEngineStore from './searchEngine';
 import { RootState } from './types';
+import stateMerge from '@/utils/vue-object-merge';
 import api from '@/Api';
+import { Torrent } from '@/types'
 
 Vue.use(Vuex);
 
@@ -29,6 +31,7 @@ const store = new Vuex.Store<RootState>({
     preferences: null,
     pasteUrl: null,
     needAuth: false,
+    query: null,
   },
   mutations: {
     /* eslint-disable no-param-reassign */
@@ -39,20 +42,26 @@ const store = new Vuex.Store<RootState>({
         delete payload.full_update;
         state.mainData = payload;
       } else {
-        const tmp: any = cloneDeep(state.mainData);
+        const mainData = state.mainData!;
         if (payload.torrents_removed) {
           for (const hash of payload.torrents_removed) {
-            delete tmp.torrents[hash];
+            Vue.delete(mainData.torrents, hash);
           }
           delete payload.torrents_removed;
         }
         if (payload.categories_removed) {
           for (const key of payload.categories_removed) {
-            delete tmp.categories[key];
+            Vue.delete(mainData, key);
           }
           delete payload.categories_removed;
         }
-        state.mainData = merge(tmp, payload);
+        if (payload.tags_removed) {
+          for (const key of payload.tags_removed) {
+            Vue.delete(mainData, key);
+          }
+          delete payload.categories_removed;
+        }
+        stateMerge(mainData, payload);
       }
     },
     updatePreferences(state, payload) {
@@ -65,6 +74,9 @@ const store = new Vuex.Store<RootState>({
     updateNeedAuth(state, payload) {
       state.needAuth = payload;
     },
+    setQuery(state, payload) {
+      state.query = payload;
+    },
     /* eslint-enable no-param-reassign */
   },
   getters: {
@@ -93,9 +105,43 @@ const store = new Vuex.Store<RootState>({
         (value, key) => merge({}, value, { key }));
       return sortBy(categories, 'name');
     },
+    allTags(state) {
+      if (!state.mainData) {
+        return [];
+      }
+
+      const finalTags: any[] = []
+      const tags = state.mainData.tags ?? [];
+      for (const tag of tags) {
+        finalTags.push({
+          "key": tag,
+          "name": tag,
+        });
+      }
+      return sortBy(finalTags, 'name');
+    },
     torrentGroupByCategory(state, getters) {
       return groupBy(getters.allTorrents, torrent => torrent.category);
     },
+    torrentGroupByTag(state, getters) {
+      const result: Record<string, Torrent[]> = {}
+      for (const torrent of getters.allTorrents) {
+        if (!torrent.tags) {
+          continue;
+        }
+
+        const tags: string[] = torrent.tags.split(', ');
+        tags.forEach(tag => {
+          let list: Torrent[] = result[tag]
+          if (!list) {
+            list = []
+            result[tag] = list;
+          }
+          list.push(torrent);
+        });
+      }
+      return result;
+    },
     torrentGroupBySite(state, getters) {
       return groupBy(getters.allTorrents, (torrent) => {
         if (!torrent.tracker) {

src/store/types.ts

@@ -7,6 +7,7 @@ export interface RootState {
   preferences: any;
   pasteUrl: string | null;
   needAuth: boolean;
+  query: string | null;
 }
 
 export interface SearchEnginePage {
@@ -25,6 +26,7 @@ export interface AddFormState {
 export interface TorrentFilter {
   state: string;
   category: string;
+  tag: string;
   site: string;
   query: string;
 }

src/types.ts

@@ -66,6 +66,11 @@ export interface SimpleCategory {
   savePath?: string;
 }
 
+export interface Tag {
+  key: string;
+  name: string;
+}
+
 export interface ServerState {
   alltime_dl: number;
   alltime_ul: number;
@@ -95,6 +100,7 @@ export interface ServerState {
 
 export interface MainData {
   categories: Record<string, Category>;
+  tags: [string];
   server_state: ServerState;
   torrents: Record<string, BaseTorrent>;
 }

src/utils/index.ts

@@ -1,5 +1,5 @@
-import { StateType } from './consts';
-import { Torrent } from './types';
+import { StateType } from '@/consts';
+import { Torrent } from '@/types';
 
 const dlState = ['downloading', 'metaDL', 'stalledDL', 'checkingDL', 'pausedDL', 'queuedDL', 'forcedDL', 'allocating'];
 const upState = ['uploading', 'stalledUP', 'checkingUP', 'queuedUP', 'forcedUP'];

src/utils/vue-object-merge.ts

@@ -0,0 +1,21 @@
+import Vue from 'vue';
+import { isPlainObject } from 'lodash';
+
+// based on https://github.com/richardtallent/vue-object-merge/blob/main/index.js
+
+export const stateMerge = function(state: any, value: any, propName?: string, ignoreNull?: boolean) {
+	if (isPlainObject(state) && (propName == null || propName in state)) {
+		const o = propName == null ? state : state[propName];
+		if (o != null && isPlainObject(value)) {
+			for (const prop in value) {
+				stateMerge(o, value[prop], prop, ignoreNull);
+			}
+			return;
+		}
+	}
+	if (!ignoreNull || value !== null) Vue.set(state, propName!, value);
+
+    return state;
+};
+
+export default stateMerge;

tests/unit/filters.spec.ts

@@ -7,6 +7,8 @@ describe('to precision', () => {
   test.each([
     [0.1, 1, '0'],
     [0.1, 2, '0.1'],
+    [0.9, 1, '1'],
+    [99.5, 2, '100'],
     [122, 1, '122'],
   ])('case %#', (value, precision, result) => {
     expect(toPrecision(value, precision)).toEqual(result);
@@ -18,6 +20,8 @@ describe('format size', () => {
     [0, '0 B'],
     [10, '10 B'],
     [500, '500 B'],
+    [998, '998 B'],
+    [999, '0.98 KiB'],
     [1000, '0.98 KiB'],
   ])('case %#', (value, result) => {
     expect(formatSize(value)).toEqual(result);
@@ -40,7 +44,7 @@ describe('format duration', () => {
 
 describe('format timestamp', () => {
   test.each([
-    // [948602096, '2000-01-23 12:34:56'], # comment for timezone issue
+    // [948602096, '2000-01-23 12:34:56'], # commented out due to timezone issue
     [null, ''],
     [-1, ''],
   ])('case %#', (value, result) => {

tests/unit/store/index.spec.ts

@@ -14,6 +14,7 @@ const emtpyState: RootState = {
   preferences: null,
   pasteUrl: null,
   needAuth: false,
+  query: null,
 };
 
 const mockState = mock(emtpyState);
@@ -48,6 +49,7 @@ describe('all torrents getter', () => {
     store.replaceState(mockState({
       mainData: {
         categories: {},
+        tags: [""],
         // eslint-disable-next-line @typescript-eslint/camelcase
         server_state: undefined as any,
         torrents: {

vue.config.js

@@ -15,9 +15,6 @@ module.exports = {
       maskIcon: null,
       msTileImage: null,
     },
-    workboxOptions: {
-      importWorkboxFrom: 'local',
-    },
   },
 
   devServer: {