From 0735fbe7399a9d07b3a73f10e55a655a52f3e525 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sun, 8 Dec 2024 05:04:09 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=BC=E3=83=88=E3=82=AB?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E3=82=AD=E3=83=BC=E5=89=B2=E3=82=8A=E5=BD=93?=
 =?UTF-8?q?=E3=81=A6=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=AE?=
 =?UTF-8?q?=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=20(#2348)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 src/components/Base/BaseButton.vue            |   2 +-
 src/components/Base/BaseIconButton.stories.ts |  36 ++
 src/components/Base/BaseIconButton.vue        |  62 +++
 src/components/Base/BaseScrollArea.vue        |   1 +
 .../Dialog/HotkeyRecordingDialog.vue          |   2 +-
 src/components/Dialog/HotkeySettingDialog.vue | 360 +++++++++---------
 src/styles/v2/colors.scss                     |   3 +
 src/styles/v2/variables.scss                  |   1 +
 ...nbutton--default-dark-storybook-win32.png" | Bin 0 -> 901 bytes
 ...button--default-light-storybook-win32.png" | Bin 0 -> 857 bytes
 ...button--disabled-dark-storybook-win32.png" | Bin 0 -> 892 bytes
 ...utton--disabled-light-storybook-win32.png" | Bin 0 -> 852 bytes
 12 files changed, 282 insertions(+), 185 deletions(-)
 create mode 100644 src/components/Base/BaseIconButton.stories.ts
 create mode 100644 src/components/Base/BaseIconButton.vue
 create mode 100644 "tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-dark-storybook-win32.png"
 create mode 100644 "tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-light-storybook-win32.png"
 create mode 100644 "tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-dark-storybook-win32.png"
 create mode 100644 "tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-light-storybook-win32.png"

diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 24a42845f1..406e2b6794 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -31,7 +31,7 @@ defineEmits<{
 
 .button {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   text-wrap: nowrap;
   height: vars.$size-control;
diff --git a/src/components/Base/BaseIconButton.stories.ts b/src/components/Base/BaseIconButton.stories.ts
new file mode 100644
index 0000000000..34d45c08e8
--- /dev/null
+++ b/src/components/Base/BaseIconButton.stories.ts
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import { TooltipProvider } from "radix-vue";
+import BaseIconButton from "./BaseIconButton.vue";
+
+const meta: Meta<typeof BaseIconButton> = {
+  component: BaseIconButton,
+  render: (args) => ({
+    components: { BaseIconButton, TooltipProvider },
+    setup() {
+      return { args };
+    },
+    template: `
+    <TooltipProvider>
+      <BaseIconButton v-bind="args" />
+    </TooltipProvider>`,
+  }),
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseIconButton>;
+
+export const Default: Story = {
+  args: {
+    label: "Default",
+    icon: "settings",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Disabled",
+    icon: "settings",
+    disabled: true,
+  },
+};
diff --git a/src/components/Base/BaseIconButton.vue b/src/components/Base/BaseIconButton.vue
new file mode 100644
index 0000000000..267b00f776
--- /dev/null
+++ b/src/components/Base/BaseIconButton.vue
@@ -0,0 +1,62 @@
+<template>
+  <BaseTooltip :label>
+    <button
+      class="button"
+      :disabled
+      @click="(payload) => $emit('click', payload)"
+    >
+      <!-- 暫定でq-iconを使用 -->
+      <QIcon v-if="icon" :name="icon" size="sm" />
+    </button>
+  </BaseTooltip>
+</template>
+
+<script setup lang="ts">
+import BaseTooltip from "./BaseTooltip.vue";
+
+defineProps<{
+  icon: string;
+  label: string;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.button {
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: vars.$size-control;
+  width: vars.$size-control;
+  border-radius: vars.$radius-1;
+  color: colors.$display;
+  background-color: colors.$clear;
+  cursor: pointer;
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &:hover:not(:disabled) {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:active:not(:disabled) {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:disabled {
+    // Quasar側のopacity: 0.6 !important;を上書きするためimportantを付与
+    opacity: 0.4 !important;
+  }
+}
+</style>
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 013d81d7ed..b1bc064f4e 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -52,6 +52,7 @@ import {
 .ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
+  z-index: vars.$z-index-scrollbar;
 }
 
 .ScrollAreaScrollbar[data-orientation="vertical"] {
diff --git a/src/components/Dialog/HotkeyRecordingDialog.vue b/src/components/Dialog/HotkeyRecordingDialog.vue
index d608f85746..46047b9b65 100644
--- a/src/components/Dialog/HotkeyRecordingDialog.vue
+++ b/src/components/Dialog/HotkeyRecordingDialog.vue
@@ -44,7 +44,7 @@
         />
         <QBtn
           padding="xs md"
-          label="ショートカットキーを未設定にする"
+          label="ショートカットキーを未割り当てにする"
           unelevated
           color="surface"
           textColor="display"
diff --git a/src/components/Dialog/HotkeySettingDialog.vue b/src/components/Dialog/HotkeySettingDialog.vue
index 8417edb6b9..558dd3c476 100644
--- a/src/components/Dialog/HotkeySettingDialog.vue
+++ b/src/components/Dialog/HotkeySettingDialog.vue
@@ -45,74 +45,64 @@
 
       <QPageContainer>
         <QPage>
-          <QTable
-            v-model:pagination="hotkeyPagination"
-            flat
-            dense
-            hideBottom
-            cardClass="bg-background text-display"
-            tableClass="text-display"
-            rowKey="hotkeyIndexes"
-            :filter="hotkeyFilter"
-            :rows="hotkeySettings"
-            :columns="hotkeyColumns"
-            class="hotkey-table"
-          >
-            <template #header="tableProps">
-              <QTr :props="tableProps">
-                <QTh
-                  v-for="col of tableProps.cols"
-                  :key="col.name"
-                  :props="tableProps"
+          <div class="container">
+            <BaseScrollArea>
+              <div class="table">
+                <div class="table-header">
+                  <div class="table-cell"></div>
+                  <div class="table-cell">操作</div>
+                  <div class="table-cell">ショートカットキー</div>
+                </div>
+                <div
+                  v-for="hotkeySetting in hotkeySettings.filter(
+                    (hotkeySetting) =>
+                      hotkeySetting.action.includes(hotkeyFilter) ||
+                      hotkeySetting.combination
+                        .toLocaleLowerCase()
+                        .includes(hotkeyFilter.toLocaleLowerCase()),
+                  )"
+                  :key="hotkeySetting.action"
+                  class="table-row"
                 >
-                  {{ col.label }}
-                </QTh>
-              </QTr>
-            </template>
-
-            <template #body="tableProps">
-              <QTr :props="tableProps">
-                <QTd :key="tableProps.cols[0].name" noHover :props="tableProps">
-                  {{ tableProps.row.action }}
-                </QTd>
-                <QTd :key="tableProps.cols[1].name" noHover :props="tableProps">
-                  <QBtn
-                    dense
-                    textColor="display"
-                    padding="none sm"
-                    flat
-                    :disable="checkHotkeyReadonly(tableProps.row.action)"
-                    noCaps
-                    :label="
-                      getHotkeyText(
-                        tableProps.row.action,
-                        tableProps.row.combination,
-                      )
-                        .split(' ')
-                        .map((hotkeyText) => {
-                          // Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する
-                          // Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している
-                          return hotkeyText === 'Meta' ? 'Cmd' : hotkeyText;
-                        })
-                        .join(' + ')
-                    "
-                    @click="openHotkeyDialog(tableProps.row.action)"
-                  />
-                  <QBtn
-                    rounded
-                    flat
-                    icon="settings_backup_restore"
-                    padding="none sm"
-                    size="1em"
-                    :disable="checkHotkeyReadonly(tableProps.row.action)"
-                    @click="resetHotkey(tableProps.row.action)"
-                  >
-                    <QTooltip :delay="500">デフォルトに戻す</QTooltip>
-                  </QBtn>
-                </QTd>
-              </QTr>
-            </template>
-          </QTable>
+                  <div class="table-cell"></div>
+                  <div class="table-cell hotkey-name">
+                    {{ hotkeySetting.action }}
+                  </div>
+                  <div class="table-cell key-button">
+                    <BaseButton
+                      :label="
+                        getHotkeyText(
+                          hotkeySetting.action,
+                          hotkeySetting.combination,
+                        )
+                          .split(' ')
+                          .map((hotkeyText) => {
+                            // Mac の Meta キーは Cmd キーであるため、Meta の表示名を Cmd に置換する
+                            // Windows PC では Meta キーは Windows キーだが、使用頻度低と考えられるため暫定的に Mac 対応のみを考慮している
+                            return hotkeyText === 'Meta' ? 'Cmd' : hotkeyText;
+                          })
+                          .join(' + ')
+                      "
+                      :disabled="checkHotkeyReadonly(hotkeySetting.action)"
+                      @click="openHotkeyDialog(hotkeySetting.action)"
+                    />
+                  </div>
+                  <div class="table-cell icon-buttons">
+                    <BaseIconButton
+                      icon="settings_backup_restore"
+                      label="デフォルトに戻す"
+                      :disabled="
+                        checkHotkeyReadonly(hotkeySetting.action) ||
+                        isDefaultCombination(hotkeySetting.action)
+                      "
+                      @click="resetHotkey(hotkeySetting.action)"
+                    />
+                  </div>
+                  <div class="table-cell"></div>
+                </div>
+              </div>
+            </BaseScrollArea>
+          </div>
         </QPage>
       </QPageContainer>
     </QLayout>
@@ -132,6 +122,9 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import HotkeyRecordingDialog from "./HotkeyRecordingDialog.vue";
+import BaseButton from "@/components/Base/BaseButton.vue";
+import BaseIconButton from "@/components/Base/BaseIconButton.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useStore } from "@/store";
 import {
   HotkeyActionNameType,
@@ -156,34 +149,10 @@ const hotkeySettingDialogOpenComputed = computed({
 
 const isHotkeyDialogOpened = ref(false);
 
-const hotkeyPagination = ref({ rowsPerPage: 0 });
 const hotkeyFilter = ref("");
 
 const hotkeySettings = computed(() => store.state.hotkeySettings);
 
-// FIXME: satisfiesを使うなどで型を表現したい
-const hotkeyColumns = ref<
-  {
-    name: string;
-    align: "left" | "right" | "center" | undefined;
-    label: string;
-    field: string;
-  }[]
->([
-  {
-    name: "action",
-    align: "left",
-    label: "操作",
-    field: "action",
-  },
-  {
-    name: "combination",
-    align: "left",
-    label: "ショートカットキー",
-    field: "combination",
-  },
-]);
-
 const lastAction = ref("");
 const lastRecord = ref(HotkeyCombination(""));
 
@@ -191,11 +160,11 @@ const lastRecord = ref(HotkeyCombination(""));
 const recordCombination = (event: KeyboardEvent) => {
   if (!isHotkeyDialogOpened.value) {
     return;
-  } else {
-    const recordedCombo = eventToCombination(event);
-    lastRecord.value = recordedCombo;
-    event.preventDefault();
   }
+
+  const recordedCombo = eventToCombination(event);
+  lastRecord.value = recordedCombo;
+  event.preventDefault();
 };
 
 // FIXME: HotkeyRecordingDialog内に移動する
@@ -230,22 +199,16 @@ const deleteHotkey = (action: string) => {
 };
 
 const getHotkeyText = (action: string, combo: string) => {
-  if (checkHotkeyReadonly(action)) combo = "（読み取り専用）" + combo;
-  if (combo == "") return "未設定";
-  else return combo;
+  if (checkHotkeyReadonly(action)) return "（読み取り専用）" + combo;
+  if (combo == "") return "未割り当て";
+  return combo;
 };
 
 // for later developers, in case anyone wants to add a readonly hotkey
 const readonlyHotkeyKeys: string[] = [];
 
 const checkHotkeyReadonly = (action: string) => {
-  let flag = false;
-  readonlyHotkeyKeys.forEach((key) => {
-    if (key == action) {
-      flag = true;
-    }
-  });
-  return flag;
+  return readonlyHotkeyKeys.includes(action);
 };
 
 const openHotkeyDialog = (action: string) => {
@@ -262,97 +225,60 @@ const setHotkeyDialogOpened = () => {
   document.removeEventListener("keydown", recordCombination);
 };
 
+const defaultSettings = ref<HotkeySettingType[]>([]);
+void window.backend
+  .getDefaultHotkeySettings()
+  .then((settings) => (defaultSettings.value = settings));
+
+const isDefaultCombination = (action: string) => {
+  const defaultSetting = defaultSettings.value.find(
+    (value) => value.action === action,
+  );
+  const hotkeySetting = hotkeySettings.value.find(
+    (value) => value.action === action,
+  );
+  return hotkeySetting?.combination === defaultSetting?.combination;
+};
+
 const resetHotkey = async (action: string) => {
   const result = await store.actions.SHOW_CONFIRM_DIALOG({
-    title: "ショートカットキーを初期値に戻します",
-    message: `${action}のショートカットキーを初期値に戻します。\n本当に戻しますか？`,
-    actionName: "初期値に戻す",
-    cancel: "初期値に戻さない",
+    title: "ショートカットキーをデフォルトに戻します",
+    message: `${action}のショートカットキーをデフォルトに戻します。\n本当に戻しますか？`,
+    actionName: "デフォルトに戻す",
+    cancel: "デフォルトに戻さない",
   });
-  if (result === "OK") {
-    void window.backend
-      .getDefaultHotkeySettings()
-      .then((defaultSettings: HotkeySettingType[]) => {
-        const setting = defaultSettings.find((value) => value.action == action);
-        if (setting == undefined) {
-          return;
-        }
-        // デフォルトが未設定でない場合は、衝突チェックを行う
-        if (setting.combination) {
-          const duplicated = hotkeySettings.value.find(
-            (item) =>
-              item.combination == setting.combination && item.action != action,
-          );
-          if (duplicated != undefined) {
-            openHotkeyDialog(action);
-            lastRecord.value = duplicated.combination;
-            return;
-          }
-        }
-        void changeHotkeySettings(action, setting.combination);
-      });
+
+  if (result !== "OK") return;
+
+  const setting = defaultSettings.value.find((value) => value.action == action);
+  if (setting == undefined) {
+    return;
+  }
+  // デフォルトが未設定でない場合は、衝突チェックを行う
+  if (setting.combination) {
+    const duplicated = hotkeySettings.value.find(
+      (item) =>
+        item.combination == setting.combination && item.action != action,
+    );
+    if (duplicated != undefined) {
+      openHotkeyDialog(action);
+      lastRecord.value = duplicated.combination;
+      return;
+    }
   }
+  void changeHotkeySettings(action, setting.combination);
 };
 </script>
 
 <style scoped lang="scss">
-@use "@/styles/variables" as vars;
-@use "@/styles/colors" as colors;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/visually-hidden" as visually-hidden;
 
 .search-box {
   width: 200px;
 }
 
-.hotkey-table {
-  width: calc(100vw - #{vars.$window-border-width * 2});
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  );
-
-  > :deep(.scroll) {
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-
-  tbody tr {
-    td button:last-child {
-      float: right;
-      display: none;
-    }
-    &:hover td button:last-child {
-      display: inline-flex;
-      color: colors.$display;
-      opacity: 0.5;
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  thead tr th {
-    position: sticky;
-    top: 0;
-    font-weight: bold;
-    background-color: colors.$surface;
-    z-index: 1;
-  }
-
-  thead tr th:first-child,
-  tbody tr td:first-child {
-    width: 70%;
-    max-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  thead tr th:last-child,
-  tbody tr td:last-child {
-    max-width: 0;
-    min-width: 180px;
-  }
-}
-
 .q-layout-container > :deep(.absolute-full) {
   right: 0 !important;
   > .scroll {
@@ -360,4 +286,72 @@ const resetHotkey = async (action: string) => {
     overflow: hidden;
   }
 }
+
+.key-button {
+  display: flex;
+  flex-direction: column;
+}
+
+.container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background-color: colors.$background;
+}
+
+.table {
+  display: grid;
+  grid-template-columns: 1fr minmax(auto, 480px) auto auto 1fr;
+  width: 100%;
+}
+
+.table-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  border-bottom: 1px solid colors.$border;
+  font-weight: 700;
+  background-color: colors.$surface;
+  height: 32px;
+}
+
+.table-header,
+.table-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 5;
+  align-items: center;
+}
+
+.table-row {
+  height: 40px;
+}
+
+.table-row:nth-child(odd) {
+  background-color: colors.$background-alt;
+}
+
+.table-cell {
+  padding: 0 vars.$padding-1;
+}
+
+.table-cell:first-child,
+.table-cell:last-child {
+  width: 100%;
+}
+
+.hotkey-name {
+  max-width: 480px;
+}
+
+.icon-buttons {
+  display: flex;
+  gap: vars.$gap-1;
+  opacity: 0;
+}
+
+:where(:hover, :has(:focus-visible)) > .icon-buttons {
+  opacity: 1;
+}
 </style>
diff --git a/src/styles/v2/colors.scss b/src/styles/v2/colors.scss
index 94dc830f0f..d68687ce67 100644
--- a/src/styles/v2/colors.scss
+++ b/src/styles/v2/colors.scss
@@ -12,6 +12,7 @@ $primitive-red: #d04756;
 // ライトテーマの色
 :root[is-dark-theme="false"] {
   --color-v2-background: #{color.adjust($primitive-primary, $lightness: 25%)};
+  --color-v2-background-alt: #{color.adjust($primitive-white, $lightness: -5%)};
   --color-v2-background-drawer: #{rgba(color.adjust($primitive-primary, $lightness: 20%), 0.75)};
 
   --color-v2-surface: #{$primitive-white};
@@ -48,6 +49,7 @@ $primitive-red: #d04756;
 // ダークテーマの色
 :root[is-dark-theme="true"] {
   --color-v2-background: #{$primitive-black};
+  --color-v2-background-alt: #{color.adjust($primitive-black, $lightness: 2%)};
   --color-v2-background-drawer: #{rgba($primitive-black, 0.75)};
 
   --color-v2-surface: #{color.adjust($primitive-black, $lightness: 3%)};
@@ -82,6 +84,7 @@ $primitive-red: #d04756;
 }
 
 $background: var(--color-v2-background);
+$background-alt: var(--color-v2-background-alt);
 $background-drawer: var(--color-v2-background-drawer);
 
 $surface: var(--color-v2-surface);
diff --git a/src/styles/v2/variables.scss b/src/styles/v2/variables.scss
index fe64a25ba5..abe056c97a 100644
--- a/src/styles/v2/variables.scss
+++ b/src/styles/v2/variables.scss
@@ -23,6 +23,7 @@ $radius-2: calc(var(--radius-basis) * 2);
 
 $transition-duration: 100ms;
 
+$z-index-scrollbar: 100;
 $z-index-fullscreen-dialog: 1000;
 $z-index-dropdown: 1010;
 $z-index-fixed: 1020;
diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-dark-storybook-win32.png"
new file mode 100644
index 0000000000000000000000000000000000000000..40d858a05fb500c7d87abc6114cd6525ba53a6d8
GIT binary patch
literal 901
zcmV;01A6?4P)<h;3K|Lk000e1NJLTq00iIw001Be0ssI2G=7kP00001b5ch_0Itp)
z=>Px&KS@MERCt{2-7#ofbsPuq7cFK8eS>YL3j{(q?gVL|=z$QSki|h`ZaSnUgC-6c
z)1p*rm14V8E7%AoR3tiNGOcJc7*X!BgrdX}JVlx*H(fxuOwY-s#=FZ?E+MZya-Yxk
z|Ghtt-}>df|L@;5m`(=(008i)J@%*@0001hKtKfm0H9q6r~m)}v;_eb004ltAfN&O
z0MHhWwYaaaaQAX9++EhzE}b4<Osp#a0025pt6xxudc*o<*n29OegFUf=uj;N)I#6M
z#=^-|A(4In008Jv{}oWjZm#~mv3l#1nXzo9aD90u7dAc*bLW>oEMzkInc3T`_x@O&
z&p(WA0RR9vvbqM->AltA+3!Ca>D$+fwpLz0GhI5o#sB~S=qzzxP*WGq4eu|V20_p_
zJo9$yaC!m&0H6cK1k{PEV^4L*?TxDU*NesV&1w|)v^$%>I)3;K0ssKe8TMW?lZtj~
zQ4lso)Y{s$v*YvS2dm7~!WZY8kEKSnoxf5+P)V>`0001vtjC``aiX!ZvvFtPhv?ME
z>HePG^ja;x^WwX82TZqrTG}2ejP&>XQ;4d?k6z7R{&D9awG99Oz)=%F#kV{^`RRIX
zcUjvkebu~Wskm9UVSVnk`QMW25dZ*y4$$H~r~m)}kgWKCnw^|~W9Z)_rs2Two@-9W
zo*$^&Ff?^@GLuw~0001VfW2o>Q-#@EH_kpC){jr>>CZhIm6m?qez49=EnI&kT{lPR
zSWo|R`F!@zl{*`bp#lH^Z~%L!_*S})H;?cQf*{PD`}*F*{c^by^kuUHy)pODbce^E
zFv1rA0Dyz(8ce5~YpDyjmnY({Lj506`STZEeqTZb007`X;?AH}u3Rf^?e|4nr4OW2
z0000EEPhB*Y5GR78bsCdcXMyOG<xZqx*KJ7)i%GqI6C^~+{&-jD5w@co-W0`2><{9
zS`zn*Z;Zm1ci+o}b%om6#b?GB6Ko6s0D#WY;ytK~TicC=?TT~?006)tYB8V&>(z$8
zd~4NTlIaHk0DunF;xE1c005AzR==PE002Ou1XKV30NR3p3IG5=TM$qI003wU0xAFi
b0BzxKQcSh+)UW1n00000NkvXXu0mjfBr}z+

literal 0
HcmV?d00001

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--default-light-storybook-win32.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a79bc9a8261221c77bfcb36c073b8f9e4b4a842f
GIT binary patch
literal 857
zcmeAS@N?(olHy`uVBq!ia0y~yV0i#!D{wFYNt3z>4M2*qILO_JVcj{ImkbQd!k#XU
zAr*7p-c<~UE|+2daQ&{HMnHnpQIQ$02Yp-o3WO_H<&<lu?O2dDOF_zKre<5i%*f=h
z7<Dn8nVBxLI~+yR92>oSR~c>HvUhgWv;)c0jpAl|+sS`F{d@nN^L6k4|J(n6t@-<V
zY(RTIY^?pXQ5wi-aByH{U`UAISOMhluri7Qg%&C-06Nh?#7?##cJ-z@_4xPGUOxI9
zWFZ_K4ph`L*RecccJJeRpLTrInpX!DkqBmHyK-&yWxxEpmbu%KUU2};*jN(kkZXVX
zZsggw*U#N@ykMo5n{)N|{Ok26ruRiVUa(tjdvdMb(^YTzFX{qKP=0-Fc6q-3|6k#`
z*@b_n`(5D<_qbDCvt_GE;pDZ9K)3iQl?O=wzWsixU$epso4fb&?*#aR+_JEv;g;6>
zxAWX}=K7>wlY1v3UpL*;*UiT6{%u|B>A;{rVCoucY;0>ieZ_ZvSFa`VveUvQISQ~i
zN~{z6^z>`N=6m~7-fez4V>T!dN?hkV^3Iy-RQ7nm?*3hSioYaVT;0AX_UFIuny>S-
zzU6KFqTzGwjt<b?#jm?G_nkDD?pwaP_34!>M@55IK5fmLc<$bGKcH)W*t6|n2L>d=
zqf%Fg+^{n5|MzNsZK^7IIqUK_&#$T5S4{t=b#{go3(!g(7vGO-bJw@nvIjIPtjK$I
zx|VTE<UNg$>Q|qeYkqt!J1Y_oG-sV=R@eL2pD%ZBUr_dHcD%0L*)?}!{aDq{^YPVL
z|NQ(YdhX@T*FS#c1bVlld(NZV8m;$T;#z;jr@j9lb@JT(h-6SuO+R70;&XOuzVQ3+
z_MO$OrY}W+(UjdSH_2q<6z#NS!86(W`Rnsd=GmXr^@)oy+BxC(PuIu&ix1D2OR<}O
zPNdjdSbh=6F>WDG)b~x_s&!NU^VfOum#p=@9{Tk3f+8sn=<U*H-(v2Y@9*5Xqy!ZD
zyix`W*iQaDdatPPUzyEcpmu|0Y=4f30~wD@U+`%G=_6j?6sUnM1^#3Ea({nj^7qTz
QfC?ErUHx3vIVCg!0OHVdCjbBd

literal 0
HcmV?d00001

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-dark-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-dark-storybook-win32.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f7e35bb00e9ea3870022d573191f4739231aaca6
GIT binary patch
literal 892
zcmeAS@N?(olHy`uVBq!ia0y~yV0i#!D{wFYNt3z>4M2*qILO_JVcj{ImkbQdW}YsN
zAr*7p-o5WXJ5+-GgLu|`$K6Q_*Q{%ln6@eJPLIIc-kF8pvf?BrtNxo?^|*JY;C7eC
zMy)x=c$T|NNuA3Qbm`;b>d0PmKJHq5u7%Og_VafaS7gk)oqw+SoUuWy7Aw%g54(8x
zy<-D16a)eo85mxOGHC%hwvG-!$pz{hD}bCYE#_8hw8Qe^&bI$Po$>bg`RCJjUlRpN
z)Gog)eC1BSja@wLMR#AaGcYvRT}^b*UDnQ*$FsCM79uiL;`GsZt$wlpzZ|Qcu6FF4
z$?NmQ#Z$F~R~|X|-+O*_wMx|es?A^gcE;?h%B*>P-QGMt^fJ)wId;sKmj?ZQ_cMEb
zjmb>AOZ>UE`~E&H_xE3C2$cQheMf!Y%AGe4UA&Yjz>>}#{wzrSvM|U=8fpusoeEyu
zx#QNeyxP4{vFqQPJ^nXKVsF5{ich@2fW9Dq>-d=^vo6LNbMU)f$$0zE{Ij=y{>-#=
zt*JL_DmE;Ubp5}iDPei{U7*^6tgZHwwuDF5epxbew#9VMck=7sg}tx+8ho1d^08lD
z%Hea)sKn=)l&`iwe?Mx?yS<CH0YlIt_tEh)IeK?1cL=`KUz~n*>S0ywtLeI|(){`Q
zl}E&Zf%N!w0Us!kOTud$&c^*KQ2YL0^s+(l467KU&=Xrko}{gdKUcQe9pp`i-?CRi
zKHlo(_exI8F7ZwK^fRqAb??XfR@T9l^;Wk(^<7FZD*ksU<lE23S7&8|B1^{kxAs2k
zPJ^3vscL7=*ZqlH8F%{*-=&)uCqA5EY0_yR^QA=}sO-4#=g#+wcWZC`;ko><^5fP+
z6**SCO=)lYckiED(+pJbrG1C>3hVCgt8csiUAXpDv+MKaAk)Kv4pQJ~T6<L^e2&lF
z6}CVB9{kSjKl$g!H!}|(Ul#axeQSPw#9e8x`M&)7e^ftw9e-vfFialYU|Z(Bl<!p6
z)Y<R%iEhhr$^O1?M*O>^WROME`JOM(%QxrCGugH@7%1Qu(9URjBg19w=@lC<&aDHA
zya<-9d&CW7+`ame6C83=8-TgU!5@-jIZ=}AAMS~7Hdc5?WXS?GFnGH9xvX<aXaWHC
CgNvU4

literal 0
HcmV?d00001

diff --git "a/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-light-storybook-win32.png" "b/tests/e2e/storybook/\343\202\271\343\202\257\343\203\252\343\203\274\343\203\263\343\202\267\343\203\247\343\203\203\343\203\210.spec.mts-snapshots/components-base-baseiconbutton--disabled-light-storybook-win32.png"
new file mode 100644
index 0000000000000000000000000000000000000000..31441b7c5c9263499bb0a4642361ba0d7d1d41d0
GIT binary patch
literal 852
zcmeAS@N?(olHy`uVBq!ia0y~yV0i#!D{wFYNt3z>4M2*qILO_JVcj{ImkbQde4Z|j
zAr*7p-o5BOJ6wYOf&XUD+zlE*hAnJI6<cx}FI?2+d3N{I9*sBhx?6Y_E;gT>xTb{T
zrJI$b(mF*&XQ3%3s!}(7IXypHF8Z<cpw0Qa)kPfd-}V>p`|dNR>>S9_A6L}uOPPTT
z0ge?wvWJUNl!2jPqQU~8q=67i2vE%JP`dNGY}q`!v*Ej*CcV2Dm1VVQ9Z+1t`tZC3
zX0Ny2+Z0wW?Q0Lxy;6}m>vitp%hB`AXRYn90-BMa6DtyMJAd0eoBOv`%WQ965UQQG
zf6cf5aetNL*KBQCP#g2J`t{GrYm0s-mvA#M9OyMIyk#jJ^EM>T?%o~y{YU;E39I|@
zbGFMHt7xDr6XvwcTX5}rnf_G2W`!4T-oLxLex*9l;$s0G4!Kj~ME#t$)!EID+B^UB
z-T1xc_M)FYdoB$46srYP5-#%X%$c<_Z=Up8{GP*f+m8p!w?3^9U~!z_RXZ_vnwfc-
zR&BIe`ujUwJ0gLq^VUrezVg!L+rz57%w_4CKNY^)&D|#+|L@)H6o1>zbE4~K_*O`Q
zLP~pALRY@cR8RF?SMNS~u=L)_pHG~&NBGpw?W*4a3f4CBC)S{V6<Ev7l=XQ-z?zcP
z^{3sL&(GP`e`;%9pzc1a9JecqKn2N)IbHdw-*3A8TTnhBzfwK^759R(m%eou`PT-W
z%D1__cE%%6_=vXpeylCO^y7o*6~EHw(~tjN`E==%nu0IS9z2+TQ2FZTV;^_F_{GA&
z@SttB#oIZ&I@h|T_qW-#{;E$ivR}9S`MR}+K)a54zc61>y!z%;Z$JO8wJG6CgMotU
zbl!C33mg%ed1vpZ*9w21hI@Bf&y6bl{oU#9mi*IK?w<L+^NZ7)9YMc7ufOhSHMyg9
z$uvd=h8>+w>woZN$^QFh68|<b;*4#Sx3BvR37~n8Q%}s^b9sCEZ$1z8^v9PpfkM|a
zZut8?F6Q3*^w6ER8NYzq6MT3pkBS4O7L}e%+zX@yc(EkFrUqb+IpFbw|FZFc_s@R$
RX9E>7c)I$ztaD0e0ss*Wdi($Y

literal 0
HcmV?d00001