@commonpub/layer 0.3.38 → 0.4.1

package/pages/privacy.vue

@@ -62,13 +62,14 @@ const { federation: federationEnabled } = useFeatures();
       </section>
 
       <section class="cpub-legal-section">
-        <h2>5. Cookies and Local Storage</h2>
-        <p>We use only <strong>strictly necessary</strong> technologies:</p>
+        <h2>5. Cookies</h2>
+        <p>We use a small number of cookies to provide and improve the service:</p>
         <ul>
-          <li><strong>Session cookie</strong> (<code>better-auth.session_token</code>): an authentication cookie that identifies your login session. It is httpOnly (not accessible to JavaScript), secure (HTTPS-only in production), and expires after 7 days. This cookie is strictly necessary for the service to function and does not require consent.</li>
-          <li><strong>Theme preference</strong> (<code>cpub-theme</code> in localStorage): stores your light/dark mode choice in your browser. This is a UI preference, not used for tracking.</li>
+          <li><strong>Session cookie</strong> (<code>better-auth.session_token</code>): strictly necessary — authenticates your login session. HttpOnly, secure, 7-day expiry.</li>
+          <li><strong>Consent cookie</strong> (<code>cpub-consent</code>): strictly necessary — stores your cookie consent choice.</li>
+          <li><strong>Color scheme</strong> (<code>cpub-color-scheme</code>): functional — remembers your light/dark mode preference. Set only with your consent.</li>
         </ul>
-        <p>We do not use any analytics, advertising, or tracking cookies. No cookie consent banner is required because we only use strictly necessary cookies.</p>
+        <p>We do not use any advertising or tracking cookies. Your instance operator may add analytics cookies — these require your explicit consent. For the full list of cookies and to manage your preferences, visit our <NuxtLink to="/cookies">Cookie Policy</NuxtLink>.</p>
       </section>
 
       <section v-if="federationEnabled" class="cpub-legal-section">

package/pages/settings/appearance.vue

@@ -1,32 +1,112 @@
 <script setup lang="ts">
 definePageMeta({ middleware: 'auth' });
 
-const { themeId: theme, setTheme } = useTheme();
-const themes = [
-  { id: 'base', name: 'Light', desc: 'Sharp corners, offset shadows, blue accent' },
-  { id: 'dark', name: 'Dark', desc: 'Dark surfaces, same offset shadow aesthetic' },
-  { id: 'generics', name: 'Generics', desc: 'Dark minimal with soft glow' },
-];
+const { themeId, isDark, instanceDefault, setDarkMode } = useTheme();
+
+const familyLabels: Record<string, string> = {
+  base: 'Classic',
+  dark: 'Classic',
+  generics: 'Generics',
+  agora: 'Agora',
+  'agora-dark': 'Agora',
+};
+
+const currentFamily = computed(() => familyLabels[instanceDefault.value] ?? 'Classic');
+
+function previewColors(dark: boolean): { bg: string; surface: string; accent: string; text: string; border: string } {
+  // Resolve what theme ID would be for this mode
+  const families: Record<string, { light: string; dark: string }> = {
+    classic: { light: 'base', dark: 'dark' },
+    agora: { light: 'agora', dark: 'agora-dark' },
+    generics: { light: 'generics', dark: 'generics' },
+  };
+  const familyMap: Record<string, string> = {
+    base: 'classic', dark: 'classic', generics: 'generics',
+    agora: 'agora', 'agora-dark': 'agora',
+  };
+  const family = familyMap[instanceDefault.value] ?? 'classic';
+  const id = dark ? families[family]!.dark : families[family]!.light;
+
+  const palette: Record<string, { bg: string; surface: string; accent: string; text: string; border: string }> = {
+    base: { bg: '#fafaf9', surface: '#ffffff', accent: '#5b9cf6', text: '#1a1a1a', border: '#1a1a1a' },
+    dark: { bg: '#111111', surface: '#1a1a1a', accent: '#5b9cf6', text: '#e5e5e3', border: '#444440' },
+    generics: { bg: '#0c0c0b', surface: '#141413', accent: '#5b9cf6', text: '#d8d5cf', border: '#272725' },
+    agora: { bg: '#f7f4ed', surface: '#faf8f3', accent: '#3d8b5e', text: '#1a1a1a', border: '#1a1a1a' },
+    'agora-dark': { bg: '#0d1a12', surface: '#141f17', accent: '#4aa06e', text: '#e8e8e2', border: '#3a4f40' },
+  };
+  return palette[id] ?? palette.base!;
+}
 </script>
 
 <template>
   <div>
     <h2 class="cpub-section-title-lg">Appearance</h2>
 
-    <div class="cpub-theme-grid">
+    <p class="cpub-appearance-note">
+      Your instance uses the <strong>{{ currentFamily }}</strong> theme.
+      Choose your preferred color scheme.
+    </p>
+
+    <div class="cpub-scheme-grid">
+      <button
+        class="cpub-scheme-card"
+        :class="{ active: !isDark }"
+        @click="setDarkMode(false)"
+      >
+        <div
+          class="cpub-scheme-preview"
+          :style="{
+            backgroundColor: previewColors(false).bg,
+            borderColor: previewColors(false).border,
+          }"
+        >
+          <div
+            class="cpub-scheme-preview-card"
+            :style="{
+              backgroundColor: previewColors(false).surface,
+              borderColor: previewColors(false).border,
+              boxShadow: `3px 3px 0 ${previewColors(false).border}`,
+            }"
+          >
+            <div class="cpub-preview-heading" :style="{ backgroundColor: previewColors(false).text, opacity: 0.8 }"></div>
+            <div class="cpub-preview-line" :style="{ backgroundColor: previewColors(false).text, opacity: 0.3 }"></div>
+            <div class="cpub-preview-line short" :style="{ backgroundColor: previewColors(false).text, opacity: 0.2 }"></div>
+            <div class="cpub-preview-btn" :style="{ backgroundColor: previewColors(false).accent }"></div>
+          </div>
+        </div>
+        <div class="cpub-scheme-info">
+          <span class="cpub-scheme-name">Light</span>
+        </div>
+      </button>
+
       <button
-        v-for="t in themes"
-        :key="t.id"
-        class="cpub-theme-card"
-        :class="{ active: theme === t.id }"
-        @click="setTheme(t.id)"
+        class="cpub-scheme-card"
+        :class="{ active: isDark }"
+        @click="setDarkMode(true)"
       >
-        <div class="cpub-theme-preview" :data-theme="t.id">
-          <div class="cpub-theme-swatch"></div>
+        <div
+          class="cpub-scheme-preview"
+          :style="{
+            backgroundColor: previewColors(true).bg,
+            borderColor: previewColors(true).border,
+          }"
+        >
+          <div
+            class="cpub-scheme-preview-card"
+            :style="{
+              backgroundColor: previewColors(true).surface,
+              borderColor: previewColors(true).border,
+              boxShadow: `3px 3px 0 ${previewColors(true).border}`,
+            }"
+          >
+            <div class="cpub-preview-heading" :style="{ backgroundColor: previewColors(true).text, opacity: 0.8 }"></div>
+            <div class="cpub-preview-line" :style="{ backgroundColor: previewColors(true).text, opacity: 0.3 }"></div>
+            <div class="cpub-preview-line short" :style="{ backgroundColor: previewColors(true).text, opacity: 0.2 }"></div>
+            <div class="cpub-preview-btn" :style="{ backgroundColor: previewColors(true).accent }"></div>
+          </div>
         </div>
-        <div class="cpub-theme-info">
-          <span class="cpub-theme-name">{{ t.name }}</span>
-          <span class="cpub-theme-desc">{{ t.desc }}</span>
+        <div class="cpub-scheme-info">
+          <span class="cpub-scheme-name">Dark</span>
         </div>
       </button>
     </div>
@@ -34,48 +114,73 @@ const themes = [
 </template>
 
 <style scoped>
-.cpub-theme-grid {
+.cpub-appearance-note {
+  font-size: var(--text-sm);
+  color: var(--text-dim);
+  margin-bottom: var(--space-4);
+}
+
+.cpub-scheme-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 12px;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-3);
+  max-width: 440px;
 }
 
-.cpub-theme-card {
+.cpub-scheme-card {
   background: var(--surface);
   border: var(--border-width-default) solid var(--border2);
-  padding: 12px;
+  padding: 0;
   cursor: pointer;
   text-align: left;
+  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
 }
 
-.cpub-theme-card.active {
+.cpub-scheme-card.active {
   border-color: var(--accent);
   box-shadow: var(--shadow-accent);
 }
 
-.cpub-theme-card:hover {
+.cpub-scheme-card:hover {
   border-color: var(--border);
+  transform: translate(-1px, -1px);
+  box-shadow: var(--shadow-sm);
 }
 
-.cpub-theme-preview {
-  height: 60px;
-  background: var(--surface2);
-  border: var(--border-width-default) solid var(--border2);
-  margin-bottom: 8px;
+.cpub-scheme-preview {
+  height: 80px;
+  padding: var(--space-3);
+  border-bottom: var(--border-width-default) solid var(--border2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.cpub-theme-name {
-  font-size: 13px;
-  font-weight: 600;
-  display: block;
+.cpub-scheme-preview-card {
+  width: 75%;
+  padding: var(--space-2);
+  border-width: 2px;
+  border-style: solid;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
 
-.cpub-theme-desc {
-  font-size: 11px;
-  color: var(--text-dim);
+.cpub-preview-heading { height: 5px; width: 55%; }
+.cpub-preview-line { height: 3px; width: 85%; }
+.cpub-preview-line.short { width: 45%; }
+.cpub-preview-btn { height: 12px; width: 35%; margin-top: 3px; }
+
+.cpub-scheme-info {
+  padding: var(--space-3);
+}
+
+.cpub-scheme-name {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
 }
 
-@media (max-width: 640px) {
-  .cpub-theme-grid { grid-template-columns: 1fr; }
+@media (max-width: 480px) {
+  .cpub-scheme-grid { grid-template-columns: 1fr; }
 }
 </style>

package/plugins/theme.ts

@@ -0,0 +1,32 @@
+// Theme plugin — resolves theme on server (zero flash) and hydrates on client.
+//
+// The admin picks the instance theme (family + default mode).
+// Users only toggle light/dark. Server middleware resolves the final theme ID.
+// This plugin reads that resolved value and sets data-theme on <html>.
+
+export default defineNuxtPlugin(() => {
+  const themeId = useState<string>('cpub-theme', () => 'base');
+  const instanceTheme = useState<string>('cpub-instance-theme', () => 'base');
+  const isDark = useState<boolean>('cpub-dark-mode', () => false);
+
+  if (import.meta.server) {
+    const event = useRequestEvent();
+    if (event?.context) {
+      themeId.value = event.context.resolvedTheme ?? 'base';
+      instanceTheme.value = event.context.instanceTheme ?? 'base';
+      isDark.value = event.context.isDarkMode ?? false;
+    }
+  }
+
+  if (import.meta.client) {
+    // One-time migration: clear old localStorage theme (replaced by server-side resolution)
+    localStorage.removeItem('cpub-theme');
+  }
+
+  // Set data-theme on <html> during SSR — first paint has the correct theme
+  if (themeId.value && themeId.value !== 'base') {
+    useHead({
+      htmlAttrs: { 'data-theme': themeId.value },
+    });
+  }
+});

package/server/api/admin/settings.get.ts

@@ -6,11 +6,15 @@ export default defineEventHandler(async (event) => {
   const db = useDB();
   const config = useConfig();
 
-  // Get DB-stored settings
+  // Get DB-stored settings (returns Map — convert to plain object)
   const dbSettings = await getInstanceSettings(db);
+  const stored: Record<string, unknown> = {};
+  for (const [key, value] of dbSettings) {
+    stored[key] = value;
+  }
 
   // Merge with running config defaults so the UI shows actual values
-  const defaults: Record<string, string> = {
+  const defaults: Record<string, unknown> = {
     'instance.name': config.instance.name,
     'instance.description': config.instance.description,
     'instance.registrationOpen': 'true',
@@ -18,5 +22,5 @@ export default defineEventHandler(async (event) => {
     'instance.contactEmail': config.instance.contactEmail ?? '',
   };
 
-  return { ...defaults, ...dbSettings };
+  return { ...defaults, ...stored };
 });

package/server/api/admin/settings.put.ts

@@ -7,5 +7,10 @@ export default defineEventHandler(async (event): Promise<void> => {
   const db = useDB();
   const input = await parseBody(event, adminSettingSchema);
 
-  return setInstanceSetting(db, input.key, input.value, admin.id);
+  await setInstanceSetting(db, input.key, input.value, admin.id);
+
+  // Invalidate server-side theme cache when the default changes
+  if (input.key === 'theme.default') {
+    invalidateThemeCache();
+  }
 });

package/server/api/auth/delete-user.post.ts

@@ -1,4 +1,4 @@
-import { deleteUser, federateDelete, listContent } from '@commonpub/server';
+import { deleteUser, federateDelete } from '@commonpub/server';
 import { contentItems } from '@commonpub/schema';
 import { eq, and } from 'drizzle-orm';
 

package/server/middleware/theme.ts

@@ -0,0 +1,34 @@
+// Resolves the active theme for SSR and injects it into the event context.
+// Runs before page rendering so the theme plugin can set data-theme on <html>.
+//
+// Admin picks instance theme → user only toggles light/dark → server resolves.
+
+declare module 'h3' {
+  interface H3EventContext {
+    /** Final resolved theme ID for this request */
+    resolvedTheme: string;
+    /** The admin-configured instance default theme */
+    instanceTheme: string;
+    /** Whether the resolved theme is dark */
+    isDarkMode: boolean;
+  }
+}
+
+export default defineEventHandler(async (event) => {
+  // Only resolve theme for SSR page requests — skip API, assets, and internal routes
+  const path = getRequestURL(event).pathname;
+  if (path.startsWith('/api') || path.startsWith('/_nuxt') || path.startsWith('/__nuxt')) return;
+
+  const instanceTheme = await getInstanceDefaultTheme();
+  event.context.instanceTheme = instanceTheme;
+
+  // Read user's light/dark preference from cookie
+  const schemeCookie = getCookie(event, 'cpub-color-scheme');
+  const userScheme = schemeCookie === 'light' || schemeCookie === 'dark'
+    ? schemeCookie
+    : null;
+
+  const resolved = resolveThemeForUser(instanceTheme, userScheme);
+  event.context.resolvedTheme = resolved;
+  event.context.isDarkMode = isDefaultDark(resolved);
+});

package/server/utils/instanceTheme.ts

@@ -0,0 +1,67 @@
+// Cached instance-level theme resolution for SSR.
+// The admin sets a theme (determines family + default mode).
+// Users only toggle light/dark within that family.
+
+import { eq } from 'drizzle-orm';
+import { instanceSettings } from '@commonpub/schema';
+import { THEME_TO_FAMILY, FAMILY_VARIANTS, IS_DARK, VALID_THEME_IDS } from '../../utils/themeConfig';
+
+const CACHE_TTL = 60_000; // 1 minute
+
+let cached: string | null = null;
+let cacheTime = 0;
+
+export async function getInstanceDefaultTheme(): Promise<string> {
+  const now = Date.now();
+  if (cached !== null && now - cacheTime < CACHE_TTL) return cached;
+
+  try {
+    const db = useDB();
+    const [row] = await db
+      .select({ value: instanceSettings.value })
+      .from(instanceSettings)
+      .where(eq(instanceSettings.key, 'theme.default'));
+
+    if (row?.value && typeof row.value === 'string' && VALID_THEME_IDS.has(row.value)) {
+      cached = row.value;
+    } else {
+      cached = 'base';
+    }
+  } catch (err) {
+    console.warn('[theme] Failed to read instance theme from DB, using fallback:', err instanceof Error ? err.message : String(err));
+    cached = 'base';
+  }
+
+  cacheTime = now;
+  return cached;
+}
+
+/**
+ * Resolve the final theme ID given the admin's chosen default and the
+ * user's light/dark preference.
+ */
+export function resolveThemeForUser(
+  adminTheme: string,
+  userScheme: 'light' | 'dark' | null,
+): string {
+  const family = THEME_TO_FAMILY[adminTheme] ?? 'classic';
+  const variants = FAMILY_VARIANTS[family] ?? FAMILY_VARIANTS.classic!;
+
+  if (userScheme === null) return adminTheme;
+  return userScheme === 'dark' ? variants.dark : variants.light;
+}
+
+/** Whether a given theme ID is dark */
+export function isDefaultDark(themeId: string): boolean {
+  return IS_DARK[themeId] ?? false;
+}
+
+/** Call after admin changes the instance default theme */
+export function invalidateThemeCache(): void {
+  cached = null;
+  cacheTime = 0;
+}
+
+export function isServerValidThemeId(id: string): boolean {
+  return VALID_THEME_IDS.has(id);
+}