breadcrumb

src/components/CommentsList.vue

@@ -155,12 +155,13 @@ function onEnter(e: KeyboardEvent) {
                 :image="item.comment.author?.image ?? undefined"
                 :text="initials(item.comment)"
                 color="primary"
-                size="32"
+                rounded="circle"
+                density="compact"
                 border
               />
             </div>
 
-            <v-sheet class="chat__bubble px-4 py-2">
+            <v-sheet border :color="item.own ? 'primary-darken-1' : 'surface-light'" class="chat__bubble px-4 py-2">
               <div v-if="item.showHeader && !item.own" class="font-weight-medium text-body-small text-primary">
                 {{ authorName(item.comment) }}
               </div>
@@ -168,7 +169,7 @@ function onEnter(e: KeyboardEvent) {
               <div v-if="item.comment.deletedAt" class="text-medium-emphasis font-italic">Comment deleted</div>
               <div v-else class="chat__content">{{ item.comment.content }}</div>
 
-              <div class="chat__meta text-medium-emphasis">
+              <div class="chat__meta">
                 <span v-if="item.comment.editedAt && !item.comment.deletedAt">edited · </span>{{ item.time }}
               </div>
             </v-sheet>
@@ -245,7 +246,7 @@ function onEnter(e: KeyboardEvent) {
     margin: 12px 0 4px;
     padding: 2px 10px;
     border-radius: 999px;
-    background: rgba(var(--v-theme-on-surface), 0.06);
+    background: rgba(var(--v-theme-on-surface), 0.1);
   }
 
   &__row {
@@ -272,11 +273,6 @@ function onEnter(e: KeyboardEvent) {
   &__bubble {
     max-width: min(75%, 640px);
     min-width: 0;
-    background: rgba(var(--v-theme-on-surface), 0.06);
-
-    .chat__row--own & {
-      background: rgba(var(--v-theme-primary), 0.35);
-    }
   }
 
   &__content {

src/composables/useBreadcrumbs.ts

@@ -16,19 +16,22 @@ export function useBreadcrumbs() {
   const router = useRouter()
 
   const breadcrumbs = computed<Breadcrumb[]>(() => {
-    const matched = route.matched.filter((record) => record.meta.breadcrumb)
+    const matched = route.matched.filter((record) => {
+      return record.meta.breadcrumb
+    })
 
-    return matched.map((record, index) => {
+    const paths = matched.map((record, index): Breadcrumb => {
       const { breadcrumb } = record.meta
       const title = typeof breadcrumb === 'function' ? breadcrumb(route) : (breadcrumb as string)
       const isLast = index === matched.length - 1
-      const to =
+      const to = !isLast && record.name ? router.resolve({ name: record.name, params: route.params }).path : undefined
-        !isLast && record.name
-          ? router.resolve({ name: record.name, params: route.params }).path
-          : undefined
 
       return { title, to, disabled: isLast }
     })
+
+    const value: Breadcrumb[] = []
+    value.push({ title: 'Home', to: '/', disabled: paths.length === 0 })
+    return value.concat(paths)
   })
 
   return { breadcrumbs }

src/layouts/DefaultLayout.vue

@@ -109,7 +109,7 @@ const fluid = computed(() => {
           <app-breadcrumbs />
         </div>
         <div class="layout-content">
-          <slot></slot>
+          <slot />
         </div>
       </v-container>
     </v-main>