feat: persist draft messages and UI refinements
- Add dedicated draft-store with AsyncStorage persistence for drafts that survive app refresh/crash - Reduce markdown bold weight from bold to medium (500) - Various theme and component style updates - Server bootstrap and config improvements 🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
Mohamed Boudra
@@ -91,7 +91,7 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
heading6: {
|
||||
fontSize: theme.fontSize.base,
|
||||
fontWeight: theme.fontWeight.semibold,
|
||||
color: theme.colors.mutedForeground,
|
||||
color: theme.colors.foregroundMuted,
|
||||
marginTop: theme.spacing[3],
|
||||
marginBottom: theme.spacing[1],
|
||||
lineHeight: 20,
|
||||
@@ -104,7 +104,7 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
// =========================================================================
|
||||
|
||||
strong: {
|
||||
fontWeight: theme.fontWeight.bold,
|
||||
fontWeight: theme.fontWeight.medium,
|
||||
},
|
||||
|
||||
em: {
|
||||
@@ -113,7 +113,7 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
|
||||
s: {
|
||||
textDecorationLine: "line-through" as const,
|
||||
color: theme.colors.mutedForeground,
|
||||
color: theme.colors.foregroundMuted,
|
||||
},
|
||||
|
||||
link: {
|
||||
@@ -131,8 +131,8 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
// =========================================================================
|
||||
|
||||
code_inline: {
|
||||
backgroundColor: theme.colors.secondary,
|
||||
color: theme.colors.secondaryForeground,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
color: theme.colors.foreground,
|
||||
paddingHorizontal: theme.spacing[1],
|
||||
paddingVertical: 2,
|
||||
borderRadius: theme.borderRadius.sm,
|
||||
@@ -141,8 +141,8 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
},
|
||||
|
||||
code_block: {
|
||||
backgroundColor: theme.colors.secondary,
|
||||
color: theme.colors.secondaryForeground,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
color: theme.colors.foreground,
|
||||
padding: theme.spacing[3],
|
||||
borderRadius: theme.borderRadius.md,
|
||||
fontFamily: Fonts.mono,
|
||||
@@ -151,8 +151,8 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
},
|
||||
|
||||
fence: {
|
||||
backgroundColor: theme.colors.secondary,
|
||||
color: theme.colors.secondaryForeground,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
color: theme.colors.foreground,
|
||||
padding: theme.spacing[3],
|
||||
borderRadius: theme.borderRadius.md,
|
||||
borderWidth: 1,
|
||||
@@ -178,7 +178,7 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
},
|
||||
|
||||
thead: {
|
||||
backgroundColor: theme.colors.secondary,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
},
|
||||
|
||||
tbody: {},
|
||||
@@ -188,7 +188,7 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
borderBottomWidth: 1,
|
||||
borderRightWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
backgroundColor: theme.colors.secondary,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
fontWeight: theme.fontWeight.semibold,
|
||||
color: theme.colors.foreground,
|
||||
fontSize: theme.fontSize.sm,
|
||||
@@ -244,14 +244,14 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
},
|
||||
|
||||
bullet_list_icon: {
|
||||
color: theme.colors.mutedForeground,
|
||||
color: theme.colors.foregroundMuted,
|
||||
marginRight: 4,
|
||||
fontSize: theme.fontSize.base,
|
||||
lineHeight: 22,
|
||||
},
|
||||
|
||||
ordered_list_icon: {
|
||||
color: theme.colors.mutedForeground,
|
||||
color: theme.colors.foregroundMuted,
|
||||
marginRight: 4,
|
||||
fontSize: theme.fontSize.base,
|
||||
fontWeight: theme.fontWeight.semibold,
|
||||
@@ -264,7 +264,7 @@ export function createMarkdownStyles(theme: Theme) {
|
||||
// =========================================================================
|
||||
|
||||
blockquote: {
|
||||
backgroundColor: theme.colors.muted,
|
||||
backgroundColor: theme.colors.surface2,
|
||||
borderLeftWidth: 4,
|
||||
borderLeftColor: theme.colors.primary,
|
||||
paddingHorizontal: theme.spacing[4],
|
||||
|
||||
@@ -103,10 +103,34 @@ export const baseColors = {
|
||||
},
|
||||
} as const;
|
||||
|
||||
// Semantic color tokens (shadcn-style)
|
||||
// Semantic color tokens - Layer-based system
|
||||
const lightSemanticColors = {
|
||||
background: "#ffffff",
|
||||
// Surfaces (layers) - shifted one step lighter
|
||||
surface0: "#ffffff", // App background
|
||||
surface1: "#fafafa", // Subtle hover (was zinc-100, now zinc-50)
|
||||
surface2: "#f4f4f5", // Elevated: badges, inputs, sheets (was zinc-200, now zinc-100)
|
||||
surface3: "#e4e4e7", // Highest elevation (was zinc-300, now zinc-200)
|
||||
|
||||
// Text
|
||||
foreground: "#09090b",
|
||||
foregroundMuted: "#71717a",
|
||||
|
||||
// Borders - shifted one step lighter
|
||||
border: "#e4e4e7", // (was zinc-200, now zinc-200 - keep for contrast)
|
||||
borderAccent: "#e4e4e7", // (was zinc-300, now zinc-200)
|
||||
|
||||
// Brand
|
||||
accent: "#20744A",
|
||||
accentForeground: "#ffffff",
|
||||
|
||||
// Semantic
|
||||
destructive: "#dc2626",
|
||||
destructiveForeground: "#ffffff",
|
||||
success: "#20744A",
|
||||
successForeground: "#ffffff",
|
||||
|
||||
// Legacy aliases (for gradual migration)
|
||||
background: "#ffffff",
|
||||
card: "#ffffff",
|
||||
cardForeground: "#09090b",
|
||||
popover: "#ffffff",
|
||||
@@ -114,25 +138,44 @@ const lightSemanticColors = {
|
||||
primary: "#18181b",
|
||||
primaryForeground: "#fafafa",
|
||||
secondary: "#f4f4f5",
|
||||
secondaryForeground: "#18181b",
|
||||
secondaryForeground: "#09090b",
|
||||
muted: "#f4f4f5",
|
||||
mutedForeground: "#71717a",
|
||||
accent: "#f4f4f5",
|
||||
accentForeground: "#18181b",
|
||||
destructive: "#ef4444",
|
||||
destructiveForeground: "#fafafa",
|
||||
border: "#e4e4e7",
|
||||
accentBorder: "#3f3f46",
|
||||
input: "#e4e4e7",
|
||||
accentBorder: "#e4e4e7",
|
||||
input: "#f4f4f5",
|
||||
ring: "#18181b",
|
||||
} as const;
|
||||
|
||||
const darkSemanticColors = {
|
||||
background: "#09090b",
|
||||
// Surfaces (layers)
|
||||
surface0: "#18181c", // App background
|
||||
surface1: "#1f1f23", // Subtle hover
|
||||
surface2: "#27272a", // Elevated: badges, inputs, sheets
|
||||
surface3: "#3f3f46", // Highest elevation
|
||||
|
||||
// Text
|
||||
foreground: "#fafafa",
|
||||
card: "#09090b",
|
||||
foregroundMuted: "#a1a1aa",
|
||||
|
||||
// Borders
|
||||
border: "#27272a",
|
||||
borderAccent: "#3f3f46",
|
||||
|
||||
// Brand
|
||||
accent: "#20744A",
|
||||
accentForeground: "#ffffff",
|
||||
|
||||
// Semantic
|
||||
destructive: "#ef4444",
|
||||
destructiveForeground: "#ffffff",
|
||||
success: "#20744A",
|
||||
successForeground: "#ffffff",
|
||||
|
||||
// Legacy aliases (for gradual migration)
|
||||
background: "#18181c",
|
||||
card: "#27272a",
|
||||
cardForeground: "#fafafa",
|
||||
popover: "#18181b",
|
||||
popover: "#27272a",
|
||||
popoverForeground: "#fafafa",
|
||||
primary: "#fafafa",
|
||||
primaryForeground: "#18181b",
|
||||
@@ -140,12 +183,7 @@ const darkSemanticColors = {
|
||||
secondaryForeground: "#fafafa",
|
||||
muted: "#27272a",
|
||||
mutedForeground: "#a1a1aa",
|
||||
accent: "#27272a",
|
||||
accentForeground: "#fafafa",
|
||||
destructive: "#7f1d1d",
|
||||
destructiveForeground: "#fafafa",
|
||||
border: "#27272e",
|
||||
accentBorder: "#414146",
|
||||
accentBorder: "#3f3f46",
|
||||
input: "#27272a",
|
||||
ring: "#d4d4d8",
|
||||
} as const;
|
||||
|
||||
Reference in New Issue
Block a user