Adding some cleanup and tasks to improve

Author: tnylea

resources/js/components/AppSidebar.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { Github, BookOpenText } from 'lucide-vue-next';
+import { BookOpenText, FolderGit2, LayoutDashboard } from 'lucide-vue-next';
 import NavMain from '@/components/NavMain.vue';
 import NavFooter from '@/components/NavFooter.vue';
 import NavUser from '@/components/NavUser.vue';
+import { type NavItemType } from '@/types'
 import {
     Sidebar,
     SidebarContent,
@@ -14,17 +15,19 @@ import {
 } from '@/components/ui/sidebar';
 import ApplicationLogo from './ApplicationLogo.vue';
 
-interface NavItem {
-    title: string;
-    url: string;
-    icon: any; // Using any for now since Vue's type system handles components differently
-}
+const mainNavItems: NavItemType[] = [
+    {
+        title: "Dashboard",
+        url: "/dashboard",
+        icon: LayoutDashboard,
+    },
+]
 
-const footerNavItems: NavItem[] = [
+const footerNavItems: NavItemType[] = [
     {
         title: 'Github Repo',
         url: 'https://github.com/laravel/vue-starter-kit',
-        icon: Github,
+        icon: FolderGit2,
     },
     {
         title: 'Documentation',
@@ -55,7 +58,7 @@ const footerNavItems: NavItem[] = [
         </SidebarHeader>
 
         <SidebarContent>
-            <NavMain />
+            <NavMain :items="mainNavItems" />
         </SidebarContent>
 
         <SidebarFooter>

resources/js/components/NavMain.vue

@@ -1,24 +1,19 @@
 <script setup lang="ts">
-import { LayoutDashboard, type LucideIcon } from 'lucide-vue-next';
-import { Link } from '@inertiajs/vue3';
+import { Link, usePage } from '@inertiajs/vue3';
+import { type NavItemType } from '@/types'
 import {
     SidebarGroup,
     SidebarMenu,
-    SidebarMenuButton,
     SidebarMenuItem,
+    SidebarMenuButton,
 } from '@/components/ui/sidebar';
 
-interface NavItem {
-    title: string;
-    url: string;
-    icon: any; // Using any for now since Vue's type system handles components differently
-    isActive?: boolean;
-}
-
 interface Props {
-    items?: NavItem[];
+    items?: NavItemType[];
 }
 
+const page = usePage();
+
 withDefaults(defineProps<Props>(), {
     items: () => [],
 });
@@ -27,16 +22,8 @@ withDefaults(defineProps<Props>(), {
 <template>
     <SidebarGroup>
         <SidebarMenu>
-            <SidebarMenuItem>
-                <SidebarMenuButton as-child :is-active="true">
-                    <Link :href="route('dashboard')">
-                        <LayoutDashboard />
-                        <span>Dashboard</span>
-                    </Link>
-                </SidebarMenuButton>
-            </SidebarMenuItem>
             <SidebarMenuItem v-for="item in items" :key="item.title">
-                <SidebarMenuButton as-child :is-active="item.isActive">
+                <SidebarMenuButton as-child :is-active="item.url === page.url">
                     <Link :href="item.url">
                         <component :is="item.icon" />
                         <span>{{ item.title }}</span>

resources/js/components/settings/Heading.vue

@@ -12,7 +12,7 @@ defineProps<Props>()
 <template>
   <div>
     <header>
-      <h3 class="text-lg font-medium">{{ title }}</h3>
+      <h3 class="text-lg font-medium mb-1">{{ title }}</h3>
       <p v-if="description" class="text-sm text-muted-foreground">
         {{ description }}
       </p>

resources/js/pages/auth/ForgotPassword.vue

@@ -39,6 +39,7 @@ const submit = () => {
                         id="email"
                         type="email"
                         name="email"
+                        autocomplete="off"
                         v-model="form.email"
                         autofocus
                     />

resources/js/pages/auth/Login.vue

@@ -46,6 +46,8 @@ const submit = () => {
                         type="email"
                         required
                         autofocus
+                        tabindex="1"
+                        autocomplete="email"
                         v-model="form.email"
                     />
                     <InputError :message="form.errors.email" />
@@ -58,6 +60,7 @@ const submit = () => {
                             v-if="canResetPassword"
                             :href="route('password.request')"
                             class="text-sm underline-offset-4 hover:underline"
+                            tabindex="5"
                         >
                             Forgot your password?
                         </Link>
@@ -66,14 +69,17 @@ const submit = () => {
                         id="password"
                         type="password"
                         required
+                        tabindex="2"
+                        autocomplete="current-password"
                         v-model="form.password"
                     />
                     <InputError :message="form.errors.password" />
                 </div>
 
                 <Button 
                     type="submit" 
-                    class="w-full" 
+                    class="w-full"
+                    tabindex="3"
                     :disabled="form.processing"
                 >
                     <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
@@ -88,6 +94,7 @@ const submit = () => {
                 <Link 
                     :href="route('register')" 
                     class="underline underline-offset-4"
+                    tabindex="4"
                 >
                     Sign up
                 </Link>

resources/js/pages/auth/Register.vue

@@ -38,6 +38,8 @@ const submit = () => {
                         type="text"
                         required
                         autofocus
+                        tabindex="1"
+                        autocomplete="name"
                         v-model="form.name"
                     />
                     <InputError :message="form.errors.name" />
@@ -49,6 +51,8 @@ const submit = () => {
                         id="email"
                         type="email"
                         required
+                        tabindex="2"
+                        autocomplete="email"
                         v-model="form.email"
                     />
                     <InputError :message="form.errors.email" />
@@ -60,6 +64,8 @@ const submit = () => {
                         id="password"
                         type="password"
                         required
+                        tabindex="3"
+                        autocomplete="new-password"
                         v-model="form.password"
                     />
                     <InputError :message="form.errors.password" />
@@ -71,14 +77,17 @@ const submit = () => {
                         id="password_confirmation"
                         type="password"
                         required
+                        tabindex="4"
+                        autocomplete="new-password"
                         v-model="form.password_confirmation"
                     />
                     <InputError :message="form.errors.password_confirmation" />
                 </div>
 
                 <Button 
                     type="submit" 
-                    class="w-full" 
+                    class="w-full"
+                    tabindex="5"
                     :disabled="form.processing"
                 >
                     <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
@@ -93,6 +102,7 @@ const submit = () => {
                 <Link 
                     :href="route('login')" 
                     class="underline underline-offset-4"
+                    tabindex="6"
                 >
                     Log in
                 </Link>

resources/js/pages/auth/ResetPassword.vue

@@ -45,9 +45,9 @@ const submit = () => {
                         id="email"
                         type="email"
                         name="email"
+                        autocomplete="email"
                         v-model="form.email"
                         class="mt-1 block w-full"
-                        autocomplete="username"
                         readonly
                     />
                     <InputError :message="form.errors.email" class="mt-2" />
@@ -59,9 +59,9 @@ const submit = () => {
                         id="password"
                         type="password"
                         name="password"
+                        autocomplete="new-password"
                         v-model="form.password"
                         class="mt-1 block w-full"
-                        autocomplete="new-password"
                         autofocus
                     />
                     <InputError :message="form.errors.password" class="mt-2" />
@@ -75,9 +75,9 @@ const submit = () => {
                         id="password_confirmation"
                         type="password"
                         name="password_confirmation"
+                        autocomplete="new-password"
                         v-model="form.password_confirmation"
                         class="mt-1 block w-full"
-                        autocomplete="new-password"
                     />
                     <InputError :message="form.errors.password_confirmation" class="mt-2" />
                 </div>