settings save, and types as schema

Author: fatfingers23

app/composables/useSettings.ts

@@ -1,33 +1,8 @@
 import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
 import { ACCENT_COLORS } from '#shared/utils/constants'
-import type { LocaleObject } from '@nuxtjs/i18n'
 import { BACKGROUND_THEMES } from '#shared/utils/constants'
-
-type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
-
-type AccentColorId = keyof typeof ACCENT_COLORS.light
-
-/**
- * Application settings stored in localStorage
- */
-export interface AppSettings {
-  /** Display dates as relative (e.g., "3 days ago") instead of absolute */
-  relativeDates: boolean
-  /** Include @types/* package in install command for packages without built-in types */
-  includeTypesInInstall: boolean
-  /** Accent color theme */
-  accentColorId: AccentColorId | null
-  /** Preferred background shade */
-  preferredBackgroundTheme: BackgroundThemeId | null
-  /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
-  hidePlatformPackages: boolean
-  /** User-selected locale */
-  selectedLocale: LocaleObject['code'] | null
-  sidebar: {
-    collapsed: string[]
-  }
-}
+import type { AccentColorId, BackgroundThemeId, AppSettings } from '#shared/schemas/app-settings'
 
 const DEFAULT_SETTINGS: AppSettings = {
   relativeDates: false,
@@ -41,6 +16,14 @@ const DEFAULT_SETTINGS: AppSettings = {
   },
 }
 
+export const syncSettings = async (settings: AppSettings) => {
+  // DO some error handling
+  await $fetch('/api/auth/settings', {
+    method: 'POST',
+    body: settings,
+  })
+}
+
 const STORAGE_KEY = 'npmx-settings'
 
 // Shared settings instance (singleton per app)
@@ -133,6 +116,7 @@ export function useBackgroundTheme() {
       document.documentElement.removeAttribute('data-bg-theme')
     }
     settings.value.preferredBackgroundTheme = id
+    syncSettings(settings.value)
   }
 
   return {

server/api/auth/settings.get.ts

@@ -0,0 +1,3 @@
+//Want to check the cooki login state, can be slightly more laxed?
+//
+export default defineEventHandler(async _ => {})

server/api/auth/settings.post.ts

@@ -0,0 +1,18 @@
+import * as v from 'valibot'
+import { AppSettingsSchema } from '#shared/schemas/app-settings'
+import type { AppSettings } from '#shared/schemas/app-settings'
+
+export default eventHandlerWithOAuthSession(async (event, oauthSession) => {
+  // TODO: prob find a better spot. Can't be event handler cause i need oauth on session.delete
+  if (oauthSession == undefined) {
+    return createError({
+      statusCode: 401,
+      statusMessage: 'Unauthorized',
+    })
+  }
+  const body = v.parse(AppSettingsSchema, await readBody(event))
+
+  const storage = useStorage('atproto:generic')
+  const storageKey = `settings:${oauthSession.did}`
+  storage.setItem<AppSettings>(storageKey, body)
+})

server/utils/atproto/oauth.ts

@@ -43,12 +43,6 @@ export function getOauthClientMetadata() {
   }) as OAuthClientMetadataInput
 }
 
-type EventHandlerWithOAuthSession<T extends EventHandlerRequest, D> = (
-  event: H3Event<T>,
-  session: OAuthSession | undefined,
-  serverSession: SessionManager,
-) => Promise<D>
-
 async function getOAuthSession(
   event: H3Event,
 ): Promise<{ oauthSession: OAuthSession | undefined; serverSession: SessionManager }> {
@@ -100,11 +94,23 @@ export async function throwOnMissingOAuthScope(oAuthSession: OAuthSession, requi
   }
 }
 
+type EventHandlerWithOAuthSession<T extends EventHandlerRequest, D> = (
+  event: H3Event<T>,
+  session: OAuthSession | undefined,
+  serverSession: SessionManager,
+) => Promise<D>
+
+/**
+ * Handler with a valid OAuth session that is ready to be used
+ * @param handler
+ * @returns
+ */
 export function eventHandlerWithOAuthSession<T extends EventHandlerRequest, D>(
   handler: EventHandlerWithOAuthSession<T, D>,
 ) {
   return defineEventHandler(async event => {
     const { oauthSession, serverSession } = await getOAuthSession(event)
+
     return await handler(event, oauthSession, serverSession)
   })
 }

shared/schemas/app-settings.ts

@@ -0,0 +1,27 @@
+import * as v from 'valibot'
+import { ACCENT_COLORS, BACKGROUND_THEMES } from '#shared/utils/constants'
+
+type AccentColorKey = keyof typeof ACCENT_COLORS.light
+type BackgroundThemeKey = keyof typeof BACKGROUND_THEMES
+
+const accentColorIds = Object.keys(ACCENT_COLORS.light) as [AccentColorKey, ...AccentColorKey[]]
+const backgroundThemeIds = Object.keys(BACKGROUND_THEMES) as [
+  BackgroundThemeKey,
+  ...BackgroundThemeKey[],
+]
+
+export const AppSettingsSchema = v.object({
+  relativeDates: v.boolean(),
+  includeTypesInInstall: v.boolean(),
+  accentColorId: v.nullable(v.picklist(accentColorIds)),
+  preferredBackgroundTheme: v.nullable(v.picklist(backgroundThemeIds)),
+  hidePlatformPackages: v.boolean(),
+  selectedLocale: v.nullable(v.string()),
+  sidebar: v.object({
+    collapsed: v.array(v.string()),
+  }),
+})
+
+export type AppSettings = v.InferOutput<typeof AppSettingsSchema>
+export type AccentColorId = AppSettings['accentColorId']
+export type BackgroundThemeId = AppSettings['preferredBackgroundTheme']