feat(settings)!: settings now config + merged with public settings

app/components/SiteHeader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const site = usePublicCareerSiteSettings();
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
 
-const logoURL = useRemoteAsset(site.value.logo).url;
+const logoURL = useRemoteAsset(careerSiteConfig.value.logo).url;
 </script>
 
 <template>
@@ -12,31 +12,33 @@ const logoURL = useRemoteAsset(site.value.logo).url;
       <img
         class="w-20 rounded-2xl border border-zinc-600"
         :src="logoURL"
-        :alt="`${site.name}'s Avatar`"
+        :alt="`${careerSiteConfig.name}'s Avatar`"
       />
     </div>
     <div class="p-1 flex flex-col">
-      <span class="font-bold font-noto text-2xl">{{ site.name }}</span>
-      <span class="text-lg font-zinc-600 font-lato text-zinc-600">{{
-        site.bio
-      }}</span>
+      <span class="font-bold font-noto text-2xl">
+        {{ careerSiteConfig.name }}
+      </span>
+      <span class="text-lg font-zinc-600 font-lato text-zinc-600">
+        {{ careerSiteConfig.bio }}
+      </span>
       <div
         class="inline-flex flex-wrap justify-center sm:justify-start space-x-4 mt-2 text-zinc-600"
       >
-        <div class="flex items-center" v-if="site.location">
+        <div class="flex items-center" v-if="careerSiteConfig.location">
           <Icon
             class="w-4 h-4 fill-current shrink-0"
             name="grommet-icons:location"
           />
           <span class="text-sm font-medium whitespace-nowrap ml-1">
-            {{ site.location }}
+            {{ careerSiteConfig.location }}
           </span>
         </div>
         <div
-          v-for="link in site.links.slice(0, 3)"
+          v-for="link in careerSiteConfig.links.slice(0, 3)"
           :key="link.href"
           class="flex items-center"
-          v-if="site.links"
+          v-if="careerSiteConfig.links"
         >
           <Icon name="tdesign:link" class="w-4 h-4 fill-current shrink-0" />
           <a

app/components/admin/Sidebar.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-const careerSiteSettings = usePublicCareerSiteSettings();
-const logoURL = computed(
-  () => useRemoteAsset(careerSiteSettings.value.logo).url
-);
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
+const logoURL = computed(() => useRemoteAsset(careerSiteConfig.value.logo).url);
 
 const publicConfig = useRuntimeConfig().public;
 </script>
@@ -20,7 +18,7 @@ const publicConfig = useRuntimeConfig().public;
           alt="avatar"
         />
         <span class="font-bold ml-2 truncate font-noto">{{
-          careerSiteSettings.name
+          careerSiteConfig.name
         }}</span>
       </div>
       <!-- Home -->

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

@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import { careerSiteConfigSchema } from '~~/shared/schemas/setting';
 
-const emits = defineEmits<{
-  saved: [];
-}>();
-
-const generalSettings = useGeneralSettings();
-const { updateGeneralSettings, generalSettings: generalSettingsPublic } =
-  usePublicGeneralSettings();
+const { data, setData } = useCareerSiteConfigObjectState();
 
 // Define form schema and use it in the form handling
 const formSchema = toTypedSchema(careerSiteConfigSchema);
@@ -46,40 +40,26 @@ const removeSocialHandle = (index: number) => {
 };
 
 // Initialize fields with data from settings
-let stopWatching: () => void;
-stopWatching = watchEffect(() => {
-  if (generalSettings.data.value) {
-    const gs = generalSettings.data.value;
-
-    name.value = gs.careerSite.name;
-    bio.value = gs.careerSite.bio;
-    description.value = gs.careerSite.description;
-    location.value = gs.careerSite.location;
-    links.value = gs.careerSite.links;
-    logo.value = gs.careerSite.logo;
-    overviewSocials.value = gs.careerSite.overview.socials;
-    overviewCompanySize.value = gs.careerSite.overview.companySize;
-    overviewTotalRaised.value = gs.careerSite.overview.totalRaised;
-    overviewMarkets.value = gs.careerSite.overview.markets;
-
-    stopWatching && stopWatching();
-  }
-});
+name.value = data.value.name;
+bio.value = data.value.bio;
+description.value = data.value.description;
+location.value = data.value.location;
+links.value = data.value.links;
+logo.value = data.value.logo;
+overviewSocials.value = data.value.overview.socials;
+overviewCompanySize.value = data.value.overview.companySize;
+overviewTotalRaised.value = data.value.overview.totalRaised;
+overviewMarkets.value = data.value.overview.markets;
 
 const isSubmitting = ref(false);
 const onSubmit = handleSubmit(async (values) => {
   try {
     isSubmitting.value = true;
-    const updatedSettings = {
-      careerSite: values,
-      seo: generalSettingsPublic.value.seo,
-    };
-    await $fetch('/api/settings/general', {
+    await $fetch('/api/settings/career-site', {
       method: 'PUT',
-      body: updatedSettings,
+      body: values,
     });
-    updateGeneralSettings(updatedSettings);
-    emits('saved');
+    setData(values);
   } catch (error) {
     console.error('Error saving settings', error);
   } finally {

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

@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import { seoConfigSchema } from '~~/shared/schemas/setting';
 
-const emits = defineEmits<{
-  saved: [];
-}>();
-
-const generalSettings = useGeneralSettings();
-const { updateGeneralSettings, generalSettings: generalSettingsPublic } =
-  usePublicGeneralSettings();
+const { data, setData } = useSeoConfigObjectState();
 
 // Define form schema and use it in the form handling
 const formSchema = toTypedSchema(seoConfigSchema);
@@ -21,33 +15,19 @@ const [description] = defineField('description');
 const [twitter] = defineField('twitter');
 
 // Initialize fields with data from settings
-let stopWatching: () => void;
-stopWatching = watchEffect(() => {
-  if (generalSettings.data.value) {
-    const gs = generalSettings.data.value;
-
-    title.value = gs.seo.title;
-    description.value = gs.seo.description;
-    twitter.value = gs.seo.twitter;
-
-    stopWatching && stopWatching();
-  }
-});
+title.value = data.value.title;
+description.value = data.value.description;
+twitter.value = data.value.twitter;
 
 const isSubmitting = ref(false);
 const onSubmit = handleSubmit(async (values) => {
-  const updatedSettings = {
-    seo: values,
-    careerSite: generalSettingsPublic.value.careerSite,
-  };
   try {
     isSubmitting.value = true;
-    await $fetch('/api/settings/general', {
+    await $fetch('/api/settings/seo', {
       method: 'PUT',
-      body: updatedSettings,
+      body: values,
     });
-    updateGeneralSettings(updatedSettings);
-    emits('saved');
+    setData(values);
   } catch (error) {
     console.error('Error saving settings', error);
   } finally {

app/composables/site-config.ts

@@ -1,10 +1,10 @@
 export function useRemoteAsset(slug: string) {
-  const remoteAssetBase = useState<string>('remote-asset-base-url');
+  const remoteAssetBase = useRemoteAssetBaseState();
   const url = remoteAssetBase.value + '/' + slug;
 
   return { url };
 }
 
 export function useOnboardingStatus() {
-  return useState<boolean>('onboarding-status', () => false);
+  return useOnboardingStatusState();
 }

app/composables/state.ts

@@ -1,12 +1,27 @@
-import type { Hook } from '~~/server/db/schema';
+import {
+  type CareerSiteConfig,
+  type SEOConfig,
+} from '~~/shared/schemas/setting';
 import type { Session } from '~~/shared/types/profile-types';
 
 export function useSessionState() {
   return useState<Session>('oauth_session');
 }
 
-export function useHooksState() {
-  return useObjectState<Hook[]>('integration-hooks', () => []);
+export function useRemoteAssetBaseState() {
+  return useState<string>('remote-asset-base-url');
+}
+
+export function useOnboardingStatusState() {
+  return useState<boolean>('onboarding-status', () => false);
+}
+
+export function useCareerSiteConfigObjectState() {
+  return useObjectState<CareerSiteConfig>('career-site-config');
+}
+
+export function useSeoConfigObjectState() {
+  return useObjectState<SEOConfig>('seo-config');
 }
 
 export function useObjectState<T>(key: string, initFn?: () => T) {
@@ -16,6 +31,7 @@ export function useObjectState<T>(key: string, initFn?: () => T) {
   const changing = useState<boolean>(`${key}-changing`);
 
   const setData = (d: T) => {
+    firstFetched.value = true;
     data.value = d;
   };
 

app/pages/index.vue

@@ -1,26 +1,19 @@
 <script setup lang="ts">
-const { data: postings } = await usePublicPostings();
-const { generalSettings } = usePublicGeneralSettings();
+const { data: postings } = await usePublicPostingsRepository();
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
+const { data: seoConfig } = useSeoConfigObjectState();
 
 let title: string = 'Careers'; // TODO: need better defaults (this will hardly be the case);
 let description: string = 'Career Site'; // TODO: need better defaults (this will hardly be the case);
-if (generalSettings.value) {
-  const seoTitle = generalSettings.value.seo.title;
-  const generalName = generalSettings.value.careerSite.name;
-
-  const seoDescription = generalSettings.value.seo.description;
-  const generalBio = generalSettings.value.careerSite.bio;
-
-  if (seoTitle) {
-    title = seoTitle;
-  } else if (generalName) {
-    title = `Careers @ ${generalName}`;
-  }
-  if (seoDescription) {
-    description = seoDescription;
-  } else if (generalBio) {
-    description = generalBio;
-  }
+if (seoConfig.value.title) {
+  title = seoConfig.value.title;
+} else if (careerSiteConfig.value.name) {
+  title = `Careers @ ${careerSiteConfig.value.name}`;
+}
+if (seoConfig.value.description) {
+  description = seoConfig.value.description;
+} else if (careerSiteConfig.value.bio) {
+  description = careerSiteConfig.value.bio;
 }
 
 useHead({
@@ -39,7 +32,7 @@ useSeoMeta({
   twitterCard: 'summary',
   twitterTitle: title,
   twitterDescription: description,
-  twitterCreator: generalSettings.value?.seo.twitter,
+  twitterCreator: seoConfig.value.twitter,
 });
 </script>
 

app/pages/postings/[id].vue

@@ -6,11 +6,12 @@ const { data: applicationStatus, refresh: refreshApplicationStatus } =
   useApplicationStatus(id);
 const { data: posting } = usePublicPosting(id);
 
-const careerSite = usePublicCareerSiteSettings();
-const companyLogo = useRemoteAsset(careerSite.value.logo).url;
+const { data: careerSiteConfig } = useCareerSiteConfigObjectState();
+const companyLogo = useRemoteAsset(careerSiteConfig.value.logo).url;
 
 useHead({
-  title: () => `${posting.value?.title + ' | ' || ''}${careerSite.value.name}`,
+  title: () =>
+    `${posting.value?.title + ' | ' || ''}${careerSiteConfig.value.name}`,
 });
 
 const tags = computed<string[]>(() => {
@@ -86,11 +87,11 @@ if (route.query.fromOnboard) {
                   :src="companyLogo"
                   width="64"
                   height="64"
-                  :alt="`${careerSite.name}'s logo'`"
+                  :alt="`${careerSiteConfig.name}'s logo'`"
                 />
               </div>
               <div class="text-lg font-bold text-zinc-800 mb-1">
-                {{ careerSite.name }}
+                {{ careerSiteConfig.name }}
               </div>
             </div>
             <div class="space-y-4 sm:flex sm:space-y-0 sm:space-x-2">
@@ -142,11 +143,11 @@ if (route.query.fromOnboard) {
                   :src="companyLogo"
                   width="64"
                   height="64"
-                  :alt="`${careerSite.name}'s logo'`"
+                  :alt="`${careerSiteConfig.name}'s logo'`"
                 />
               </div>
               <div class="text-lg font-bold text-zinc-800 mb-1">
-                {{ careerSite.name }}
+                {{ careerSiteConfig.name }}
               </div>
             </div>
             <div class="space-y-2">