copy_tuner_client 2.0.0 → 2.1.1

data/src/{copyray.css → styles.ts}

@@ -1,118 +1,9 @@
-@charset "UTF-8";
-
-/* selector for element and children */
-#copyray-overlay,
-#copyray-overlay *,
-#copyray-overlay a:hover,
-#copyray-overlay a:visited,
-#copyray-overlay a:active {
-  background: none;
-  border: none;
-  bottom: auto;
-  clear: none;
-  cursor: default;
-  float: none;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: medium;
-  font-style: normal;
-  font-weight: normal;
-  height: auto;
-  left: auto;
-  letter-spacing: normal;
-  line-height: normal;
-  max-height: none;
-  max-width: none;
-  min-height: 0;
-  min-width: 0;
-  overflow: visible;
-  position: static;
-  right: auto;
-  text-align: left;
-  text-decoration: none;
-  text-indent: 0;
-  text-transform: none;
-  top: auto;
-  visibility: visible;
-  white-space: normal;
-  width: auto;
-  z-index: auto;
-}
-
-#copyray-overlay {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  background-image: radial-gradient(
-    ellipse farthest-corner at center,
-    rgba(0, 0, 0, 0.4) 10%,
-    rgba(0, 0, 0, 0.8) 100%
-  );
-  z-index: 9000;
-}
-
-.copyray-specimen {
-  position: absolute;
-  background: rgba(255, 255, 255, 0.15);
-  outline: 1px solid rgba(255, 255, 255, 0.8);
-  outline-offset: -1px;
-  color: #666;
-  font-family: 'Helvetica Neue', sans-serif;
-  font-size: 13px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
-}
-
-.copyray-specimen:hover {
-  cursor: pointer;
-  background: rgba(255, 255, 255, 0.4);
-}
-
-.copyray-specimen.Specimen {
-  outline: 1px solid rgba(255, 50, 50, 0.8);
-  background: rgba(255, 50, 50, 0.1);
-}
+// 各 custom element の Shadow root に <style> として注入する CSS。
+// Shadow DOM のスタイル隔離が効くため、旧 copyray.css にあった #copyray-overlay * のグローバルリセットは不要。
 
-.copyray-specimen.Specimen:hover {
-  background: rgba(255, 50, 50, 0.4);
-}
-
-.copyray-specimen-handle {
-  float: left;
-  margin: 0 2px 2px 0;
-  background: #fff;
-  padding: 0 3px;
-  color: #333;
-  font-size: 10px;
-  cursor: pointer;
-}
-
-.copyray-specimen-handle.Specimen {
-  background: rgba(255, 50, 50, 0.8);
-  color: #fff;
-}
-
-a.copyray-toggle-button {
-  display: block;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  color: white;
-  background: black;
-  padding: 12px 16px;
-  border-radius: 0 10px 0 0;
-  opacity: 0;
-  transition: opacity 0.6s ease-in-out;
-  z-index: 10000;
-  font-size: 12px;
-  cursor: pointer;
-}
-
-a.copyray-toggle-button:hover {
-  opacity: 1;
-}
-
-#copy-tuner-bar {
+// ツールバー（<copytuner-bar>）のスタイル。:host にバー本体のレイアウトを定義する。
+export const BAR_STYLES = `
+:host {
   position: fixed;
   left: 0;
   right: 0;
@@ -126,44 +17,45 @@ a.copyray-toggle-button:hover {
   z-index: 2147483647;
   box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 2px 6px rgba(0, 0, 0, 0.8);
   background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
+  box-sizing: border-box;
+}
+
+:host([hidden]) {
+  display: none;
 }
 
-#copy-tuner-bar-log-menu {
+.log-menu {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 40px;
   max-height: calc(100vh - 40px);
   background: #222;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #fff;
-  z-index: 2147483647;
   overflow-y: auto;
 }
 
-#copy-tuner-bar-log-menu tbody td {
+.log-menu[hidden] {
+  display: none;
+}
+
+.log-menu tbody td {
   padding: 2px 8px;
 }
 
-#copy-tuner-bar-log-menu tbody tr {
+.log-menu tbody tr {
   cursor: pointer;
 }
 
-#copy-tuner-bar-log-menu tbody tr:hover {
+.log-menu tbody tr:hover {
   background: #444;
 }
 
-#copy-tuner-bar-log-menu tbody a {
-  color: #fff;
-}
-
-#copy-tuner-bar-log-menu tbody a:hover,
-#copy-tuner-bar-log-menu tbody a:focus {
-  color: #fff;
-  text-decoration: underline;
+.log-menu tbody tr[hidden] {
+  display: none;
 }
 
-.copy-tuner-bar-button {
+.button {
   position: relative;
   display: inline-block;
   color: #fff;
@@ -180,16 +72,17 @@ a.copyray-toggle-button:hover {
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2),
     inset 0 0 2px rgba(255, 255, 255, 0.2);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
+  text-decoration: none;
 }
 
-.copy-tuner-bar-button:hover,
-.copy-tuner-bar-button:focus {
+.button:hover,
+.button:focus {
   color: #fff;
   text-decoration: none;
   background-color: #555;
 }
 
-.copy-tuner-bar__notice {
+.notice {
   display: inline-block;
   margin: 8px;
   font-size: 13px;
@@ -198,9 +91,7 @@ a.copyray-toggle-button:hover {
   color: #ffd24d;
 }
 
-input[type='text'].copy-tuner-bar__search {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+.search {
   appearance: none;
   border: none;
   border-radius: 2px;
@@ -215,13 +106,87 @@ input[type='text'].copy-tuner-bar__search {
   height: auto;
   font-size: 14px;
 }
+`
+
+// オーバーレイ（<copyray-overlay>）のスタイル。
+// :host はドキュメント原点基準（position: absolute; top/left: 0）にして、
+// 子の specimen を computeBoundingBox のページ座標で absolute 配置できるようにする。
+// 背景の暗転（.backdrop）だけは viewport 固定（fixed）にする。
+export const OVERLAY_STYLES = `
+:host {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background-image: radial-gradient(
+    ellipse farthest-corner at center,
+    rgba(0, 0, 0, 0.4) 10%,
+    rgba(0, 0, 0, 0.8) 100%
+  );
+  z-index: 9000;
+}
+
+.specimen {
+  position: absolute;
+  background: rgba(255, 50, 50, 0.1);
+  outline: 1px solid rgba(255, 50, 50, 0.8);
+  outline-offset: -1px;
+  color: #666;
+  font-family: 'Helvetica Neue', sans-serif;
+  font-size: 13px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
+  z-index: 2000000000;
+}
 
-.copy-tuner-hidden {
-  display: none !important;
+.specimen:hover {
+  cursor: pointer;
+  background: rgba(255, 50, 50, 0.4);
+}
+
+.specimen-handle {
+  float: left;
+  margin: 0 2px 2px 0;
+  background: rgba(255, 50, 50, 0.8);
+  padding: 0 3px;
+  color: #fff;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.toggle-button {
+  display: block;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  color: white;
+  background: black;
+  padding: 12px 16px;
+  border-radius: 0 10px 0 0;
+  opacity: 0;
+  transition: opacity 0.6s ease-in-out;
+  z-index: 10000;
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.toggle-button:hover {
+  opacity: 1;
 }
 
 @media screen and (max-width: 480px) {
-  .hidden-on-mobile {
-    display: none !important;
+  .toggle-button {
+    display: none;
   }
 }
+`

data/src/util.ts

@@ -35,4 +35,12 @@ const computeBoundingBox = (element) => {
   }
 }
 
-export { isMac, isVisible, getOffset, computeBoundingBox }
+const debounce = <A extends unknown[]>(fn: (...args: A) => void, wait: number) => {
+  let timer: ReturnType<typeof setTimeout> | undefined
+  return (...args: A) => {
+    clearTimeout(timer)
+    timer = setTimeout(() => fn(...args), wait)
+  }
+}
+
+export { computeBoundingBox, debounce, getOffset, isMac, isVisible }

data/tsconfig.json

@@ -3,11 +3,9 @@
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",
-    "lib": [
-      "ESNext",
-      "DOM"
-    ],
-    "moduleResolution": "Node",
+    "lib": ["ESNext", "DOM"],
+    "moduleResolution": "bundler",
+    "verbatimModuleSyntax": true,
     "strict": true,
     "sourceMap": true,
     "resolveJsonModule": true,
@@ -17,10 +15,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noImplicitReturns": true,
-    "skipLibCheck": true,
+    "skipLibCheck": true
   },
-  "include": [
-    "client",
-    "src",
-  ]
+  "include": ["src"]
 }

data/vite.config.ts

@@ -11,7 +11,6 @@ export default defineConfig({
     rollupOptions: {
       output: {
         entryFileNames: `javascripts/copytuner.js`,
-        assetFileNames: `stylesheets/copytuner.[ext]`,
       },
     },
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: copy_tuner_client
 version: !ruby/object:Gem::Version
-  version: 2.0.0
+  version: 2.1.1
 platform: ruby
 authors:
 - SonicGarden
@@ -182,8 +182,6 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
-- ".babelrc"
-- ".eslintrc.js"
 - ".gitattributes"
 - ".github/dependabot.yml"
 - ".github/workflows/rspec.yml"
@@ -200,7 +198,7 @@ files:
 - Rakefile
 - UPGRADING.md
 - app/assets/javascripts/copytuner.js
-- app/assets/stylesheets/copytuner.css
+- biome.json
 - copy_tuner_client.gemspec
 - gemfiles/8.0.gemfile
 - gemfiles/8.1.gemfile
@@ -230,7 +228,9 @@ files:
 - lib/copy_tuner_client/translation_log.rb
 - lib/copy_tuner_client/version.rb
 - lib/tasks/copy_tuner_client_tasks.rake
+- mise.toml
 - package.json
+- pnpm-lock.yaml
 - skills/copy-tuner-to-locales-cleanup/SKILL.md
 - skills/copy-tuner-to-locales-cleanup/references/example-touchpoints.md
 - skills/copy-tuner-to-locales-cleanup/references/verification-final.md
@@ -270,18 +270,16 @@ files:
 - spec/support/fake_unicorn.rb
 - spec/support/middleware_stack.rb
 - spec/support/writing_cache.rb
-- src/copyray.css
-- src/copyray.ts
-- src/copytuner_bar.ts
+- src/copyray-overlay.ts
+- src/copytuner-bar.ts
 - src/main.ts
-- src/specimen.ts
+- src/styles.ts
 - src/util.ts
 - src/vite-env.d.ts
 - tsconfig.json
 - ui/views/copytuner/index.html.erb
 - ui/views/layouts/copytuner_default.html.erb
 - vite.config.ts
-- yarn.lock
 homepage: https://github.com/SonicGarden/copy-tuner-ruby-client
 licenses: []
 metadata:

data/.babelrc

@@ -1,18 +0,0 @@
-{
-  "presets": [
-    [
-      "env",
-      {
-        "modules": false,
-        "targets": {
-          "browsers": "> 1%",
-          "uglify": true,
-        },
-        "useBuiltIns": true,
-      },
-    ],
-  ],
-  "plugins": [
-    "external-helpers"
-  ]
-}

data/.eslintrc.js

@@ -1,12 +0,0 @@
-module.exports = {
-  plugins: ['@sonicgarden'],
-  extends: [
-    'plugin:@sonicgarden/browser',
-    'plugin:@sonicgarden/recommended',
-    'plugin:@sonicgarden/typescript',
-    'plugin:@sonicgarden/prettier',
-  ],
-  settings: {
-    'import/internal-regex': '^@/',
-  },
-}

data/app/assets/stylesheets/copytuner.css

@@ -1 +0,0 @@
-@charset "UTF-8";#copyray-overlay,#copyray-overlay *,#copyray-overlay a:hover,#copyray-overlay a:visited,#copyray-overlay a:active{background:none;border:none;bottom:auto;clear:none;cursor:default;float:none;font-family:Arial,Helvetica,sans-serif;font-size:medium;font-style:normal;font-weight:400;height:auto;left:auto;letter-spacing:normal;line-height:normal;max-height:none;max-width:none;min-height:0;min-width:0;overflow:visible;position:static;right:auto;text-align:left;text-decoration:none;text-indent:0;text-transform:none;top:auto;visibility:visible;white-space:normal;width:auto;z-index:auto}#copyray-overlay{position:fixed;left:0;top:0;bottom:0;right:0;background-image:radial-gradient(ellipse farthest-corner at center,rgba(0,0,0,.4) 10%,rgba(0,0,0,.8) 100%);z-index:9000}.copyray-specimen{position:absolute;background:rgba(255,255,255,.15);outline:1px solid rgba(255,255,255,.8);outline-offset:-1px;color:#666;font-family:Helvetica Neue,sans-serif;font-size:13px;box-shadow:0 1px 3px #000000b3}.copyray-specimen:hover{cursor:pointer;background:rgba(255,255,255,.4)}.copyray-specimen.Specimen{outline:1px solid rgba(255,50,50,.8);background:rgba(255,50,50,.1)}.copyray-specimen.Specimen:hover{background:rgba(255,50,50,.4)}.copyray-specimen-handle{float:left;margin:0 2px 2px 0;background:#fff;padding:0 3px;color:#333;font-size:10px;cursor:pointer}.copyray-specimen-handle.Specimen{background:rgba(255,50,50,.8);color:#fff}a.copyray-toggle-button{display:block;position:fixed;left:0;bottom:0;color:#fff;background:black;padding:12px 16px;border-radius:0 10px 0 0;opacity:0;transition:opacity .6s ease-in-out;z-index:10000;font-size:12px;cursor:pointer}a.copyray-toggle-button:hover{opacity:1}#copy-tuner-bar{position:fixed;left:0;right:0;bottom:0;height:40px;padding:0 8px;background:#222;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:200;color:#fff;z-index:2147483647;box-shadow:0 -1px #ffffff1a,inset 0 2px 6px #000c;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.3))}#copy-tuner-bar-log-menu{position:fixed;left:0;right:0;bottom:40px;max-height:calc(100vh - 40px);background:#222;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;color:#fff;z-index:2147483647;overflow-y:auto}#copy-tuner-bar-log-menu tbody td{padding:2px 8px}#copy-tuner-bar-log-menu tbody tr{cursor:pointer}#copy-tuner-bar-log-menu tbody tr:hover{background:#444}#copy-tuner-bar-log-menu tbody a{color:#fff}#copy-tuner-bar-log-menu tbody a:hover,#copy-tuner-bar-log-menu tbody a:focus{color:#fff;text-decoration:underline}.copy-tuner-bar-button{position:relative;display:inline-block;color:#fff;margin:8px 1px;height:24px;line-height:24px;padding:0 8px;font-size:14px;cursor:pointer;vertical-align:middle;background-color:#444;background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.2));border-radius:2px;box-shadow:1px 1px 1px #00000080,inset 0 1px #fff3,inset 0 0 2px #fff3;text-shadow:0 -1px 0 rgba(0,0,0,.4)}.copy-tuner-bar-button:hover,.copy-tuner-bar-button:focus{color:#fff;text-decoration:none;background-color:#555}.copy-tuner-bar__notice{display:inline-block;margin:8px;font-size:13px;line-height:24px;vertical-align:middle;color:#ffd24d}input[type=text].copy-tuner-bar__search{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:2px;background-image:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,0));box-shadow:inset 0 1px #0003,inset 0 0 2px #0003;padding:2px 8px;margin:0;line-height:20px;vertical-align:middle;color:#000;width:auto;height:auto;font-size:14px}.copy-tuner-hidden{display:none!important}@media screen and (max-width: 480px){.hidden-on-mobile{display:none!important}}

data/src/copyray.ts

@@ -1,111 +0,0 @@
-import CopyTunerBar from './copytuner_bar'
-import Specimen from './specimen'
-
-const findBlurbs = () =>
-  Array.from(document.querySelectorAll('[data-copyray-key]')).map((element) => ({
-    // 1 要素に複数キーがカンマ区切りで入りうる（同一テキストノードに複数訳文が連結された場合）
-    keys: (element.getAttribute('data-copyray-key') ?? '').split(',').filter(Boolean),
-    element,
-  }))
-
-export default class Copyray {
-  // @ts-expect-error TS7006
-  constructor(baseUrl, data, keysSkipped = false) {
-    // @ts-expect-error TS2339
-    this.baseUrl = baseUrl
-    // @ts-expect-error TS2339
-    this.data = data
-    // @ts-expect-error TS2339
-    this.isShowing = false
-    // @ts-expect-error TS2339
-    this.specimens = []
-    // @ts-expect-error TS2339
-    this.overlay = this.makeOverlay()
-    // @ts-expect-error TS2339
-    this.toggleButton = this.makeToggleButton()
-    // @ts-expect-error TS2339
-    this.boundOpen = this.open.bind(this)
-
-    // @ts-expect-error TS2339
-    this.copyTunerBar = new CopyTunerBar(document.querySelector('#copy-tuner-bar'), this.data, this.boundOpen, keysSkipped)
-  }
-
-  show() {
-    this.reset()
-
-    // @ts-expect-error TS2339
-    document.body.append(this.overlay)
-    this.makeSpecimens()
-
-    // @ts-expect-error TS2339
-    for (const specimen of this.specimens) {
-      specimen.show()
-    }
-
-    // @ts-expect-error TS2339
-    this.copyTunerBar.show()
-    // @ts-expect-error TS2339
-    this.isShowing = true
-  }
-
-  hide() {
-    // @ts-expect-error TS2339
-    this.overlay.remove()
-    this.reset()
-    // @ts-expect-error TS2339
-    this.copyTunerBar.hide()
-    // @ts-expect-error TS2339
-    this.isShowing = false
-  }
-
-  toggle() {
-    // @ts-expect-error TS2339
-    if (this.isShowing) {
-      this.hide()
-    } else {
-      this.show()
-    }
-  }
-
-  // @ts-expect-error TS7006
-  open(key) {
-    // @ts-expect-error TS2339
-    window.open(`${this.baseUrl}/blurbs/${key}/edit`)
-  }
-
-  makeSpecimens() {
-    for (const { element, keys } of findBlurbs()) {
-      // @ts-expect-error TS2339
-      this.specimens.push(new Specimen(element, keys, this.boundOpen))
-    }
-  }
-
-  makeToggleButton() {
-    const element = document.createElement('a')
-
-    element.addEventListener('click', () => {
-      this.show()
-    })
-
-    element.classList.add('copyray-toggle-button')
-    element.classList.add('hidden-on-mobile')
-    element.textContent = 'Open CopyTuner'
-    document.body.append(element)
-
-    return element
-  }
-
-  makeOverlay() {
-    const div = document.createElement('div')
-    div.setAttribute('id', 'copyray-overlay')
-    div.addEventListener('click', () => this.hide())
-    return div
-  }
-
-  reset() {
-    // @ts-expect-error TS2339
-    for (const specimen of this.specimens) {
-      specimen.remove()
-    }
-  }
-}

data/src/copytuner_bar.ts

@@ -1,129 +0,0 @@
-// @ts-expect-error TS7016
-import debounce from 'lodash.debounce'
-
-const HIDDEN_CLASS = 'copy-tuner-hidden'
-
-export default class CopytunerBar {
-  // @ts-expect-error TS7006
-  constructor(element, data, callback, keysSkipped = false) {
-    // @ts-expect-error TS2339
-    this.element = element
-    // @ts-expect-error TS2339
-    this.data = data
-    // @ts-expect-error TS2339
-    this.callback = callback
-    // @ts-expect-error TS2339
-    this.searchBoxElement = element.querySelector('.js-copy-tuner-bar-search')
-    // @ts-expect-error TS2339
-    this.logMenuElement = this.makeLogMenu()
-    // @ts-expect-error TS2339
-    this.element.append(this.logMenuElement)
-
-    // 巨大DOM/Nokogiri例外でキー付与がスキップされた場合は、オーバーレイが使えないので
-    // ツールバー（Translations in this page）から編集する旨を案内する。
-    if (keysSkipped) {
-      this.appendSkippedNotice()
-    }
-
-    this.addHandler()
-  }
-
-  appendSkippedNotice() {
-    const notice = document.createElement('span')
-    notice.classList.add('copy-tuner-bar__notice')
-    notice.textContent = '⚠ This page is too large for the overlay. Use "Translations in this page" to edit.'
-    // @ts-expect-error TS2339
-    this.element.append(notice)
-  }
-
-  addHandler() {
-    // @ts-expect-error TS2339
-    const openLogButton = this.element.querySelector('.js-copy-tuner-bar-open-log')
-    // @ts-expect-error TS7006
-    openLogButton.addEventListener('click', (event) => {
-      event.preventDefault()
-      this.toggleLogMenu()
-    })
-
-    // @ts-expect-error TS2339
-    this.searchBoxElement.addEventListener('input', debounce(this.onKeyup.bind(this), 250))
-  }
-
-  show() {
-    // @ts-expect-error TS2339
-    this.element.classList.remove(HIDDEN_CLASS)
-    // @ts-expect-error TS2339
-    this.searchBoxElement.focus()
-  }
-
-  hide() {
-    // @ts-expect-error TS2339
-    this.element.classList.add(HIDDEN_CLASS)
-  }
-
-  showLogMenu() {
-    // @ts-expect-error TS2339
-    this.logMenuElement.classList.remove(HIDDEN_CLASS)
-  }
-
-  toggleLogMenu() {
-    // @ts-expect-error TS2339
-    this.logMenuElement.classList.toggle(HIDDEN_CLASS)
-  }
-
-  makeLogMenu() {
-    const div = document.createElement('div')
-    div.setAttribute('id', 'copy-tuner-bar-log-menu')
-    div.classList.add(HIDDEN_CLASS)
-
-    const table = document.createElement('table')
-    const tbody = document.createElement('tbody')
-    tbody.classList.remove('is-not-initialized')
-
-    // @ts-expect-error TS2339
-    for (const key of Object.keys(this.data).sort()) {
-      // @ts-expect-error TS2339
-      const value = this.data[key]
-
-      if (value === '') {
-        continue
-      }
-
-      const td1 = document.createElement('td')
-      td1.textContent = key
-      const td2 = document.createElement('td')
-      td2.textContent = value
-      const tr = document.createElement('tr')
-      tr.classList.add('copy-tuner-bar-log-menu__row')
-      tr.dataset.key = key
-
-      tr.addEventListener('click', ({ currentTarget }) => {
-        // @ts-expect-error TS2339
-        this.callback(currentTarget.dataset.key)
-      })
-
-      tr.append(td1)
-      tr.append(td2)
-      tbody.append(tr)
-    }
-
-    table.append(tbody)
-    div.append(table)
-
-    return div
-  }
-
-  // @ts-expect-error TS7031
-  onKeyup({ target }) {
-    const keyword = target.value.trim()
-    this.showLogMenu()
-
-    // @ts-expect-error TS2339
-    const rows = [...this.logMenuElement.querySelectorAll('tr')]
-
-    for (const row of rows) {
-      const isShow = keyword === '' || [...row.querySelectorAll('td')].some((td) => td.textContent.includes(keyword))
-      row.classList.toggle(HIDDEN_CLASS, !isShow)
-    }
-  }
-}