From eadcf7a117c898fa44a7ea65d5609eb21c3d590a Mon Sep 17 00:00:00 2001
From: WanderLandWalker <wanderlandwalker@users.noreply.github.com>
Date: Wed, 27 May 2026 13:58:37 +0800
Subject: [PATCH 1/5] feat: add Chinese i18n support with vue-i18n

---
 README.md                                     |   2 +
 README.zh.md                                  |  32 +++
 package-lock.json                             |   8 +
 package.json                                  |   1 +
 src/components/Footer.vue                     |  17 +-
 src/components/Header.vue                     |  40 +--
 src/locales/en.json                           | 266 ++++++++++++++++++
 src/locales/zh.json                           | 266 ++++++++++++++++++
 src/main.js                                   |  12 +
 src/stores/settings.ts                        |   5 +
 src/views/Alerts.vue                          |   4 +-
 src/views/Bucket.vue                          |  14 +-
 src/views/Buckets.vue                         |  62 ++--
 src/views/Graph.vue                           |  10 +-
 src/views/Home.vue                            |  47 ++--
 src/views/NotFound.vue                        |   4 +-
 src/views/QueryExplorer.vue                   |   8 +-
 src/views/Report.vue                          |   8 +-
 src/views/Search.vue                          |  20 +-
 src/views/Stopwatch.vue                       |  20 +-
 src/views/Timeline.vue                        |  50 ++--
 src/views/WorkReport.vue                      |  10 +-
 src/views/settings/ActivePatternSettings.vue  |  16 +-
 src/views/settings/CategorizationSettings.vue |  29 +-
 src/views/settings/CategoryBuilder.vue        |  63 ++---
 src/views/settings/ColorSettings.vue          |   5 +-
 src/views/settings/DaystartSettings.vue       |   9 +-
 src/views/settings/DeveloperSettings.vue      |  14 +-
 src/views/settings/LandingPageSettings.vue    |   6 +-
 .../settings/ReleaseNotificationSettings.vue  |   4 +-
 src/views/settings/Settings.vue               |   2 +-
 src/views/settings/Theme.vue                  |  32 ++-
 .../settings/TimelineDurationSettings.vue     |   4 +-
 33 files changed, 836 insertions(+), 254 deletions(-)
 create mode 100644 README.zh.md
 create mode 100644 src/locales/en.json
 create mode 100644 src/locales/zh.json

diff --git a/README.md b/README.md
index b9e1c757..f0af0f1b 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,5 @@
+[![en](README.md)](README.md) | [![zh](README.zh.md)](README.zh.md)
+
 # aw-webui
 
 A web-based UI for ActivityWatch, built with Vue.js
diff --git a/README.zh.md b/README.zh.md
new file mode 100644
index 00000000..560bf989
--- /dev/null
+++ b/README.zh.md
@@ -0,0 +1,32 @@
+[![en](README.md)](README.md) | [![zh](README.zh.md)](README.zh.md)
+
+# aw-webui
+
+ActivityWatch 的 Web 界面，使用 Vue.js 构建
+
+[![构建状态](https://github.com/ActivityWatch/aw-webui/workflows/Build/badge.svg)](https://github.com/ActivityWatch/aw-webui/actions)
+[![覆盖率](https://codecov.io/gh/ActivityWatch/aw-webui/branch/master/graph/badge.svg)](https://codecov.io/gh/ActivityWatch/aw-webui)
+[![已知漏洞](https://snyk.io/test/github/ActivityWatch/aw-webui/badge.svg)](https://snyk.io/test/github/ActivityWatch/aw-webui)
+
+## 快速开始
+
+设置开发环境非常简单：
+
+```bash
+# 以测试模式启动 aw-server 实例（端口 5666，使用独立数据库）
+# 开发模式下 Web UI 默认连接到此实例
+aw-qt --testing
+# 或不带监控器运行：
+aw-server --testing
+
+# 安装依赖
+npm install
+
+# 以开发模式运行（带有热重载）
+npm run serve
+
+# 构建生产版本
+npm run build
+```
+
+更多详情，请参阅[官方文档](https://docs.activitywatch.net)。
diff --git a/package-lock.json b/package-lock.json
index 2b7411cb..47a348f3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,6 +62,7 @@
         "vue-color": "^2.8.1",
         "vue-d3-sunburst": "git+https://github.com/ErikBjare/Vue.D3.sunburst.git#patch-1",
         "vue-datetime": "^1.0.0-beta.13",
+        "vue-i18n": "^8.28.2",
         "vuedraggable": "^2.24.3",
         "weekstart": "^1.0.1",
         "xss": "^1.0.14"
@@ -26195,6 +26196,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-i18n": {
+      "version": "8.28.2",
+      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-8.28.2.tgz",
+      "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==",
+      "deprecated": "v9 and v10 no longer supported. please migrate to v11. about maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html",
+      "license": "MIT"
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",
diff --git a/package.json b/package.json
index c4157fb3..58422972 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "vue-color": "^2.8.1",
     "vue-d3-sunburst": "git+https://github.com/ErikBjare/Vue.D3.sunburst.git#patch-1",
     "vue-datetime": "^1.0.0-beta.13",
+    "vue-i18n": "^8.28.2",
     "vuedraggable": "^2.24.3",
     "weekstart": "^1.0.1",
     "xss": "^1.0.14"
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index a2aef0a2..4de53cdf 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,30 +1,27 @@
 <template lang="pug">
 div.container(style="color: #555; font-size: 0.9em")
   div.mb-2
-    | Made with
-    a(href="https://activitywatch.net/donate/", target="_blank")
-      icon(name="heart" scale=0.75 style="fill: #E55")
-    | by the #[a(href="http://activitywatch.net/contributors/") ActivityWatch developers]
+    | {{ $t('footer.madeWith', { developers: '<a href="http://activitywatch.net/contributors/">' + $t('footer.developers') + '</a>' }) }}
     div
       span.mt-2(v-if="info", style="color: #888; font-size: 0.8em")
         span.mr-2
-          b Host:
+          b {{ $t('footer.host') }}
           | &nbsp; {{info.hostname}}
         span
-          b Version:
+          b {{ $t('footer.version') }}
           | &nbsp; {{info.version}}
 
   div(style="font-size: 0.9em; opacity: 0.8; fill: #88F")
     div.float-none.float-md-right.my-2
       a(href="https://github.com/ActivityWatch/activitywatch/issues/new/choose", target="_blank").mr-3
         icon(name="bug")
-        | Report a bug
+        | {{ $t('footer.reportBug') }}
       a(href="https://forum.activitywatch.net/c/support", target="_blank").mr-3
         icon(name="question-circle")
-        | Ask for help
+        | {{ $t('footer.askHelp') }}
       a(href="https://forum.activitywatch.net/c/features", target="_blank")
         icon(name="vote-yea")
-        | Vote on features
+        | {{ $t('footer.voteFeatures') }}
     div.float-none.float-md-left.my-2
       a(href="https://twitter.com/ActivityWatchIt", target="_blank")
         icon(name="brands/twitter")
@@ -34,7 +31,7 @@ div.container(style="color: #555; font-size: 0.9em")
         | GitHub
       a(href="https://activitywatch.net/donate/", target="_blank").ml-3
         icon(name="hand-holding-heart")
-        | Donate
+        | {{ $t('footer.donate') }}
 </template>
 
 <script lang="ts">
diff --git a/src/components/Header.vue b/src/components/Header.vue
index c7f37db3..b9537b95 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -5,7 +5,7 @@ div(:class="{'fixed-top-padding': fixedTopMenu}")
     b-navbar-nav.d-block.d-lg-none
       b-navbar-brand(to="/" style="background-color: transparent;")
         img.aligh-middle(src="/logo.png" style="height: 1.5em;")
-        span.ml-2.align-middle(style="font-size: 1em; color: #000;") ActivityWatch
+        span.ml-2.align-middle(style="font-size: 1em; color: #000;") {{ $t('app.title') }}
 
     b-navbar-toggle(target="nav-collapse")
 
@@ -15,21 +15,21 @@ div(:class="{'fixed-top-padding': fixedTopMenu}")
         b-nav-item(v-if="activityViews && activityViews.length === 1", v-for="view in activityViews", :key="view.name", :to="view.pathUrl")
           div.px-2.px-lg-1
             icon(name="calendar-day")
-            | Activity
+            | {{ $t('nav.activity') }}
 
         // If multiple (or no) activity views are available
         b-nav-item-dropdown(v-if="!activityViews || activityViews.length !== 1")
           template(slot="button-content")
             div.d-inline.px-2.px-lg-1
               icon(name="calendar-day")
-              | Activity
+              | {{ $t('nav.activity') }}
           b-dropdown-item(v-if="activityViews === null", disabled)
-            span.text-muted Loading...
+            span.text-muted {{ $t('nav.loading') }}
             br
           b-dropdown-item(v-else-if="activityViews && activityViews.length <= 0", disabled)
-            | No activity reports available
+            | {{ $t('nav.noActivityReports') }}
             br
-            small Make sure you have both an AFK and window watcher running
+            small {{ $t('nav.noActivityHint') }}
           b-dropdown-item(v-for="view in activityViews", :key="view.name", :to="view.pathUrl")
             icon(:name="view.icon")
             | {{ view.name }}
@@ -37,59 +37,59 @@ div(:class="{'fixed-top-padding': fixedTopMenu}")
         b-nav-item(to="/timeline" style="font-color: #000;")
           div.px-2.px-lg-1
             icon(name="stream")
-            | Timeline
+            | {{ $t('nav.timeline') }}
 
         b-nav-item(to="/stopwatch")
           div.px-2.px-lg-1
             icon(name="stopwatch")
-            | Stopwatch
+            | {{ $t('nav.stopwatch') }}
 
       // Brand on large screens (centered)
       b-navbar-nav.abs-center.d-none.d-lg-block
         b-navbar-brand(to="/" style="background-color: transparent;")
           img.ml-0.aligh-middle(src="/logo.png" style="height: 1.5em;")
-          span.ml-2.align-middle(style="font-size: 1.0em; color: #000;") ActivityWatch
+          span.ml-2.align-middle(style="font-size: 1.0em; color: #000;") {{ $t('app.title') }}
 
       b-navbar-nav.ml-auto
         b-nav-item-dropdown
           template(slot="button-content")
             div.d-inline.px-2.px-lg-1
               icon(name="tools")
-              | Tools
+              | {{ $t('nav.tools') }}
           b-dropdown-item(to="/search")
             icon(name="search")
-            | Search
+            | {{ $t('nav.search') }}
           b-dropdown-item(to="/work-report")
             icon(name="briefcase")
-            | Work Report
+            | {{ $t('nav.workReport') }}
           b-dropdown-item(to="/trends" v-if="devmode")
             icon(name="chart-line")
-            | Trends
+            | {{ $t('nav.trends') }}
           b-dropdown-item(to="/report" v-if="devmode")
             icon(name="chart-pie")
-            | Report
+            | {{ $t('nav.report') }}
           b-dropdown-item(to="/alerts" v-if="devmode")
             icon(name="flag-checkered")
-            | Alerts
+            | {{ $t('nav.alerts') }}
           b-dropdown-item(to="/timespiral" v-if="devmode")
             icon(name="history")
-            | Timespiral
+            | {{ $t('nav.timespiral') }}
           b-dropdown-item(to="/query")
             icon(name="code")
-            | Query
+            | {{ $t('nav.query') }}
           b-dropdown-item(to="/graph" v-if="devmode")
             // TODO: use circle-nodes instead in the future
             icon(name="project-diagram")
-            | Graph
+            | {{ $t('nav.graph') }}
 
         b-nav-item(to="/buckets")
           div.px-2.px-lg-1
             icon(name="database")
-            | Raw Data
+            | {{ $t('nav.rawData') }}
         b-nav-item(to="/settings")
           div.px-2.px-lg-1
             icon(name="cog")
-            | Settings
+            | {{ $t('nav.settings') }}
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/locales/en.json b/src/locales/en.json
new file mode 100644
index 00000000..8e0f20fe
--- /dev/null
+++ b/src/locales/en.json
@@ -0,0 +1,266 @@
+{
+  "app.title": "ActivityWatch",
+  "nav.activity": "Activity",
+  "nav.timeline": "Timeline",
+  "nav.stopwatch": "Stopwatch",
+  "nav.tools": "Tools",
+  "nav.search": "Search",
+  "nav.workReport": "Work Report",
+  "nav.trends": "Trends",
+  "nav.report": "Report",
+  "nav.alerts": "Alerts",
+  "nav.timespiral": "Timespiral",
+  "nav.query": "Query",
+  "nav.graph": "Graph",
+  "nav.rawData": "Raw Data",
+  "nav.settings": "Settings",
+  "nav.loading": "Loading...",
+  "nav.noActivityReports": "No activity reports available",
+  "nav.noActivityHint": "Make sure you have both an AFK and window watcher running",
+
+  "home.title": "Hello early user",
+  "home.intro": "It's still early days for ActivityWatch{android}. We've come a long way but we need users (like you!) to provide feedback and help us turn ActivityWatch into a successful project. Early users like you mean a lot to us, and we hope you'll reach out to us with any ideas you have for improvements!",
+  "home.introAndroid": " (especially on Android!)",
+  "home.devInvite": "If you are a developer, we hope you can contribute by writing a watcher, visualization, or something else, and share it with us on the forum!",
+  "home.thankYou": "Thank you for using ActivityWatch!",
+  "home.surveyPrompt": "If you have a minute to spare, please take the time to fill out our {survey} or {vote}.",
+  "home.survey": "user survey",
+  "home.voteFeatures": "vote on features on the forum",
+  "home.spreadWord": "Spread the word",
+  "home.spreadDesc": "Nothing is as motivating as getting ActivityWatch into the hands of users. By sharing it you get us to make ActivityWatch even better!",
+  "home.alternativeTo": "Give us a like and a review on {link}",
+  "home.productHunt": "Vote on us at {link}",
+  "home.twitterFb": "Follow us and spread the word on {twitter} and {facebook}",
+  "home.githubStar": "Star us on {link}",
+  "home.support": "Support us!",
+  "home.supportDesc": "Do you like ActivityWatch? Has it helped you? Help us help you by donating! You can donate to us via:",
+  "home.donateMore": "For more info, please visit the {link}.",
+  "home.donatePage": "donation page on the website",
+  "home.resources": "Resources",
+  "home.whatsNew": "Want to know what we're working on?",
+  "home.devUpdates": "Check out the {link}!",
+  "home.devUpdatesLink": "development updates",
+  "home.changeLanding": "You can change which page opens when you open ActivityWatch (instead of this page) in the {link}.",
+  "home.settingsLink": "settings",
+  "home.androidNote": "Note: ActivityWatch on Android is in a very early stage of development. There will be bugs, but we hope you bear with us as we refine things and get it on par with the desktop version of ActivityWatch (which you should try!).",
+
+  "timeline.title": "Timeline",
+  "timeline.eventsShown": "Events shown: {count}",
+  "timeline.swimlanes": "Swimlanes:",
+  "timeline.swimlaneNone": "None",
+  "timeline.swimlaneCategories": "Categories",
+  "timeline.swimlaneBucketType": "Bucket Specific",
+  "timeline.filters": "Filters: {summary}",
+  "timeline.filterHost": "Host:",
+  "timeline.filterClient": "Client:",
+  "timeline.filterAfk": "AFK:",
+  "timeline.filterAfkLabel": "Filter AFK",
+  "timeline.filterMerge": "Merge:",
+  "timeline.filterMergeLabel": "Merge by app",
+  "timeline.filterCategories": "Categories:",
+  "timeline.filterCategoryAll": "All",
+  "timeline.filterCategoryAdd": "Add category...",
+  "timeline.filterDuration": "Duration:",
+  "timeline.filterNone": "none",
+  "timeline.filterAfkStatus": "AFK filtered",
+  "timeline.filterMerged": "merged by app",
+  "timeline.noEvents": "No events match selected criteria. Timeline is not updated.",
+  "timeline.scrollHint": "Scroll to zoom, swipe/horizontal-scroll to pan, arrow keys to navigate",
+  "timeline.loading": "Loading...",
+
+  "settings.title": "Settings",
+  "settings.startOfDay": "Start of day",
+  "settings.startOfDayDesc": "The time at which days \"start\", since humans don't always go to bed before midnight. Set to 04:00 by default.",
+  "settings.startOfWeek": "Start of week",
+  "settings.startOfWeekDesc": "The weekday which starts a new week.",
+  "settings.durationDefault": "Duration default value",
+  "settings.durationDefaultDesc": "The default duration used for 'show last' in the timeline view.",
+  "settings.landingPage": "Landing page",
+  "settings.landingPageDesc": "The page to open when opening ActivityWatch, or clicking the logo in the top menu.",
+  "settings.home": "Home",
+  "settings.theme": "Theme",
+  "settings.themeAuto": "Auto (System)",
+  "settings.themeLight": "Light",
+  "settings.themeDark": "Dark",
+  "settings.themeDesc": "Change color theme of the application (you need to change categories colors manually to be suitable with dark mode).",
+  "settings.language": "Language",
+  "settings.languageDesc": "Change the display language of the application.",
+  "settings.chinese": "中文",
+  "settings.english": "English",
+  "settings.newRelease": "New release notification",
+  "settings.newReleaseDesc": "We will send you a notification if there is a new release available for download, this check will happen at most once per day.",
+  "settings.colorFallback": "Use fallback colors",
+  "settings.colorFallbackDesc": "Uses the old coloring style for some visualizations when uncategorized or no category color.",
+  "settings.activePattern": "Always count as active pattern",
+  "settings.activePatternDesc": "Apps or titles matching this regular expression will never be counted as AFK. Can be used to count time as active, despite no input (like meetings, or games with controllers). An empty string disables it.",
+  "settings.activePatternExample": "Example expression:",
+  "settings.activePatternEnabled": "Enabled",
+  "settings.activePatternInvalid": "Invalid pattern",
+  "settings.activePatternDisabled": "Disabled",
+  "settings.activePatternTooBroad": "Pattern too broad",
+  "settings.categorization": "Categorization",
+  "settings.categorizationDesc": "Rules for categorizing events. An event can only have one category. If several categories match, the deepest one will be chosen.",
+  "settings.categorizationBuilder": "You can use the {link} to quickly create categories from uncategorized activity.",
+  "settings.categorizationBuilderLink": "Category Builder",
+  "settings.categorizationForum": "You can also find and share categorization rule presets on {link}.",
+  "settings.categorizationForumLink": "the forum",
+  "settings.categorizationDocs": "For help on how to write categorization rules, see {link}.",
+  "settings.categorizationDocsLink": "the documentation",
+  "settings.categorySet": "Category set:",
+  "settings.categorySetNew": "New set",
+  "settings.categorySetDelete": "Delete set",
+  "settings.categorySetCount": "{count} sets available — switch sets to use different rule profiles.",
+  "settings.unsavedChanges": "You have unsaved changes!",
+  "settings.save": "Save",
+  "settings.discard": "Discard",
+  "settings.addCategory": "Add category",
+  "settings.restoreDefaults": "Restore defaults",
+  "settings.import": "Import",
+  "settings.export": "Export",
+  "settings.developer": "Developer settings",
+  "settings.developerNote": "Note: These settings are meant for developers who (hopefully) know what they are doing, and as such, may break things unexpectedly.",
+  "settings.forceDevmode": "Force devmode",
+  "settings.forceDevmodeDesc": "Devmode enables some features that are still work-in-progress.",
+  "settings.showYearly": "Show yearly time range",
+  "settings.showYearlyDesc": "Querying an entire year is a very heavy operation, and is likely to lead to timeouts. However, the query might be fast enough if you're running aw-server-rust.",
+  "settings.useMultidevice": "Use multidevice query",
+  "settings.useMultideviceDesc": "Multidevice query is where events are collected from several hosts in the Activity view. It is an early experiment, that currently does not support browser buckets (or the audible-as-active feature).",
+  "settings.requestTimeout": "Request timeout",
+  "settings.requestTimeoutDesc": "The maximum amount of time a server request can take before timing out. Setting this to a high value can be useful for large queries. Note that you need to reload the web UI for it to apply.",
+  "settings.commitHash": "Web UI commit hash: {hash}",
+
+  "categoryBuilder.title": "Categorization helper",
+  "categoryBuilder.desc1": "This tool will help you create categories from your uncategorized time.",
+  "categoryBuilder.desc2": "It works by fetching all uncategorized time for a recent timeperiod, and then finds the most common words (by time, not count) each of which may then either be ignored (if too broad/irrelevant), or used to create a new (sub)category, or to append the word to a pre-existing category rule. Words with less than 60s of time will not be shown.",
+  "categoryBuilder.desc3": "When you're done, you can inspect the categories in the {link} page.",
+  "categoryBuilder.settingsLink": "Settings",
+  "categoryBuilder.options": "Options",
+  "categoryBuilder.showOptions": "Show options",
+  "categoryBuilder.hideOptions": "Hide options",
+  "categoryBuilder.hostname": "Hostname: {hostname}",
+  "categoryBuilder.range": "Range: {start} - {stop}",
+  "categoryBuilder.commonWords": "Common words in \"{category}\" events",
+  "categoryBuilder.loading": "Loading...",
+  "categoryBuilder.noWords": "No words with significant duration. You're good to go!",
+  "categoryBuilder.newRule": "New rule",
+  "categoryBuilder.appendRule": "Append rule",
+  "categoryBuilder.ignore": "Ignore",
+  "categoryBuilder.showEvents": "Show events",
+  "categoryBuilder.hideEvents": "Hide events",
+  "categoryBuilder.titleCol": "Title",
+  "categoryBuilder.durationCol": "Duration",
+  "categoryBuilder.appendTitle": "Append rule",
+  "categoryBuilder.ruleLabel": "Rule",
+  "categoryBuilder.ruleRequired": "Category is required",
+  "categoryBuilder.wordLabel": "Word",
+  "categoryBuilder.valid": "Valid",
+  "categoryBuilder.invalidPattern": "Invalid pattern",
+  "categoryBuilder.patternTooBroad": "Pattern too broad",
+
+  "footer.madeWith": "Made with {heart} by the {developers}",
+  "footer.developers": "ActivityWatch developers",
+  "footer.host": "Host:",
+  "footer.version": "Version:",
+  "footer.reportBug": "Report a bug",
+  "footer.askHelp": "Ask for help",
+  "footer.voteFeatures": "Vote on features",
+  "footer.donate": "Donate",
+
+  "unsavedConfirm": "Your categories have unsaved changes, are you sure you want to leave?",
+  "unsavedSwitchConfirm": "You have unsaved changes. Switch sets anyway? (Changes will be discarded)",
+  "deleteSetConfirm": "Delete category set \"{id}\"? This cannot be undone.",
+  "newSetPrompt": "Name for the new category set:",
+  "setExists": "A set named \"{name}\" already exists.",
+
+  "notFound.title": "Page not found",
+  "notFound.message": "The page you were looking for doesn't exist.",
+  "notFound.goHome": "Go home",
+
+  "buckets.title": "Buckets",
+  "buckets.moreWatchers": "Are you looking to collect more data? Check out {link} for more watchers.",
+  "buckets.moreWatchersLink": "the docs",
+  "buckets.currentDevice": "(the current device)",
+  "buckets.id": "ID: {id}",
+  "buckets.lastUpdated": "Last updated:",
+  "buckets.firstSeen": "First seen:",
+  "buckets.bucketId": "Bucket ID",
+  "buckets.updated": "Updated",
+  "buckets.open": "Open",
+  "buckets.more": "More",
+  "buckets.exportJson": "Export bucket as JSON",
+  "buckets.exportCsv": "Export events as CSV",
+  "buckets.deleteBucket": "Delete bucket",
+  "buckets.deleteTitle": "Danger!",
+  "buckets.deleteConfirm": "Are you sure you want to delete bucket \"{id}\"?",
+  "buckets.deleteWarning": "This is permanent and cannot be undone!",
+  "buckets.cancel": "Cancel",
+  "buckets.confirm": "Confirm",
+  "buckets.importExport": "Import and export buckets",
+  "buckets.importTitle": "Import buckets",
+  "buckets.importPlaceholder": "Choose or drop a file here...",
+  "buckets.importDropPlaceholder": "Drop file here...",
+  "buckets.importDesc": "A valid file to import is a JSON file from either an export of a single bucket or an export from multiple buckets. If there are buckets with the same name the import will fail.",
+  "buckets.exportTitle": "Export buckets",
+  "buckets.exportAllJson": "Export all buckets as JSON",
+
+  "search.title": "Search",
+  "search.earlyDev": "This feature is still in early development.",
+  "search.placeholder": "Regex pattern to search for",
+  "search.searchBtn": "Search",
+  "search.showOptions": "Show options",
+  "search.hideOptions": "Hide options",
+  "search.options": "Options",
+  "search.searching": "Searching...",
+  "search.notFound": "Didn't find what you were looking for?",
+  "search.addWeek": "Add a week to the search:",
+
+  "stopwatch.title": "Stopwatch",
+  "stopwatch.usingBucket": "Using bucket: {id}",
+  "stopwatch.earlyExp": "This is an early experiment. Data entered here is not shown in the Activity view, yet.",
+  "stopwatch.placeholder": "What are you working on?",
+  "stopwatch.start": "Start",
+  "stopwatch.running": "Running",
+  "stopwatch.noRunning": "No stopwatch running",
+  "stopwatch.history": "History",
+  "stopwatch.noHistory": "No history to show",
+  "stopwatch.loading": "Loading...",
+
+  "notFound.title": "Woops, this page was not found!",
+  "notFound.message": "Try navigating back where you came from.",
+
+  "report.title": "Report",
+  "report.desc": "Generate a report of time spent on a certain category of device activity.",
+  "report.earlyDev": "This feature is still in early development.",
+  "report.generate": "Generate",
+
+  "graph.title": "Graph",
+  "graph.desc": "Displays a graph of categories and their transitions.",
+  "graph.earlyDev": "This feature is still in early development.",
+  "graph.maxDepth": "Max category depth",
+
+  "alerts.title": "Alerts",
+  "alerts.earlyDev": "This feature is still in early development.",
+  "alerts.goalName": "Goal name: {name}",
+
+  "bucket.type": "Type:",
+  "bucket.client": "Client:",
+  "bucket.hostname": "Hostname:",
+  "bucket.created": "Created:",
+  "bucket.firstLastEvent": "First/last event:",
+  "bucket.eventcount": "Eventcount:",
+  "bucket.data": "Data:",
+
+  "queryExplorer.title": "Query Explorer",
+  "queryExplorer.desc": "See {link} for help on how to write queries.",
+  "queryExplorer.docsLink": "the documentation",
+  "queryExplorer.start": "Start",
+  "queryExplorer.end": "End",
+
+  "workReport.title": "Work Time Report",
+  "workReport.hosts": "Hosts",
+  "workReport.hostsDesc": "Select devices to include",
+  "workReport.categories": "Categories",
+  "workReport.breakTime": "Break Time",
+
+  "loading": "Loading..."
+}
diff --git a/src/locales/zh.json b/src/locales/zh.json
new file mode 100644
index 00000000..dae83409
--- /dev/null
+++ b/src/locales/zh.json
@@ -0,0 +1,266 @@
+{
+  "app.title": "ActivityWatch",
+  "nav.activity": "活动",
+  "nav.timeline": "时间线",
+  "nav.stopwatch": "计时器",
+  "nav.tools": "工具",
+  "nav.search": "搜索",
+  "nav.workReport": "工作报告",
+  "nav.trends": "趋势",
+  "nav.report": "报表",
+  "nav.alerts": "提醒",
+  "nav.timespiral": "时间螺旋",
+  "nav.query": "查询",
+  "nav.graph": "图谱",
+  "nav.rawData": "原始数据",
+  "nav.settings": "设置",
+  "nav.loading": "加载中...",
+  "nav.noActivityReports": "没有可用的活动报告",
+  "nav.noActivityHint": "请确保 AFK 和窗口监控都在运行",
+
+  "home.title": "你好，早期用户",
+  "home.intro": "ActivityWatch{android} 仍处于早期阶段。我们已经走了很长的路，但我们需要用户（像你一样！）提供反馈，帮助我们把它变成一个成功的项目。像你这样的早期用户对我们来说意义重大，我们希望你能够向我们提出任何改进建议！",
+  "home.introAndroid": "（特别是在 Android 上！）",
+  "home.devInvite": "如果你是开发者，希望你能贡献代码，编写监控器、可视化插件或其他功能，并在论坛上与我们分享！",
+  "home.thankYou": "感谢你使用 ActivityWatch！",
+  "home.surveyPrompt": "如果你有时间，请填写我们的{survey}或在论坛上{vote}。",
+  "home.survey": "用户调查",
+  "home.voteFeatures": "投票选择功能",
+  "home.spreadWord": "帮助我们推广",
+  "home.spreadDesc": "没有什么比让更多用户了解 ActivityWatch 更激励我们了。通过分享，你帮助我们把它做得更好！",
+  "home.alternativeTo": "在 {link} 上给我们点赞和评价",
+  "home.productHunt": "在 {link} 上为我们投票",
+  "home.twitterFb": "在 {twitter} 和 {facebook} 上关注我们并帮助推广",
+  "home.githubStar": "在 {link} 上给我们加星",
+  "home.support": "支持我们！",
+  "home.supportDesc": "喜欢 ActivityWatch？它对你有帮助吗？通过捐赠帮助我们，让我们更好地帮助你！你可以通过以下方式捐赠：",
+  "home.donateMore": "更多信息，请访问网站上的{link}。",
+  "home.donatePage": "捐赠页面",
+  "home.resources": "资源",
+  "home.whatsNew": "想知道我们在做什么？",
+  "home.devUpdates": "查看{link}！",
+  "home.devUpdatesLink": "开发动态",
+  "home.changeLanding": "你可以在{link}中更改打开 ActivityWatch 时显示的页面（代替此页面）。",
+  "home.settingsLink": "设置",
+  "home.androidNote": "注意：Android 上的 ActivityWatch 仍处于非常早期的开发阶段。会有一些 bug，但我们希望你能够耐心等待，我们会不断完善它，使其与桌面版 ActivityWatch 持平（你应该试试桌面版！）。",
+
+  "timeline.title": "时间线",
+  "timeline.eventsShown": "显示事件数：{count}",
+  "timeline.swimlanes": "泳道：",
+  "timeline.swimlaneNone": "无",
+  "timeline.swimlaneCategories": "分类",
+  "timeline.swimlaneBucketType": "按桶类型",
+  "timeline.filters": "筛选器：{summary}",
+  "timeline.filterHost": "主机：",
+  "timeline.filterClient": "客户端：",
+  "timeline.filterAfk": "AFK：",
+  "timeline.filterAfkLabel": "过滤 AFK",
+  "timeline.filterMerge": "合并：",
+  "timeline.filterMergeLabel": "按应用合并",
+  "timeline.filterCategories": "分类：",
+  "timeline.filterCategoryAll": "全部",
+  "timeline.filterCategoryAdd": "添加分类...",
+  "timeline.filterDuration": "时长：",
+  "timeline.filterNone": "无",
+  "timeline.filterAfkStatus": "已过滤 AFK",
+  "timeline.filterMerged": "已按应用合并",
+  "timeline.noEvents": "没有事件符合所选条件。时间线未更新。",
+  "timeline.scrollHint": "滚动缩放，滑动/水平滚动平移，方向键导航",
+  "timeline.loading": "加载中...",
+
+  "settings.title": "设置",
+  "settings.startOfDay": "每日起始时间",
+  "settings.startOfDayDesc": "一天\"开始\"的时间，因为人类并不总是在午夜前睡觉。默认为 04:00。",
+  "settings.startOfWeek": "每周起始日",
+  "settings.startOfWeekDesc": "一周起始的星期几。",
+  "settings.durationDefault": "默认时长",
+  "settings.durationDefaultDesc": "时间线视图中\"显示最近\"使用的默认时长。",
+  "settings.landingPage": "首页",
+  "settings.landingPageDesc": "打开 ActivityWatch 或点击顶部菜单 logo 时显示的页面。",
+  "settings.home": "主页",
+  "settings.theme": "主题",
+  "settings.themeAuto": "自动（系统）",
+  "settings.themeLight": "浅色",
+  "settings.themeDark": "深色",
+  "settings.themeDesc": "更改应用程序的颜色主题（你需要手动更改分类颜色以适应深色模式）。",
+  "settings.language": "语言",
+  "settings.languageDesc": "更改应用程序的显示语言。",
+  "settings.chinese": "中文",
+  "settings.english": "English",
+  "settings.newRelease": "新版本通知",
+  "settings.newReleaseDesc": "如果有新的版本可供下载，我们会发送通知，此检查每天最多进行一次。",
+  "settings.colorFallback": "使用回退颜色",
+  "settings.colorFallbackDesc": "对于未分类或没有分类颜色的可视化，使用旧的着色风格。",
+  "settings.activePattern": "始终计为活动模式",
+  "settings.activePatternDesc": "匹配此正则表达式的应用或标题永远不会被计为 AFK。可用于将某些时间计为活跃状态（如会议或使用手柄玩游戏），即使没有输入。空字符串表示禁用。",
+  "settings.activePatternExample": "示例表达式：",
+  "settings.activePatternEnabled": "已启用",
+  "settings.activePatternInvalid": "无效模式",
+  "settings.activePatternDisabled": "已禁用",
+  "settings.activePatternTooBroad": "模式过于宽泛",
+  "settings.categorization": "分类规则",
+  "settings.categorizationDesc": "事件分类规则。一个事件只能有一个分类。如果多个分类匹配，则选择最深层的分类。",
+  "settings.categorizationBuilder": "你可以使用{link}从未分类的活动快速创建分类。",
+  "settings.categorizationBuilderLink": "分类构建器",
+  "settings.categorizationForum": "你也可以在{link}上查找和分享分类规则预设。",
+  "settings.categorizationForumLink": "论坛",
+  "settings.categorizationDocs": "关于如何编写分类规则的帮助，请参阅{link}。",
+  "settings.categorizationDocsLink": "文档",
+  "settings.categorySet": "分类集：",
+  "settings.categorySetNew": "新建集",
+  "settings.categorySetDelete": "删除集",
+  "settings.categorySetCount": "有 {count} 个分类集可用 — 切换集以使用不同的规则配置。",
+  "settings.unsavedChanges": "你有未保存的更改！",
+  "settings.save": "保存",
+  "settings.discard": "丢弃",
+  "settings.addCategory": "添加分类",
+  "settings.restoreDefaults": "恢复默认",
+  "settings.import": "导入",
+  "settings.export": "导出",
+  "settings.developer": "开发者设置",
+  "settings.developerNote": "注意：这些设置面向希望了解其作用的开发者，可能会意外破坏功能。",
+  "settings.forceDevmode": "强制开发者模式",
+  "settings.forceDevmodeDesc": "开发者模式启用一些仍在开发中的功能。",
+  "settings.showYearly": "显示年度时间范围",
+  "settings.showYearlyDesc": "查询整年是非常重的操作，可能导致超时。不过，如果你运行的是 aw-server-rust，查询可能足够快。",
+  "settings.useMultidevice": "使用多设备查询",
+  "settings.useMultideviceDesc": "多设备查询从活动视图中的多个主机收集事件。这是一个早期实验，目前不支持浏览器桶（或 audible-as-active 功能）。",
+  "settings.requestTimeout": "请求超时",
+  "settings.requestTimeoutDesc": "服务器请求超时的最大时间。设置为较大的值对大型查询很有用。注意，你需要重新加载 Web UI 才能生效。",
+  "settings.commitHash": "Web UI 提交哈希：{hash}",
+
+  "categoryBuilder.title": "分类辅助工具",
+  "categoryBuilder.desc1": "此工具帮助你从未分类的时间中创建分类。",
+  "categoryBuilder.desc2": "它通过获取最近一段时间内的所有未分类时间，然后按时间（而非次数）找出最常见的词语。每个词语可以被忽略（如果过于宽泛或不相关），用于创建新的（子）分类，或附加到已有分类规则中。少于 60 秒的词语将不会显示。",
+  "categoryBuilder.desc3": "完成后，你可以在{link}页面中查看分类。",
+  "categoryBuilder.settingsLink": "设置",
+  "categoryBuilder.options": "选项",
+  "categoryBuilder.showOptions": "显示选项",
+  "categoryBuilder.hideOptions": "隐藏选项",
+  "categoryBuilder.hostname": "主机名：{hostname}",
+  "categoryBuilder.range": "范围：{start} - {stop}",
+  "categoryBuilder.commonWords": "在 \"{category}\" 事件中的常见词语",
+  "categoryBuilder.loading": "加载中...",
+  "categoryBuilder.noWords": "没有具有显著时长的词语。可以开始了！",
+  "categoryBuilder.newRule": "新建规则",
+  "categoryBuilder.appendRule": "追加规则",
+  "categoryBuilder.ignore": "忽略",
+  "categoryBuilder.showEvents": "显示事件",
+  "categoryBuilder.hideEvents": "隐藏事件",
+  "categoryBuilder.titleCol": "标题",
+  "categoryBuilder.durationCol": "时长",
+  "categoryBuilder.appendTitle": "追加规则",
+  "categoryBuilder.ruleLabel": "规则",
+  "categoryBuilder.ruleRequired": "必须选择分类",
+  "categoryBuilder.wordLabel": "词语",
+  "categoryBuilder.valid": "有效",
+  "categoryBuilder.invalidPattern": "无效模式",
+  "categoryBuilder.patternTooBroad": "模式过于宽泛",
+
+  "footer.madeWith": "由 {developers} 用心打造",
+  "footer.developers": "ActivityWatch 开发团队",
+  "footer.host": "主机：",
+  "footer.version": "版本：",
+  "footer.reportBug": "报告问题",
+  "footer.askHelp": "寻求帮助",
+  "footer.voteFeatures": "功能投票",
+  "footer.donate": "捐赠",
+
+  "unsavedConfirm": "你的分类有未保存的更改，确定要离开吗？",
+  "unsavedSwitchConfirm": "你有未保存的更改。仍然切换集吗？（更改将被丢弃）",
+  "deleteSetConfirm": "删除分类集 \"{id}\"？此操作无法撤销。",
+  "newSetPrompt": "新分类集的名称：",
+  "setExists": "名为 \"{name}\" 的集已存在。",
+
+  "notFound.title": "页面未找到",
+  "notFound.message": "你要查找的页面不存在。",
+  "notFound.goHome": "返回首页",
+
+  "buckets.title": "数据桶",
+  "buckets.moreWatchers": "想要收集更多数据？查看{link}了解更多监控器。",
+  "buckets.moreWatchersLink": "文档",
+  "buckets.currentDevice": "（当前设备）",
+  "buckets.id": "ID：{id}",
+  "buckets.lastUpdated": "最后更新：",
+  "buckets.firstSeen": "首次看到：",
+  "buckets.bucketId": "桶 ID",
+  "buckets.updated": "更新于",
+  "buckets.open": "打开",
+  "buckets.more": "更多",
+  "buckets.exportJson": "导出桶为 JSON",
+  "buckets.exportCsv": "导出事件为 CSV",
+  "buckets.deleteBucket": "删除桶",
+  "buckets.deleteTitle": "危险！",
+  "buckets.deleteConfirm": "确定要删除桶 \"{id}\" 吗？",
+  "buckets.deleteWarning": "此操作是永久性的，无法撤销！",
+  "buckets.cancel": "取消",
+  "buckets.confirm": "确认",
+  "buckets.importExport": "导入和导出数据桶",
+  "buckets.importTitle": "导入数据桶",
+  "buckets.importPlaceholder": "选择或拖放文件到这里...",
+  "buckets.importDropPlaceholder": "将文件拖放到此处...",
+  "buckets.importDesc": "有效的导入文件是来自单个桶或多个桶导出的 JSON 文件。如果有同名桶，导入将失败。",
+  "buckets.exportTitle": "导出数据桶",
+  "buckets.exportAllJson": "导出所有桶为 JSON",
+
+  "search.title": "搜索",
+  "search.earlyDev": "此功能仍在早期开发阶段。",
+  "search.placeholder": "输入正则表达式模式搜索",
+  "search.searchBtn": "搜索",
+  "search.showOptions": "显示选项",
+  "search.hideOptions": "隐藏选项",
+  "search.options": "选项",
+  "search.searching": "搜索中...",
+  "search.notFound": "没有找到你要的内容？",
+  "search.addWeek": "向搜索添加一周：",
+
+  "stopwatch.title": "计时器",
+  "stopwatch.usingBucket": "使用桶：{id}",
+  "stopwatch.earlyExp": "这是一个早期实验。在此输入的数据暂不会显示在活动视图中。",
+  "stopwatch.placeholder": "你在做什么？",
+  "stopwatch.start": "开始",
+  "stopwatch.running": "运行中",
+  "stopwatch.noRunning": "没有正在运行的计时器",
+  "stopwatch.history": "历史记录",
+  "stopwatch.noHistory": "没有历史记录",
+  "stopwatch.loading": "加载中...",
+
+  "notFound.title": "哎呀，找不到这个页面！",
+  "notFound.message": "尝试导航回你来的地方。",
+
+  "report.title": "报表",
+  "report.desc": "生成某个设备活动分类的时间花费报表。",
+  "report.earlyDev": "此功能仍在早期开发阶段。",
+  "report.generate": "生成",
+
+  "graph.title": "图谱",
+  "graph.desc": "显示分类及其转换关系的图谱。",
+  "graph.earlyDev": "此功能仍在早期开发阶段。",
+  "graph.maxDepth": "最大分类深度",
+
+  "alerts.title": "提醒",
+  "alerts.earlyDev": "此功能仍在早期开发阶段。",
+  "alerts.goalName": "目标名称：{name}",
+
+  "bucket.type": "类型：",
+  "bucket.client": "客户端：",
+  "bucket.hostname": "主机名：",
+  "bucket.created": "创建时间：",
+  "bucket.firstLastEvent": "首个/最后事件：",
+  "bucket.eventcount": "事件数：",
+  "bucket.data": "数据：",
+
+  "queryExplorer.title": "查询浏览器",
+  "queryExplorer.desc": "查看{link}获取编写查询的帮助。",
+  "queryExplorer.docsLink": "文档",
+  "queryExplorer.start": "开始",
+  "queryExplorer.end": "结束",
+
+  "workReport.title": "工作时间报告",
+  "workReport.hosts": "主机",
+  "workReport.hostsDesc": "选择要包含的设备",
+  "workReport.categories": "分类",
+  "workReport.breakTime": "休息时间",
+
+  "loading": "加载中..."
+}
diff --git a/src/main.js b/src/main.js
index 54dcca01..a2c4d088 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,17 @@ import './style/style.scss';
 // Loads all the filters
 import './util/filters.js';
 
+// Load i18n
+import VueI18n from 'vue-i18n';
+Vue.use(VueI18n);
+import en from './locales/en.json';
+import zh from './locales/zh.json';
+const i18n = new VueI18n({
+  locale: localStorage.getItem('locale') || navigator.language.startsWith('zh') ? 'zh' : 'en',
+  fallbackLocale: 'en',
+  messages: { en, zh },
+});
+
 // Sets up the routing and the base app (using vue-router)
 import router from './route.js';
 
@@ -88,6 +99,7 @@ new Vue({
   router: router,
   render: h => h(App),
   pinia,
+  i18n,
 });
 
 // Set the $aw global
diff --git a/src/stores/settings.ts b/src/stores/settings.ts
index 39fb78cc..45ee4079 100644
--- a/src/stores/settings.ts
+++ b/src/stores/settings.ts
@@ -50,6 +50,9 @@ interface State {
   useMultidevice: boolean;
   requestTimeout: number;
 
+  // Display language
+  locale: string;
+
   // Set to true if settings loaded
   _loaded: boolean;
 }
@@ -84,6 +87,8 @@ export const useSettingsStore = defineStore('settings', {
     active_set_ids: ['default'],
     views: defaultViews,
 
+    locale: 'en',
+
     // Developer settings
     // NOTE: PRODUCTION might be undefined (in tests, for example)
     devmode: typeof PRODUCTION === 'undefined' ? true : !PRODUCTION,
diff --git a/src/views/Alerts.vue b/src/views/Alerts.vue
index f5d2fc93..108ba23c 100644
--- a/src/views/Alerts.vue
+++ b/src/views/Alerts.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  h3 Alerts
+  h3 {{ $t('alerts.title') }}
 
   // TODO: Call this "goals" instead? (alerts is more general, but goals might fit the most common use better
   // TODO: Support 'less than' goals
@@ -8,7 +8,7 @@ div
   // TODO: Query from day start, not 24h ago
 
   b-alert(style="warning" show)
-    | This feature is still in early development.
+    | {{ $t('alerts.earlyDev') }}
 
   b-alert(v-if="error" show variant="danger")
     | {{error}}
diff --git a/src/views/Bucket.vue b/src/views/Bucket.vue
index 4d7d9ad5..ab8699da 100644
--- a/src/views/Bucket.vue
+++ b/src/views/Bucket.vue
@@ -3,27 +3,27 @@ div
   h3 {{ id }}
   table
     tr
-      th Type:
+      th {{ $t('bucket.type') }}
       td {{ bucket.type }}
     tr
-      th Client:
+      th {{ $t('bucket.client') }}
       td {{ bucket.client }}
     tr
-      th Hostname:
+      th {{ $t('bucket.hostname') }}
       td {{ bucket.hostname }}
     tr
-      th Created:
+      th {{ $t('bucket.created') }}
       td {{ bucket.created | iso8601 }}
     tr(v-if="bucket.metadata")
-      th First/last event:
+      th {{ $t('bucket.firstLastEvent') }}
       td
         | {{ bucket.metadata.start}} /
         | {{ bucket.metadata.end }}
     tr
-      th Eventcount:
+      th {{ $t('bucket.eventcount') }}
       td {{ eventcount }}
     tr
-      th Data:
+      th {{ $t('bucket.data') }}
       td {{ bucket.data }}
 
   input-timeinterval(v-model="daterange", :maxDuration="maxDuration")
diff --git a/src/views/Buckets.vue b/src/views/Buckets.vue
index 1c9100ef..8e28265d 100644
--- a/src/views/Buckets.vue
+++ b/src/views/Buckets.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
 div
-  h2 Buckets
+  h2 {{ $t('buckets.title') }}
 
   b-alert(show)
-    | Are you looking to collect more data? Check out #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the docs] for more watchers.
+    | {{ $t('buckets.moreWatchers', { link: '<a href=\"https://activitywatch.readthedocs.io/en/latest/watchers.html\">' + $t('buckets.moreWatchersLink') + '</a>' }) }}
 
   // By device
   b-card.mb-3(v-for="device in bucketsStore.bucketsByDevice", :key="device.hostname || device.device_id")
@@ -17,18 +17,18 @@ div
         div
           b {{ device.hostname }}
           span.small.ml-2(v-if="serverStore.info.hostname == device.hostname")
-            | (the current device)
+            | {{ $t('buckets.currentDevice') }}
           div.small
             div(v-if="device.hostname !== device.device_id", style="color: #666")
-              | ID: {{ device.id }}
+              | {{ $t('buckets.id', { id: device.id }) }}
             div
-              | Last updated:&nbsp;
+              | {{ $t('buckets.lastUpdated') }}&nbsp;
               time(:style="{'color': isRecent(device.last_updated) ? 'green' : 'inherit'}",
                    :datetime="device.last_updated",
                    :title="device.last_updated")
                 | {{ device.last_updated | friendlytime }}
             div
-              | First seen:&nbsp;
+              | {{ $t('buckets.firstSeen') }}&nbsp;
               time(:datetime="device.first_seen",
                    :title="device.first_seen")
                 | {{ device.first_seen | friendlytime }}
@@ -42,28 +42,28 @@ div
           template(v-slot:cell(actions)="data")
             b-button-toolbar.float-right
               b-button-group(size="sm", class="mx-1")
-                b-button(variant="primary", :to="'/buckets/' + data.item.id")
+          b-button(variant="primary", :to="'/buckets/' + data.item.id")
                   icon(name="folder-open").d-none.d-md-inline-block
-                  | Open
-                b-dropdown(variant="outline-secondary", size="sm", text="More")
+                  | {{ $t('buckets.open') }}
+                b-dropdown(variant="outline-secondary", size="sm", :text="$t('buckets.more')")
                   // FIXME: These also exist as almost-copies in the Bucket view, can maybe be shared/reused instead.
                   b-dropdown-item(
                              @click="export_bucket_json(data.item.id)",
-                             title="Export bucket to JSON",
+                             :title="$t('buckets.exportJson')",
                              variant="secondary")
                       icon(name="download")
-                      | Export bucket as JSON
+                      | {{ $t('buckets.exportJson') }}
                   b-dropdown-item(
-                              @click="export_csv(data.item.id)",
-                             title="Export events to CSV",
-                             variant="secondary")
+                               @click="export_csv(data.item.id)",
+                              :title="$t('buckets.exportCsv')",
+                              variant="secondary")
                       icon(name="download")
-                      | Export events as CSV
+                      | {{ $t('buckets.exportCsv') }}
                   b-dropdown-divider
                   b-dropdown-item-button(@click="openDeleteBucketModal(data.item.id)",
-                           title="Delete this bucket permanently",
+                           :title="$t('buckets.deleteBucket')",
                            variant="danger")
-                    | #[icon(name="trash")] Delete bucket
+                    | #[icon(name="trash")] {{ $t('buckets.deleteBucket') }}
 
     // Checks
     hr.mt-1(v-if="runChecks(device).length > 0")
@@ -72,38 +72,36 @@ div
       | &nbsp;
       | {{ msg }}
 
-  b-modal(id="delete-modal", title="Danger!", centered, hide-footer)
-    | Are you sure you want to delete bucket "{{delete_bucket_selected}}"?
+  b-modal(id="delete-modal", :title="$t('buckets.deleteTitle')", centered, hide-footer)
+    | {{ $t('buckets.deleteConfirm', { id: delete_bucket_selected }) }}
     br
     br
-    b This is permanent and cannot be undone!
+    b {{ $t('buckets.deleteWarning') }}
     hr
     div.float-right
       b-button.mx-2(@click="$root.$emit('bv::hide::modal','delete-modal')")
-        | Cancel
+        | {{ $t('buckets.cancel') }}
       b-button(@click="deleteBucket(delete_bucket_selected)", variant="danger")
-        | Confirm
+        | {{ $t('buckets.confirm') }}
 
-  h3 Import and export buckets
+  h3 {{ $t('buckets.importExport') }}
 
   b-card-group.deck
-    b-card(header="Import buckets")
+    b-card(:header="$t('buckets.importTitle')")
       b-alert(v-if="import_error" show variant="danger" dismissable)
         | {{ import_error }}
       b-form-file(v-model="import_file"
-                  placeholder="Choose or drop a file here..."
-                  drop-placeholder="Drop file here...")
+                  :placeholder="$t('buckets.importPlaceholder')"
+                  :drop-placeholder="$t('buckets.importDropPlaceholder')")
       // TODO: This spinner could be placed in a more suitable place
       div(v-if="import_file" class="spinner-border" role="status")
-      span
-        | A valid file to import is a JSON file from either an export of a single bucket or an export from multiple buckets.
-        | If there are buckets with the same name the import will fail.
-    b-card(header="Export buckets")
+      span {{ $t('buckets.importDesc') }}
+    b-card(:header="$t('buckets.exportTitle')")
       b-button(@click="export_all_buckets_json()",
-               title="Export all buckets to JSON",
+               :title="$t('buckets.exportAllJson')",
                variant="outline-secondary")
         icon(name="download")
-        | Export all buckets as JSON
+        | {{ $t('buckets.exportAllJson') }}
 
   hr
 
diff --git a/src/views/Graph.vue b/src/views/Graph.vue
index d746c95a..0f8c4802 100644
--- a/src/views/Graph.vue
+++ b/src/views/Graph.vue
@@ -1,20 +1,20 @@
 <template lang="pug">
 div
-  h3 Graph
+  h3 {{ $t('graph.title') }}
 
   b-alert(show variant="warning")
-    | This feature is still in early development. See PR #[a(href="https://github.com/ActivityWatch/aw-webui/pull/365") aw-webui#365] for more information.
+    | {{ $t('graph.earlyDev') }} See PR #[a(href="https://github.com/ActivityWatch/aw-webui/pull/365") aw-webui#365] for more information.
 
-  | Displays a graph of categories and their transitions.
+  | {{ $t('graph.desc') }}
 
   b-alert.mt-2(style="warning" show)
-    | This feature is still in early development.
+    | {{ $t('graph.earlyDev') }}
 
   b-alert(v-if="error" show variant="danger")
     | {{error}}
 
   // Specify max category depth
-  b-form-group(label="Max category depth")
+  b-form-group(:label="$t('graph.maxDepth')")
     b-form-input(v-model="maxDepth" type="number" min="1")
 
   // Toggle to exclude uncategorized
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 25eaf174..f733ec1b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,51 +1,43 @@
 <template lang="pug">
 div
   b-alert(v-if="$isAndroid" show)
-    | #[b Note:] ActivityWatch on Android is in a very early stage of development. There will be bugs, but we hope you bear with us as we refine things and get it on par with the desktop version of ActivityWatch (which you should try!).
+    | #[b {{ $t('home.androidNote') }}]
 
-  h3 Hello early user,
+  h3 {{ $t('home.title') }}
+  p(v-if="$isAndroid") {{ $t('home.intro', { android: $t('home.introAndroid') }) }}
+  p(v-else) {{ $t('home.intro', { android: '' }) }}
+  p {{ $t('home.devInvite') }}
   p
-    | It's still early days for ActivityWatch#[span(v-if="$isAndroid") (especially on Android!)]. We've come a long way but we need users (like you!)
-    | to provide feedback and help us turn ActivityWatch into a successful project.
-    | Early users like you mean a lot to us, and we hope you'll reach out to us with any ideas you have for improvements!
-  p
-    | If you are a developer, we hope you can contribute by writing a watcher, visualization, or something else, and share it with us on the forum!
-  p
-    div Thank you for using ActivityWatch!
-    small If you have a minute to spare, please take the time to fill out our #[a(href="https://forms.gle/q2N9K5RoERBV8kqPA") user survey] or #[a(href="https://forum.activitywatch.net/c/features") vote on features on the forum].
+    div {{ $t('home.thankYou') }}
+    small(v-html="$t('home.surveyPrompt', { survey: '<a href=\"https://forms.gle/q2N9K5RoERBV8kqPA\">' + $t('home.survey') + '</a>', vote: '<a href=\"https://forum.activitywatch.net/c/features\">' + $t('home.voteFeatures') + '</a>' })")
 
   hr
 
   div.row
     div.col-md-6
-      h4 Spread the word
-      p
-        | Nothing is as motivating as getting ActivityWatch into the hands of users.
-        | By sharing it you get us to make ActivityWatch even better!
+      h4 {{ $t('home.spreadWord') }}
+      p {{ $t('home.spreadDesc') }}
       ul
-        li Give us a like and a review on #[a(href="https://alternativeto.net/software/activitywatch/") AlternativeTo]
-        li Vote on us at #[a(href="https://www.producthunt.com/posts/activitywatch") ProductHunt]
-        li Follow us and spread the word on #[a(href="https://twitter.com/ActivityWatchIt") Twitter] and #[a(href="https://www.facebook.com/ActivityWatch") Facebook]
-        li Star us on #[a(href="https://github.com/ActivityWatch/activitywatch") GitHub]
+        li(v-html="$t('home.alternativeTo', { link: '<a href=\"https://alternativeto.net/software/activitywatch/\">AlternativeTo</a>' })")
+        li(v-html="$t('home.productHunt', { link: '<a href=\"https://www.producthunt.com/posts/activitywatch\">ProductHunt</a>' })")
+        li(v-html="$t('home.twitterFb', { twitter: '<a href=\"https://twitter.com/ActivityWatchIt\">Twitter</a>', facebook: '<a href=\"https://www.facebook.com/ActivityWatch\">Facebook</a>' })")
+        li(v-html="$t('home.githubStar', { link: '<a href=\"https://github.com/ActivityWatch/activitywatch\">GitHub</a>' })")
 
     div.col-md-6
-      h4 Support us!
-      p
-        | Do you like ActivityWatch? Has it helped you? Help us help you by donating!
-        | You can donate to us via:
+      h4 {{ $t('home.support') }}
+      p {{ $t('home.supportDesc') }}
       ul
         li #[a(href="https://www.patreon.com/erikbjare") Patreon]
         li #[a(href="https://opencollective.com/activitywatch") Open Collective]
         li #[a(href="https://liberapay.com/ActivityWatch/") Liberapay]
         li #[a(href="https://activitywatch.net/donate/") Other methods] (incl. cryptocurrency)
-      p
-        | For more info, please visit the #[a(href="https://activitywatch.net/donate/") donation page on the website].
+      p(v-html="$t('home.donateMore', { link: '<a href=\"https://activitywatch.net/donate/\">' + $t('home.donatePage') + '</a>' })")
 
   hr
 
   div.row
     div.col-md-6
-      h4 Resources
+      h4 {{ $t('home.resources') }}
       p
         ul
           li #[a(href="https://activitywatch.net/") Website]
@@ -56,9 +48,8 @@ div
           li(v-if="!info.version.includes('rust')" ) #[a(href="/api/") API Browser]
 
     div.col-md-6
-      h4 Want to know what we're working on?
-      p
-        | Check out the #[a(href="https://forum.activitywatch.net/c/news") development updates]!
+      h4 {{ $t('home.whatsNew') }}
+      p(v-html="$t('home.devUpdates', { link: '<a href=\"https://forum.activitywatch.net/c/news\">' + $t('home.devUpdatesLink') + '</a>' })")
 
   hr
 
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 6082e98e..e4ababae 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
 div
-  h3 Woops, this page was not found!
+  h3 {{ $t('notFound.title') }}
   p.mb-0
-    | Try navigating back where you came from.
+    | {{ $t('notFound.message') }}
 </template>
 
 <script lang="ts">
diff --git a/src/views/QueryExplorer.vue b/src/views/QueryExplorer.vue
index 2134d705..1593a179 100644
--- a/src/views/QueryExplorer.vue
+++ b/src/views/QueryExplorer.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
 
 div
-  h3 Query Explorer
+  h3 {{ $t('queryExplorer.title') }}
 
-  | See #[a(href="https://docs.activitywatch.net/en/latest/examples/querying-data.html") the documentation] for help on how to write queries.
+  | {{ $t('queryExplorer.desc', { link: '<a href=\"https://docs.activitywatch.net/en/latest/examples/querying-data.html\">' + $t('queryExplorer.docsLink') + '</a>' }) }}
 
   hr
 
@@ -13,10 +13,10 @@ div
   form
     div.form-row
       div.form-group.col-md-6
-        | Start
+        | {{ $t('queryExplorer.start') }}
         input.form-control(type="date", :max="today", v-model="startdate")
       div.form-group.col-md-6
-        | End
+        | {{ $t('queryExplorer.end') }}
         input.form-control(type="date", :max="tomorrow", v-model="enddate")
 
     div.form-group
diff --git a/src/views/Report.vue b/src/views/Report.vue
index e92a1bf7..ec4d3e85 100644
--- a/src/views/Report.vue
+++ b/src/views/Report.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
 div
-  h3 Report
+  h3 {{ $t('report.title') }}
 
-  | Generate a report of time spent on a certain category of device activity.
+  | {{ $t('report.desc') }}
 
   b-alert.mt-2(style="warning" show)
-    | This feature is still in early development.
+    | {{ $t('report.earlyDev') }}
 
   b-alert(v-if="error" show variant="danger")
     | {{error}}
@@ -14,7 +14,7 @@ div
     template(v-slot:input-group-append)
       b-button(type="button", @click="generate()" variant="success" :disabled="!has_pattern")
         icon(name="search")
-        | Generate
+        | {{ $t('report.generate') }}
 
   div.d-flex.mt-1
     span.mr-auto.small(style="color: #666") Hostname: {{queryOptions.hostname}}
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 19cf96a2..4e4f0143 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -1,34 +1,34 @@
 <template lang="pug">
 div
-  h3 Search
+  h3 {{ $t('search.title') }}
 
   b-alert(style="warning" show)
-    | This feature is still in early development.
+    | {{ $t('search.earlyDev') }}
 
   b-alert(v-if="error" show variant="danger")
     | {{error}}
 
   b-input-group(size="lg")
-    b-input(v-model="pattern" v-on:keyup.enter="search()" placeholder="Regex pattern to search for")
+    b-input(v-model="pattern" v-on:keyup.enter="search()" :placeholder="$t('search.placeholder')")
     b-input-group-append
       b-button(type="button", @click="search()" variant="success")
         icon(name="search")
-        | Search
+        | {{ $t('search.searchBtn') }}
 
   div.d-flex.mt-1
     span.mr-auto.small(style="color: #666") Hostname: {{queryOptions.hostname}}
     b-button.border-0(size="sm", variant="outline-dark" @click="show_options = !show_options")
       span(v-if="!show_options")
-        | #[icon(name="angle-double-down")] Show options
+        | #[icon(name="angle-double-down")] {{ $t('search.showOptions') }}
       span(v-else)
-        | #[icon(name="angle-double-up")] Hide options
+        | #[icon(name="angle-double-up")] {{ $t('search.hideOptions') }}
 
   div(v-show="show_options")
-    h4 Options
+    h4 {{ $t('search.options') }}
     aw-query-options(v-model="queryOptions")
 
   div(v-if="status == 'searching'")
-    div #[icon(name="spinner" pulse)] Searching...
+    div #[icon(name="spinner" pulse)] {{ $t('search.searching') }}
 
   div(v-if="events != null")
     hr
@@ -36,9 +36,9 @@ div
     aw-selectable-eventview(:events="events")
 
     div
-      | Didn't find what you were looking for?
+      | {{ $t('search.notFound') }}
       br
-      | Add a week to the search: #[b-button(size="sm" variant="outline-dark" @click="start = start.subtract(1, 'week'); search()") +1 week]
+      | {{ $t('search.addWeek') }} #[b-button(size="sm" variant="outline-dark" @click="start = start.subtract(1, 'week'); search()") +1 week]
 </template>
 
 <script lang="ts">
diff --git a/src/views/Stopwatch.vue b/src/views/Stopwatch.vue
index 43464ce2..83630495 100644
--- a/src/views/Stopwatch.vue
+++ b/src/views/Stopwatch.vue
@@ -1,37 +1,37 @@
 <template lang="pug">
 div
-  h2 Stopwatch
+  h2 {{ $t('stopwatch.title') }}
   p
-    | Using bucket: {{bucket_id}}
+    | {{ $t('stopwatch.usingBucket', { id: bucket_id }) }}
 
   b-alert(show)
-    | This is an early experiment. Data entered here is not shown in the Activity view, yet.
+    | {{ $t('stopwatch.earlyExp') }}
 
   b-input-group(size="lg")
-    b-input(v-model="label" placeholder="What are you working on?")
+    b-input(v-model="label" :placeholder="$t('stopwatch.placeholder')")
     b-input-group-append
       b-button(@click="startTimer(label)", variant="success")
         icon(name="play")
-        | Start
+        | {{ $t('stopwatch.start') }}
 
   hr
 
   div(v-if="loading")
-    span.text-muted.center.aw-loading Loading...
+    span.text-muted.center.aw-loading {{ $t('stopwatch.loading') }}
   div.row(v-else)
     div.col-md-12
-      h3 Running
+      h3 {{ $t('stopwatch.running') }}
       div(v-if="runningTimers.length > 0")
         div(v-for="e in runningTimers" :key="e.id")
           stopwatch-entry(:event="e", :bucket_id="bucket_id", :now="now",
             @delete="removeTimer", @update="updateTimer")
           hr(style="margin: 0")
       div(v-else)
-        span(style="color: #555") No stopwatch running
+        span(style="color: #555") {{ $t('stopwatch.noRunning') }}
         hr
 
       div(v-if="stoppedTimers.length > 0")
-        h3.mt-4.mb-4 History
+        h3.mt-4.mb-4 {{ $t('stopwatch.history') }}
         div(v-for="k in Object.keys(timersByDate).sort().reverse()")
           h5.mt-2.mb-1 {{ k }}
           div(v-for="e in timersByDate[k]" :key="e.id")
@@ -39,7 +39,7 @@ div
               @delete="removeTimer", @update="updateTimer", @new="startTimer(e.data.label)")
             hr(style="margin: 0")
       div(v-else)
-        span(style="color: #555") No history to show
+        span(style="color: #555") {{ $t('stopwatch.noHistory') }}
         hr
 </template>
 
diff --git a/src/views/Timeline.vue b/src/views/Timeline.vue
index 3951605c..201a6355 100644
--- a/src/views/Timeline.vue
+++ b/src/views/Timeline.vue
@@ -1,71 +1,71 @@
 <template lang="pug">
 div
-  h2 Timeline
+  h2 {{ $t('timeline.title') }}
 
   input-timeinterval(v-model="daterange", :defaultDuration="timeintervalDefaultDuration", :maxDuration="maxDuration").mb-3
 
   // blocks
   div.d-inline-block.border.rounded.p-2.mr-2
-    | Events shown:  {{ num_events }}
+    | {{ $t('timeline.eventsShown', { count: num_events }) }}
   div.d-inline-block.border.rounded.p-2.mr-2
-    | Swimlanes:
+    | {{ $t('timeline.swimlanes') }}
     select(v-model="swimlane")
-      option(:value='null') None
-      option(value='category') Categories
-      option(value='bucketType') Bucket Specific
+      option(:value='null') {{ $t('timeline.swimlaneNone') }}
+      option(value='category') {{ $t('timeline.swimlaneCategories') }}
+      option(value='bucketType') {{ $t('timeline.swimlaneBucketType') }}
   details.d-inline-block.bg-light.small.border.rounded.mr-2.px-2
     summary.p-2
-      b Filters: {{ filter_summary }}
+      b {{ $t('timeline.filters', { summary: filter_summary }) }}
     div.p-2.bg-light
       table
         tr
           th.pt-2.pr-3
-            label Host:
+            label {{ $t('timeline.filterHost') }}
           td
-              select(v-model="filter_hostname")
-                option(:value='null') All
-                option(v-for="host in hosts", :value="host") {{ host }}
+            select(v-model="filter_hostname")
+              option(:value='null') {{ $t('timeline.filterCategoryAll') }}
+              option(v-for="host in hosts", :value="host") {{ host }}
         tr
           th.pt-2.pr-3
-            label Client:
+            label {{ $t('timeline.filterClient') }}
           td
             select(v-model="filter_client")
-              option(:value='null') All
+              option(:value='null') {{ $t('timeline.filterCategoryAll') }}
               option(v-for="client in clients", :value="client") {{ client }}
         tr
           th.pt-2.pr-3
-            label AFK:
+            label {{ $t('timeline.filterAfk') }}
           td
             b-form-checkbox(v-model="filter_afk" size="sm" switch)
-              | Filter AFK
+              | {{ $t('timeline.filterAfkLabel') }}
         tr
           th.pt-2.pr-3
-            label Merge:
+            label {{ $t('timeline.filterMerge') }}
           td
             b-form-checkbox(v-model="filter_merge_similar" size="sm" switch)
-              | Merge by app
+              | {{ $t('timeline.filterMergeLabel') }}
         tr
           th.pt-2.pr-3
-            label Categories:
+            label {{ $t('timeline.filterCategories') }}
           td
             select(@change="onCategorySelect($event)", :value="''")
-              option(value="" disabled) {{ filter_categories.length > 0 ? 'Add category...' : 'All' }}
+              option(value="" disabled) {{ filter_categories.length > 0 ? $t('timeline.filterCategoryAdd') : $t('timeline.filterCategoryAll') }}
               option(v-for="cat in category_options", :key="cat.text", :value="cat.text") {{ cat.text }}
             div.mt-1(v-if="filter_categories.length > 0")
               span.badge.badge-info.mr-1(v-for="(cat, idx) in filter_categories", :key="idx")
                 | {{ cat.join(' > ') }}
                 button.ml-1.close.small(@click="removeCategory(idx)", type="button", style="font-size: 0.8rem") &times;
   div.d-inline-block.border.rounded.p-2.mr-2(v-if="num_events !== 0")
-    | Events shown: {{ num_events }}
+    | {{ $t('timeline.eventsShown', { count: num_events }) }}
   b-alert.d-inline-block.p-2.mb-0.mt-2(v-if="num_events === 0", variant="warning", show)
-    | No events match selected criteria. Timeline is not updated.
+    | {{ $t('timeline.noEvents') }}
   div.float-right.small.text-muted.pt-3
         tr
           th.pt-2.pr-3
-            label Duration:
+            label {{ $t('timeline.filterDuration') }}
           td
             select(v-model="filter_duration")
-              option(:value='null') All
+              option(:value='null') {{ $t('timeline.filterCategoryAll') }}
               option(:value='2') 2+ secs
               option(:value='5') 5+ secs
               option(:value='10') 10+ secs
@@ -78,7 +78,7 @@ div
               option(:value='1 * 60 * 60') 1+ hrs
               option(:value='2 * 60 * 60') 2+ hrs
   div(style="float: right; color: #999").d-inline-block.pt-3
-    | Scroll to zoom, swipe/horizontal-scroll to pan, arrow keys to navigate
+    | {{ $t('timeline.scrollHint') }}
 
   div(v-if="buckets !== null")
     div(style="clear: both")
@@ -87,7 +87,7 @@ div
     aw-devonly(reason="Not ready for production, still experimenting")
       aw-calendar(:buckets="buckets")
   div(v-else)
-    h1.aw-loading Loading...
+    h1.aw-loading {{ $t('timeline.loading') }}
 </template>
 
 <script lang="ts">
diff --git a/src/views/WorkReport.vue b/src/views/WorkReport.vue
index 0c51e27e..639781e4 100644
--- a/src/views/WorkReport.vue
+++ b/src/views/WorkReport.vue
@@ -1,19 +1,19 @@
 <template lang="pug">
 div
-  h3.mb-3 Work Time Report
+  h3.mb-3 {{ $t('workReport.title') }}
 
   div.row.mb-4
     div.col-md-3
-      b-form-group(label="Hosts" label-class="font-weight-bold")
+      b-form-group(:label="$t('workReport.hosts')" label-class="font-weight-bold")
         b-form-select(v-model="selectedHosts" :options="hostOptions" multiple :select-size="4")
-        small.text-muted Select devices to include
+        small.text-muted {{ $t('workReport.hostsDesc') }}
 
     div.col-md-3
-      b-form-group(label="Categories" label-class="font-weight-bold")
+      b-form-group(:label="$t('workReport.categories')" label-class="font-weight-bold")
         b-form-select(v-model="selectedCategories" :options="categoryOptions" multiple :select-size="3")
 
     div.col-md-3
-      b-form-group(label="Break Time" label-class="font-weight-bold")
+      b-form-group(:label="$t('workReport.breakTime')" label-class="font-weight-bold")
         div.d-flex.align-items-center
           b-form-input(
             v-model="breakTime"
diff --git a/src/views/settings/ActivePatternSettings.vue b/src/views/settings/ActivePatternSettings.vue
index c02b2f97..424f6d27 100644
--- a/src/views/settings/ActivePatternSettings.vue
+++ b/src/views/settings/ActivePatternSettings.vue
@@ -2,23 +2,21 @@
 div
   div.d-sm-flex.justify-content-between
     div
-      h5.mb-2.mb-sm-0 Always count as active pattern
+      h5.mb-2.mb-sm-0 {{ $t('settings.activePattern') }}
 
       small
-        | Apps or titles matching this regular expression will never be counted as AFK.
+        | {{ $t('settings.activePatternDesc') }}
         |
-        | Can be used to count time as active, despite no input (like meetings, or games with controllers). An empty string disables it.
-        |
-        | Example expression:&nbsp;
+        | {{ $t('settings.activePatternExample') }}&nbsp;
         code(style="background-color: rgba(200, 200, 200, 0.3); padding: 2px; border-radius: 2px;")
           | Zoom Meeting|Google Meet|Microsoft Teams
     div
       b-form-input(size="sm" v-model="always_active_pattern_editing" :state="(enabled || null) && valid")
       small.text-right
-        div(v-if="enabled && valid" style="color: #0A0") Enabled
-        div(v-else-if="enabled" style="color: #A00") Invalid pattern
-        div(v-else, style="color: gray") Disabled
-        div(v-if="enabled && valid && broad_pattern" style="color: #A00") Pattern too broad
+        div(v-if="enabled && valid" style="color: #0A0") {{ $t('settings.activePatternEnabled') }}
+        div(v-else-if="enabled" style="color: #A00") {{ $t('settings.activePatternInvalid') }}
+        div(v-else, style="color: gray") {{ $t('settings.activePatternDisabled') }}
+        div(v-if="enabled && valid && broad_pattern" style="color: #A00") {{ $t('settings.activePatternTooBroad') }}
 
 </template>
 
diff --git a/src/views/settings/CategorizationSettings.vue b/src/views/settings/CategorizationSettings.vue
index 002491f5..d8a37598 100644
--- a/src/views/settings/CategorizationSettings.vue
+++ b/src/views/settings/CategorizationSettings.vue
@@ -1,18 +1,17 @@
 <template lang="pug">
 div
   h5.d-inline-block
-    div Categorization
+    div {{ $t('settings.categorization') }}
   div.float-right
     b-btn.ml-1(@click="restoreDefaultClasses", variant="outline-warning" size="sm")
       icon(name="undo")
-      | Restore defaults
+      | {{ $t('settings.restoreDefaults') }}
     label.btn.btn-sm.ml-1.btn-outline-primary(style="margin: 0")
-      | Import
+      | {{ $t('settings.import') }}
       input(type="file" @change="importCategories" hidden)
     b-btn.ml-1(@click="exportClasses", variant="outline-primary" size="sm")
-      | Export
-  p
-    | Rules for categorizing events. An event can only have one category. If several categories match, the deepest one will be chosen.
+      | {{ $t('settings.export') }}
+  p {{ $t('settings.categorizationDesc') }}
   p
     | You can use the #[router-link(:to="{ path: '/settings/category-builder' }") Category Builder] to quickly create categories from uncategorized activity.
     | You can also find and share categorization rule presets on #[a(href="https://forum.activitywatch.net/c/projects/category-rules") the forum].
@@ -21,7 +20,7 @@ div
   // Category set switcher
   div.my-3.p-3(style="background: var(--bs-light, #f8f9fa); border-radius: 4px;")
     div.d-flex.align-items-center.flex-wrap(style="gap: 0.5rem;")
-      span.font-weight-bold(style="white-space: nowrap") Category set:
+      span.font-weight-bold(style="white-space: nowrap") {{ $t('settings.categorySet') }}
       b-select(
         v-model="activeSetId"
         @change="onSetChange"
@@ -37,27 +36,27 @@ div
         @click="createSet"
         variant="outline-primary"
         size="sm"
-      ) New set
+      ) {{ $t('settings.categorySetNew') }}
       b-btn(
         v-if="categoryStore.category_sets.length > 1"
         @click="deleteActiveSet"
         variant="outline-danger"
         size="sm"
-      ) Delete set
+      ) {{ $t('settings.categorySetDelete') }}
     div.mt-1(
       v-if="categoryStore.category_sets.length > 1"
       style="font-size: 0.85em; color: var(--bs-secondary, #6c757d);"
     )
-      | {{ categoryStore.category_sets.length }} sets available — switch sets to use different rule profiles.
+      | {{ $t('settings.categorySetCount', { count: categoryStore.category_sets.length }) }}
 
   div.my-4
     b-alert(variant="warning" :show="classes_unsaved_changes")
-      | You have unsaved changes!
+      | {{ $t('settings.unsavedChanges') }}
       div.float-right(style="margin-top: -0.15em; margin-right: -0.6em")
         b-btn.ml-2(@click="saveClasses", variant="success" size="sm")
-          | Save
+          | {{ $t('settings.save') }}
         b-btn.ml-2(@click="resetClasses", variant="warning" size="sm")
-          | Discard
+          | {{ $t('settings.discard') }}
     div(v-for="_class in classes_hierarchy")
       CategoryEditTree(:_class="_class")
     div(v-if="editingId !== null")
@@ -67,9 +66,9 @@ div
     div.col-sm-12
       b-btn(@click="addClass")
         icon.mr-2(name="plus")
-        | Add category
+        | {{ $t('settings.addCategory') }}
       b-btn.float-right(@click="saveClasses", variant="success" :disabled="!classes_unsaved_changes")
-        | Save
+        | {{ $t('settings.save') }}
 </template>
 <script lang="ts">
 import { mapState, mapGetters } from 'pinia';
diff --git a/src/views/settings/CategoryBuilder.vue b/src/views/settings/CategoryBuilder.vue
index ca51346e..26ed3158 100644
--- a/src/views/settings/CategoryBuilder.vue
+++ b/src/views/settings/CategoryBuilder.vue
@@ -1,47 +1,38 @@
 <template lang="pug">
 div
-  h1 Categorization helper
+  h1 {{ $t('categoryBuilder.title') }}
   div
+    p {{ $t('categoryBuilder.desc1') }}
+    p {{ $t('categoryBuilder.desc2') }}
     p
-      | This tool will help you create categories from your uncategorized time.
-
-    p
-      | It works by fetching all uncategorized time for a recent timeperiod,
-      | and then finds the most common words (by time, not count) each of
-      | which may then either be ignored (if too broad/irrelevant), or used
-      | to create a new (sub)category, or to append the word to a pre-existing category rule.
-      | Words with less than 60s of time will not be shown.
-
-    p
-      | When you're done, you can inspect the categories in the #[router-link(:to="{ path: '/settings' }") Settings] page.
-
+      | {{ $t('categoryBuilder.desc3', { link: '<router-link :to=\"{ path: \\'/settings\\' }\">' + $t('categoryBuilder.settingsLink') + '</router-link>' }) }}
 
   div.d-flex
     div.flex-grow-1
       div
-        b Options
+        b {{ $t('categoryBuilder.options') }}
       div
-        small Hostname: {{ queryOptions.hostname }}
+        small {{ $t('categoryBuilder.hostname', { hostname: queryOptions.hostname }) }}
       div
-        small Range: {{ queryOptions.start }} - {{ queryOptions.stop }}
+        small {{ $t('categoryBuilder.range', { start: queryOptions.start, stop: queryOptions.stop }) }}
     div.flex-grow-0
       b-button(variant="outline-dark" @click="show_options = !show_options" size="sm")
-        span(v-if="!show_options") Show options
-        span(v-else) Hide options
+        span(v-if="!show_options") {{ $t('categoryBuilder.showOptions') }}
+        span(v-else) {{ $t('categoryBuilder.hideOptions') }}
 
   div(v-show="show_options")
     hr
-    h4 Options
+    h4 {{ $t('categoryBuilder.options') }}
     aw-query-options(v-model="queryOptions")
 
   hr
 
-  h5 Common words in "{{category.join(" > ")}}" events
+  h5(v-html="$t('categoryBuilder.commonWords', { category: category.join(' > ') })")
   div(v-if="loading")
-    | Loading...
+    | {{ $t('categoryBuilder.loading') }}
   div(v-else)
     div(v-if="words_by_duration.length == 0")
-      | No words with significant duration. You're good to go!
+      | {{ $t('categoryBuilder.noWords') }}
     div(v-else)
       div.row.category-builder-word(v-for="word in words_by_duration")
         div.col.hover-highlight
@@ -50,19 +41,19 @@ div
               | {{ word.word }} ({{ Math.round(word.duration) }}s)
             div.flex-grow-0
               b-button.mr-1(size="sm" @click="createRule(word.word)" variant="success")
-                | New rule
+                | {{ $t('categoryBuilder.newRule') }}
               b-button.mr-1(size="sm" @click="appendRule(word.word)" variant="warning")
-                | Append rule
+                | {{ $t('categoryBuilder.appendRule') }}
               b-button.mr-1(size="sm" @click="ignoreWord(word.word)")
-                | Ignore
+                | {{ $t('categoryBuilder.ignore') }}
               b-button(size="sm" @click="showEvents(word)" variant="outline-dark")
-                span(v-if="showing_events[0] != word") Show events
-                span(v-else) Hide events
+                span(v-if="showing_events[0] != word") {{ $t('categoryBuilder.showEvents') }}
+                span(v-else) {{ $t('categoryBuilder.hideEvents') }}
           div(v-if="showing_events && showing_events[0] == word")
             table.table.table-sm.table-striped
               tr
-                th Title
-                th.text-right Duration
+                th {{ $t('categoryBuilder.titleCol') }}
+                th.text-right {{ $t('categoryBuilder.durationCol') }}
               tr(v-for="event in showing_events[1]")
                 td {{ event.data.title }}
                 td.text-right {{ Math.round(event.duration) }}s
@@ -78,21 +69,21 @@ div
                       @ok="createRuleOk()"
                       @hidden="createRuleCancel()")
 
-  b-modal(id="appendRule" title="Append rule" @ok="handleOk" :ok-disabled="!valid")
+  b-modal(id="appendRule" :title="$t('categoryBuilder.appendTitle')" @ok="handleOk" :ok-disabled="!valid")
     b-form(ref="form" @submit.stop.prevent="handleSubmit")
-      b-form-group(label="Rule"
+      b-form-group(:label="$t('categoryBuilder.ruleLabel')"
                    label-for="append-category"
-                   invalid-feedback="Category is required"
+                   :invalid-feedback="$t('categoryBuilder.ruleRequired')"
                    :state="validCategory"
                    required)
         b-form-select#append-category(v-model="append.category")
           b-form-select-option(v-for="cat in allCategoriesSelect" :value="cat.value" :key="cat.id") {{ cat.text }}
-      b-form-group(label="Word")
+      b-form-group(:label="$t('categoryBuilder.wordLabel')")
         b-form-input(v-model="append.word")
         small
-          div(v-if="validPattern" style="color: green") Valid
-          div(v-else style="color: red") Invalid pattern
-          div(v-if="validPattern && broad_pattern" style="color: orange") Pattern too broad
+          div(v-if="validPattern" style="color: green") {{ $t('categoryBuilder.valid') }}
+          div(v-else style="color: red") {{ $t('categoryBuilder.invalidPattern') }}
+          div(v-if="validPattern && broad_pattern" style="color: orange") {{ $t('categoryBuilder.patternTooBroad') }}
 </template>
 
 <style>
diff --git a/src/views/settings/ColorSettings.vue b/src/views/settings/ColorSettings.vue
index e5fff94a..fcc76244 100644
--- a/src/views/settings/ColorSettings.vue
+++ b/src/views/settings/ColorSettings.vue
@@ -1,9 +1,8 @@
 <template lang="pug">
 div.d-flex.justify-content-between
   div
-    h5.mb-0 Use fallback colors
-    small
-      | Uses the old coloring style for some visualizations when uncategorized or no category color.
+    h5.mb-0 {{ $t('settings.colorFallback') }}
+    small {{ $t('settings.colorFallbackDesc') }}
   div
     b-form-checkbox(v-model="useColorFallback", switch)
 </template>
diff --git a/src/views/settings/DaystartSettings.vue b/src/views/settings/DaystartSettings.vue
index 652b3ddc..15effa06 100644
--- a/src/views/settings/DaystartSettings.vue
+++ b/src/views/settings/DaystartSettings.vue
@@ -2,20 +2,19 @@
 div
   div.d-sm-flex.justify-content-between
     div
-      h5.mt-1.mb-2.mb-sm-0 Start of day
+      h5.mt-1.mb-2.mb-sm-0 {{ $t('settings.startOfDay') }}
     div
       b-input(type="time" size="sm" :value="startOfDay" @change="startOfDay = $event")
   small
-    | The time at which days "start", since humans don't always go to bed before midnight.
-    | Set to 04:00 by default.
+    | {{ $t('settings.startOfDayDesc') }}
 
   div.mt-3.d-sm-flex.justify-content-between
     div
-      h5.mt-1.mb-2.mb-sm-0 Start of week
+      h5.mt-1.mb-2.mb-sm-0 {{ $t('settings.startOfWeek') }}
     div
       b-form-select(:text="startOfWeek", size="sm" v-model="startOfWeek" variant="outline-dark" :options="['Saturday', 'Sunday', 'Monday']")
   small
-    | The weekday which starts a new week.
+    | {{ $t('settings.startOfWeekDesc') }}
 </template>
 <script lang="ts">
 import { useSettingsStore } from '~/stores/settings';
diff --git a/src/views/settings/DeveloperSettings.vue b/src/views/settings/DeveloperSettings.vue
index 95460bfd..f433f5e2 100644
--- a/src/views/settings/DeveloperSettings.vue
+++ b/src/views/settings/DeveloperSettings.vue
@@ -1,26 +1,26 @@
 <template lang="pug">
 div
-  h4.mb-3 Developer settings
-  b-alert(show) #[b Note:] These settings are meant for developers who (hopefully) know what they are doing, and as such, may break things unexpectedly.
+  h4.mb-3 {{ $t('settings.developer') }}
+  b-alert(show) #[b {{ $t('settings.developerNote') }}]
 
-  b-form-group(label="Force devmode" label-cols-md=3 description="Devmode enables some features that are still work-in-progress.")
+  b-form-group(:label="$t('settings.forceDevmode')" label-cols-md=3 :description="$t('settings.forceDevmodeDesc')")
     div
       b-form-checkbox.float-right.ml-2(v-model="devmode" switch)
 
-  b-form-group(label="Show yearly time range" label-cols-md=3 description="Querying an entire year is a very heavy operation, and is likely to lead to timeouts. However, the query might be fast enough if you're running aw-server-rust.")
+  b-form-group(:label="$t('settings.showYearly')" label-cols-md=3 :description="$t('settings.showYearlyDesc')")
     div
       b-form-checkbox.float-right.ml-2(v-model="showYearly" switch)
 
-  b-form-group(label="Use multidevice query" label-cols-md=3 description="Multidevice query is where events are collected from several hosts in the Activity view. It is an early experiment, that currently does not support browser buckets (or the audible-as-active feature).")
+  b-form-group(:label="$t('settings.useMultidevice')" label-cols-md=3 :description="$t('settings.useMultideviceDesc')")
     div
       b-form-checkbox.float-right.ml-2(v-model="useMultidevice" switch)
 
-  b-form-group(label="Request timeout" label-cols-md=3 description="The maximum amount of time a server request can take before timing out. Setting this to a high value can be useful for large queries. Note that you need to reload the web UI for it to apply.")
+  b-form-group(:label="$t('settings.requestTimeout')" label-cols-md=3 :description="$t('settings.requestTimeoutDesc')")
     div
       b-input.float-right.ml-2(v-model="requestTimeout" type="number")
 
   div
-    | Web UI commit hash: {{ COMMIT_HASH }}
+    | {{ $t('settings.commitHash', { hash: COMMIT_HASH }) }}
 </template>
 
 <script lang="ts">
diff --git a/src/views/settings/LandingPageSettings.vue b/src/views/settings/LandingPageSettings.vue
index 9aca9338..f4cb9b21 100644
--- a/src/views/settings/LandingPageSettings.vue
+++ b/src/views/settings/LandingPageSettings.vue
@@ -2,16 +2,16 @@
 div
   div.d-sm-flex.justify-content-between
     div
-      h5.mt-1.mb-2.mb-sm-0 Landing page
+      h5.mt-1.mb-2.mb-sm-0 {{ $t('settings.landingPage') }}
     div
       b-select.landingpage(v-if="loaded" size="sm" :value="landingpage", @change="landingpage = $event")
-        option(value="/home") Home
+        option(value="/home") {{ $t('settings.home') }}
         option(:value="'/activity/' + hostname + '/view/'" v-for="hostname in hostnames") Activity ({{hostname}})
         option(value="/timeline") Timeline
       span(v-else)
         .aw-loading Loading...
   small
-    | The page to open when opening ActivityWatch, or clicking the logo in the top menu.
+    | {{ $t('settings.landingPageDesc') }}
 </template>
 
 <script lang="ts">
diff --git a/src/views/settings/ReleaseNotificationSettings.vue b/src/views/settings/ReleaseNotificationSettings.vue
index 2a324c00..05d45ee7 100644
--- a/src/views/settings/ReleaseNotificationSettings.vue
+++ b/src/views/settings/ReleaseNotificationSettings.vue
@@ -2,11 +2,11 @@
 div
   div.d-flex.justify-content-between
     div
-      h5.mb-0 New release notification
+      h5.mb-0 {{ $t('settings.newRelease') }}
     div
       b-form-checkbox(v-model="isEnabled" switch)
   small
-    | We will send you a notification if there is a new release available for download, this check will happen at most once per day.
+    | {{ $t('settings.newReleaseDesc') }}
 </template>
 
 <script lang="ts">
diff --git a/src/views/settings/Settings.vue b/src/views/settings/Settings.vue
index 0328ad18..de3de143 100644
--- a/src/views/settings/Settings.vue
+++ b/src/views/settings/Settings.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
 div
-  h3 Settings
+  h3 {{ $t('settings.title') }}
 
   hr
 
diff --git a/src/views/settings/Theme.vue b/src/views/settings/Theme.vue
index 337546dd..7ea58b15 100644
--- a/src/views/settings/Theme.vue
+++ b/src/views/settings/Theme.vue
@@ -2,16 +2,26 @@
 div
   div.d-sm-flex.justify-content-between
     div
-      h5.mt-1.mb-2.mb-sm-0 Theme
+      h5.mt-1.mb-2.mb-sm-0 {{ $t('settings.theme') }}
     div
       b-select.landingpage(v-if="_loaded" size="sm" :value="theme", @change="theme = $event")
-        option(value="auto") Auto (System)
-        option(value="light") Light
-        option(value="dark") Dark
+        option(value="auto") {{ $t('settings.themeAuto') }}
+        option(value="light") {{ $t('settings.themeLight') }}
+        option(value="dark") {{ $t('settings.themeDark') }}
       span(v-else)
-        .aw-loading Loading...
-  small
-    | Change color theme of the application (you need to change categories colors manually to be suitable with dark mode).
+        .aw-loading {{ $t('loading') }}
+  small {{ $t('settings.themeDesc') }}
+
+  hr
+
+  div.d-sm-flex.justify-content-between
+    div
+      h5.mt-1.mb-2.mb-sm-0 {{ $t('settings.language') }}
+    div
+      b-select.landingpage(size="sm" :value="$i18n.locale", @change="changeLanguage($event)")
+        option(value="en") {{ $t('settings.english') }}
+        option(value="zh") {{ $t('settings.chinese') }}
+  small {{ $t('settings.languageDesc') }}
 </template>
 
 <script lang="ts">
@@ -21,6 +31,14 @@ import { detectPreferredTheme } from '~/util/theme';
 
 export default {
   name: 'Theme',
+  methods: {
+    changeLanguage(locale) {
+      this.$i18n.locale = locale;
+      localStorage.setItem('locale', locale);
+      const settingsStore = useSettingsStore();
+      settingsStore.update({ locale });
+    },
+  },
   computed: {
     ...mapState(useSettingsStore, ['_loaded']),
     theme: {
diff --git a/src/views/settings/TimelineDurationSettings.vue b/src/views/settings/TimelineDurationSettings.vue
index d9b6c320..11ab13f8 100644
--- a/src/views/settings/TimelineDurationSettings.vue
+++ b/src/views/settings/TimelineDurationSettings.vue
@@ -2,7 +2,7 @@
 div
   div.d-sm-flex.justify-content-between
     div
-      h5.mb-2.mb-sm-0 Duration default value
+      h5.mb-2.mb-sm-0 {{ $t('settings.durationDefault') }}
     div
       b-select(size="sm" :value="durationDefault", @change="durationDefault = $event")
           option(:value="15*60") 15min
@@ -14,7 +14,7 @@ div
           option(:value="12*60*60") 12h
           option(:value="24*60*60") 24h
   small
-    | The default duration used for 'show last' in the timeline view.
+    | {{ $t('settings.durationDefaultDesc') }}
 </template>
 <script lang="ts">
 import { useSettingsStore } from '~/stores/settings';

From fcd6a36d6b330aa0f2013dc7ef7e32176eceb782 Mon Sep 17 00:00:00 2001
From: WanderLandWalker <wanderlandwalker@users.noreply.github.com>
Date: Wed, 27 May 2026 14:04:22 +0800
Subject: [PATCH 2/5] fix: use shields.io badges for language switcher

---
 README.md    | 2 +-
 README.zh.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f0af0f1b..591354cc 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-[![en](README.md)](README.md) | [![zh](README.zh.md)](README.zh.md)
+[![en](https://img.shields.io/badge/lang-en-red.svg)](README.md) | [![zh](https://img.shields.io/badge/lang-zh--CN-yellow.svg)](README.zh.md)
 
 # aw-webui
 
diff --git a/README.zh.md b/README.zh.md
index 560bf989..c0bf69c6 100644
--- a/README.zh.md
+++ b/README.zh.md
@@ -1,4 +1,4 @@
-[![en](README.md)](README.md) | [![zh](README.zh.md)](README.zh.md)
+[![en](https://img.shields.io/badge/lang-en-red.svg)](README.md) | [![zh](https://img.shields.io/badge/lang-zh--CN-yellow.svg)](README.zh.md)
 
 # aw-webui
 

From 66d3d0da0474b149769013077ee06a74041d9518 Mon Sep 17 00:00:00 2001
From: WanderLandWalker <wanderlandwalker@users.noreply.github.com>
Date: Wed, 27 May 2026 14:07:58 +0800
Subject: [PATCH 3/5] fix: operator precedence, footer i18n slots, duplicate
 keys, registry url, home page translation

---
 package-lock.json         | 59 ++++++++++++++++++++++++++++++++++++++-
 src/components/Footer.vue |  7 ++++-
 src/locales/en.json       |  4 ---
 src/locales/zh.json       |  4 ---
 src/main.js               |  2 +-
 src/views/Home.vue        |  4 ++-
 6 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 47a348f3..1780a4da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4167,6 +4167,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4187,6 +4190,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4207,6 +4213,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4227,6 +4236,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4247,6 +4259,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4267,6 +4282,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4740,6 +4758,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4753,6 +4774,9 @@
       "cpu": [
         "arm"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4766,6 +4790,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4779,6 +4806,9 @@
       "cpu": [
         "arm64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4792,6 +4822,9 @@
       "cpu": [
         "loong64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4805,6 +4838,9 @@
       "cpu": [
         "loong64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4818,6 +4854,9 @@
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4831,6 +4870,9 @@
       "cpu": [
         "ppc64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4844,6 +4886,9 @@
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4857,6 +4902,9 @@
       "cpu": [
         "riscv64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4870,6 +4918,9 @@
       "cpu": [
         "s390x"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4883,6 +4934,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "glibc"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4896,6 +4950,9 @@
       "cpu": [
         "x64"
       ],
+      "libc": [
+        "musl"
+      ],
       "license": "MIT",
       "optional": true,
       "os": [
@@ -26198,7 +26255,7 @@
     },
     "node_modules/vue-i18n": {
       "version": "8.28.2",
-      "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-8.28.2.tgz",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.28.2.tgz",
       "integrity": "sha512-C5GZjs1tYlAqjwymaaCPDjCyGo10ajUphiwA922jKt9n7KPpqR7oM1PCwYzhB/E7+nT3wfdG3oRre5raIT1rKA==",
       "deprecated": "v9 and v10 no longer supported. please migrate to v11. about maintenance status, see https://vue-i18n.intlify.dev/guide/maintenance.html",
       "license": "MIT"
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 4de53cdf..8d22d9ce 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,7 +1,12 @@
 <template lang="pug">
 div.container(style="color: #555; font-size: 0.9em")
   div.mb-2
-    | {{ $t('footer.madeWith', { developers: '<a href="http://activitywatch.net/contributors/">' + $t('footer.developers') + '</a>' }) }}
+    i18n(path="footer.madeWith" tag="span")
+      template(v-slot:heart)
+        a(href="https://activitywatch.net/donate/", target="_blank")
+          icon(name="heart" scale=0.75 style="fill: #E55")
+      template(v-slot:developers)
+        a(href="http://activitywatch.net/contributors/") {{ $t('footer.developers') }}
     div
       span.mt-2(v-if="info", style="color: #888; font-size: 0.8em")
         span.mr-2
diff --git a/src/locales/en.json b/src/locales/en.json
index 8e0f20fe..4e7626e5 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -172,10 +172,6 @@
   "newSetPrompt": "Name for the new category set:",
   "setExists": "A set named \"{name}\" already exists.",
 
-  "notFound.title": "Page not found",
-  "notFound.message": "The page you were looking for doesn't exist.",
-  "notFound.goHome": "Go home",
-
   "buckets.title": "Buckets",
   "buckets.moreWatchers": "Are you looking to collect more data? Check out {link} for more watchers.",
   "buckets.moreWatchersLink": "the docs",
diff --git a/src/locales/zh.json b/src/locales/zh.json
index dae83409..c7a97f54 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -172,10 +172,6 @@
   "newSetPrompt": "新分类集的名称：",
   "setExists": "名为 \"{name}\" 的集已存在。",
 
-  "notFound.title": "页面未找到",
-  "notFound.message": "你要查找的页面不存在。",
-  "notFound.goHome": "返回首页",
-
   "buckets.title": "数据桶",
   "buckets.moreWatchers": "想要收集更多数据？查看{link}了解更多监控器。",
   "buckets.moreWatchersLink": "文档",
diff --git a/src/main.js b/src/main.js
index a2c4d088..a211a3df 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,7 +28,7 @@ Vue.use(VueI18n);
 import en from './locales/en.json';
 import zh from './locales/zh.json';
 const i18n = new VueI18n({
-  locale: localStorage.getItem('locale') || navigator.language.startsWith('zh') ? 'zh' : 'en',
+  locale: localStorage.getItem('locale') || (navigator.language.startsWith('zh') ? 'zh' : 'en'),
   fallbackLocale: 'en',
   messages: { en, zh },
 });
diff --git a/src/views/Home.vue b/src/views/Home.vue
index f733ec1b..07aafc63 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -56,7 +56,9 @@ div
   p
     small
       i
-        | You can change which page opens when you open ActivityWatch (instead of this page) in the #[router-link(to="/settings") settings].
+        i18n(path="home.changeLanding" tag="span")
+          template(v-slot:link)
+            router-link(to="/settings") {{ $t('home.settingsLink') }}
 
 </template>
 

From 20cee247a33173658271bcab33ee8072ea25c99d Mon Sep 17 00:00:00 2001
From: WanderLandWalker <wanderlandwalker@users.noreply.github.com>
Date: Wed, 27 May 2026 14:35:36 +0800
Subject: [PATCH 4/5] fix: use v-html for Buckets.vue and QueryExplorer.vue
 links, fix Pug indent

---
 src/views/Buckets.vue       | 8 ++++----
 src/views/QueryExplorer.vue | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/Buckets.vue b/src/views/Buckets.vue
index 8e28265d..6ee74846 100644
--- a/src/views/Buckets.vue
+++ b/src/views/Buckets.vue
@@ -3,7 +3,7 @@ div
   h2 {{ $t('buckets.title') }}
 
   b-alert(show)
-    | {{ $t('buckets.moreWatchers', { link: '<a href=\"https://activitywatch.readthedocs.io/en/latest/watchers.html\">' + $t('buckets.moreWatchersLink') + '</a>' }) }}
+    span(v-html="$t('buckets.moreWatchers', { link: '<a href=\"https://activitywatch.readthedocs.io/en/latest/watchers.html\">' + $t('buckets.moreWatchersLink') + '</a>' })")
 
   // By device
   b-card.mb-3(v-for="device in bucketsStore.bucketsByDevice", :key="device.hostname || device.device_id")
@@ -42,9 +42,9 @@ div
           template(v-slot:cell(actions)="data")
             b-button-toolbar.float-right
               b-button-group(size="sm", class="mx-1")
-          b-button(variant="primary", :to="'/buckets/' + data.item.id")
-                  icon(name="folder-open").d-none.d-md-inline-block
-                  | {{ $t('buckets.open') }}
+            b-button(variant="primary", :to="'/buckets/' + data.item.id")
+              icon(name="folder-open").d-none.d-md-inline-block
+              | {{ $t('buckets.open') }}
                 b-dropdown(variant="outline-secondary", size="sm", :text="$t('buckets.more')")
                   // FIXME: These also exist as almost-copies in the Bucket view, can maybe be shared/reused instead.
                   b-dropdown-item(
diff --git a/src/views/QueryExplorer.vue b/src/views/QueryExplorer.vue
index 1593a179..2b37fd87 100644
--- a/src/views/QueryExplorer.vue
+++ b/src/views/QueryExplorer.vue
@@ -3,7 +3,7 @@
 div
   h3 {{ $t('queryExplorer.title') }}
 
-  | {{ $t('queryExplorer.desc', { link: '<a href=\"https://docs.activitywatch.net/en/latest/examples/querying-data.html\">' + $t('queryExplorer.docsLink') + '</a>' }) }}
+  span(v-html="$t('queryExplorer.desc', { link: '<a href=\"https://docs.activitywatch.net/en/latest/examples/querying-data.html\">' + $t('queryExplorer.docsLink') + '</a>' })")
 
   hr
 

From 563e66026395071bf728efa76496944c3bff472e Mon Sep 17 00:00:00 2001
From: WanderLandWalker <wanderlandwalker@users.noreply.github.com>
Date: Wed, 27 May 2026 14:42:09 +0800
Subject: [PATCH 5/5] fix: XSS - use mustache instead of v-html for
 user-controlled category name

---
 src/views/settings/CategoryBuilder.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/settings/CategoryBuilder.vue b/src/views/settings/CategoryBuilder.vue
index 26ed3158..111bb22c 100644
--- a/src/views/settings/CategoryBuilder.vue
+++ b/src/views/settings/CategoryBuilder.vue
@@ -27,7 +27,7 @@ div
 
   hr
 
-  h5(v-html="$t('categoryBuilder.commonWords', { category: category.join(' > ') })")
+  h5 {{ $t('categoryBuilder.commonWords', { category: category.join(' > ') }) }}
   div(v-if="loading")
     | {{ $t('categoryBuilder.loading') }}
   div(v-else)