From 36af8986b4872d4d06bba068b7b6a993ee1405c1 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 16 Nov 2023 21:01:50 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=82=B3=E3=83=9E=E3=83=B3=E3=83=89?=
 =?UTF-8?q?=E3=83=91=E3=83=AC=E3=83=83=E3=83=88=E3=81=AEquery=20suggest?=
 =?UTF-8?q?=E3=82=92=E3=83=AC=E3=82=B9=E3=83=9D=E3=83=B3=E3=82=B7=E3=83=96?=
 =?UTF-8?q?=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/CommandPalette/SearchSuggestion.vue  | 19 +++++++++-------
 .../SearchSuggestionQueryItem.vue             | 22 ++++++++++++++++---
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/Main/CommandPalette/SearchSuggestion.vue b/src/components/Main/CommandPalette/SearchSuggestion.vue
index 7fb002ac8..c61a89369 100644
--- a/src/components/Main/CommandPalette/SearchSuggestion.vue
+++ b/src/components/Main/CommandPalette/SearchSuggestion.vue
@@ -34,8 +34,15 @@ import type { SuggestionItem } from './SearchSuggestionItem.vue'
 import SearchSuggestionQueryItem from './SearchSuggestionQueryItem.vue'
 import SearchSuggestionHistoryItem from './SearchSuggestionHistoryItem.vue'
 import SearchSuggestionItem from './SearchSuggestionItem.vue'
+import { useResponsiveStore } from '/@/store/ui/responsive'
 
-const querySuggestions = [
+const emit = defineEmits<{
+  (e: 'queryInsert'): void
+}>()
+
+const { isMobile } = useResponsiveStore()
+
+const querySuggestions = computed(() => [
   {
     insertQuery: 'in:',
     description: 'チャンネル名を指定',
@@ -54,18 +61,14 @@ const querySuggestions = [
   {
     insertQuery: 'before:',
     description: '特定の日時以前のメッセージ',
-    example: 'before:2020-01-23, before:2020-01-23T00:00'
+    example: `before:2020-01-23${!isMobile.value ? ', before:2020-01-23T00:00' : ''}`
   },
   {
     insertQuery: 'after:',
     description: '特定の日時以降のメッセージ',
-    example: 'after:2020-01-23, after:2020-01-23T00:00'
+    example: `after:2020-01-23${!isMobile.value ? ', after:2020-01-23T00:00' : ''}`
   }
-]
-
-const emit = defineEmits<{
-  (e: 'queryInsert'): void
-}>()
+])
 
 const { currentInput, searchHistories, settleQuery, removeSearchHistory } =
   useCommandPalette()
diff --git a/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue b/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
index 34013a6ca..9fcc182bd 100644
--- a/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
+++ b/src/components/Main/CommandPalette/SearchSuggestionQueryItem.vue
@@ -1,16 +1,23 @@
 <template>
-  <div :class="$style.container" @click="onClick">
-    <span :class="$style.description">{{ description }}</span>
-    <span :class="$style.example">{{ example }}</span>
+  <div
+    :class="$style.container"
+    :data-is-mobile="$boolAttr(isMobile)"
+    @click="onClick"
+  >
+    <p :class="$style.description">{{ description }}</p>
+    <p :class="$style.example">{{ example }}</p>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useResponsiveStore } from '/@/store/ui/responsive'
 defineProps<{
   description: string
   example: string
 }>()
 
+const { isMobile } = useResponsiveStore()
+
 const emit = defineEmits<{
   (e: 'select'): void
 }>()
@@ -31,6 +38,14 @@ const onClick = () => {
   &:hover {
     @include background-secondary;
   }
+
+  &[data-is-mobile] {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+  }
 }
 .description {
   @include size-body1;
@@ -39,5 +54,6 @@ const onClick = () => {
 .example {
   @include size-body2;
   @include color-ui-secondary;
+  margin-left: 12px;
 }
 </style>

From 15933216989e483b0b106ffe891f9e53b59182c0 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 16 Nov 2023 21:06:20 +0900
Subject: [PATCH 2/2] format

---
 src/components/Main/CommandPalette/SearchSuggestion.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Main/CommandPalette/SearchSuggestion.vue b/src/components/Main/CommandPalette/SearchSuggestion.vue
index c61a89369..160025727 100644
--- a/src/components/Main/CommandPalette/SearchSuggestion.vue
+++ b/src/components/Main/CommandPalette/SearchSuggestion.vue
@@ -61,12 +61,16 @@ const querySuggestions = computed(() => [
   {
     insertQuery: 'before:',
     description: '特定の日時以前のメッセージ',
-    example: `before:2020-01-23${!isMobile.value ? ', before:2020-01-23T00:00' : ''}`
+    example: `before:2020-01-23${
+      !isMobile.value ? ', before:2020-01-23T00:00' : ''
+    }`
   },
   {
     insertQuery: 'after:',
     description: '特定の日時以降のメッセージ',
-    example: `after:2020-01-23${!isMobile.value ? ', after:2020-01-23T00:00' : ''}`
+    example: `after:2020-01-23${
+      !isMobile.value ? ', after:2020-01-23T00:00' : ''
+    }`
   }
 ])