Fix the limit mask not displaying on Reddit (#423)

Author: sheepzh

package.json

@@ -31,9 +31,9 @@
         "@babel/preset-env": "^7.26.9",
         "@crowdin/crowdin-api-client": "^1.41.2",
         "@rsdoctor/webpack-plugin": "^1.0.0",
-        "@swc/core": "^1.11.9",
+        "@swc/core": "^1.11.11",
         "@swc/jest": "^0.2.37",
-        "@types/chrome": "0.0.309",
+        "@types/chrome": "0.0.310",
         "@types/decompress": "^4.2.7",
         "@types/echarts": "^5.0.0",
         "@types/generate-json-webpack-plugin": "^0.3.7",
@@ -58,15 +58,15 @@
         "postcss-loader": "^8.1.1",
         "postcss-rtlcss": "^5.6.0",
         "puppeteer": "^24.4.0",
-        "sass": "^1.85.1",
+        "sass": "^1.86.0",
         "sass-loader": "^16.0.5",
         "style-loader": "^4.0.0",
         "ts-loader": "^9.5.2",
         "ts-node": "^10.9.2",
         "tsconfig-paths": "^4.2.0",
         "typescript": "5.8.2",
         "url-loader": "^4.1.1",
-        "web-ext": "^8.4.0",
+        "web-ext": "^8.5.0",
         "webpack": "^5.98.0",
         "webpack-cli": "^6.0.1"
     },

src/content-script/limit/modal/index.ts

@@ -178,12 +178,14 @@ class ModalInstance implements MaskModal {
         pauseAllVideo()
         pauseAllAudio()
 
+        this.rootElement && (this.rootElement.style.visibility = 'visible')
         this.reason.value = reason
         this.screenLocker.lock()
         this.body.style.display = 'block'
     }
 
     private hide() {
+        this.rootElement && (this.rootElement.style.visibility = 'hidden')
         this.screenLocker.unlock()
         this.body && (this.body.style.display = 'none')
         this.reason && (this.reason.value = null)

src/pages/app/components/Limit/LimitTable/column/LimitEnabledColumn.tsx

@@ -12,11 +12,11 @@ import weekHelper from "@service/components/week-helper"
 import limitService from "@service/limit-service"
 import { isEffective } from "@util/limit"
 import { useDocumentVisibility, useLocalStorage } from "@vueuse/core"
-import { ElMessage, ElTable, ElTableColumn, ElTag, type Sort, type TableInstance } from "element-plus"
-import { defineComponent, ref, watch } from "vue"
+import { ElMessage, ElSwitch, ElTable, ElTableColumn, ElTag, type Sort, type TableInstance } from "element-plus"
+import { defineComponent, ref, toRaw, watch } from "vue"
+import { verifyCanModify } from "../common"
 import { useLimitFilter } from "../context"
 import LimitDelayColumn from "./column/LimitDelayColumn"
-import LimitEnabledColumn from "./column/LimitEnabledColumn"
 import LimitOperationColumn from "./column/LimitOperationColumn"
 import RuleContent from "./RuleContent"
 import Waste from "./Waste"
@@ -37,6 +37,8 @@ const sortMethodByNumVal = (key: keyof timer.limit.Item & 'waste' | 'weeklyWaste
 
 const sortByEffectiveDays = ({ weekdays: a }: timer.limit.Item, { weekdays: b }: timer.limit.Item) => (a?.length ?? 0) - (b?.length ?? 0)
 
+const sortByEnabled: CompareFn<timer.limit.Item> = (a, b): number => (a.enabled ? 1 : 0) - (b.enabled ? 1 : 0)
+
 const _default = defineComponent({
     emits: {
         delayChange: (_row: timer.limit.Item) => true,
@@ -76,12 +78,21 @@ const _default = defineComponent({
 
         const historySort = useLocalStorage<Sort>('__limit_sort_default__', { prop: DEFAULT_SORT_COL, order: 'descending' })
 
+        const onEnabledChange = async (row: timer.limit.Item, newVal: boolean | string | number) => {
+            const enabled = !!newVal
+            try {
+                !enabled && await verifyCanModify(row)
+                row.enabled = enabled
+                ctx.emit("enabledChange", toRaw(row))
+            } catch (e) {
+                console.log(e)
+            }
+        }
+
         return () => (
             <ElTable
                 ref={tableInstance}
-                border
-                fit
-                highlightCurrentRow
+                border fit highlightCurrentRow
                 style={{ width: "100%" }}
                 data={data.value}
                 defaultSort={historySort.value}
@@ -174,7 +185,18 @@ const _default = defineComponent({
                     }}
                 />
                 <LimitDelayColumn onRowChange={row => ctx.emit("delayChange", row)} />
-                <LimitEnabledColumn onRowChange={row => ctx.emit("enabledChange", row)} />
+                <ElTableColumn
+                    label={t(msg => msg.limit.item.enabled)}
+                    minWidth={100}
+                    align="center"
+                    fixed="right"
+                    sortable
+                    sortMethod={sortByEnabled}
+                >
+                    {({ row }: ElTableRowScope<timer.limit.Item>) => (
+                        <ElSwitch size="small" modelValue={row.enabled} onChange={v => onEnabledChange(row, v)} />
+                    )}
+                </ElTableColumn>
                 <LimitOperationColumn
                     onRowDelete={deleteRow}
                     onRowModify={row => ctx.emit("modify", row)}