chore(eslint): added new eslint rule (for jsx)

2026-01-12 11:01:45 +00:00 · 2025-09-06 04:51:31 +09:00
parent 4d83bd587d
commit 10384b6c4c
26 changed files with 177 additions and 166 deletions
--- a/src/plugins/in-app-menu/renderer.tsx
+++ b/src/plugins/in-app-menu/renderer.tsx
@ -33,12 +33,12 @@ export const onRendererLoad = async ({
  render(
    () => (
      <TitleBar
-        ipc={ipc}
-        isMacOS={isMacOS}
        enableController={
          isNotWindowsOrMacOS && !config().hideDOMWindowControls
        }
        initialCollapsed={window.mainConfig.get('options.hideMenu')}
+        ipc={ipc}
+        isMacOS={isMacOS}
      />
    ),
    document.body,
--- a/src/plugins/in-app-menu/renderer/Panel.tsx
+++ b/src/plugins/in-app-menu/renderer/Panel.tsx
@ -149,17 +149,17 @@ export const Panel = (props: PanelProps) => {
    <Portal>
      <Transition
        appear
-        enterClass={animationStyle().enter}
        enterActiveClass={animationStyle().enterActive}
-        exitToClass={animationStyle().exitTo}
+        enterClass={animationStyle().enter}
        exitActiveClass={animationStyle().exitActive}
+        exitToClass={animationStyle().exitTo}
      >
        <Show when={local.open}>
          <ul
            {...leftProps}
+            class={panelStyle()}
            data-ytmd-sub-panel={true}
            ref={setPanel}
-            class={panelStyle()}
            style={{
              '--offset-x': `${position.x}px`,
              '--offset-y': `${position.y}px`,
--- a/src/plugins/in-app-menu/renderer/PanelItem.tsx
+++ b/src/plugins/in-app-menu/renderer/PanelItem.tsx
@ -290,80 +290,80 @@ export const PanelItem = (props: PanelItemProps) => {

  return (
    <li
-      ref={setAnchor}
      class={itemStyle()}
-      onMouseEnter={handleHover}
-      onClick={handleClick}
      data-selected={open()}
+      onClick={handleClick}
+      onMouseEnter={handleHover}
+      ref={setAnchor}
    >
      <Switch fallback={<div class={itemIconStyle()} />}>
        <Match when={props.type === 'checkbox' && props.checked}>
          <svg
            class={itemIconStyle()}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
            fill="none"
+            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
+            stroke-width="1.5"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
          >
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+            <path d="M0 0h24v24H0z" fill="none" stroke="none" />
            <path d="M5 12l5 5l10 -10" />
          </svg>
        </Match>
        <Match when={props.type === 'radio' && props.checked}>
          <svg
            class={itemIconStyle()}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
            style={{ padding: '6px' }}
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              fill="currentColor"
              d="M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"
+              fill="currentColor"
            />
          </svg>
        </Match>
        <Match when={props.type === 'radio' && !props.checked}>
          <svg
            class={itemIconStyle()}
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
            style={{ padding: '6px' }}
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              fill="currentColor"
              d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z"
+              fill="currentColor"
            />
          </svg>
        </Match>
      </Switch>
      <span class={itemLabelStyle()}>{props.name}</span>
-      <Show when={props.chip} fallback={<div />}>
+      <Show fallback={<div />} when={props.chip}>
        <span class={itemChipStyle()}>{props.chip}</span>
      </Show>
      <Show when={props.type === 'submenu'}>
        <svg
          class={itemIconStyle()}
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
          fill="none"
+          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
+          stroke-width="1.5"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
        >
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+          <path d="M0 0h24v24H0z" fill="none" stroke="none" />
          <polyline points="9 6 15 12 9 18" />
        </svg>
        <Panel
-          ref={setChild}
-          open={open()}
          anchor={anchor()}
-          placement={'right-start'}
          data-level={props.type === 'submenu' && props.level.join('/')}
          offset={{ mainAxis: 8 }}
+          open={open()}
+          placement={'right-start'}
+          ref={setChild}
        >
          {props.type === 'submenu' && props.children}
        </Panel>
@ -371,8 +371,8 @@ export const PanelItem = (props: PanelItemProps) => {
      <Show when={props.toolTip}>
        <Portal>
          <div
-            ref={setToolTip}
            class={popupStyle()}
+            ref={setToolTip}
            style={{
              '--offset-x': `${position.x}px`,
              '--offset-y': `${position.y}px`,
@ -380,10 +380,10 @@ export const PanelItem = (props: PanelItemProps) => {
          >
            <Transition
              appear
-              enterClass={animationStyle().enter}
              enterActiveClass={animationStyle().enterActive}
-              exitToClass={animationStyle().exitTo}
+              enterClass={animationStyle().enter}
              exitActiveClass={animationStyle().exitActive}
+              exitToClass={animationStyle().exitTo}
            >
              <Show when={toolTipOpen()}>
                <div class={toolTipStyle()}>{props.toolTip}</div>
--- a/src/plugins/in-app-menu/renderer/TitleBar.tsx
+++ b/src/plugins/in-app-menu/renderer/TitleBar.tsx
@ -120,22 +120,22 @@ const PanelRenderer = (props: PanelRendererProps) => {
          <Switch>
            <Match when={subItem().type === 'normal'}>
              <PanelItem
-                type={'normal'}
-                name={subItem().label}
                chip={subItem().sublabel}
-                toolTip={subItem().toolTip}
                commandId={subItem().commandId}
+                name={subItem().label}
                onClick={() => props.onClick?.(subItem().commandId)}
+                toolTip={subItem().toolTip}
+                type={'normal'}
              />
            </Match>
            <Match when={subItem().type === 'submenu'}>
              <PanelItem
-                type={'submenu'}
-                name={subItem().label}
                chip={subItem().sublabel}
-                toolTip={subItem().toolTip}
-                level={[...(props.level ?? []), subItem().commandId]}
                commandId={subItem().commandId}
+                level={[...(props.level ?? []), subItem().commandId]}
+                name={subItem().label}
+                toolTip={subItem().toolTip}
+                type={'submenu'}
              >
                <PanelRenderer
                  items={subItem().submenu?.items ?? []}
@ -146,26 +146,26 @@ const PanelRenderer = (props: PanelRendererProps) => {
            </Match>
            <Match when={subItem().type === 'checkbox'}>
              <PanelItem
-                type={'checkbox'}
-                name={subItem().label}
                checked={subItem().checked}
                chip={subItem().sublabel}
-                toolTip={subItem().toolTip}
                commandId={subItem().commandId}
+                name={subItem().label}
                onChange={() => props.onClick?.(subItem().commandId)}
+                toolTip={subItem().toolTip}
+                type={'checkbox'}
              />
            </Match>
            <Match when={subItem().type === 'radio'}>
              <PanelItem
-                type={'radio'}
-                name={subItem().label}
                checked={subItem().checked}
                chip={subItem().sublabel}
-                toolTip={subItem().toolTip}
                commandId={subItem().commandId}
+                name={subItem().label}
                onChange={() =>
                  props.onClick?.(subItem().commandId, radioGroup())
                }
+                toolTip={subItem().toolTip}
+                type={'radio'}
              />
            </Match>
            <Match when={subItem().type === 'separator'}>
@ -325,10 +325,10 @@ export const TitleBar = (props: TitleBarProps) => {

  return (
    <nav
-      data-ytmd-main-panel={true}
      class={titleStyle()}
      data-macos={props.isMacOS}
      data-show={mouseY() < 32}
+      data-ytmd-main-panel={true}
    >
      <IconButton
        onClick={() => setCollapsed(!collapsed())}
@ -336,7 +336,7 @@ export const TitleBar = (props: TitleBarProps) => {
          'border-top-left-radius': '4px',
        }}
      >
-        <svg width={16} height={16} viewBox={'0 0 24 24'}>
+        <svg height={16} viewBox={'0 0 24 24'} width={16}>
          <path
            d="M3 17h12a1 1 0 0 1 .117 1.993L15 19H3a1 1 0 0 1-.117-1.993L3 17h12H3Zm0-6h18a1 1 0 0 1 .117 1.993L21 13H3a1 1 0 0 1-.117-1.993L3 11h18H3Zm0-6h15a1 1 0 0 1 .117 1.993L18 7H3a1 1 0 0 1-.117-1.993L3 5h15H3Z"
            fill="currentColor"
@ -344,26 +344,29 @@ export const TitleBar = (props: TitleBarProps) => {
        </svg>
      </IconButton>
      <TransitionGroup
-        enterClass={
-          ignoreTransition()
-            ? animationStyle().fakeTarget
-            : animationStyle().enter
-        }
        enterActiveClass={
          ignoreTransition()
            ? animationStyle().fake
            : animationStyle().enterActive
        }
-        exitToClass={
+        enterClass={
          ignoreTransition()
            ? animationStyle().fakeTarget
-            : animationStyle().exitTo
+            : animationStyle().enter
        }
        exitActiveClass={
          ignoreTransition()
            ? animationStyle().fake
            : animationStyle().exitActive
        }
+        exitToClass={
+          ignoreTransition()
+            ? animationStyle().fakeTarget
+            : animationStyle().exitTo
+        }
+        onAfterEnter={(element) => {
+          (element as HTMLElement).style.removeProperty('transition-delay');
+        }}
        onBeforeEnter={(element) => {
          if (ignoreTransition()) return;
          const index = Number(element.getAttribute('data-index') ?? 0);
@ -373,9 +376,6 @@ export const TitleBar = (props: TitleBarProps) => {
            `${index * 0.025}s`,
          );
        }}
-        onAfterEnter={(element) => {
-          (element as HTMLElement).style.removeProperty('transition-delay');
-        }}
        onBeforeExit={(element) => {
          if (ignoreTransition()) return;
          const index = Number(element.getAttribute('data-index') ?? 0);
@ -405,18 +405,18 @@ export const TitleBar = (props: TitleBarProps) => {
              return (
                <>
                  <MenuButton
-                    ref={setAnchor}
-                    text={item().label}
-                    onClick={handleClick}
-                    selected={openTarget() === anchor()}
                    data-index={index}
                    data-length={data()?.items.length}
+                    onClick={handleClick}
+                    ref={setAnchor}
+                    selected={openTarget() === anchor()}
+                    text={item().label}
                  />
                  <Panel
-                    open={openTarget() === anchor()}
                    anchor={anchor()}
-                    placement={'bottom-start'}
                    offset={{ mainAxis: 8 }}
+                    open={openTarget() === anchor()}
+                    placement={'bottom-start'}
                  >
                    <PanelRenderer
                      items={item().submenu?.items ?? []}
@ -433,9 +433,9 @@ export const TitleBar = (props: TitleBarProps) => {
        <div style={{ flex: 1 }} />
        <WindowController
          isMaximize={isMaximized()}
-          onToggleMaximize={handleToggleMaximize}
-          onMinimize={handleMinimize}
          onClose={handleClose}
+          onMinimize={handleMinimize}
+          onToggleMaximize={handleToggleMaximize}
        />
      </Show>
    </nav>
--- a/src/plugins/in-app-menu/renderer/WindowController.tsx
+++ b/src/plugins/in-app-menu/renderer/WindowController.tsx
@ -32,61 +32,61 @@ export const WindowController = (props: WindowControllerProps) => {
    <div class={containerStyle()}>
      <IconButton onClick={props.onMinimize}>
        <svg
-          width={16}
-          height={16}
          fill="none"
+          height={16}
          viewBox="0 0 24 24"
+          width={16}
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
-            fill="currentColor"
            d="M3.755 12.5h16.492a.75.75 0 0 0 0-1.5H3.755a.75.75 0 0 0 0 1.5Z"
+            fill="currentColor"
          />
        </svg>
      </IconButton>
      <IconButton onClick={props.onToggleMaximize}>
        <Show
-          when={props.isMaximize}
          fallback={
            <svg
-              width={16}
-              height={16}
              fill="none"
+              height={16}
              viewBox="0 0 24 24"
+              width={16}
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
-                fill="currentColor"
                d="M6 3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3Zm0 2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6Z"
+                fill="currentColor"
              />
            </svg>
          }
+          when={props.isMaximize}
        >
          <svg
-            width={16}
-            height={16}
            fill="none"
+            height={16}
            viewBox="0 0 24 24"
+            width={16}
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
-              fill="currentColor"
              d="M7.518 5H6.009a3.25 3.25 0 0 1 3.24-3h8.001A4.75 4.75 0 0 1 22 6.75v8a3.25 3.25 0 0 1-3 3.24v-1.508a1.75 1.75 0 0 0 1.5-1.732v-8a3.25 3.25 0 0 0-3.25-3.25h-8A1.75 1.75 0 0 0 7.518 5ZM5.25 6A3.25 3.25 0 0 0 2 9.25v9.5A3.25 3.25 0 0 0 5.25 22h9.5A3.25 3.25 0 0 0 18 18.75v-9.5A3.25 3.25 0 0 0 14.75 6h-9.5ZM3.5 9.25c0-.966.784-1.75 1.75-1.75h9.5c.967 0 1.75.784 1.75 1.75v9.5a1.75 1.75 0 0 1-1.75 1.75h-9.5a1.75 1.75 0 0 1-1.75-1.75v-9.5Z"
+              fill="currentColor"
            />
          </svg>
        </Show>
      </IconButton>
      <IconButton onClick={props.onClose}>
        <svg
-          width={16}
-          height={16}
          fill="none"
+          height={16}
          viewBox="0 0 24 24"
+          width={16}
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
-            fill="currentColor"
            d="m4.21 4.387.083-.094a1 1 0 0 1 1.32-.083l.094.083L12 10.585l6.293-6.292a1 1 0 1 1 1.414 1.414L13.415 12l6.292 6.293a1 1 0 0 1 .083 1.32l-.083.094a1 1 0 0 1-1.32.083l-.094-.083L12 13.415l-6.293 6.292a1 1 0 0 1-1.414-1.414L10.585 12 4.293 5.707a1 1 0 0 1-.083-1.32l.083-.094-.083.094Z"
+            fill="currentColor"
          />
        </svg>
      </IconButton>