chore: fix compile errors

Author: JoeyMckenzie

.githooks/pre-push

@@ -6,7 +6,8 @@
         "build:ssr": "vue-tsc && vite build && vite build --ssr",
         "dev": "vite",
         "lint": "eslint .",
-        "lint:fix": "eslint . --fix"
+        "lint:fix": "eslint . --fix",
+        "types": "vue-tsc --noEmit"
     },
     "dependencies": {
         "@inertiajs/vue3": "^2.0.0",

package.json

@@ -19,7 +19,6 @@ import {
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import UserMenuContent from "@/components/UserMenuContent.vue";
-import { getInitials } from "@/composables/useInitials";
 
 interface Props {
     breadcrumbs?: BreadcrumbItem[];
@@ -116,10 +115,14 @@ const rightNavItems: NavItem[] = [
                 <div class="hidden h-full lg:flex lg:flex-1">
                     <NavigationMenu class="ml-10 flex h-full items-stretch">
                         <NavigationMenuList class="flex h-full items-stretch space-x-2">
-                            <NavigationMenuItem v-for="(item, index) in mainNavItems" :key="index" class="relative flex h-full items-center">
+                            <NavigationMenuItem
+                                v-for="(item, index) in mainNavItems" :key="index"
+                                class="relative flex h-full items-center"
+                            >
                                 <Link :href="item.href">
                                     <NavigationMenuLink
-                                        class="h-9 cursor-pointer px-3" :class="[navigationMenuTriggerStyle(), activeItemStyles(item.href)]"
+                                        :class="[navigationMenuTriggerStyle(), activeItemStyles(item.href)]"
+                                        class="h-9 cursor-pointer px-3"
                                     >
                                         <component :is="item.icon" v-if="item.icon" class="mr-2 h-4 w-4" />
                                         {{ item.title }}
@@ -145,10 +148,16 @@ const rightNavItems: NavItem[] = [
                                 <TooltipProvider :delay-duration="0">
                                     <Tooltip>
                                         <TooltipTrigger>
-                                            <Button as-child class="group h-9 w-9 cursor-pointer" size="icon" variant="ghost">
+                                            <Button
+                                                as-child class="group h-9 w-9 cursor-pointer" size="icon"
+                                                variant="ghost"
+                                            >
                                                 <a :href="item.href" rel="noopener noreferrer" target="_blank">
                                                     <span class="sr-only">{{ item.title }}</span>
-                                                    <component :is="item.icon" class="size-5 opacity-80 group-hover:opacity-100" />
+                                                    <component
+                                                        :is="item.icon"
+                                                        class="size-5 opacity-80 group-hover:opacity-100"
+                                                    />
                                                 </a>
                                             </Button>
                                         </TooltipTrigger>
@@ -161,17 +170,22 @@ const rightNavItems: NavItem[] = [
                         </div>
                     </div>
 
-                    <DropdownMenu>
+                    <DropdownMenu v-if="auth.user">
                         <DropdownMenuTrigger :as-child="true">
                             <Button
                                 class="focus-within:ring-primary relative size-10 w-auto rounded-full p-1 focus-within:ring-2"
                                 size="icon"
                                 variant="ghost"
                             >
                                 <Avatar class="size-8 overflow-hidden rounded-full">
-                                    <AvatarImage v-if="auth.user.avatar" :alt="auth.user.name" :src="auth.user.avatar" />
-                                    <AvatarFallback class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white">
-                                        {{ getInitials(auth.user?.name) }}
+                                    <AvatarImage
+                                        v-if="auth.user?.profileImage" :alt="auth.user.fullName"
+                                        :src="auth.user.profileImage"
+                                    />
+                                    <AvatarFallback
+                                        class="rounded-lg bg-neutral-200 font-semibold text-black dark:bg-neutral-700 dark:text-white"
+                                    >
+                                        {{ auth.user?.initials }}
                                     </AvatarFallback>
                                 </Avatar>
                             </Button>

resources/js/components/AppHeader.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import type { SharedData, User } from "@/types";
+<script lang="ts" setup>
+import type { SharedData } from "@/types";
 import { usePage } from "@inertiajs/vue3";
 import { ChevronsUpDown } from "lucide-vue-next";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
@@ -8,7 +8,7 @@ import UserInfo from "@/components/UserInfo.vue";
 import UserMenuContent from "./UserMenuContent.vue";
 
 const page = usePage<SharedData>();
-const user = page.props.auth.user as User;
+const user = page.props.auth.user as App.Data.UserData;
 const { isMobile, state } = useSidebar();
 </script>
 
@@ -17,16 +17,19 @@ const { isMobile, state } = useSidebar();
         <SidebarMenuItem>
             <DropdownMenu>
                 <DropdownMenuTrigger as-child>
-                    <SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+                    <SidebarMenuButton
+                        class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+                        size="lg"
+                    >
                         <UserInfo :user="user" />
                         <ChevronsUpDown class="ml-auto size-4" />
                     </SidebarMenuButton>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
-                    class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                     :side="isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'"
-                    align="end"
                     :side-offset="4"
+                    align="end"
+                    class="w-(--reka-dropdown-menu-trigger-width) min-w-56 rounded-lg"
                 >
                     <UserMenuContent :user="user" />
                 </DropdownMenuContent>

resources/js/components/NavUser.vue

@@ -1,34 +1,30 @@
 <script lang="ts" setup>
-import type { User } from "@/types";
 import { computed } from "vue";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { useInitials } from "@/composables/useInitials";
 
 interface Props {
-    user: User;
+    user: App.Data.UserData;
     showEmail?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     showEmail: false,
 });
 
-const { getInitials } = useInitials();
-
 // Compute whether we should show the avatar image
-const showAvatar = computed(() => props.user.avatar && props.user.avatar !== "");
+const showAvatar = computed(() => props.user.profileImage && props.user.profileImage !== "");
 </script>
 
 <template>
     <Avatar class="h-8 w-8 overflow-hidden rounded-lg">
-        <AvatarImage v-if="showAvatar" :alt="user.name" :src="user.avatar!" />
+        <AvatarImage v-if="showAvatar" :alt="user.fullName" :src="user.profileImage!" />
         <AvatarFallback class="rounded-lg text-black dark:text-white">
-            {{ getInitials(user.name) }}
+            {{ user.initials }}
         </AvatarFallback>
     </Avatar>
 
     <div class="grid flex-1 text-left text-sm leading-tight">
-        <span class="truncate font-medium">{{ user.name }}</span>
+        <span class="truncate font-medium">{{ user.fullName }}</span>
         <span v-if="showEmail" class="text-muted-foreground truncate text-xs">{{ user.email }}</span>
     </div>
 </template>

resources/js/components/UserInfo.vue

@@ -1,12 +1,16 @@
-<script setup lang="ts">
-import type { User } from "@/types";
+<script lang="ts" setup>
 import { Link, router } from "@inertiajs/vue3";
 import { LogOut, Settings } from "lucide-vue-next";
-import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
+import {
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
 import UserInfo from "@/components/UserInfo.vue";
 
 interface Props {
-    user: User;
+    user: App.Data.UserData;
 }
 
 defineProps<Props>();
@@ -19,21 +23,21 @@ function handleLogout() {
 <template>
     <DropdownMenuLabel class="p-0 font-normal">
         <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-            <UserInfo :user="user" :show-email="true" />
+            <UserInfo :show-email="true" :user="user" />
         </div>
     </DropdownMenuLabel>
     <DropdownMenuSeparator />
     <DropdownMenuGroup>
         <DropdownMenuItem :as-child="true">
-            <Link class="block w-full" :href="route('profile.edit')" prefetch as="button">
+            <Link :href="route('profile.edit')" as="button" class="block w-full" prefetch>
                 <Settings class="mr-2 h-4 w-4" />
                 Settings
             </Link>
         </DropdownMenuItem>
     </DropdownMenuGroup>
     <DropdownMenuSeparator />
     <DropdownMenuItem :as-child="true">
-        <Link class="block w-full" method="post" :href="route('logout')" as="button" @click="handleLogout">
+        <Link :href="route('logout')" as="button" class="block w-full" method="post" @click="handleLogout">
             <LogOut class="mr-2 h-4 w-4" />
             Log out
         </Link>

resources/js/components/UserMenuContent.vue

@@ -1,5 +1,5 @@
-<script setup lang="ts">
-import type { BreadcrumbItem, SharedData, User } from "@/types";
+<script lang="ts" setup>
+import type { BreadcrumbItem, SharedData } from "@/types";
 
 import { Head, Link, useForm, usePage } from "@inertiajs/vue3";
 import DeleteUser from "@/components/DeleteUser.vue";
@@ -26,10 +26,10 @@ const breadcrumbs: BreadcrumbItem[] = [
 ];
 
 const page = usePage<SharedData>();
-const user = page.props.auth.user as User;
+const user = page.props.auth.user as App.Data.UserData;
 
 const form = useForm({
-    name: user.name,
+    name: user.fullName,
     email: user.email,
 });
 
@@ -46,37 +46,41 @@ function submit() {
 
         <SettingsLayout>
             <div class="flex flex-col space-y-6">
-                <HeadingSmall title="Profile information" description="Update your name and email address" />
+                <HeadingSmall description="Update your name and email address" title="Profile information" />
 
                 <form class="space-y-6" @submit.prevent="submit">
                     <div class="grid gap-2">
                         <Label for="name">Name</Label>
-                        <Input id="name" v-model="form.name" class="mt-1 block w-full" required autocomplete="name" placeholder="Full name" />
-                        <InputError class="mt-2" :message="form.errors.name" />
+                        <Input
+                            id="name" v-model="form.name" autocomplete="name" class="mt-1 block w-full"
+                            placeholder="Full name"
+                            required
+                        />
+                        <InputError :message="form.errors.name" class="mt-2" />
                     </div>
 
                     <div class="grid gap-2">
                         <Label for="email">Email address</Label>
                         <Input
                             id="email"
                             v-model="form.email"
-                            type="email"
-                            class="mt-1 block w-full"
-                            required
                             autocomplete="username"
+                            class="mt-1 block w-full"
                             placeholder="Email address"
+                            required
+                            type="email"
                         />
-                        <InputError class="mt-2" :message="form.errors.email" />
+                        <InputError :message="form.errors.email" class="mt-2" />
                     </div>
 
-                    <div v-if="mustVerifyEmail && !user.email_verified_at">
+                    <div v-if="mustVerifyEmail && !user.emailVerifiedAt">
                         <p class="text-muted-foreground -mt-4 text-sm">
                             Your email address is unverified.
                             <Link
                                 :href="route('verification.send')"
-                                method="post"
                                 as="button"
                                 class="text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500"
+                                method="post"
                             >
                                 Click here to resend the verification email.
                             </Link>

resources/js/composables/useAppearance.ts

@@ -3,7 +3,7 @@ import type { LucideIcon } from "lucide-vue-next";
 import type { Config } from "ziggy-js";
 
 export interface Auth {
-    user: User;
+    user?: App.Data.UserData | null;
 }
 
 export interface BreadcrumbItem {
@@ -26,14 +26,4 @@ export interface SharedData extends PageProps {
     sidebarOpen: boolean;
 }
 
-export interface User {
-    id: number;
-    name: string;
-    email: string;
-    avatar?: string;
-    email_verified_at: string | null;
-    created_at: string;
-    updated_at: string;
-}
-
 export type BreadcrumbItemType = BreadcrumbItem;