From 747f525a7bc4be8f53dc6af085b6c0d92618d091 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Fri, 6 Sep 2024 01:04:19 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A8=E3=83=B3=E3=82=B8=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0?=
 =?UTF-8?q?=E3=81=AE=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=20(#2255?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* BaseListItemの高さを可変に変更

* BaseToggleGroup関連コンポーネントを追加

* 親のheightの100%が伝搬できるように変更

* BaseNavigationViewコンポーネントを追加

* BaseTextFieldコンポーネントを追加

* エンジンの管理ダイアログをリデザイン

* propsにdisabledを追加

* デザイン調整

* Baseコンポーネントのstoriesファイルを追加

* Storyを拡充

* チェック・非チェック時で幅が変わらないように変更

* clickイベントを追加

* 余白を調整

* 関数の指定ミスを修正

* クラスを整理

* SCSSの不要なuseを削除

* コメントを追加
---
 src/components/Base/BaseButton.vue            |   3 +
 src/components/Base/BaseListItem.vue          |   4 +-
 .../Base/BaseNavigationView.stories.ts        |  27 +
 src/components/Base/BaseNavigationView.vue    |  46 ++
 src/components/Base/BaseScrollArea.vue        |  13 +-
 src/components/Base/BaseTextField.stories.ts  |  48 ++
 src/components/Base/BaseTextField.vue         |  75 ++
 .../Base/BaseToggleGroup.stories.ts           |  47 ++
 src/components/Base/BaseToggleGroup.vue       |  44 ++
 src/components/Base/BaseToggleGroupItem.vue   |  99 +++
 src/components/Dialog/EngineManageDialog.vue  | 679 +++++++++---------
 11 files changed, 733 insertions(+), 352 deletions(-)
 create mode 100644 src/components/Base/BaseNavigationView.stories.ts
 create mode 100644 src/components/Base/BaseNavigationView.vue
 create mode 100644 src/components/Base/BaseTextField.stories.ts
 create mode 100644 src/components/Base/BaseTextField.vue
 create mode 100644 src/components/Base/BaseToggleGroup.stories.ts
 create mode 100644 src/components/Base/BaseToggleGroup.vue
 create mode 100644 src/components/Base/BaseToggleGroupItem.vue

diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index fd7a09e501..2506cb023d 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -2,6 +2,7 @@
   <button
     class="button"
     :class="variant ? variant : 'default'"
+    :disabled
     @click="(payload) => $emit('click', payload)"
   >
     <!-- 暫定でq-iconを使用 -->
@@ -14,6 +15,7 @@
 defineProps<{
   label: string;
   icon?: string;
+  disabled?: boolean;
   variant?: "default" | "primary" | "danger";
 }>();
 
@@ -31,6 +33,7 @@ defineEmits<{
   display: flex;
   justify-content: space-between;
   align-items: center;
+  text-wrap: nowrap;
   height: vars.$size-control;
   border-radius: vars.$radius-1;
   padding: 0 vars.$padding-2;
diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
index f9b2048d43..91fa0bb32d 100644
--- a/src/components/Base/BaseListItem.vue
+++ b/src/components/Base/BaseListItem.vue
@@ -29,12 +29,12 @@ defineEmits<{
   color: colors.$display;
   cursor: pointer;
   position: relative;
-  height: vars.$size-listitem;
+  min-height: vars.$size-listitem;
   display: flex;
   align-items: center;
   background-color: colors.$clear;
   border: none;
-  padding: 0 vars.$padding-2;
+  padding: vars.$padding-1 vars.$padding-2;
   border-radius: vars.$radius-1;
   transition: background-color vars.$transition-duration;
 
diff --git a/src/components/Base/BaseNavigationView.stories.ts b/src/components/Base/BaseNavigationView.stories.ts
new file mode 100644
index 0000000000..a427e44afe
--- /dev/null
+++ b/src/components/Base/BaseNavigationView.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseNavigationView from "./BaseNavigationView.vue";
+import BaseListItem from "./BaseListItem.vue";
+
+const meta: Meta<typeof BaseNavigationView> = {
+  component: BaseNavigationView,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseNavigationView>;
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { BaseNavigationView, BaseListItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseNavigationView style="width: 100%; height:480px" v-bind="args">
+        <template #sidebar>
+          <BaseListItem>ListItem</BaseListItem>
+        </template>
+        <div>Content</div>
+      </BaseNavigationView>`,
+  }),
+};
diff --git a/src/components/Base/BaseNavigationView.vue b/src/components/Base/BaseNavigationView.vue
new file mode 100644
index 0000000000..c92dc53b4b
--- /dev/null
+++ b/src/components/Base/BaseNavigationView.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="grid">
+    <div class="sidebar">
+      <BaseScrollArea>
+        <div class="sidebar-inner">
+          <slot name="sidebar" />
+        </div>
+      </BaseScrollArea>
+    </div>
+
+    <main class="content">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseScrollArea from "./BaseScrollArea.vue";
+</script>
+
+<style lang="scss" scoped>
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+
+// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
+.grid {
+  height: calc(100vh - 90px);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: 100%;
+  backdrop-filter: blur(32px);
+  background-color: colors.$background-drawer;
+}
+
+.sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  width: max-content;
+}
+
+.content {
+  background-color: colors.$background;
+  border-left: 1px solid colors.$border;
+}
+</style>
diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
index 13745fb07d..23cbc9e1ac 100644
--- a/src/components/Base/BaseScrollArea.vue
+++ b/src/components/Base/BaseScrollArea.vue
@@ -1,7 +1,9 @@
 <template>
   <ScrollAreaRoot class="ScrollAreaRoot" type="auto">
-    <ScrollAreaViewport class="ScrollAreaViewport">
-      <slot />
+    <ScrollAreaViewport asChild>
+      <div class="ScrollAreaViewport">
+        <slot />
+      </div>
     </ScrollAreaViewport>
     <ScrollAreaScrollbar class="ScrollAreaScrollbar" orientation="horizontal">
       <ScrollAreaThumb class="ScrollAreaThumb">
@@ -37,11 +39,16 @@ import {
   flex-direction: column;
 }
 
-.ScrollAreaViewport {
+// 親要素のサイズいっぱいに広げさせるためプライベートなデータ属性を使用
+:deep([data-radix-scroll-area-viewport]) {
   width: 100%;
   height: 100%;
 }
 
+:deep(.ScrollAreaViewport) {
+  height: 100%;
+}
+
 .ScrollAreaScrollbar {
   user-select: none;
   touch-action: none;
diff --git a/src/components/Base/BaseTextField.stories.ts b/src/components/Base/BaseTextField.stories.ts
new file mode 100644
index 0000000000..e1af66bbc5
--- /dev/null
+++ b/src/components/Base/BaseTextField.stories.ts
@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseTextField from "./BaseTextField.vue";
+
+const meta: Meta<typeof BaseTextField> = {
+  component: BaseTextField,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseTextField>;
+
+export const Default: Story = {};
+
+export const Placeholder: Story = {
+  args: {
+    placeholder: "Placeholder",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readonly: true,
+  },
+};
+
+export const HasError: Story = {
+  args: {
+    hasError: true,
+  },
+  render: (args) => ({
+    components: { BaseTextField },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseTextField v-bind="args">
+        <template #error>
+          ERROR TEXT
+        </template>
+      </BaseTextField>`,
+  }),
+};
diff --git a/src/components/Base/BaseTextField.vue b/src/components/Base/BaseTextField.vue
new file mode 100644
index 0000000000..4d1842d524
--- /dev/null
+++ b/src/components/Base/BaseTextField.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="wrapper">
+    <input
+      v-model="model"
+      type="text"
+      class="input"
+      :class="{ error: hasError }"
+      :placeholder
+      :readonly
+      :disabled
+      @click="(payload) => $emit('click', payload)"
+    />
+    <div v-if="hasError" class="error-label">
+      <slot name="error" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  placeholder?: string;
+  hasError?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  click: [payload: MouseEvent];
+}>();
+
+const model = defineModel<string>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.wrapper {
+  width: 100%;
+}
+
+.input {
+  height: vars.$size-control;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: vars.$gap-1;
+  border: 1px solid colors.$border;
+  border-radius: vars.$radius-1;
+  padding-inline: vars.$padding-1;
+  background-color: colors.$control;
+  color: colors.$display;
+
+  &:focus {
+    @include mixin.on-focus;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+
+  &::placeholder {
+    color: colors.$display-sub;
+  }
+}
+
+.error {
+  border: 2px solid colors.$display-warning;
+}
+
+.error-label {
+  color: colors.$display-warning;
+}
+</style>
diff --git a/src/components/Base/BaseToggleGroup.stories.ts b/src/components/Base/BaseToggleGroup.stories.ts
new file mode 100644
index 0000000000..4e779b707c
--- /dev/null
+++ b/src/components/Base/BaseToggleGroup.stories.ts
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+
+import BaseToggleGroup from "./BaseToggleGroup.vue";
+import BaseToggleGroupItem from "./BaseToggleGroupItem.vue";
+
+const meta: Meta<typeof BaseToggleGroup> = {
+  component: BaseToggleGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof BaseToggleGroup>;
+
+export const Single: Story = {
+  args: {
+    type: "single",
+  },
+  render: (args) => ({
+    components: { BaseToggleGroup, BaseToggleGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseToggleGroup v-bind="args">
+        <BaseToggleGroupItem label="A" value="a" />
+        <BaseToggleGroupItem label="B" value="B" />
+        <BaseToggleGroupItem label="C" value="C" />
+      </BaseToggleGroup>`,
+  }),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: "multiple",
+  },
+  render: (args) => ({
+    components: { BaseToggleGroup, BaseToggleGroupItem },
+    setup() {
+      return { args };
+    },
+    template: `
+      <BaseToggleGroup v-bind="args">
+        <BaseToggleGroupItem label="A" value="a" />
+        <BaseToggleGroupItem label="B" value="B" />
+        <BaseToggleGroupItem label="C" value="C" />
+      </BaseToggleGroup>`,
+  }),
+};
diff --git a/src/components/Base/BaseToggleGroup.vue b/src/components/Base/BaseToggleGroup.vue
new file mode 100644
index 0000000000..0cfa4f5a80
--- /dev/null
+++ b/src/components/Base/BaseToggleGroup.vue
@@ -0,0 +1,44 @@
+<template>
+  <ToggleGroupRoot
+    class="ToggleGroup"
+    :type
+    :modelValue
+    :disabled
+    @update:modelValue="
+      (value) => {
+        if (value != undefined) {
+          $emit('update:modelValue', value);
+        }
+      }
+    "
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>
+
+<script setup lang="ts">
+import { ToggleGroupRoot } from "radix-vue";
+
+defineProps<{
+  type: "single" | "multiple";
+  modelValue: string | string[];
+  disabled?: boolean;
+}>();
+
+defineEmits<{
+  "update:modelValue": [payload: string | string[]];
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.ToggleGroup {
+  display: inline-flex;
+  background-color: var(--mauve-6);
+  border-radius: 4px;
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+</style>
diff --git a/src/components/Base/BaseToggleGroupItem.vue b/src/components/Base/BaseToggleGroupItem.vue
new file mode 100644
index 0000000000..af5f37d16c
--- /dev/null
+++ b/src/components/Base/BaseToggleGroupItem.vue
@@ -0,0 +1,99 @@
+<template>
+  <ToggleGroupItem :value class="ToggleGroupItem">
+    <QIcon class="check" name="check" />
+    {{ label }}
+  </ToggleGroupItem>
+</template>
+
+<script setup lang="ts">
+import { ToggleGroupItem } from "radix-vue";
+
+defineProps<{
+  label: string;
+  value: string;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/colors" as colors;
+@use "@/styles/v2/mixin" as mixin;
+
+.ToggleGroupItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: vars.$size-control;
+  border: 1px solid;
+  transition:
+    background-color vars.$transition-duration,
+    padding vars.$transition-duration;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:active:not(:disabled) {
+    box-shadow: 0 0 0 transparent;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+
+  &:first-child {
+    border-top-left-radius: vars.$radius-1;
+    border-bottom-left-radius: vars.$radius-1;
+  }
+  &:last-child {
+    border-top-right-radius: vars.$radius-1;
+    border-bottom-right-radius: vars.$radius-1;
+  }
+
+  &[data-state="off"] {
+    padding: 0
+      calc(#{vars.$padding-1} + (#{vars.$size-icon} + #{vars.$gap-1}) / 2);
+    color: colors.$display;
+    border-color: colors.$border;
+    background-color: colors.$control;
+
+    &:hover:not(:disabled) {
+      background-color: colors.$control-hovered;
+    }
+
+    &:active:not(:disabled) {
+      background-color: colors.$control-pressed;
+    }
+  }
+
+  &[data-state="on"] {
+    padding: 0 vars.$padding-1;
+    color: colors.$display-oncolor;
+    border-color: colors.$border;
+    background-color: colors.$primary;
+
+    &:hover:not(:disabled) {
+      background-color: colors.$primary-hovered;
+    }
+
+    &:active:not(:disabled) {
+      background-color: colors.$primary-pressed;
+    }
+  }
+}
+
+.check {
+  width: vars.$size-icon;
+  height: vars.$size-icon;
+  opacity: 1;
+  margin-right: vars.$gap-1;
+  transition:
+    width vars.$transition-duration,
+    margin-right vars.$transition-duration,
+    opacity vars.$transition-duration;
+}
+
+[data-state="off"] > .check {
+  width: 0;
+  opacity: 0;
+  margin-right: 0;
+}
+</style>
diff --git a/src/components/Dialog/EngineManageDialog.vue b/src/components/Dialog/EngineManageDialog.vue
index 85ed2ebff8..f0f10561bc 100644
--- a/src/components/Dialog/EngineManageDialog.vue
+++ b/src/components/Dialog/EngineManageDialog.vue
@@ -6,7 +6,7 @@
     transitionHide="jump-down"
     class="setting-dialog transparent-backdrop"
   >
-    <QLayout container view="hHh Lpr fFf" class="bg-background">
+    <QLayout>
       <QPageContainer>
         <QHeader class="q-pa-sm">
           <QToolbar>
@@ -23,320 +23,243 @@
             />
           </QToolbar>
         </QHeader>
-        <QPage class="row">
-          <div v-if="uiLockedState" class="ui-lock-popup">
-            <div class="q-pa-md">
-              <QSpinner color="primary" size="2.5rem" />
-              <div class="q-mt-xs">
-                <template v-if="uiLockedState === 'addingEngine'"
-                  >追加中・・・</template
-                >
-                <template v-if="uiLockedState === 'deletingEngine'"
-                  >削除中・・・</template
-                >
-              </div>
+        <div v-if="uiLockedState" class="ui-lock-popup">
+          <div class="q-pa-md">
+            <QSpinner color="primary" size="2.5rem" />
+            <div class="q-mt-xs">
+              <template v-if="uiLockedState === 'addingEngine'"
+                >追加中・・・</template
+              >
+              <template v-if="uiLockedState === 'deletingEngine'"
+                >削除中・・・</template
+              >
             </div>
           </div>
-          <div class="col-4 engine-list-col">
-            <div v-if="isAddingEngine" class="engine-list-disable-overlay" />
-            <div class="engine-list-header text-no-wrap">
-              <div class="row engine-list-title text-h5">エンジン一覧</div>
-              <div class="row no-wrap">
-                <QBtn
-                  outline
-                  textColor="display"
-                  class="text-no-wrap text-bold col-sm q-ma-sm"
-                  :disable="uiLocked"
-                  @click="toAddEngineState"
-                  >追加</QBtn
-                >
-              </div>
+        </div>
+        <BaseNavigationView>
+          <template #sidebar>
+            <div v-if="isAddingEngine" class="list-disable-overlay" />
+            <div class="list-header">
+              <div class="list-title">エンジン一覧</div>
+              <BaseButton
+                label="追加"
+                icon="add"
+                :disable="uiLocked"
+                @click="toAddEngineState"
+              />
             </div>
-            <QList class="engine-list">
-              <template
-                v-for="([type, engineIds], i) in Object.entries(
-                  categorizedEngineIds,
-                )"
-                :key="`engine-list-${i}`"
+            <template
+              v-for="([type, engineIds], i) in Object.entries(
+                categorizedEngineIds,
+              )"
+              :key="`engine-list-${i}`"
+            >
+              <div class="list-label">
+                {{ getEngineTypeName(type) }}
+              </div>
+              <BaseListItem
+                v-for="id in engineIds"
+                :key="id"
+                :selected="selectedId === id"
+                @click="selectEngine(id)"
               >
-                <QSeparator v-if="i > 0" spaced />
-                <QItemLabel header> {{ getEngineTypeName(type) }}</QItemLabel>
-                <QItem
-                  v-for="id in engineIds"
-                  :key="id"
-                  v-ripple
-                  tag="label"
-                  clickable
-                  :active="selectedId === id"
-                  activeClass="active-engine"
-                  @click="selectEngine(id)"
-                >
-                  <QItemSection avatar>
-                    <QAvatar rounded color="primary">
-                      <img
-                        v-if="engineIcons[id]"
-                        :src="engineIcons[id]"
-                        :alt="engineInfos[id].name"
-                      />
-                      <span v-else class="text-display-on-primary"> ? </span>
-                    </QAvatar>
-                  </QItemSection>
-                  <QItemSection>
-                    <QItemLabel class="text-display">{{
-                      engineInfos[id].name
-                    }}</QItemLabel>
-                    <QItemLabel caption class="engine-path">{{
+                <img
+                  v-if="engineIcons[id]"
+                  class="listitem-icon"
+                  :src="engineIcons[id]"
+                  :alt="engineInfos[id].name"
+                />
+                <div v-else class="listitem-unknown">?</div>
+                <div class="listitem-content">
+                  {{ engineInfos[id].name }}
+                  <span caption class="listitem-path">
+                    {{
                       engineManifests[id] != undefined
                         ? engineManifests[id].brandName
                         : engineInfos[id].uuid
-                    }}</QItemLabel>
-                  </QItemSection>
-                </QItem>
-              </template>
-            </QList>
-          </div>
-
-          <!-- 右側のpane -->
-          <div
-            v-if="isAddingEngine"
-            class="col-8 no-wrap text-no-wrap engine-detail"
-          >
-            <div class="q-pl-md q-mt-md">
-              <div class="text-h5 q-ma-sm">エンジンの追加</div>
-
-              <div class="q-ma-sm">
-                <QBtnToggle
-                  v-model="engineLoaderType"
-                  :options="[
-                    { value: 'vvpp', label: 'VVPPファイル' },
-                    { value: 'dir', label: '既存エンジン' },
-                  ]"
-                  color="surface"
-                  unelevated
-                  textColor="display"
-                  toggleColor="primary"
-                  toggleTextColor="display-on-primary"
-                />
-              </div>
-            </div>
-
-            <div v-if="engineLoaderType === 'vvpp'" class="no-wrap q-pl-md">
-              <div class="q-ma-sm">
-                VVPPファイルでエンジンをインストールします。
-              </div>
-              <div class="q-ma-sm">
-                <QInput
-                  ref="vvppFilePathInput"
-                  v-model="vvppFilePath"
-                  dense
-                  readonly
-                  placeholder="VVPPファイルの場所"
-                  @click="selectVvppFile"
-                >
-                  <template #append>
-                    <QBtn
-                      square
-                      dense
-                      flat
-                      color="primary"
-                      icon="folder_open"
+                    }}
+                  </span>
+                </div>
+              </BaseListItem>
+            </template>
+          </template>
+          <div v-if="isAddingEngine" class="detail">
+            <BaseScrollArea>
+              <div class="inner">
+                <div class="title">エンジンの追加</div>
+                <BaseToggleGroup v-model="engineLoaderType" type="single">
+                  <BaseToggleGroupItem label="VVPPファイル" value="vvpp" />
+                  <BaseToggleGroupItem label="既存エンジン" value="dir" />
+                </BaseToggleGroup>
+                <section v-if="engineLoaderType === 'vvpp'" class="section">
+                  <div>VVPPファイルでエンジンをインストールします。</div>
+                  <div class="flex-row">
+                    <BaseTextField
+                      v-model="vvppFilePath"
+                      placeholder="VVPPファイルの場所"
+                      readonly
+                      :hasError="
+                        newEngineDirValidationState != undefined &&
+                        newEngineDirValidationState !== 'ok'
+                      "
                       @click="selectVvppFile"
                     >
-                      <QTooltip :delay="500" anchor="bottom left">
-                        ファイル選択
-                      </QTooltip>
-                    </QBtn>
-                  </template>
-                  <template #error>
-                    {{
-                      newEngineDirValidationState
-                        ? getEngineDirValidationMessage(
-                            newEngineDirValidationState,
-                          )
-                        : undefined
-                    }}
-                  </template>
-                </QInput>
-              </div>
-            </div>
-            <div v-if="engineLoaderType === 'dir'" class="no-wrap q-pl-md">
-              <div class="q-ma-sm">PC内にあるエンジンを追加します。</div>
-              <div class="q-ma-sm">
-                <QInput
-                  ref="newEngineDirInput"
-                  v-model="newEngineDir"
-                  dense
-                  readonly
-                  :error="
-                    newEngineDirValidationState != undefined &&
-                    newEngineDirValidationState !== 'ok'
-                  "
-                  placeholder="エンジンフォルダの場所"
-                  @click="selectEngineDir"
-                >
-                  <template #append>
-                    <QBtn
-                      square
-                      dense
-                      flat
-                      color="primary"
+                      <template #error>
+                        {{
+                          newEngineDirValidationState
+                            ? getEngineDirValidationMessage(
+                                newEngineDirValidationState,
+                              )
+                            : undefined
+                        }}
+                      </template>
+                    </BaseTextField>
+                    <BaseButton
+                      label="ファイル選択"
                       icon="folder_open"
+                      @click="selectVvppFile"
+                    />
+                  </div>
+                </section>
+                <section v-if="engineLoaderType === 'dir'" class="section">
+                  <div>PC内にあるエンジンを追加します。</div>
+                  <div class="flex-row">
+                    <BaseTextField
+                      v-model="newEngineDir"
+                      placeholder="エンジンフォルダの場所"
+                      readonly
+                      :hasError="
+                        newEngineDirValidationState != undefined &&
+                        newEngineDirValidationState !== 'ok'
+                      "
                       @click="selectEngineDir"
                     >
-                      <QTooltip :delay="500" anchor="bottom left">
-                        フォルダ選択
-                      </QTooltip>
-                    </QBtn>
-                  </template>
-                  <template #error>
-                    {{
-                      newEngineDirValidationState
-                        ? getEngineDirValidationMessage(
-                            newEngineDirValidationState,
-                          )
-                        : undefined
-                    }}
-                  </template>
-                </QInput>
+                      <template #error>
+                        {{
+                          newEngineDirValidationState
+                            ? getEngineDirValidationMessage(
+                                newEngineDirValidationState,
+                              )
+                            : undefined
+                        }}
+                      </template>
+                    </BaseTextField>
+                    <BaseButton
+                      label="フォルダ選択"
+                      icon="folder_open"
+                      @click="selectEngineDir"
+                    />
+                  </div>
+                </section>
+                <div class="footer">
+                  <BaseButton label="キャンセル" @click="toInitialState" />
+                  <BaseButton
+                    label="追加"
+                    icon="add"
+                    variant="primary"
+                    :disabled="!canAddEngine"
+                    @click="addEngine"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="row q-px-md right-pane-buttons">
-              <QSpace />
-
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                @click="toInitialState"
-                >キャンセル</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disabled="!canAddEngine"
-                @click="addEngine"
-                >追加</QBtn
-              >
-            </div>
+            </BaseScrollArea>
           </div>
-          <div
-            v-else-if="selectedId"
-            class="col-8 no-wrap text-no-wrap engine-detail"
-          >
-            <div class="q-pl-md q-mt-md flex">
-              <img
-                v-if="selectedId in engineIcons"
-                :src="engineIcons[selectedId]"
-                :alt="engineInfos[selectedId].name"
-                class="engine-icon"
-              />
-              <div v-else class="q-mt-sm inline-block">
-                <QAvatar rounded color="primary" size="2rem">
-                  <span class="text-display-on-primary"> ? </span>
-                </QAvatar>
-              </div>
-              <div class="text-h5 q-ma-sm">
-                {{ engineInfos[selectedId].name }}
-              </div>
-            </div>
-
-            <div class="no-wrap q-pl-md">
-              <ul>
-                <li>
-                  バージョン：{{
-                    engineVersions[selectedId]
-                      ? engineVersions[selectedId]
-                      : "（取得に失敗しました）"
-                  }}
-                </li>
-                <li>
-                  URL：
-                  <a
-                    v-if="engineManifests[selectedId]"
-                    :href="engineManifests[selectedId].url"
-                    class="text-display-hyperlink"
-                    target="_blank"
-                    >{{ engineManifests[selectedId].url }}</a
+          <div v-else-if="selectedId" class="detail">
+            <BaseScrollArea>
+              <div class="inner">
+                <div class="engine-title title">
+                  <img
+                    v-if="selectedId in engineIcons"
+                    :src="engineIcons[selectedId]"
+                    :alt="engineInfos[selectedId].name"
+                    class="engine-icon"
+                  />
+                  <div v-else class="engine-unknown">?</div>
+                  {{ engineInfos[selectedId].name }}
+                </div>
+
+                <section class="section">
+                  <ul>
+                    <li>
+                      バージョン：{{
+                        engineVersions[selectedId]
+                          ? engineVersions[selectedId]
+                          : "（取得に失敗しました）"
+                      }}
+                    </li>
+                    <li>
+                      URL：
+                      <a
+                        v-if="engineManifests[selectedId]"
+                        :href="engineManifests[selectedId].url"
+                        class="text-display-hyperlink"
+                        target="_blank"
+                        >{{ engineManifests[selectedId].url }}</a
+                      >
+                      <span v-else>（取得に失敗しました）</span>
+                    </li>
+                  </ul>
+                </section>
+                <section class="section">
+                  <div class="headline">機能</div>
+                  <ul
+                    v-if="
+                      engineManifests[selectedId] &&
+                      engineManifests[selectedId].supportedFeatures
+                    "
                   >
+                    <li
+                      v-for="(value, feature) in engineManifests[selectedId]
+                        .supportedFeatures != null
+                        ? engineManifests[selectedId].supportedFeatures
+                        : null"
+                      :key="feature"
+                      :class="value ? '' : 'text-warning'"
+                    >
+                      {{ getFeatureName(feature) }}：{{
+                        value ? "対応" : "非対応"
+                      }}
+                    </li>
+                  </ul>
                   <span v-else>（取得に失敗しました）</span>
-                </li>
-              </ul>
-            </div>
-            <div class="no-wrap q-pl-md">
-              <div class="text-h6 q-ma-sm">機能</div>
-              <ul
-                v-if="
-                  engineManifests[selectedId] &&
-                  engineManifests[selectedId].supportedFeatures
-                "
-              >
-                <template
-                  v-for="(value, feature) in engineManifests[selectedId]
-                    .supportedFeatures != null
-                    ? engineManifests[selectedId].supportedFeatures
-                    : null"
-                  :key="feature"
-                >
-                  <!-- TODO: vvlib機能がリリースされたらmanageLibraryも表示するようにする -->
-                  <li
-                    v-if="feature != 'manageLibrary'"
-                    :class="value ? '' : 'text-warning'"
-                  >
-                    {{ getFeatureName(feature) }}：{{
-                      value ? "対応" : "非対応"
-                    }}
-                  </li>
-                </template>
-              </ul>
-              <span v-else>（取得に失敗しました）</span>
-            </div>
-            <div class="no-wrap q-pl-md">
-              <div class="text-h6 q-ma-sm">場所</div>
-              <div
-                :class="
-                  'q-ma-sm' + (engineInfos[selectedId].path ? '' : ' disabled')
-                "
-              >
-                <QInput
-                  ref="pathInput"
-                  v-model="engineDir"
-                  disabled
-                  dense
-                  readonly
-                />
+                </section>
+                <section class="section">
+                  <div class="headline">場所</div>
+                  <div class="flex-row">
+                    <BaseTextField
+                      v-model="engineDir"
+                      :disabled="uiLocked || !engineInfos[selectedId].path"
+                      readonly
+                    />
+                    <BaseButton
+                      icon="folder_open"
+                      label="フォルダを開く"
+                      :disabled="uiLocked || !engineInfos[selectedId].path"
+                      @click="openSelectedEngineDirectory"
+                    />
+                  </div>
+                </section>
+                <div class="footer">
+                  <BaseButton
+                    label="削除"
+                    icon="delete_outline"
+                    :disabled="uiLocked || engineInfos[selectedId].isDefault"
+                    variant="danger"
+                    @click="deleteEngine"
+                  />
+                  <BaseButton
+                    label="再起動"
+                    icon="refresh"
+                    :disabled="
+                      uiLocked || engineStates[selectedId] === 'STARTING'
+                    "
+                    @click="restartSelectedEngine"
+                  />
+                </div>
               </div>
-            </div>
-            <div class="row q-px-md right-pane-buttons">
-              <QSpace />
-
-              <QBtn
-                outline
-                textColor="warning"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || engineInfos[selectedId].isDefault"
-                @click="deleteEngine"
-                >削除</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || !engineInfos[selectedId].path"
-                @click="openSelectedEngineDirectory"
-                >フォルダを開く</QBtn
-              >
-              <QBtn
-                outline
-                textColor="display"
-                class="text-no-wrap text-bold q-mr-sm"
-                :disable="uiLocked || engineStates[selectedId] === 'STARTING'"
-                @click="restartSelectedEngine"
-                >再起動</QBtn
-              >
-            </div>
+            </BaseScrollArea>
           </div>
-        </QPage>
+        </BaseNavigationView>
       </QPageContainer>
     </QLayout>
   </QDialog>
@@ -344,6 +267,13 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import BaseToggleGroup from "../Base/BaseToggleGroup.vue";
+import BaseToggleGroupItem from "../Base/BaseToggleGroupItem.vue";
+import BaseButton from "@/components/Base/BaseButton.vue";
+import BaseListItem from "@/components/Base/BaseListItem.vue";
+import BaseNavigationView from "@/components/Base/BaseNavigationView.vue";
+import BaseTextField from "@/components/Base/BaseTextField.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
 import { useStore } from "@/store";
 import { EngineDirValidationResult, EngineId } from "@/type/preload";
 import type { SupportedFeatures } from "@/openapi/models/SupportedFeatures";
@@ -660,75 +590,65 @@ const toDialogClosedState = () => {
 
 <style lang="scss" scoped>
 @use "@/styles/colors" as colors;
-@use "@/styles/variables" as vars;
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as newcolors;
 
-.engine-list-col {
-  border-right: solid 1px colors.$surface;
-  position: relative; // オーバーレイのため
-  overflow-x: hidden;
+.list {
+  display: flex;
+  flex-direction: column;
 }
 
-.engine-list-header {
-  margin: 1rem;
-
-  gap: 0.5rem;
+.list-header {
+  display: flex;
+  gap: vars.$gap-1;
   align-items: center;
   justify-content: space-between;
-  .engine-list-title {
-    flex-grow: 1;
-  }
-}
-
-.engine-list {
-  // menubar-height + toolbar-height + window-border-width +
-  // 82(title & buttons) + 30(margin 15x2)
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width + 82px + 30px}
-  );
-  width: 100%;
-  overflow-y: auto;
 }
 
-.engine-path {
-  overflow-wrap: break-word;
+.list-title {
+  @include mixin.headline-2;
 }
 
-.active-engine {
-  background: rgba(colors.$primary-rgb, 0.4);
+.listitem-icon {
+  margin-right: vars.$gap-1;
+  border-radius: vars.$radius-1;
+  width: 32px;
 }
 
-.engine-list-disable-overlay {
-  background-color: rgba($color: #000000, $alpha: 0.4);
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 10;
+.listitem-unknown {
+  margin-right: vars.$gap-1;
+  border-radius: vars.$radius-1;
+  background-color: colors.$primary;
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+  width: 32px;
+  height: 32px;
 }
 
-.engine-detail {
+.listitem-content {
   display: flex;
-  flex-flow: column;
-  height: calc(
-    100vh - #{vars.$menubar-height + vars.$toolbar-height +
-      vars.$window-border-width}
-  ) !important;
-  overflow: auto;
+  flex-direction: column;
+  align-items: start;
 }
 
-.right-pane-buttons {
-  padding: 20px;
+.listitem-path {
+  font-size: 0.75rem;
+  overflow-wrap: break-word;
+}
 
-  display: flex;
-  flex: 1;
-  align-items: flex-end;
+.list-label {
+  padding: 8px 16px;
+  padding-top: 16px;
+  color: newcolors.$display-sub;
 }
 
-.engine-icon {
-  height: 2rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-  border-radius: 5px;
+.list-disable-overlay {
+  background-color: rgba($color: #000000, $alpha: 0.4);
+  position: absolute;
+  inset: 0;
+  z-index: 1;
 }
 
 .ui-lock-popup {
@@ -747,4 +667,69 @@ const toDialogClosedState = () => {
     border-radius: 6px;
   }
 }
+
+.detail {
+  height: 100%;
+}
+
+.inner {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+  gap: vars.$gap-2;
+}
+
+.engine-title {
+  display: flex;
+  align-items: center;
+  gap: vars.$gap-1;
+}
+
+.engine-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: vars.$radius-1;
+}
+
+.engine-unknown {
+  width: 40px;
+  height: 40px;
+  border-radius: vars.$radius-1;
+  background-color: colors.$primary;
+  display: grid;
+  place-content: center;
+  font-weight: 700;
+}
+
+.title {
+  @include mixin.headline-1;
+}
+
+.headline {
+  @include mixin.headline-2;
+}
+
+.flex-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: vars.$gap-1;
+}
+
+.footer {
+  gap: vars.$gap-1;
+  margin-top: auto;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-1;
+}
+
+:deep(ul) {
+  margin: 0;
+}
 </style>