restructure: update user data handling to allow server-side authentication

src/lib/api/client.svelte.ts

@@ -1,4 +1,4 @@
-import { profile } from '$lib/app/auth.svelte'
+import { profile, type ProfileInfo } from '$lib/app/auth.svelte'
 import { DEFAULT_INSTANCE_URL } from '$lib/app/instance.svelte'
 import { instanceToURL } from '$lib/app/util.svelte'
 import { error } from '@sveltejs/kit'
@@ -56,6 +56,7 @@ export function client({
   func,
   auth,
   clientType,
+  profile: passedProfile,
 }: {
   instanceURL?: string
   func?: (
@@ -64,18 +65,20 @@ export function client({
   ) => Promise<Response>
   auth?: string
   clientType?: ClientType
+  profile?: ProfileInfo
 } = {}): BaseClient {
-  if (!instanceURL)
-    instanceURL = profile.current.instance || DEFAULT_INSTANCE_URL
+  const p = passedProfile ?? profile.current
+
+  if (!instanceURL) instanceURL = p.instance || DEFAULT_INSTANCE_URL
 
   if (!clientType) {
-    clientType = profile.current.client ?? DEFAULT_CLIENT_TYPE
+    clientType = p.client ?? DEFAULT_CLIENT_TYPE
   }
 
   // we use nullish coealsiaihsa something so that
   // we can set auth = '' to remove it
 
-  const jwt = auth ?? profile.current?.jwt
+  const jwt = auth ?? p.jwt
 
   // but not here, so that if jwt == '', it doesnt put a bearer
   const headers = jwt ? { authorization: `Bearer ${jwt}` } : {}

src/lib/app/auth.svelte.ts

@@ -37,7 +37,7 @@ export interface ProfileInfo {
 /**
  * What gets stored in localstorage.
  */
-interface ProfileData {
+export interface ProfileData {
   profiles: ProfileInfo[]
   // should be named currentId
   profile: number
@@ -59,7 +59,7 @@ const getCookie = (key: string): string | undefined => {
     ?.split('=')?.[1]
 }
 
-class Profile {
+export class Profile {
   private static readonly DONATION_CHECK_TIMEOUT = 3 * 1000
   private static readonly DONATION_REMINDER_INTERVAL = 375 * 24 * 60 * 60 * 1000
 
@@ -79,19 +79,21 @@ class Profile {
   )
   #current = $derived(
     this.meta.profiles.find((i) => i.id == this.meta.profile) ??
-      this.getDefaultProfile(),
+      Profile.getDefaultProfile(),
   )
   inbox: InboxService = $state(new InboxService(this))
 
-  getDefaultProfile(): ProfileInfo {
+  static getDefaultProfile(): ProfileInfo {
     return {
       id: -1,
       instance: DEFAULT_INSTANCE_URL,
       client: DEFAULT_CLIENT_TYPE,
     }
   }
 
-  constructor() {
+  constructor(init?: ProfileData) {
+    if (init) this.meta = init
+
     this.initCookieMigrate()
     this.donationPoll(Profile.DONATION_CHECK_TIMEOUT)
   }
@@ -292,7 +294,7 @@ class Profile {
 
       // no more profiles left
       if (serialized.profiles.length == 0) {
-        this.meta.profiles = [this.getDefaultProfile()]
+        this.meta.profiles = [Profile.getDefaultProfile()]
         this.meta.profile = 1
       }
     })

src/lib/app/render/VirtualList.svelte

@@ -238,7 +238,7 @@
     </div>
   {/each}
 </div>
-{#if settings.debugInfo}
+{#if settings.value.debugInfo}
   <Expandable>
     {#snippet title()}
       Debug

src/lib/app/server/userHost.ts

@@ -0,0 +1,53 @@
+import { client } from '$lib/api/client.svelte'
+import {
+  Profile,
+  type ProfileData,
+  type ProfileInfo,
+} from '$lib/app/auth.svelte'
+import type { Cookies } from '@sveltejs/kit'
+import type { GetSiteResponse } from 'lemmy-js-client'
+import { defaultSettings, type Settings } from '../settings.svelte'
+
+export interface UserDataJson {
+  meta: ProfileData
+  profile: ProfileInfo
+  site: GetSiteResponse
+  settings: Settings
+}
+
+export interface UserDataUi {
+  profile: Profile
+  site: GetSiteResponse
+  settings: Settings
+}
+
+export async function initDataCookie(cookies: Cookies): Promise<UserDataJson> {
+  const profileCookie = cookies.get('profileData')
+  const profileData: ProfileData = profileCookie
+    ? JSON.parse(profileCookie)
+    : {
+        profile: -1,
+        profiles: [Profile.getDefaultProfile()],
+      }
+
+  const currentProfileIndex =
+    profileData.profiles.findIndex((i) => i.id == profileData.profile) ?? 0
+
+  const settingsCookie = cookies.get('settings')
+  const settingsData: Settings = settingsCookie
+    ? JSON.parse(settingsCookie)
+    : defaultSettings
+
+  const site = await client({
+    profile: profileData.profiles[currentProfileIndex]!,
+  }).getSite()
+
+  profileData.profiles[currentProfileIndex].user = site.my_user
+
+  return {
+    profile: profileData.profiles[currentProfileIndex]!,
+    meta: profileData,
+    settings: settingsData,
+    site: site,
+  }
+}

src/lib/app/settings.svelte.ts

@@ -20,7 +20,7 @@ interface Preset {
   content: string
 }
 
-interface Settings {
+export interface Settings {
   settingsVer: number
   expandableImages: boolean
   // should have been named "fade" read posts
@@ -181,31 +181,45 @@ export const defaultSettings: Settings = {
   voteRatioBar: false,
 }
 
-function createSettingsState(initial: Settings): Settings {
-  let settings = $state(initial)
-  if (browser) {
+export class SettingsData {
+  #value: Settings = $state(defaultSettings)
+
+  constructor(init?: Settings) {
+    if (init) {
+      this.#value = init
+      return
+    }
+
     try {
       const localSettings = JSON.parse(localStorage.getItem('settings') ?? '{}')
-      const merged = mergeDeep(initial, localSettings)
+      const merged = mergeDeep(defaultSettings, localSettings)
 
-      settings = merged
+      this.#value = merged
+      return
     } catch {
       /* empty */
     }
+
+    this.#value = defaultSettings
+  }
+
+  get value(): Settings {
+    return this.#value
+  }
+
+  set value(v: Settings) {
+    this.#value = v
   }
-  return settings
 }
 
-export const settings = createSettingsState(
-  JSON.parse(JSON.stringify(defaultSettings)),
-)
+export const settings = new SettingsData()
 
 $effect.root(() => {
   $effect(() => {
-    localStorage.setItem('settings', JSON.stringify(settings))
+    localStorage.setItem('settings', JSON.stringify(settings.value))
 
-    if (settings.language) {
-      locale.set(settings.language)
+    if (settings.value.language) {
+      locale.set(settings.value.language)
     } else {
       if (browser) locale.set(navigator?.language)
     }

src/lib/feature/comment/Comment.svelte

@@ -242,7 +242,7 @@
           />
         {/if}
       </span>
-      {#if settings.debugInfo}
+      {#if settings.value.debugInfo}
         <span class="text-slate-600 dark:text-zinc-400 font-mono ml-auto">
           #{node.comment_view.comment.id}
         </span>

src/lib/feature/comment/CommentActions.svelte

@@ -38,7 +38,7 @@
 <div
   class={[
     'flex flex-row items-center gap-0.5 w-full',
-    settings.posts.reverseActions && 'flex-row-reverse',
+    settings.value.posts.reverseActions && 'flex-row-reverse',
   ]}
 >
   <CommentVote

src/lib/feature/comment/CommentVote.svelte

@@ -113,7 +113,7 @@
 <div
   class={[
     'h-full relative flex items-center overflow-hidden rounded-full font-medium',
-    voteRatio < 85 && settings.voteRatioBar && 'vote-ratio',
+    voteRatio < 85 && settings.value.voteRatioBar && 'vote-ratio',
     'divide-x divide-slate-200 dark:divide-zinc-800 border border-slate-200 dark:border-zinc-800',
   ]}
   style="--vote-ratio: {voteRatio}%;"

src/lib/feature/community/CommunityCard.svelte

@@ -322,7 +322,7 @@
       {$t('common.info')}
     </EndPlaceholder>
     <div class="space-y-3 px-1.5 text-sm">
-      <Expandable bind:open={settings.expand.about}>
+      <Expandable bind:open={settings.value.expand.about}>
         {#snippet title()}
           <span class="px-2 py-1 w-full">
             {$t('cards.site.about')}
@@ -332,7 +332,7 @@
       </Expandable>
 
       {#if moderators && moderators.length > 0}
-        <Expandable bind:open={settings.expand.team}>
+        <Expandable bind:open={settings.value.expand.team}>
           {#snippet title()}
             <span class="px-2 py-1 w-full">
               {$t('cards.community.moderators')}

src/lib/feature/community/CommunityHeader.svelte

@@ -59,7 +59,7 @@
     counts = undefined,
     moderators = [],
     blocked = false,
-    banner = !(settings.nsfwBlur && community.nsfw),
+    banner = !(settings.value.nsfwBlur && community.nsfw),
     class: clazz = '',
     compact,
     ...rest

src/lib/feature/community/CommunityLink.svelte

@@ -26,7 +26,7 @@
     avatar = false,
     name = true,
     avatarSize = 24,
-    showInstance = settings.showInstances.community,
+    showInstance = settings.value.showInstances.community,
     displayName = true,
     badges = {
       nsfw: false,

src/lib/feature/feeds/feed.svelte.ts

@@ -51,7 +51,7 @@ export class Feed<Params, Response> {
 }
 
 export interface FeedTypes {
-  '/': [
+  '/(app)': [
     GetPosts,
     {
       posts: PostView[]
@@ -63,7 +63,7 @@ export interface FeedTypes {
       }
     },
   ]
-  '/c/[name]': [
+  '/(app)/c/[name]': [
     GetPosts,
     {
       posts: PostView[]
@@ -73,8 +73,8 @@ export interface FeedTypes {
       client: { itemHeights?: (number | null)[]; lastSeen?: number }
     },
   ]
-  '/u/[name]': [GetPersonDetails, { data: GetPersonDetailsResponse }]
-  '/post/[instance]/[id=integer]': [
+  '/(app)/u/[name]': [GetPersonDetails, { data: GetPersonDetailsResponse }]
+  '/(app)/post/[instance]/[id=integer]': [
     {
       posts: GetPost
       comments: GetComments
@@ -104,7 +104,7 @@ export interface FeedTypes {
       }
     },
   ]
-  '/explore/communities': [
+  '/(app)/explore/communities': [
     {
       type: ListingType
       sort: SortType
@@ -113,7 +113,7 @@ export interface FeedTypes {
     },
     ListCommunitiesResponse,
   ]
-  '/f/[id]': [
+  '/(app)/f/[id]': [
     GetPosts,
 
     {
@@ -127,7 +127,7 @@ export interface FeedTypes {
       }
     },
   ]
-  '/topic/[id]': [
+  '/(app)/topic/[id]': [
     GetPosts,
     {
       posts: PostView[]

src/lib/feature/filter/ViewSelect.svelte

@@ -17,7 +17,7 @@
   let { showLabel = true, ...rest }: Props = $props()
 </script>
 
-<Select {...rest} bind:value={settings.view}>
+<Select {...rest} bind:value={settings.value.view}>
   {#snippet customLabel()}
     {#if showLabel}
       <span class="flex items-center gap-1">

src/lib/feature/instance/InstanceCard.svelte

@@ -127,7 +127,7 @@
       {$t('common.info')}
     </EndPlaceholder>
     <div class="space-y-3 px-1.5 text-sm">
-      <Expandable bind:open={settings.expand.about}>
+      <Expandable bind:open={settings.value.expand.about}>
         {#snippet title()}
           <span class="flex items-center gap-1 py-1 px-2 w-full">
             {$t('cards.site.about')}
@@ -148,7 +148,7 @@
       </Expandable>
 
       {#if admins}
-        <Expandable bind:open={settings.expand.team}>
+        <Expandable bind:open={settings.value.expand.team}>
           {#snippet title()}
             <span class="flex items-center gap-1 py-1 px-2 w-full">
               {$t('cards.site.admins')}