From 2f0d71d183fb56017d15c0e09a8cdb6decd564f3 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 15:54:03 +0900
Subject: [PATCH 01/15] =?UTF-8?q?=F0=9F=8E=A8=20=E3=82=B0=E3=83=AB?=
 =?UTF-8?q?=E3=83=BC=E3=83=97=E4=B8=80=E8=A6=A7=E3=83=9A=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=81=AE=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E3=82=92?=
 =?UTF-8?q?=E6=8F=83=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/groups/GroupItem.vue | 22 -----------------
 src/pages/GroupsPage.vue            | 37 ++++++++++++++++-------------
 2 files changed, 21 insertions(+), 38 deletions(-)
 delete mode 100644 src/components/groups/GroupItem.vue

diff --git a/src/components/groups/GroupItem.vue b/src/components/groups/GroupItem.vue
deleted file mode 100644
index 024e0344..00000000
--- a/src/components/groups/GroupItem.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts" setup>
-import type { Group } from '/@/features/group/model'
-
-interface Props {
-  group: Group
-}
-
-const props = defineProps<Props>()
-</script>
-
-<template>
-  <router-link :to="`/groups/${props.group.id}`">
-    <div
-      class="flex h-12 items-center justify-around px-4 hover:bg-hover-secondary">
-      <div class="w-1/5">{{ props.group.name }}</div>
-      <div class="w-3/5 truncate">{{ props.group.description }}</div>
-      <div class="w-1/5">
-        {{ props.group.budget }}
-      </div>
-    </div>
-  </router-link>
-</template>
diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index 2e081dae..4c99a201 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -8,7 +8,6 @@ import { useUserStore } from '/@/stores/user'
 
 import { toPage } from '/@/lib/parseQueryParams'
 
-import GroupItem from '/@/components/groups/GroupItem.vue'
 import PaginationBar from '/@/components/shared/PaginationBar.vue'
 import SimpleButton from '/@/components/shared/SimpleButton.vue'
 import { useFetchGroupsUsecase } from '/@/features/group/usecase'
@@ -41,10 +40,10 @@ watch(
 
 <template>
   <div>
-    <div class="min-w-160 mx-auto flex w-2/3 flex-col">
-      <div class="relative flex w-full items-center justify-center py-8">
-        <h1 class="text-center text-3xl">グループ一覧</h1>
-        <div v-if="isAdmin" class="absolute right-0">
+    <div class="min-w-160 mx-auto flex w-2/3 my-8 flex-col">
+      <div class="relative flex w-full items-center">
+        <h1 class="text-2xl">グループ一覧</h1>
+        <div v-if="!isAdmin" class="ml-4">
           <RouterLink to="/groups/new">
             <SimpleButton font-size="lg" padding="md">
               グループの新規作成
@@ -54,21 +53,27 @@ watch(
       </div>
 
       <div class="min-h-128">
-        <div
-          class="flex items-center justify-around bg-surface-tertiary px-4 pt-2 pb-2">
-          <div class="w-1/5">グループ名</div>
-          <div class="w-3/5">詳細</div>
-          <div class="w-1/5">予算</div>
+        <div class="grid grid-cols-[2fr_3fr_3fr] divide-y my-7">
+          <div
+            class="grid grid-cols-[subgrid] col-span-3 bg-surface-tertiary px-6 py-4">
+            <div>グループ名</div>
+            <div>詳細</div>
+            <div>予算</div>
+          </div>
+
+          <RouterLink
+            v-for="group in sliceGroupsAt(page, 10)"
+            :key="group.id"
+            class="grid grid-cols-[subgrid] col-span-3 hover:bg-hover-secondary px-6 py-4"
+            :to="`/groups/${group.id}`">
+            <div>{{ group.name }}</div>
+            <div class="truncate">{{ group.description }}</div>
+            <div>{{ group.budget }}</div>
+          </RouterLink>
         </div>
-        <ul class="divide-y">
-          <li v-for="group in sliceGroupsAt(page, 10)" :key="group.id">
-            <GroupItem :group="group" />
-          </li>
-        </ul>
       </div>
       <PaginationBar
         v-if="groups.length > 0"
-        class="mt-4"
         :current-page="page"
         path="/groups"
         :total-pages="Math.ceil(groups.length / 10)" />

From cb497ebe8ff4461803f5a854d4790366592d39bd Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 15:59:59 +0900
Subject: [PATCH 02/15] =?UTF-8?q?=F0=9F=90=9B=20=E3=83=AC=E3=82=A4?=
 =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E3=82=92=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index 4c99a201..cb0cd57f 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -52,25 +52,22 @@ watch(
         </div>
       </div>
 
-      <div class="min-h-128">
-        <div class="grid grid-cols-[2fr_3fr_3fr] divide-y my-7">
-          <div
-            class="grid grid-cols-[subgrid] col-span-3 bg-surface-tertiary px-6 py-4">
-            <div>グループ名</div>
-            <div>詳細</div>
-            <div>予算</div>
-          </div>
-
-          <RouterLink
-            v-for="group in sliceGroupsAt(page, 10)"
-            :key="group.id"
-            class="grid grid-cols-[subgrid] col-span-3 hover:bg-hover-secondary px-6 py-4"
-            :to="`/groups/${group.id}`">
-            <div>{{ group.name }}</div>
-            <div class="truncate">{{ group.description }}</div>
-            <div>{{ group.budget }}</div>
-          </RouterLink>
+      <div class="grid grid-cols-[2fr_3fr_3fr] divide-y my-7">
+        <div
+          class="grid grid-cols-[subgrid] col-span-3 bg-surface-tertiary px-6 py-4">
+          <div>グループ名</div>
+          <div>詳細</div>
+          <div>予算</div>
         </div>
+        <RouterLink
+          v-for="group in sliceGroupsAt(page, 10)"
+          :key="group.id"
+          class="grid grid-cols-[subgrid] col-span-3 hover:bg-hover-secondary px-6 py-4"
+          :to="`/groups/${group.id}`">
+          <div>{{ group.name }}</div>
+          <div class="truncate">{{ group.description }}</div>
+          <div>{{ group.budget }}</div>
+        </RouterLink>
       </div>
       <PaginationBar
         v-if="groups.length > 0"

From 7bb350f2d7ba62f3da9946642d96d6799fd5f685 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Wed, 28 Aug 2024 16:10:48 +0900
Subject: [PATCH 03/15] =?UTF-8?q?=F0=9F=94=A5=20=E9=96=8B=E7=99=BA?=
 =?UTF-8?q?=E7=94=A8=E3=81=AB=E3=83=9C=E3=82=BF=E3=83=B3=E8=A1=A8=E7=A4=BA?=
 =?UTF-8?q?=E3=81=97=E3=81=A6=E3=81=9F=E3=81=AE=E3=82=92=E6=88=BB=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index cb0cd57f..38e99cd4 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -43,7 +43,7 @@ watch(
     <div class="min-w-160 mx-auto flex w-2/3 my-8 flex-col">
       <div class="relative flex w-full items-center">
         <h1 class="text-2xl">グループ一覧</h1>
-        <div v-if="!isAdmin" class="ml-4">
+        <div v-if="isAdmin" class="ml-4">
           <RouterLink to="/groups/new">
             <SimpleButton font-size="lg" padding="md">
               グループの新規作成

From 33e5b255fda478440a63dcf3bf69df348ca1a430 Mon Sep 17 00:00:00 2001
From: mehm8128 <mehm8128@gmail.com>
Date: Thu, 29 Aug 2024 20:59:16 +0900
Subject: [PATCH 04/15] remove onMounted fetchMe on App.vue

---
 src/App.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 324a0904..34e16386 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { onMounted, watch } from 'vue'
+import { watch } from 'vue'
 
 import { useFetchMeUsecase } from '/@/features/user/usecase'
 
@@ -9,10 +9,6 @@ import './styles/scrollbar.css'
 import './styles/toast.css'
 import { useRoute } from 'vue-router'
 
-onMounted(async () => {
-  await useFetchMeUsecase()
-})
-
 const route = useRoute()
 
 watch(

From 938cd2f406e63739bcc9737049c05eb080885d8f Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 7 Sep 2024 10:47:39 +0900
Subject: [PATCH 05/15] =?UTF-8?q?=F0=9F=8E=A8=20=E6=A8=AA=E5=B9=85?=
 =?UTF-8?q?=E3=82=92=E3=83=9A=E3=83=BC=E3=82=B8=E3=83=8D=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E3=83=90=E3=83=BC=E3=81=AB=E6=8F=83=E3=81=88?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index 38e99cd4..2336cbf8 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -40,13 +40,13 @@ watch(
 
 <template>
   <div>
-    <div class="min-w-160 mx-auto flex w-2/3 my-8 flex-col">
+    <div class="min-w-96 mx-auto flex w-2/3 my-8 flex-col">
       <div class="relative flex w-full items-center">
         <h1 class="text-2xl">グループ一覧</h1>
         <div v-if="isAdmin" class="ml-4">
           <RouterLink to="/groups/new">
             <SimpleButton font-size="lg" padding="md">
-              グループの新規作成
+              グループを作成
             </SimpleButton>
           </RouterLink>
         </div>

From 1830c099fc2514085314a034a98e3cbcd8e424a5 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sun, 15 Sep 2024 00:57:19 +0900
Subject: [PATCH 06/15] =?UTF-8?q?=F0=9F=8E=A8=20=E3=82=BF=E3=82=A4?=
 =?UTF-8?q?=E3=83=88=E3=83=AB=E3=81=A8=E4=BD=9C=E6=88=90=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=81=A8=E9=96=93=E9=9A=94=E3=82=92=E5=BA=83=E3=81=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index 800b52a8..289ad0e5 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -43,7 +43,7 @@ watch(
     <div class="min-w-[384px] mx-auto flex w-2/3 my-8 flex-col">
       <div class="relative flex w-full items-center">
         <h1 class="text-2xl">グループ一覧</h1>
-        <div v-if="isAdmin" class="ml-4">
+        <div v-if="isAdmin" class="ml-7">
           <RouterLink to="/groups/new">
             <SimpleButton font-size="lg" padding="md">
               グループを作成

From 3fb6759871b6c28edadf9b7ef397f0e656943cf9 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 21 Sep 2024 17:41:58 +0900
Subject: [PATCH 07/15] =?UTF-8?q?=F0=9F=8E=A8=20=E3=82=AE=E3=83=A3?=
 =?UTF-8?q?=E3=83=83=E3=83=97=E3=82=92=E3=81=A4=E3=81=91=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index 289ad0e5..2c0d295a 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -52,9 +52,9 @@ watch(
         </div>
       </div>
 
-      <div class="grid grid-cols-[2fr_3fr_3fr] divide-y my-7">
+      <div class="grid grid-cols-[2fr_3fr_2fr] divide-y my-7">
         <div
-          class="grid grid-cols-[subgrid] col-span-3 bg-surface-tertiary px-6 py-4">
+          class="grid grid-cols-subgrid col-span-3 bg-surface-tertiary gap-x-2 px-6 py-4">
           <div>グループ名</div>
           <div>詳細</div>
           <div>予算</div>
@@ -62,7 +62,7 @@ watch(
         <RouterLink
           v-for="group in sliceGroupsAt(page, 10)"
           :key="group.id"
-          class="grid grid-cols-[subgrid] col-span-3 hover:bg-hover-secondary px-6 py-4"
+          class="grid grid-cols-subgrid col-span-3 hover:bg-hover-secondary gap-x-2 px-6 py-4"
           :to="`/groups/${group.id}`">
           <div>{{ group.name }}</div>
           <div class="truncate">{{ group.description }}</div>

From be9449e580ede5094d7e843e811fbb568b5de324 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 21 Sep 2024 17:43:23 +0900
Subject: [PATCH 08/15] =?UTF-8?q?=F0=9F=8E=A8=20=E8=A1=A8=E3=81=AE?=
 =?UTF-8?q?=E6=9C=80=E5=B0=8F=E5=B9=85=E3=82=92=20384px=20->=20280px=20?=
 =?UTF-8?q?=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index 2c0d295a..df1ae9a0 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -40,7 +40,7 @@ watch(
 
 <template>
   <div>
-    <div class="min-w-[384px] mx-auto flex w-2/3 my-8 flex-col">
+    <div class="min-w-[280px] mx-auto flex w-2/3 my-8 flex-col">
       <div class="relative flex w-full items-center">
         <h1 class="text-2xl">グループ一覧</h1>
         <div v-if="isAdmin" class="ml-7">

From 956cd12feb6d0dd37b6d0f468bc7c9655f7ff7f2 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 21 Sep 2024 19:28:26 +0900
Subject: [PATCH 09/15] =?UTF-8?q?=F0=9F=8E=A8=20=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=83=8D=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=82=92=E3=83=AC=E3=82=B9=E3=83=9D=E3=83=B3=E3=82=B7?=
 =?UTF-8?q?=E3=83=96=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/PaginationBar.vue | 122 +++++++++++-------------
 1 file changed, 57 insertions(+), 65 deletions(-)

diff --git a/src/components/shared/PaginationBar.vue b/src/components/shared/PaginationBar.vue
index 45bb2266..91a8336d 100644
--- a/src/components/shared/PaginationBar.vue
+++ b/src/components/shared/PaginationBar.vue
@@ -12,38 +12,46 @@ interface Props {
 
 const props = defineProps<Props>()
 
-// sequence(3, 7) => [3, 4, 5, 6, 7]
-const sequence = (start: number, end: number) => {
-  return [...Array(end - start + 1).keys()].map(i => i + start)
-}
+// P1: 1 2 ... p-2 p-1 p p+1 p+2 ... last-1 last
+// P2: 1 ... p ... last
+// P3:
 
-// P1: 001 002 003 004 005 006 007 008 009 010 011   -   left
-// P2: 001 002 003 004 005 006 007 008 ... 099 100   -   left ... center
-// P3: 001 002 ... 048 049 050 051 052 ... 099 100   -   left ... center ... right
-// P4: 001 002 ... 093 094 095 096 097 098 099 100   -   left ... center
+type PaginationType = number | '...'
 
 // 常に表示される
-const left = computed(
-  () =>
-    props.totalPages <= 11
-      ? sequence(1, props.totalPages) // P1
-      : props.currentPage <= 6
-        ? sequence(1, 8) // P2
-        : sequence(1, 2) // P3, P4
-)
-// totalPages > 11 のとき、表示される
-const center = computed(
-  () =>
-    props.currentPage <= 6
-      ? sequence(props.totalPages - 1, props.totalPages) // P2
-      : props.currentPage <= props.totalPages - 6
-        ? sequence(props.currentPage - 2, props.currentPage + 2) // P3
-        : sequence(props.totalPages - 7, props.totalPages) // P4
-)
-// totalPages > 11 && 6 < currentPage <= totalPages - 6 のとき、表示される
-const right = computed(
-  () => sequence(props.totalPages - 1, props.totalPages) // P3
-)
+const pages = computed(() => {
+  const current = props.currentPage
+  const last = props.totalPages
+
+  const mergePages = (
+    left: number[],
+    center: number[],
+    right: number[]
+  ): PaginationType[] => {
+    const leftOverlap = Math.max(...left) - Math.min(...center)
+    const rightOverlap = Math.max(...center) - Math.min(...right)
+    const leftMerge: PaginationType[] =
+      leftOverlap >= 0
+        ? [...left, ...center.slice(leftOverlap + 1)]
+        : [...left, '...', ...center]
+    const bothMerge: PaginationType[] =
+      rightOverlap >= 0
+        ? [...leftMerge, ...right.slice(rightOverlap + 1)]
+        : [...leftMerge, '...', ...right]
+    return bothMerge
+  }
+
+  return [
+    mergePages(
+      [1, 2],
+      [current - 2, current - 1, current, current + 1, current + 2].filter(
+        page => 1 <= page && page <= last
+      ),
+      [last - 1, last]
+    ),
+    mergePages([1], [current], [last])
+  ]
+})
 </script>
 
 <template>
@@ -57,43 +65,27 @@ const right = computed(
         <ChevronLeftIcon class="w-4" />Prev
       </router-link>
 
-      <!-- Left -->
-      <div class="flex">
-        <PageLink
-          v-for="page in left"
-          :key="page"
-          class="not-last:mr-1"
-          :is-selected="page === currentPage"
-          :page="page"
-          :path="path" />
+      <div class="hidden lg:flex gap-1">
+        <div v-for="page in pages[0]" :key="page" class="flex">
+          <PageLink
+            v-if="typeof page === 'number'"
+            class="h-full"
+            :is-selected="page === currentPage"
+            :page="page"
+            :path="path" />
+          <span v-else class="w-10 self-end pb-2">...</span>
+        </div>
       </div>
-
-      <!-- Center -->
-      <div v-if="totalPages > 11" class="flex">
-        <span class="w-10 self-end pb-2">...</span>
-        <PageLink
-          v-for="page in center"
-          :key="page"
-          class="not-last:mr-1"
-          :is-selected="page === currentPage"
-          :page="page"
-          :path="path" />
-      </div>
-
-      <!-- Right -->
-      <div
-        v-if="
-          totalPages > 11 && 6 < currentPage && currentPage <= totalPages - 6
-        "
-        class="flex">
-        <span class="w-10 self-end pb-2">...</span>
-        <PageLink
-          v-for="page in right"
-          :key="page"
-          class="not-last:mr-1"
-          :is-selected="page === currentPage"
-          :page="page"
-          :path="path" />
+      <div class="hidden md:max-lg:flex gap-1">
+        <div v-for="page in pages[1]" :key="page" class="flex">
+          <PageLink
+            v-if="typeof page === 'number'"
+            class="h-full"
+            :is-selected="page === currentPage"
+            :page="page"
+            :path="path" />
+          <span v-else class="w-10 self-end pb-2">...</span>
+        </div>
       </div>
 
       <!-- Next -->

From 9401364672660e408590aa7fb41bf3661c2fb281 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 21 Sep 2024 19:30:00 +0900
Subject: [PATCH 10/15] =?UTF-8?q?=F0=9F=8E=A8=20=E8=A1=A8=E3=81=AE?=
 =?UTF-8?q?=E6=9C=80=E5=B0=8F=E5=B9=85=E3=82=92=E3=81=AA=E3=81=8F=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index df1ae9a0..23eb6f16 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -40,7 +40,7 @@ watch(
 
 <template>
   <div>
-    <div class="min-w-[280px] mx-auto flex w-2/3 my-8 flex-col">
+    <div class="mx-auto flex w-2/3 my-8 flex-col">
       <div class="relative flex w-full items-center">
         <h1 class="text-2xl">グループ一覧</h1>
         <div v-if="isAdmin" class="ml-7">

From 762d208321a65f9f0883fc405e0b49f381a3618f Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 21 Sep 2024 19:32:53 +0900
Subject: [PATCH 11/15] =?UTF-8?q?=F0=9F=90=9B=20=E3=83=9A=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E3=83=8D=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=83=90=E3=82=B0=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/PaginationBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/PaginationBar.vue b/src/components/shared/PaginationBar.vue
index 91a8336d..df8950de 100644
--- a/src/components/shared/PaginationBar.vue
+++ b/src/components/shared/PaginationBar.vue
@@ -43,11 +43,11 @@ const pages = computed(() => {
 
   return [
     mergePages(
-      [1, 2],
+      [1, 2].filter(page => 1 <= page && page <= last),
       [current - 2, current - 1, current, current + 1, current + 2].filter(
         page => 1 <= page && page <= last
       ),
-      [last - 1, last]
+      [last - 1, last].filter(page => 1 <= page && page <= last)
     ),
     mergePages([1], [current], [last])
   ]

From f908c4c8cbb7f1a701650206d24ea80bdc7fa235 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Sat, 21 Sep 2024 19:35:02 +0900
Subject: [PATCH 12/15] =?UTF-8?q?=F0=9F=8E=A8=20=E3=82=B3=E3=83=A1?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/PaginationBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shared/PaginationBar.vue b/src/components/shared/PaginationBar.vue
index df8950de..7188adfb 100644
--- a/src/components/shared/PaginationBar.vue
+++ b/src/components/shared/PaginationBar.vue
@@ -18,7 +18,6 @@ const props = defineProps<Props>()
 
 type PaginationType = number | '...'
 
-// 常に表示される
 const pages = computed(() => {
   const current = props.currentPage
   const last = props.totalPages
@@ -65,6 +64,7 @@ const pages = computed(() => {
         <ChevronLeftIcon class="w-4" />Prev
       </router-link>
 
+      <!-- Pagination -->
       <div class="hidden lg:flex gap-1">
         <div v-for="page in pages[0]" :key="page" class="flex">
           <PageLink

From 8cdb79a4f755c075a543b5adfac24ffae8b120bc Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Mon, 23 Sep 2024 03:04:09 +0900
Subject: [PATCH 13/15] =?UTF-8?q?=F0=9F=90=9B=20=E6=95=B0=E3=81=8C?=
 =?UTF-8?q?=E9=9A=A3=E3=82=8A=E5=90=88=E3=81=86=E3=81=A8=E3=81=8D=E3=81=AB?=
 =?UTF-8?q?=20...=20=E3=81=A8=E3=81=AA=E3=81=A3=E3=81=A6=E3=81=84=E3=81=9F?=
 =?UTF-8?q?=E3=81=A8=E3=81=93=E3=82=8D=E3=82=92=E6=B6=88=E3=81=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/shared/PaginationBar.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/shared/PaginationBar.vue b/src/components/shared/PaginationBar.vue
index 7188adfb..b74cbce7 100644
--- a/src/components/shared/PaginationBar.vue
+++ b/src/components/shared/PaginationBar.vue
@@ -30,11 +30,11 @@ const pages = computed(() => {
     const leftOverlap = Math.max(...left) - Math.min(...center)
     const rightOverlap = Math.max(...center) - Math.min(...right)
     const leftMerge: PaginationType[] =
-      leftOverlap >= 0
+      leftOverlap >= -1
         ? [...left, ...center.slice(leftOverlap + 1)]
         : [...left, '...', ...center]
     const bothMerge: PaginationType[] =
-      rightOverlap >= 0
+      rightOverlap >= -1
         ? [...leftMerge, ...right.slice(rightOverlap + 1)]
         : [...leftMerge, '...', ...right]
     return bothMerge

From f6ca17b1a6f784e2bba1c8e8f2b1110af269f966 Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Mon, 23 Sep 2024 14:04:38 +0900
Subject: [PATCH 14/15] =?UTF-8?q?=F0=9F=8E=A8=20=E5=B0=91=E3=81=97?=
 =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index 23eb6f16..a18eead5 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -40,10 +40,10 @@ watch(
 
 <template>
   <div>
-    <div class="mx-auto flex w-2/3 my-8 flex-col">
-      <div class="relative flex w-full items-center">
+    <div class="mx-auto flex md:w-2/3 w-5/6 my-8 flex-col">
+      <div class="relative flex flex-wrap gap-7 w-full items-center">
         <h1 class="text-2xl">グループ一覧</h1>
-        <div v-if="isAdmin" class="ml-7">
+        <div v-if="isAdmin">
           <RouterLink to="/groups/new">
             <SimpleButton font-size="lg" padding="md">
               グループを作成
@@ -54,7 +54,7 @@ watch(
 
       <div class="grid grid-cols-[2fr_3fr_2fr] divide-y my-7">
         <div
-          class="grid grid-cols-subgrid col-span-3 bg-surface-tertiary gap-x-2 px-6 py-4">
+          class="grid grid-cols-subgrid col-span-3 bg-surface-tertiary gap-x-2 px-6 py-4 whitespace-nowrap">
           <div>グループ名</div>
           <div>詳細</div>
           <div>予算</div>

From fdf127326ae691f2fdb82438d8416e7ddfd5ec6c Mon Sep 17 00:00:00 2001
From: anko9801 <daiusa3@icloud.com>
Date: Mon, 23 Sep 2024 14:42:21 +0900
Subject: [PATCH 15/15] =?UTF-8?q?=F0=9F=8E=A8=20=E6=A8=AA=E7=B8=A6?=
 =?UTF-8?q?=E3=81=AE=E5=B9=85=E5=A4=89=E3=81=88=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/GroupsPage.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/GroupsPage.vue b/src/pages/GroupsPage.vue
index a18eead5..5f00e006 100644
--- a/src/pages/GroupsPage.vue
+++ b/src/pages/GroupsPage.vue
@@ -41,7 +41,7 @@ watch(
 <template>
   <div>
     <div class="mx-auto flex md:w-2/3 w-5/6 my-8 flex-col">
-      <div class="relative flex flex-wrap gap-7 w-full items-center">
+      <div class="relative flex flex-wrap gap-x-7 gap-y-2 w-full items-center">
         <h1 class="text-2xl">グループ一覧</h1>
         <div v-if="isAdmin">
           <RouterLink to="/groups/new">