defers star loading

app/Data/DashboardData.php

@@ -5,19 +5,24 @@
 namespace App\Data;
 
 use App\Models\User;
+use Hybridly\Support\Deferred;
 use Illuminate\Support\Collection;
 use Spatie\LaravelData\Attributes\MapOutputName;
 use Spatie\LaravelData\Data;
 use Spatie\LaravelData\Mappers\CamelCaseMapper;
+use Spatie\TypeScriptTransformer\Attributes\LiteralTypeScriptType;
+
+use function Hybridly\deferred;
 
 #[MapOutputName(CamelCaseMapper::class)]
 class DashboardData extends Data
 {
     public function __construct(
         /** @var Collection<int, TagData> */
         public Collection $tags,
+        #[LiteralTypeScriptType('Array<App.Data.StarData>')]
         /** @var Collection<int, StarData> */
-        public Collection $stars,
+        public Deferred $stars,
         /** @var Collection<int, SmartFilterData> */
         public Collection $smart_filters,
     ) {
@@ -26,9 +31,9 @@ public function __construct(
     public static function fromModel(User $user): self
     {
         return new self(
-            TagData::collect($user->tags()->withStarCount()->get()),
-            StarData::collect($user->stars()->with('tags')->get()),
-            SmartFilterData::collect($user->smartFilters),
+            tags: TagData::collect($user->tags()->withStarCount()->get()),
+            stars: deferred(fn () => StarData::collect($user->stars()->with('tags')->get())),
+            smart_filters: SmartFilterData::collect($user->smartFilters),
         );
     }
 }

app/Http/Controllers/UserSettingsController.php

@@ -4,7 +4,7 @@
 
 namespace App\Http\Controllers;
 
-use App\Data\UpdateUserSettingsRequest;
+use App\Requests\UpdateUserSettingsRequest;
 
 class UserSettingsController extends Controller
 {

app/Data/UpdateUserSettingsRequest.php → app/Requests/UpdateUserSettingsRequest.php

@@ -2,7 +2,7 @@
 
 declare(strict_types=1);
 
-namespace App\Data;
+namespace App\Requests;
 
 use App\Models\User;
 use Spatie\LaravelData\Attributes\Validation\In;

package.json

@@ -32,7 +32,7 @@
     "nanoid": "^3.1.30",
     "pinia": "^2.0.29",
     "sortablejs": "^1.15.0",
-    "sortablejs-vue3": "^1.2.2",
+    "sortablejs-vue3": "^1.2.11",
     "tiptap-markdown": "^0.8.9",
     "vue": "^3.3.4",
     "vue-confetti-explosion": "^1.0.2",

resources/components/shared/dialogs/SettingsDialog/SettingsDialog.vue

@@ -9,7 +9,7 @@ import { useSettingsDialog } from '@/composables/useSettingsDialog'
 import { useUserStore } from '@/store/useUserStore'
 import { SettingsTab } from '@/types'
 import { DialogTitle } from '@headlessui/vue'
-import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/solid'
+import { CheckCircleIcon } from '@heroicons/vue/24/solid'
 import { router } from 'hybridly'
 import { computed, nextTick, ref } from 'vue'
 import ConfettiExplosion from 'vue-confetti-explosion'
@@ -63,7 +63,8 @@ const deleteUser = async () => {
   }
 }
 
-const isSponsor = ref(false)
+const isSponsor = ref(user.value?.isSponsor ?? false)
+
 const checkSponsorshipStatus = () => {
   isSponsor.value = true
 }

resources/components/sidebar/Sidebar.vue

@@ -5,18 +5,13 @@ import SidebarSmartFilter from '@/components/sidebar/SidebarSmartFilter.vue'
 import SidebarTag from '@/components/sidebar/SidebarTag.vue'
 import SortTagsMenu from '@/components/sidebar/SortTagsMenu.vue'
 import { useAuth } from '@/composables/use-auth'
-import { ToastType, useGlobalToast } from '@/composables/useGlobalToast'
 import { useSmartFilterDialog } from '@/composables/useSmartFilterDialog'
 import { useSponsorshipDialog } from '@/composables/useSponsorshipDialog'
-import { SPONSORSHIP_REQUIRED_ERROR } from '@/constants'
 import { useSmartFiltersStore } from '@/store/useSmartFiltersStore'
 import { useStarsFilterStore } from '@/store/useStarsFilterStore'
 import { useStarsStore } from '@/store/useStarsStore'
 import { useTagsStore } from '@/store/useTagsStore'
-import { Ability, Errors, StarDragDataTransferData } from '@/types'
-import { getNavigationResponseErrors } from '@/utils'
-// import { Errors } from '@inertiajs/core'
-import { ArrowPathIcon, InboxIcon, PlusCircleIcon, StarIcon } from '@heroicons/vue/24/outline'
+import { Ability, StarDragDataTransferData } from '@/types'
 import { router } from 'hybridly'
 import { Sortable } from 'sortablejs-vue3'
 import { computed, nextTick, reactive, ref } from 'vue'
@@ -98,7 +93,7 @@ const doShowSmartFilterDialog = () => {
 const toggleSidebarGroupCollapsedState = async (key: CollapsibleSidebarSettingsKey) => {
   sidebarGroupCollapsedState[key] = !sidebarGroupCollapsedState[key]
 
-  const data: App.Data.UpdateUserSettingsRequest = {
+  const data: App.Requests.UpdateUserSettingsRequest = {
     enabled: sidebarGroupCollapsedState[key],
     key,
   }

resources/components/stars/StarredRepo.vue

@@ -4,7 +4,6 @@ import { useAuth } from '@/composables/use-auth'
 import { useStarsStore } from '@/store/useStarsStore'
 import { useTagsStore } from '@/store/useTagsStore'
 import { GitHubRepo, GitHubRepoNode, StarMetaInput, TagEditorTag } from '@/types'
-// import { GlobeAmericasIcon as GlobeIcon, ShareIcon, StarIcon } from '@heroicons/vue/16/solid'
 import pick from 'lodash/pick'
 import { computed, ref } from 'vue'
 
@@ -220,7 +219,6 @@ const onDragEnd = () => {
           />
         </svg>
 
-        <!-- <span class="group-hover/repo-link:underline ml-0.5 text-sm font-medium">Visit</span> -->
         <span class="sr-only">Visit</span>
       </a>
     </div>

resources/views/dashboard.vue

@@ -30,11 +30,7 @@ import { useStarsStore } from '@/store/useStarsStore'
 import { useTagsStore } from '@/store/useTagsStore'
 import { useUserStore } from '@/store/useUserStore'
 import { GitHubRepo } from '@/types'
-import {
-  ArrowLeftCircleIcon,
-  XCircleIcon as CloseIcon,
-  Bars3CenterLeftIcon as MenuIcon,
-} from '@heroicons/vue/24/outline'
+import { ArrowLeftCircleIcon, Bars3CenterLeftIcon as MenuIcon } from '@heroicons/vue/24/outline'
 import { tryOnMounted } from '@vueuse/core'
 import localForage from 'localforage'
 import { computed, nextTick, ref, watch } from 'vue'