chore(format): restructure for nuxt4

src/components/HandleFlexStrip.vue → app/components/HandleFlexStrip.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
-  handles: Applicant['handles'];
+  handles?: Applicant['handles'];
 }>();
 
 const handles: Record<string, string> = {};
@@ -9,7 +9,7 @@ const getHandleIcon = (handle: string) => {
   return getAllHandles().find((h) => h.id == handle)?.icon;
 };
 
-props.handles.forEach((h) => {
+props.handles?.forEach((h) => {
   if (!getHandleIcon(h.key)) return; // Only add supported handles;
   handles[h.key] = h.value;
 });
@@ -21,12 +21,12 @@ props.handles.forEach((h) => {
       target="_blank"
       :href="handles[handle]"
       v-for="handle in Object.keys(handles)"
+      v-if="getHandleIcon(handle)"
     >
       <Icon
         size="20"
         class="text-zinc-900 fill-current"
-        :name="getHandleIcon(handle) as string"
-        v-if="getHandleIcon(handle)"
+        :name="getHandleIcon(handle)"
       />
     </a>
   </div>

src/components/ImageCropperWrapper.vue → app/components/ImageCropperWrapper.vue

@@ -19,12 +19,15 @@ withDefaults(
 );
 
 const dropZoneRef = ref<HTMLDivElement>();
-const selectedFile = ref<File | null>(null);
+const selectedFile = ref<File | null | undefined>(null);
 
-function onDrop(files: File[] | FileList | null) {
+function onDrop(_files: File[] | FileList | null) {
+  if (_files == null) return;
+  const files = Array.from(_files) as File[];
   if (files && files.length > 0) {
+    if (files[0] === undefined) return;
     selectedFile.value = files[0];
-    loadImageFromFile(selectedFile.value);
+    loadImageFromFile(files[0]);
   }
 }
 

src/components/Input/Label.vue → app/components/Input/Label.vue

@@ -2,7 +2,7 @@
 import { Label } from 'radix-vue';
 
 defineProps<{
-  id: string;
+  id?: string;
   labelClass?: string;
   error?: string;
   label?: string;

src/components/Input/Step.vue → app/components/Input/Step.vue

@@ -8,7 +8,7 @@ import {
   StepperTitle,
   StepperTrigger,
 } from 'radix-vue';
-import type { Step } from '~/types/general';
+import type { Step } from '~~/shared/types/general';
 
 const props = withDefaults(
   defineProps<{
@@ -32,7 +32,7 @@ if (props.allowManualTrigger) {
 <template>
   <StepperRoot class="flex gap-2 w-full max-w-[32rem]" :model-value="step">
     <StepperItem
-      v-for="item in steps"
+      v-for="item in props.steps"
       :key="item.step"
       class="w-full flex justify-center gap-2 cursor-pointer group data-[disabled]:pointer-events-none relative px-4"
       :step="item.step"
@@ -47,7 +47,7 @@ if (props.allowManualTrigger) {
       </StepperTrigger>
 
       <StepperSeparator
-        v-if="item.step !== steps[steps.length - 1].step"
+        v-if="item.step !== steps[steps.length - 1]?.step"
         class="absolute block top-5 left-[calc(50%+30px)] right-[calc(-50%+20px)] h-0.5 rounded-full group-data-[disabled]:bg-gray-300 group-data-[state=completed]:bg-zinc-500 bg-zinc-400 shrink-0"
       />
 

src/components/Input/Text.vue → app/components/Input/Text.vue

@@ -2,7 +2,7 @@
 import { useVModel } from '@vueuse/core';
 
 const props = defineProps<{
-  id: string;
+  id?: string;
   placeholder: string;
 
   modelValue?: string | null;

src/components/Onboarding/CareerSiteConfig.vue → app/components/Onboarding/CareerSiteConfig.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { careerSiteConfigSchema } from '~/schemas/setting';
+import { careerSiteConfigSchema } from '~~/shared/schemas/setting';
 
 const emits = defineEmits<{
   done: [string];

src/components/PostingCard.vue → app/components/PostingCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { JobPosting } from '~/server/db/schema';
+import type { JobPosting } from '~~/server/db/schema';
 
 defineProps<{
   posting: JobPosting;

src/components/TabbedPane.vue → app/components/TabbedPane.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Tab } from '~/types/general';
+import type { Tab } from '~~/shared/types/general';
 
 defineProps<{
   tabs: Tab[];

src/components/abstract/dropdown/MultiSelect.vue → app/components/abstract/dropdown/MultiSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectableOption } from '~/types/general';
+import type { SelectableOption } from '~~/shared/types/general';
 import { useVModel } from '@vueuse/core';
 
 const props = defineProps<{

src/components/abstract/dropdown/SingleSelect.vue → app/components/abstract/dropdown/SingleSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { SelectableOption } from '~/types/general';
+import type { SelectableOption } from '~~/shared/types/general';
 import { useVModel } from '@vueuse/core';
 
 const props = defineProps<{

src/components/admin/applications/Row.vue → app/components/admin/applications/Row.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
 const props = defineProps<{
-  applicant: Applicant;
+  applicant?: Applicant;
   application: Application;
 }>();
 
-const user = props.applicant.user;
+const user = props.applicant?.user;
 </script>
 
 <template>
   <div
     class="flex bg-white border border-zinc-200 rounded-xl items-center justify-between py-2 px-4"
+    v-if="props.applicant && user"
   >
     <div class="flex">
       <div class="flex items-center">
@@ -44,7 +45,7 @@ const user = props.applicant.user;
         variant="secondary"
         as="a"
         target="_blank"
-        :href="applicant.handles.find((h) => h.key == 'resume')?.value"
+        :href="props.applicant.handles.find((h) => h.key == 'resume')?.value"
       >
         View Resume
       </InputButton>

src/components/admin/dashboard/RecentPostings.vue → app/components/admin/dashboard/RecentPostings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { JobPosting } from '~/server/db/schema';
+import type { JobPosting } from '~~/server/db/schema';
 
 defineProps<{
   postings: JobPosting[];

src/components/admin/dashboard/Stats.vue → app/components/admin/dashboard/Stats.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Stats } from '~/server/api/analytics/stats.get';
+import type { Stats } from '~~/server/api/analytics/stats.get';
 
 const props = defineProps<{
   stats: Stats;

src/components/admin/integration/hooks/Card.vue → app/components/admin/integration/hooks/Card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Hook } from '~/server/db/schema';
+import type { Hook } from '~~/server/db/schema';
 
 const props = defineProps<{
   hook: Hook;

src/components/admin/integration/hooks/EditAction.vue → app/components/admin/integration/hooks/EditAction.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Hook } from '~/server/db/schema';
+import type { Hook } from '~~/server/db/schema';
 defineProps<{
   hook: Hook;
 }>();

src/components/admin/integration/hooks/Form.vue → app/components/admin/integration/hooks/Form.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Hook } from '~/server/db/schema';
+import type { Hook } from '~~/server/db/schema';
 
-import { createHookSchema, updateHookSchema } from '~/schemas/hook';
+import { createHookSchema, updateHookSchema } from '~~/shared/schemas/hook';
 
 const { saveHook, updateHook, isSubmitting } = await useHooks();
 

src/components/admin/postings/Card.vue → app/components/admin/postings/Card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { JobPosting } from '~/server/db/schema';
+import type { JobPosting } from '~~/server/db/schema';
 
 const props = defineProps<{
   posting: JobPosting;

src/components/admin/settings/CareerSite/Frame.vue → app/components/admin/settings/CareerSite/Frame.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { careerSiteConfigSchema } from '~/schemas/setting';
+import { careerSiteConfigSchema } from '~~/shared/schemas/setting';
 
 const emits = defineEmits<{
   saved: [];

src/components/admin/settings/Seo/Frame.vue → app/components/admin/settings/Seo/Frame.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { seoConfigSchema } from '~/schemas/setting';
+import { seoConfigSchema } from '~~/shared/schemas/setting';
 
 const emits = defineEmits<{
   saved: [];

src/components/admin/settings/members/AddAction.vue → app/components/admin/settings/members/AddAction.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { User } from '~/server/db/schema';
+import type { User } from '~~/server/db/schema';
 import { watchDebounced } from '@vueuse/core';
 
 const { addMember, isSubmitting } = await useMembers();

src/components/admin/settings/members/Card.vue → app/components/admin/settings/members/Card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { User } from '~/server/db/schema';
+import type { User } from '~~/server/db/schema';
 
 const props = defineProps<{
   member: User;

src/composables/api.ts → app/composables/api.ts

@@ -1,5 +1,5 @@
-import type { GeneralSettings } from '~/schemas/setting';
-import type { JobPosting } from '~/server/db/schema';
+import type { GeneralSettings } from '~~/shared/schemas/setting';
+import type { JobPosting } from '~~/server/db/schema';
 
 export function useGeneralSettings(config?: string) {
   return useFetch<GeneralSettings>('/api/settings/general', {

src/composables/applications.ts → app/composables/applications.ts

@@ -1,4 +1,4 @@
-import { type User, type UserHandle } from '~/server/db/schema';
+import { type User, type UserHandle } from '~~/server/db/schema';
 
 export type Applicant = { user: User; handles: UserHandle[] };
 export type Applicants = Record<string, Applicant>; // applicantId <> applicant

src/composables/auth.ts → app/composables/auth.ts

@@ -1,4 +1,4 @@
-import type { Session } from '~/types/profile-types';
+import type { Session } from '~~/shared/types/profile-types';
 
 export function useAuth() {
   const user: Ref<Session | null> = useState('oauth_user', () => null);

src/composables/hooks.ts → app/composables/hooks.ts

@@ -1,6 +1,9 @@
 import type { z } from 'zod';
-import type { createHookSchema, updateHookSchema } from '~/schemas/hook';
-import type { Hook } from '~/server/db/schema';
+import type {
+  createHookSchema,
+  updateHookSchema,
+} from '~~/shared/schemas/hook';
+import type { Hook } from '~~/server/db/schema';
 
 type SaveOrUpdateInput =
   | z.infer<typeof updateHookSchema>

src/composables/members.ts → app/composables/members.ts

@@ -1,6 +1,9 @@
 import type { z } from 'zod';
-import type { addMemberSchema, removeMemberSchema } from '~/schemas/setting';
-import type { User } from '~/server/db/schema';
+import type {
+  addMemberSchema,
+  removeMemberSchema,
+} from '~~/shared/schemas/setting';
+import type { User } from '~~/server/db/schema';
 
 type AddOrRemoveMember =
   | z.infer<typeof addMemberSchema>

src/composables/onboarding.ts → app/composables/onboarding.ts

@@ -1,4 +1,4 @@
-import type { Step } from '~/types/general';
+import type { Step } from '~~/shared/types/general';
 
 const steps: Step[] = [
   {

src/composables/public-settings.ts → app/composables/public-settings.ts

@@ -1,4 +1,4 @@
-import type { GeneralSettings } from '~/schemas/setting';
+import type { GeneralSettings } from '~~/shared/schemas/setting';
 
 export function usePublicGeneralSettings() {
   const generalSettings = useState<GeneralSettings>('public-general-settings');

src/composables/tabs.ts → app/composables/tabs.ts

@@ -1,4 +1,4 @@
-import type { Tab } from '~/types/general';
+import type { Tab } from '~~/shared/types/general';
 
 const integrationTabs = [
   {
@@ -58,7 +58,8 @@ export function useTabGroup(tabGroup: TabGroup, defaultIndex: number = 0) {
 
   const route = useRoute();
   const activeTab = computed<Tab>(
-    () => tabs.find((t) => t.id == route.query.tab) || tabs[defaultIndex]
+    () =>
+      (tabs.find((t) => t.id == route.query.tab) || tabs[defaultIndex]) as Tab
   );
 
   return { tabs, activeTab };

src/pages/admin/applications.vue → app/pages/admin/applications.vue

@@ -40,7 +40,11 @@ watchEffect(() => {
 </script>
 
 <template>
-  <AdminApplicationsHeader :postings v-model="selectedPostings" />
+  <AdminApplicationsHeader
+    :postings
+    v-model="selectedPostings"
+    v-if="postings"
+  />
   <section class="p-4" v-if="selectedPostings.length > 0">
     <section class="mb-6" v-for="posting in selectedPostings" :key="posting">
       <div class="text-md" v-if="applications[posting]">

src/pages/admin/postings/edit.vue → app/pages/admin/postings/edit.vue

@@ -2,8 +2,8 @@
 import {
   createJobPostingSchema,
   updateJobPostingSchema,
-} from '~/schemas/posting';
-import type { JobPosting } from '~/server/db/schema';
+} from '~~/shared/schemas/posting';
+import type { JobPosting } from '~~/server/db/schema';
 
 definePageMeta({
   layout: 'admin',

src/pages/admin/postings/index.vue → app/pages/admin/postings/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { JobPosting } from '~/server/db/schema';
+import type { JobPosting } from '~~/server/db/schema';
 
 definePageMeta({
   layout: 'admin',

src/plugins/auth.ts → app/plugins/auth.ts

@@ -1,4 +1,4 @@
-import type { Session } from '~/types/profile-types';
+import type { Session } from '~~/shared/types/profile-types';
 
 export default defineNuxtPlugin(async () => {
   const user: Ref<Session | null> = useState('oauth_user', () => null);

src/plugins/setup-state.ts → app/plugins/setup-state.ts

@@ -1,4 +1,4 @@
-import type { GeneralSettings } from '~/schemas/setting';
+import type { GeneralSettings } from '~~/shared/schemas/setting';
 
 export default defineNuxtPlugin(async () => {
   const remoteAssetBase = useState('remote-asset-base-url', () => '');

src/utils/handles.ts → app/utils/handles.ts

@@ -1,4 +1,4 @@
-import type { Handle } from '~/types/handle-types';
+import type { Handle } from '~~/shared/types/handle-types';
 
 export const getAllHandles = () => {
   return handles;

src/utils/oauth-support.ts → app/utils/oauth-support.ts

@@ -24,7 +24,7 @@ function base64urlencode(a: any) {
   const bytes = new Uint8Array(a);
   const len = bytes.byteLength;
   for (let i = 0; i < len; i++) {
-    str += String.fromCharCode(bytes[i]);
+    str += String.fromCharCode(bytes[i] as number);
   }
   return btoa(str).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
 }

nuxt.config.ts

@@ -1,11 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  future: {
+    compatibilityVersion: 4,
+  },
   nitro: {
     experimental: {
       tasks: true,
     },
   },
-  srcDir: 'src/',
   routeRules: {
     '/admin/*': { ssr: false },
   },

src/server/api/analytics/job.get.ts → server/api/analytics/job.get.ts

@@ -1,6 +1,6 @@
 import { eq } from 'drizzle-orm';
-import { jobPostingsTable } from '~/server/db/schema';
-import authenticateAdminRequest from '~/server/utils/admin';
+import { jobPostingsTable } from '~~/server/db/schema';
+import authenticateAdminRequest from '~~/server/utils/admin';
 
 export default defineEventHandler(async (event) => {
   await authenticateAdminRequest(event);