managarten/apps/api/src/modules/contacts/routes.ts
Till JS 919fcca4b7 refactor(shared-tailwind): rewrite themes.css to single-layer shadcn convention
Pre-launch theme system audit found multiple parallel layers in themes.css
(--theme-X full hsl strings, --X partial shadcn aliases, --color-X populated
by runtime store with raw channels) plus dead-code companion files. The
inconsistency caused light-mode regressions when scoped-CSS consumers
wrote `var(--color-X)` standalone — the variable holds raw HSL channels
which is invalid as a color value, browser fell back to inherited (white).

Rewrite to one consistent layer:

  - Source of truth: --color-X defined as raw HSL channels (e.g.
    `0 0% 17%`) in :root, .dark, and all variant [data-theme="..."]
    blocks. Matches the format the runtime store
    (@mana/shared-theme/src/utils.ts) writes, eliminating the
    static-fallback-vs-runtime mismatch and the corresponding flash
    of unstyled content on hydration.

  - @theme inline uses self-reference + Tailwind v4 <alpha-value>
    placeholder so utility classes generate correctly AND opacity
    modifiers work: `text-foreground/50` → `hsl(var(--color-foreground) / 0.5)`.

  - @layer components (.btn-primary, .card, .badge, etc.) wraps
    var(--color-X) refs with hsl() — they were broken in light mode
    too for the same reason.

Convention going forward (also documented in the file header):

  1. Markup: use Tailwind utility classes (text-foreground, bg-card, …)
  2. Scoped CSS: hsl(var(--color-X)) — always wrap with hsl()
  3. NEVER raw var(--color-X) in CSS — that's the bug pattern

Net file: 692 → 580 LOC. Single source layer, no indirection.

Also delete dead companion files (zero imports anywhere):
  - tailwind-v4.css (had broken self-reference, never imported)
  - theme-variables.css (legacy hex-based palette)
  - components.css (legacy component utilities)
  - index.js / preset.js / colors.js (Tailwind v3 preset format,
    irrelevant under Tailwind v4)

package.json exports map shrinks accordingly to just `./themes.css`.

Consumers using `hsl(var(--color-X))` (~379 files across mana-web,
manavoxel-web, arcade-web) keep working unchanged — the public API
name `--color-X` is preserved. Only the broken pattern `var(--color-X)`
(~61 files) needs a follow-up sweep, handled in a separate commit.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-09 01:13:06 +02:00

101 lines
3.2 KiB
TypeScript

/**
* Contacts module — Avatar upload + vCard import
* Ported from apps/contacts/apps/server
*/
import { Hono } from 'hono';
import type { AuthVariables } from '@mana/shared-hono';
const ALLOWED_AVATAR_TYPES = new Set([
'image/jpeg',
'image/png',
'image/gif',
'image/webp',
'image/svg+xml',
]);
const routes = new Hono<{ Variables: AuthVariables }>();
// ─── Avatar Upload (S3) ─────────────────────────────────────
routes.post('/:id/avatar', async (c) => {
const userId = c.get('userId');
const formData = await c.req.formData();
const file = formData.get('file') as File | null;
if (!file) return c.json({ error: 'No file' }, 400);
if (file.size > 5 * 1024 * 1024) return c.json({ error: 'Max 5MB' }, 400);
if (!ALLOWED_AVATAR_TYPES.has(file.type)) {
return c.json({ error: 'Invalid file type. Allowed: JPEG, PNG, GIF, WebP, SVG' }, 400);
}
try {
const buffer = await file.arrayBuffer();
if (file.type === 'image/svg+xml') {
// SVGs stay on shared-storage (Sharp can't process SVG)
const { createContactsStorage, generateUserFileKey } = await import('@mana/shared-storage');
const storage = createContactsStorage();
const key = generateUserFileKey(userId, `avatar-${c.req.param('id')}.svg`);
const result = await storage.upload(key, Buffer.from(buffer), {
contentType: 'image/svg+xml',
public: true,
});
return c.json({ avatarUrl: result.url }, 201);
}
// Raster images -> mana-media for dedup, thumbnails & Photos gallery
const { uploadImageToMedia } = await import('../../lib/media');
const result = await uploadImageToMedia(
buffer,
`avatar-${c.req.param('id')}.${file.name.split('.').pop()}`,
{ app: 'contacts', userId }
);
return c.json(
{
avatarUrl: result.urls.thumbnail || result.urls.original,
mediaId: result.id,
},
201
);
} catch {
return c.json({ error: 'Upload failed' }, 500);
}
});
// ─── vCard Import ───────────────────────────────────────────
routes.post('/import/vcard', async (c) => {
const formData = await c.req.formData();
const file = formData.get('file') as File | null;
if (!file) return c.json({ error: 'No file' }, 400);
const text = await file.text();
const contacts = parseVCard(text);
return c.json({ contacts, count: contacts.length });
});
function parseVCard(text: string): Array<Record<string, string>> {
const contacts: Array<Record<string, string>> = [];
const cards = text.split('BEGIN:VCARD').filter((c) => c.includes('END:VCARD'));
for (const card of cards) {
const contact: Record<string, string> = {};
const lines = card.split(/\r?\n/);
for (const line of lines) {
if (line.startsWith('FN:')) contact.name = line.slice(3);
if (line.startsWith('EMAIL')) contact.email = line.split(':').pop() || '';
if (line.startsWith('TEL')) contact.phone = line.split(':').pop() || '';
if (line.startsWith('ORG:')) contact.company = line.slice(4);
if (line.startsWith('TITLE:')) contact.title = line.slice(6);
}
if (contact.name || contact.email) contacts.push(contact);
}
return contacts;
}
export { routes as contactsRoutes };