Refactor inline style attributes

web_src/js/features/codeeditor.ts

@@ -1,6 +1,6 @@
 import {colord} from 'colord';
 import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
-import {onInputDebounce} from '../utils/dom.ts';
+import {onInputDebounce, toggleElem} from '../utils/dom.ts';
 import type MonacoNamespace from 'monaco-editor';
 
 type Monaco = typeof MonacoNamespace;
@@ -197,19 +197,19 @@ function getFileBasedOptions(filename: string, lineWrapExts: string[]): MonacoOp
 }
 
 function togglePreviewDisplay(previewable: boolean): void {
+  // FIXME: here and below, the selector is too broad, it should only query in the editor related scope
   const previewTab = document.querySelector<HTMLElement>('a[data-tab="preview"]');
+  // the "preview tab" exists for "file code editor", but doesn't exist for "git hook editor"
   if (!previewTab) return;
 
-  if (previewable) {
-    previewTab.style.display = '';
-  } else {
-    previewTab.style.display = 'none';
-    // If the "preview" tab was active, user changes the filename to a non-previewable one,
-    // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
-    if (previewTab.classList.contains('active')) {
-      const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
-      writeTab?.click();
-    }
+  toggleElem(previewTab, previewable);
+  if (previewable) return;
+
+  // If not previewable but the "preview" tab was active (user changes the filename to a non-previewable one),
+  // then the "preview" tab becomes inactive (hidden), so the "write" tab should become active
+  if (previewTab.classList.contains('active')) {
+    const writeTab = document.querySelector<HTMLElement>('a[data-tab="write"]');
+    writeTab?.click(); // TODO: it shouldn't need null-safe operator, writeTab must exist
   }
 }
 

web_src/js/features/repo-actions.ts

@@ -8,7 +8,7 @@ export function initRepositoryActionView() {
   // TODO: the parent element's full height doesn't work well now,
   // but we can not pollute the global style at the moment, only fix the height problem for pages with this component
   const parentFullHeight = document.querySelector<HTMLElement>('body > div.full.height');
-  if (parentFullHeight) parentFullHeight.style.paddingBottom = '0';
+  if (parentFullHeight) parentFullHeight.classList.add('tw-pb-0');
 
   const view = createApp(RepoActionView, {
     runIndex: el.getAttribute('data-run-index'),

web_src/js/features/repo-editor.ts

@@ -113,8 +113,8 @@ export function initRepoEditor() {
         warningDiv = document.createElement('div');
         warningDiv.classList.add('ui', 'warning', 'message', 'flash-message', 'flash-warning', 'space-related');
         warningDiv.innerHTML = html`<p>File path contains leading or trailing whitespace.</p>`;
-        // Add display 'block' because display is set to 'none' in formantic\build\semantic.css
-        warningDiv.style.display = 'block';
+        // Change to `block` display because it is set to 'none' in fomantic/build/semantic.css
+        warningDiv.classList.add('tw-block');
         const inputContainer = document.querySelector('.repo-editor-header')!;
         inputContainer.insertAdjacentElement('beforebegin', warningDiv);
       }