feat: choose commit to summarize

app/components/Home/CommitsList.vue

@@ -9,6 +9,19 @@ const hasNextPage = inject('hasNextPage', shallowRef<boolean>(false))
 /**
  * UI state variables
  */
+const kaomojis = [
+  `(＃＞＜)`, `(；⌣̀_⌣́)`, `☆ｏ(＞＜；)○`, `(￣ ￣|||)`, `(；￣Д￣)`, `(￣□￣」)`,
+  `(＃￣0￣)`, `(＃￣ω￣)`, `(￢_￢;)`, `(＞ｍ＜)`, `(」°ロ°)」`, `(〃＞＿＜;〃)`,
+  `(＾＾＃)`, `(︶︹︺)`, `(￣ヘ￣)`, `<(￣ ﹌ ￣)>`, `(￣︿￣)`, `(＞﹏＜)`,
+  `(--_--)`, `凸(￣ヘ￣)`, `ヾ( ￣O￣)ツ`, `(⇀‸↼‶)`, `o(>< )o`, `(」＞＜)」`,
+  `(ᗒᗣᗕ)՞`, `(눈_눈)`, `(￣ω￣;)`, `σ(￣、￣〃)`, `(￣～￣;)`, `(-_-;)・・・`,
+  `┐('～\`;)┌`, `(・_・ヾ`, `(〃￣ω￣〃ゞ`, `┐(￣ヘ￣;)┌`, `(・_・;)`, `(￣_￣)・・・`,
+  `╮(￣ω￣;)╭`, `(¯ . ¯;)`, `(＠_＠)`, `(・・;)ゞ`, `Σ(￣。￣ﾉ)`, `(・・ ) ?`,
+  `(•ิ_•ิ)?`, `(◎ ◎)ゞ`, `(ーー;)`, `ლ(ಠ_ಠ ლ)`, `ლ(¯ロ¯"ლ)`, `(¯ . ¯٥)`,
+  `(¯ ¯٥)`, `(・・?)`, `(??_??)`, `(⊙.⊙)?`
+]
+
+const kaomoji = shallowRef<string>(kaomojis[0] as string)
 
 /**
  * Data
@@ -31,7 +44,8 @@ const groupedCommits = computed<CommitGroup[]>(() => groupedCommitsData.value?.g
  * Watchers
  */
 watch([selectedRepo, page], async ([newRepo, newPage]) => {
-  if (!newRepo || newPage == 0) return
+  if (!newRepo || newPage == 0)
+    kaomoji.value = kaomojis[Math.floor(Math.random() * (kaomojis.length))] as string
 
   else {
     await refreshGroupedCommits()
@@ -47,7 +61,7 @@ watch([selectedRepo, page], async ([newRepo, newPage]) => {
 <template>
   <UEmpty
     v-if="!selectedRepo"
-    description=": ("
+    :description="kaomoji"
     variant="outline"
     class="size-full"
   />

app/components/Home/DatedCommits.vue

@@ -3,13 +3,35 @@ defineProps<{
   group: CommitGroup
 }>()
 
+const viewport = useViewport()
+
+const selectedRepo = inject('selectedRepo', shallowRef<GitHubRepo>())
+
 const user = useSupabaseUser()
 </script>
 
 <template>
-  <UCard
-    :title="group.date"
-  >
+  <UCard>
+    <template #title>
+      <div class="flex items-center justify-between gap-4">
+        <span>{{ group.date }}</span>
+
+        <div class="flex items-center gap-4">
+          <span class="text-xs text-dimmed font-normal">
+            {{ group.commits.length + ' commit' + (group.commits.length > 1 ? 's' : '') }}
+          </span>
+          <UButton
+            :to="`/summary/${selectedRepo?.owner.login}/${selectedRepo?.name}/${group.date}`"
+            v-bind="viewport.isLessOrEquals('mobile') ? {} : { label: 'Summarize' }"
+            size="xs"
+            color="neutral"
+            variant="link"
+            trailing-icon="i-lucide-arrow-right"
+          />
+        </div>
+      </div>
+    </template>
+
     <ul class="list-disc list-inside">
       <template
         v-for="(commit, index) in group.commits"

app/components/Home/RepoDetails.vue

@@ -3,7 +3,7 @@ const selectedRepo = inject('selectedRepo', shallowRef<GitHubRepo>())
 </script>
 
 <template>
-  <div class="flex flex-col w-full md:h-fit items-start justify-start">
+  <div class="flex flex-col w-full md:h-fit items-start justify-start p-px">
     <UEmpty
       v-if="!selectedRepo"
       icon="i-lucide-folder-git"

app/components/Home/RepoSelect.vue

@@ -7,7 +7,7 @@ const { data: repos, pending: reposLoading } = await useFetch('/api/github/saved
 </script>
 
 <template>
-  <div class="flex flex-col w-full items-center justify-center">
+  <div class="flex flex-col w-full items-center justify-center p-px">
     <!-- @vue-ignore -->
     <USelectMenu
       v-model="selectedRepo"
@@ -19,6 +19,7 @@ const { data: repos, pending: reposLoading } = await useFetch('/api/github/saved
       :search-input="{ icon: 'i-lucide-search' }"
 
       label-key="full_name"
+      placeholder="me/super-repo"
       class="w-full"
       @change="commitsPage = 1"
     />

app/components/Home/ReposList.vue

@@ -7,7 +7,7 @@ const { data: repos, pending: reposLoading } = await useFetch('/api/github/saved
 </script>
 
 <template>
-  <div class="flex flex-col w-full h-2/3 items-start justify-center">
+  <div class="flex flex-col w-full h-2/3 items-start justify-center p-px">
     <!-- @vue-ignore -->
     <UListbox
       v-model="selectedRepo"

app/layouts/default.vue

@@ -9,11 +9,18 @@ const route = useRoute()
 const isLogOutModalOpen = shallowRef<boolean>(false)
 const isLogOutButtonLoading = shallowRef<boolean>(false)
 
+const userInfo = computed(() => {
+  return {
+    label: user.value?.user_metadata?.name,
+    description: user.value?.user_metadata?.user_name
+  }
+})
+
 const items = ref<DropdownMenuItem[][]>([
   [
     {
-      label: `${(user.value && user.value.user_metadata) ? user.value.user_metadata.name : 'no user'}`,
-      description: `${(user.value && user.value.user_metadata) ? user.value.user_metadata.user_name : 'login first'}`,
+      label: userInfo.value.label,
+      description: userInfo.value.description,
       type: 'label'
     }
   ],

app/pages/home.vue

@@ -12,7 +12,7 @@ const toast = useToast()
  */
 const isSidebarOpen = shallowRef<boolean>(false)
 
-const selectedRepos = ref<Tables<'repo'>[]>([])
+const selectedNewRepos = ref<Tables<'repo'>[]>([])
 
 const isAddReposModalOpen = shallowRef<boolean>(false)
 
@@ -41,14 +41,14 @@ async function getRepos() {
 }
 
 function emptyReposChoices() {
-  selectedRepos.value = []
+  selectedNewRepos.value = []
 }
 
 async function addRepos() {
   const { success } = await $fetch('/api/repo/add', {
     method: 'POST',
     body: {
-      repos: selectedRepos.value
+      repos: selectedNewRepos.value
     }
   })
 
@@ -110,8 +110,8 @@ provide('hasNextPage', hasNextPage)
             <div
               class="flex flex-col gap-4"
             >
-              <HomeRepoDetails />
               <HomeRepoSelect />
+              <HomeRepoDetails />
             </div>
 
             <template #close>
@@ -150,15 +150,25 @@ provide('hasNextPage', hasNextPage)
                 @click="isSidebarOpen = !isSidebarOpen"
               />
 
-              <div class="flex items-center gap-2">
-                <UButton
-                  icon="i-lucide-chevron-left"
-                  variant="ghost"
-                  :disabled="!hasPreviousPage || !selectedRepo || selectedRepoLoading"
-                  @click="commitsPage--"
-                >
-                  Previous
-                </UButton>
+              <div class="flex items-center gap-4">
+                <div class="flex items-center gap-1">
+                  <UButton
+                    icon="i-lucide-chevron-first"
+                    variant="ghost"
+                    :disabled="commitsPage < 2 || !selectedRepo || selectedRepoLoading"
+                    @click="commitsPage = 1"
+                  />
+
+                  <UButton
+                    icon="i-lucide-chevron-left"
+                    variant="ghost"
+                    :disabled="!hasPreviousPage || !selectedRepo || selectedRepoLoading"
+                    @click="commitsPage--"
+                  >
+                    Previous
+                  </UButton>
+                </div>
+
                 <UButton
                   icon="i-lucide-chevron-right"
                   variant="ghost"
@@ -174,16 +184,26 @@ provide('hasNextPage', hasNextPage)
 
             <div
               v-if="selectedRepo && !selectedRepoLoading"
-              class="flex items-center justify-end gap-2"
+              class="flex items-center justify-end gap-4"
             >
-              <UButton
-                icon="i-lucide-chevron-left"
-                variant="ghost"
-                :disabled="!hasPreviousPage"
-                @click="commitsPage--"
-              >
-                Previous
-              </UButton>
+              <div class="flex items-center gap-1">
+                <UButton
+                  icon="i-lucide-chevron-first"
+                  variant="ghost"
+                  :disabled="commitsPage < 2 || !selectedRepo || selectedRepoLoading"
+                  @click="commitsPage = 1"
+                />
+
+                <UButton
+                  icon="i-lucide-chevron-left"
+                  variant="ghost"
+                  :disabled="!hasPreviousPage || !selectedRepo || selectedRepoLoading"
+                  @click="commitsPage--"
+                >
+                  Previous
+                </UButton>
+              </div>
+
               <UButton
                 icon="i-lucide-chevron-right"
                 variant="ghost"
@@ -213,7 +233,7 @@ provide('hasNextPage', hasNextPage)
       <template #body>
         <!-- @vue-ignore -->
         <UListbox
-          v-model="selectedRepos"
+          v-model="selectedNewRepos"
 
           :items="repos"
           :loading="reposLoading"
@@ -246,7 +266,7 @@ provide('hasNextPage', hasNextPage)
         <UButton
           label="Confirm"
           icon="i-lucide-check"
-          :disabled="selectedRepos.length <= 0"
+          :disabled="selectedNewRepos.length <= 0"
           @click="addRepos"
         />
       </template>

app/pages/login.vue

@@ -7,12 +7,6 @@ const toast = useToast()
 
 const user = useSupabaseUser()
 
-watch(user, () => {
-  if (user.value) {
-    return navigateTo('/home')
-  }
-}, { immediate: true })
-
 const supabase = useSupabaseClient()
 
 const isLoginButtonLoading = shallowRef<boolean>(false)
@@ -41,6 +35,14 @@ async function signIn() {
     toast.add({ title: 'Error', description: 'Unknown login error', color: 'error' })
   }
 }
+
+watch(user, () => {
+  if (user.value) {
+    isLoginButtonLoading.value = true
+
+    return navigateTo('/home')
+  }
+}, { immediate: true })
 </script>
 
 <template>

app/pages/summary/[owner]/[repo]/[date].vue

@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import type { AccordionItem } from '@nuxt/ui'
+
+const route = useRoute()
+
+const owner = route.params.owner
+const repo = route.params.repo
+const date = route.params.date
+
+const items: AccordionItem[] = [{ label: `${owner}/${repo} | ${date}` }]
+
+const { data: groupedCommitsData } = useNuxtData<{
+  groupedCommits: CommitGroup[]
+  hasPreviousPage: boolean
+  hasNextPage: boolean
+}>('current-commits')
+
+const group
+  = groupedCommitsData.value
+    ? groupedCommitsData.value.groupedCommits.filter(group => group.date == date)[0]
+    : null
+
+const content = ref(``)
+</script>
+
+<template>
+  <div class="flex-1">
+    <UContainer class="flex size-full">
+      <div class="flex flex-col size-full gap-4 py-4">
+        <div class="flex w-full items-center">
+          <UButton
+            to="/home"
+            label="Back"
+            icon="i-lucide-arrow-left"
+            color="neutral"
+            variant="link"
+            size="xs"
+          />
+        </div>
+
+        <div class="flex flex-col md:flex-row size-full gap-8">
+          <div class="flex flex-col w-full md:max-w-1/3 gap-4">
+            <UAccordion
+              v-if="group"
+              :items
+            >
+              <template #content>
+                <ul class="list-disc list-inside text-wrap font-semibold text-muted">
+                  <template
+                    v-for="commit in group.commits"
+                    :key="commit.sha"
+                  >
+                    <li>
+                      {{ commit.message }}
+                    </li>
+                  </template>
+                </ul>
+              </template>
+            </UAccordion>
+            <UButton label="Confirm" />
+          </div>
+
+          <UCard class="size-full">
+            <!-- @vue-ignore -->
+            <UEditor
+              v-model="content"
+              content-type="markdown"
+              :starter-kit="{
+                blockquote: false,
+                headings: {
+                  levels: [1, 2, 3, 4]
+                },
+                dropcursor: {
+                  color: 'var(--ui-primary)',
+                  width: 2
+                },
+                link: {
+                  openOnClick: false
+                }
+              }"
+
+              placeholder="Write here..."
+              class="size-full"
+            />
+          </UCard>
+        </div>
+      </div>
+    </UContainer>
+  </div>
+</template>

nuxt.config.ts

@@ -43,7 +43,7 @@ export default defineNuxtConfig({
     redirectOptions: {
       login: '/login',
       callback: '/confirm',
-      include: ['/home'],
+      include: ['/home', '/summary/**'],
       exclude: ['/']
     }
   }