From e1da368891856237728fe2b43c237ed3d227ed4e Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 24 Mar 2024 18:44:53 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=E8=89=B2=E5=A4=89=E6=95=B0=E5=90=8D?=
 =?UTF-8?q?=E3=82=92=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/new-colors.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
index e915376608..248006a497 100644
--- a/src/styles/new-colors.scss
+++ b/src/styles/new-colors.scss
@@ -14,7 +14,7 @@ $primitive-red: #d04756;
 
   --newcolor-display: #{$primitive-black, 10%};
   --newcolor-display-oncolor: #{$primitive-black, 10%};
-  --newcolor-display-placeholder: #{rgba($primitive-black, 0.5)};
+  --newcolor-display-sub: #{rgba($primitive-black, 0.5)};
   --newcolor-display-link: #{$primitive-blue};
   --newcolor-display-warning: #{$primitive-red};
 
@@ -48,7 +48,7 @@ $primitive-red: #d04756;
 
   --newcolor-display: #{$primitive-white};
   --newcolor-display-oncolor: #{$primitive-black};
-  --newcolor-display-placeholder: #{rgba($primitive-white, 0.5)};
+  --newcolor-display-sub: #{rgba($primitive-white, 0.5)};
   --newcolor-display-link: #{lighten($primitive-blue, 25%)};
   --newcolor-display-warning: #{lighten($primitive-red, 25%)};
 
@@ -80,7 +80,7 @@ $selected: var(--newcolor-selected);
 
 $display: var(--newcolor-display);
 $display-oncolor: var(--newcolor-display-oncolor);
-$display-placeholder: var(--newcolor-display-placeholder);
+$display-sub: var(--newcolor-display-sub);
 $display-link: var(--newcolor-display-link);
 $display-warning: var(--newcolor-display-warning);
 

From eecdc863df85a6f690c1684853b428e3bcba46ea Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 24 Mar 2024 18:46:44 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E3=81=AE?=
 =?UTF-8?q?=E5=89=8A=E9=99=A4=E3=83=BB=E5=B7=A6=E6=9E=A0=E7=B7=9A=E3=81=AE?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/template/HelpLibraryPolicySection.vue | 2 +-
 src/components/template/HelpMarkdownViewSection.vue  | 1 +
 src/components/template/HelpOssLicenseSection.vue    | 2 +-
 src/components/template/HelpUpdateInfoSection.vue    | 1 +
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index 42ef4e2d83..bba03517d2 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -134,11 +134,11 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
 }
 
 .container-detail {
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 61531e1424..2665108b98 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -40,6 +40,7 @@ onMounted(async () => {
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index 05fd702a0c..6791790319 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -64,11 +64,11 @@ const selectLicenseIndex = (index: number | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
 }
 
 .container-detail {
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index a40c565c40..84d2ee67f6 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -66,6 +66,7 @@ const props =
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {

From 3c9bb019951a5970c2211c043d760690e934e998 Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Sun, 24 Mar 2024 18:58:32 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=E3=83=8A=E3=83=93=E3=82=B2=E3=83=BC?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=82=92=E6=96=B0?=
 =?UTF-8?q?=E3=81=97=E3=81=84=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=B8?=
 =?UTF-8?q?=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseListItem.vue |  73 ++++++++++++
 src/components/base/BaseListView.vue |  17 +++
 src/components/help/HelpDialog.vue   | 160 ++++++++++++++-------------
 3 files changed, 176 insertions(+), 74 deletions(-)
 create mode 100644 src/components/base/BaseListItem.vue
 create mode 100644 src/components/base/BaseListView.vue

diff --git a/src/components/base/BaseListItem.vue b/src/components/base/BaseListItem.vue
new file mode 100644
index 0000000000..356080cc5c
--- /dev/null
+++ b/src/components/base/BaseListItem.vue
@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="listitem"
+    :class="selected && 'selected'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <div class="indicator"></div>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  selected: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
+
+.listitem {
+  color: colors.$display;
+  cursor: pointer;
+  position: relative;
+  height: vars.$size-listitem;
+  display: flex;
+  align-items: center;
+  background-color: colors.$clear;
+  border: none;
+  padding: 0 vars.$padding-2;
+  border-radius: vars.$radius-1;
+  transition: background-color vars.$transition-duration;
+
+  &:not(.selected):hover {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:not(.selected):active {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.indicator {
+  position: absolute;
+  left: 6px;
+  height: 0;
+  width: 4px;
+  border-radius: 2px;
+  background-color: colors.$primary;
+  opacity: 0;
+  transition-duration: vars.$transition-duration;
+  transition-property: height opacity;
+}
+
+.selected {
+  background-color: colors.$selected;
+
+  .indicator {
+    opacity: 1;
+    height: 16px;
+  }
+}
+</style>
diff --git a/src/components/base/BaseListView.vue b/src/components/base/BaseListView.vue
new file mode 100644
index 0000000000..7c4b7d2584
--- /dev/null
+++ b/src/components/base/BaseListView.vue
@@ -0,0 +1,17 @@
+<template>
+  <div class="list">
+    <slot />
+  </div>
+</template>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
+
+.list {
+  padding: vars.$padding-2;
+  display: flex;
+  flex-direction: column;
+}
+</style>
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 03076bcd0c..9af99c0a90 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -7,85 +7,76 @@
     class="help-dialog transparent-backdrop"
   >
     <q-layout container view="hHh Lpr lff">
-      <q-drawer
-        bordered
-        show-if-above
-        class="bg-background"
-        :model-value="true"
-        :width="250"
-        :breakpoint="0"
-      >
-        <div class="column full-height">
-          <q-list>
+      <div class="grid">
+        <div class="list-wrapper">
+          <BaseListView>
             <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
-              <q-item
+              <BaseListItem
                 v-if="page.type === 'item'"
-                v-ripple
-                clickable
-                active-class="selected-item"
-                :active="selectedPageIndex === pageIndex"
+                :selected="selectedPageIndex === pageIndex"
                 @click="selectedPageIndex = pageIndex"
               >
-                <q-item-section> {{ page.name }} </q-item-section>
-              </q-item>
-              <template v-else-if="page.type === 'separator'">
-                <q-separator />
-                <q-item-label header>{{ page.name }}</q-item-label>
-              </template>
+                {{ page.name }}
+              </BaseListItem>
+              <div v-else-if="page.type === 'separator'" class="list-label">
+                {{ page.name }}
+              </div>
             </template>
-          </q-list>
+          </BaseListView>
         </div>
-      </q-drawer>
 
-      <q-page-container>
-        <q-page>
-          <q-tab-panels v-model="selectedPageIndex">
-            <q-tab-panel
-              v-for="(page, pageIndex) of pagedata"
-              :key="pageIndex"
-              :name="pageIndex"
-              class="q-pa-none"
-            >
-              <div v-if="page.type === 'item'" class="root">
-                <q-header class="q-pa-sm">
-                  <q-toolbar>
-                    <q-toolbar-title class="text-display">
-                      ヘルプ / {{ page.parent ? page.parent + " / " : ""
-                      }}{{ page.name }}
-                    </q-toolbar-title>
-                    <q-btn
-                      v-if="page.shouldShowOpenLogDirectoryButton"
-                      unelevated
-                      color="toolbar-button"
-                      text-color="toolbar-button-display"
-                      class="text-no-wrap text-bold q-mr-sm"
-                      @click="openLogDirectory"
-                    >
-                      ログフォルダを開く
-                    </q-btn>
-                    <!-- close button -->
-                    <q-btn
-                      round
-                      flat
-                      icon="close"
-                      color="display"
-                      aria-label="ヘルプを閉じる"
-                      @click="modelValueComputed = false"
-                    />
-                  </q-toolbar>
-                </q-header>
-                <component :is="page.component" v-bind="page.props" />
-              </div>
-            </q-tab-panel>
-          </q-tab-panels>
-        </q-page>
-      </q-page-container>
+        <q-page-container>
+          <q-page>
+            <q-tab-panels v-model="selectedPageIndex">
+              <q-tab-panel
+                v-for="(page, pageIndex) of pagedata"
+                :key="pageIndex"
+                :name="pageIndex"
+                class="q-pa-none"
+              >
+                <div v-if="page.type === 'item'" class="root">
+                  <q-header class="q-pa-sm">
+                    <q-toolbar>
+                      <q-toolbar-title class="text-display">
+                        ヘルプ / {{ page.parent ? page.parent + " / " : ""
+                        }}{{ page.name }}
+                      </q-toolbar-title>
+                      <q-btn
+                        v-if="page.shouldShowOpenLogDirectoryButton"
+                        unelevated
+                        color="toolbar-button"
+                        text-color="toolbar-button-display"
+                        class="text-no-wrap text-bold q-mr-sm"
+                        @click="openLogDirectory"
+                      >
+                        ログフォルダを開く
+                      </q-btn>
+                      <!-- close button -->
+                      <q-btn
+                        round
+                        flat
+                        icon="close"
+                        color="display"
+                        aria-label="ヘルプを閉じる"
+                        @click="modelValueComputed = false"
+                      />
+                    </q-toolbar>
+                  </q-header>
+                  <component :is="page.component" v-bind="page.props" />
+                </div>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-page>
+        </q-page-container>
+      </div>
     </q-layout>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
+import BaseListView from "../base/BaseListView.vue";
+import BaseListItem from "../base/BaseListItem.vue";
 import MarkdownView from "../template/HelpMarkdownViewSection.vue";
 import OssLicense from "../template/HelpOssLicenseSection.vue";
 import UpdateInfo from "../template/HelpUpdateInfoSection.vue";
@@ -277,7 +268,33 @@ const openLogDirectory = window.electron.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/colors' as colors;
+@use '@/styles/new-colors' as colors;
+
+.grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  backdrop-filter: blur(32px);
+
+  &::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-color: colors.$background;
+    opacity: 0.75;
+    z-index: -1;
+  }
+}
+
+// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
+.list-wrapper {
+  margin-top: 66px;
+}
+
+.list-label {
+  padding: 8px 16px;
+  padding-top: 16px;
+  color: colors.$display-sub;
+}
 
 .help-dialog .q-layout-container :deep(.absolute-full) {
   right: 0 !important;
@@ -289,12 +306,7 @@ const openLogDirectory = window.electron.openLogDirectory;
   }
 }
 
-.selected-item {
-  background-color: rgba(colors.$primary-rgb, 0.4);
-  color: colors.$display;
-}
-
-.q-item__label {
-  padding: 8px 16px;
+.q-tab-panels {
+  background: none;
 }
 </style>

From 2faecdf7bd251dacddb52025aa298d8026bd37db Mon Sep 17 00:00:00 2001
From: takusea <takusea826@gmail.com>
Date: Tue, 26 Mar 2024 23:02:26 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=E3=82=B5=E3=82=A4=E3=83=89=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E9=A0=98=E5=9F=9F=E3=82=92=E3=82=B9=E3=82=AF=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseListView.vue | 17 ------------
 src/components/help/HelpDialog.vue   | 40 +++++++++++++++++-----------
 2 files changed, 25 insertions(+), 32 deletions(-)
 delete mode 100644 src/components/base/BaseListView.vue

diff --git a/src/components/base/BaseListView.vue b/src/components/base/BaseListView.vue
deleted file mode 100644
index 7c4b7d2584..0000000000
--- a/src/components/base/BaseListView.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<template>
-  <div class="list">
-    <slot />
-  </div>
-</template>
-
-<style scoped lang="scss">
-@use '@/styles/variables' as vars;
-@use '@/styles/mixin' as mixin;
-@use '@/styles/new-colors' as colors;
-
-.list {
-  padding: vars.$padding-2;
-  display: flex;
-  flex-direction: column;
-}
-</style>
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 9af99c0a90..738dc476e6 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -9,20 +9,22 @@
     <q-layout container view="hHh Lpr lff">
       <div class="grid">
         <div class="list-wrapper">
-          <BaseListView>
-            <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
-              <BaseListItem
-                v-if="page.type === 'item'"
-                :selected="selectedPageIndex === pageIndex"
-                @click="selectedPageIndex = pageIndex"
-              >
-                {{ page.name }}
-              </BaseListItem>
-              <div v-else-if="page.type === 'separator'" class="list-label">
-                {{ page.name }}
-              </div>
-            </template>
-          </BaseListView>
+          <BaseScrollArea>
+            <div class="list-inner">
+              <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
+                <BaseListItem
+                  v-if="page.type === 'item'"
+                  :selected="selectedPageIndex === pageIndex"
+                  @click="selectedPageIndex = pageIndex"
+                >
+                  {{ page.name }}
+                </BaseListItem>
+                <div v-else-if="page.type === 'separator'" class="list-label">
+                  {{ page.name }}
+                </div>
+              </template>
+            </div>
+          </BaseScrollArea>
         </div>
 
         <q-page-container>
@@ -75,7 +77,7 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
-import BaseListView from "../base/BaseListView.vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
 import BaseListItem from "../base/BaseListItem.vue";
 import MarkdownView from "../template/HelpMarkdownViewSection.vue";
 import OssLicense from "../template/HelpOssLicenseSection.vue";
@@ -269,6 +271,7 @@ const openLogDirectory = window.electron.openLogDirectory;
 
 <style scoped lang="scss">
 @use '@/styles/new-colors' as colors;
+@use '@/styles/variables' as vars;
 
 .grid {
   display: grid;
@@ -288,6 +291,13 @@ const openLogDirectory = window.electron.openLogDirectory;
 // TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
 .list-wrapper {
   margin-top: 66px;
+  height: calc(100vh - 90px);
+}
+
+.list-inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
 }
 
 .list-label {