AlacrisDevs
2 days ago
parent
9af0ef5307
commit
b517bb975c
6 changed files with 908 additions and 23 deletions
@ -0,0 +1,222 @@ |
|||||||
|
/** |
||||||
|
* Theme Store - Manages app theme (dark/light mode and accent colors) |
||||||
|
* Inspired by root-v2 |
||||||
|
*/ |
||||||
|
import { writable, derived } from 'svelte/store'; |
||||||
|
import { browser } from '$app/environment'; |
||||||
|
|
||||||
|
export type ThemeMode = 'dark' | 'light' | 'system'; |
||||||
|
|
||||||
|
export interface ThemeColors { |
||||||
|
primary: string; |
||||||
|
name: string; |
||||||
|
} |
||||||
|
|
||||||
|
export const PRESET_COLORS: ThemeColors[] = [ |
||||||
|
{ name: 'Cyan', primary: '#00A3E0' }, |
||||||
|
{ name: 'Purple', primary: '#8B5CF6' }, |
||||||
|
{ name: 'Pink', primary: '#EC4899' }, |
||||||
|
{ name: 'Green', primary: '#10B981' }, |
||||||
|
{ name: 'Orange', primary: '#F97316' }, |
||||||
|
{ name: 'Red', primary: '#EF4444' }, |
||||||
|
{ name: 'Blue', primary: '#3B82F6' }, |
||||||
|
{ name: 'Indigo', primary: '#6366F1' }, |
||||||
|
]; |
||||||
|
|
||||||
|
const THEME_STORAGE_KEY = 'root_theme'; |
||||||
|
|
||||||
|
interface ThemeState { |
||||||
|
mode: ThemeMode; |
||||||
|
primaryColor: string; |
||||||
|
} |
||||||
|
|
||||||
|
const defaultTheme: ThemeState = { |
||||||
|
mode: 'dark', |
||||||
|
primaryColor: '#00A3E0', |
||||||
|
}; |
||||||
|
|
||||||
|
// Convert hex to HSL
|
||||||
|
function hexToHSL(hex: string): { h: number; s: number; l: number } { |
||||||
|
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); |
||||||
|
if (!result) return { h: 0, s: 0, l: 0 }; |
||||||
|
|
||||||
|
const r = parseInt(result[1], 16) / 255; |
||||||
|
const g = parseInt(result[2], 16) / 255; |
||||||
|
const b = parseInt(result[3], 16) / 255; |
||||||
|
|
||||||
|
const max = Math.max(r, g, b); |
||||||
|
const min = Math.min(r, g, b); |
||||||
|
let h = 0; |
||||||
|
let s = 0; |
||||||
|
const l = (max + min) / 2; |
||||||
|
|
||||||
|
if (max !== min) { |
||||||
|
const d = max - min; |
||||||
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); |
||||||
|
switch (max) { |
||||||
|
case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break; |
||||||
|
case g: h = ((b - r) / d + 2) / 6; break; |
||||||
|
case b: h = ((r - g) / d + 4) / 6; break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
return { h: h * 360, s: s * 100, l: l * 100 }; |
||||||
|
} |
||||||
|
|
||||||
|
// Convert HSL to hex
|
||||||
|
function hslToHex(h: number, s: number, l: number): string { |
||||||
|
s /= 100; |
||||||
|
l /= 100; |
||||||
|
const a = s * Math.min(l, 1 - l); |
||||||
|
const f = (n: number) => { |
||||||
|
const k = (n + h / 30) % 12; |
||||||
|
const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); |
||||||
|
return Math.round(255 * color).toString(16).padStart(2, '0'); |
||||||
|
}; |
||||||
|
return `#${f(0)}${f(8)}${f(4)}`; |
||||||
|
} |
||||||
|
|
||||||
|
// Generate derived colors from primary
|
||||||
|
function generateDerivedColors(primary: string, isDark: boolean) { |
||||||
|
const { h, s } = hexToHSL(primary); |
||||||
|
|
||||||
|
if (isDark) { |
||||||
|
return { |
||||||
|
night: hslToHex(h, Math.min(s, 40), 6), |
||||||
|
dark: hslToHex(h, Math.min(s, 35), 10), |
||||||
|
surface: hslToHex(h, Math.min(s, 30), 12), |
||||||
|
background: hslToHex(h, Math.min(s, 30), 3), |
||||||
|
light: '#e5e6f0', |
||||||
|
text: '#ffffff', |
||||||
|
}; |
||||||
|
} else { |
||||||
|
const lightSat = Math.min(s, 30); |
||||||
|
return { |
||||||
|
night: hslToHex(h, lightSat, 95), |
||||||
|
dark: hslToHex(h, lightSat, 90), |
||||||
|
surface: hslToHex(h, lightSat, 98), |
||||||
|
background: hslToHex(h, lightSat, 100), |
||||||
|
light: '#1a1a2e', |
||||||
|
text: '#0a121f', |
||||||
|
}; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function getEffectiveMode(mode: ThemeMode): 'dark' | 'light' { |
||||||
|
if (mode === 'system') { |
||||||
|
if (!browser) return 'dark'; |
||||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; |
||||||
|
} |
||||||
|
return mode; |
||||||
|
} |
||||||
|
|
||||||
|
function loadTheme(): ThemeState { |
||||||
|
if (!browser) return defaultTheme; |
||||||
|
|
||||||
|
try { |
||||||
|
const stored = localStorage.getItem(THEME_STORAGE_KEY); |
||||||
|
if (stored) { |
||||||
|
return { ...defaultTheme, ...JSON.parse(stored) }; |
||||||
|
} |
||||||
|
} catch (e) { |
||||||
|
console.warn('Failed to load theme:', e); |
||||||
|
} |
||||||
|
return defaultTheme; |
||||||
|
} |
||||||
|
|
||||||
|
function saveTheme(theme: ThemeState): void { |
||||||
|
if (!browser) return; |
||||||
|
localStorage.setItem(THEME_STORAGE_KEY, JSON.stringify(theme)); |
||||||
|
} |
||||||
|
|
||||||
|
export function applyTheme(state: ThemeState): void { |
||||||
|
if (!browser) return; |
||||||
|
|
||||||
|
const root = document.documentElement; |
||||||
|
const effectiveMode = getEffectiveMode(state.mode); |
||||||
|
|
||||||
|
// Set mode class
|
||||||
|
root.classList.remove('dark', 'light'); |
||||||
|
root.classList.add(effectiveMode); |
||||||
|
|
||||||
|
// Set CSS custom properties
|
||||||
|
root.style.setProperty('--color-primary', state.primaryColor); |
||||||
|
|
||||||
|
// Calculate hover variant
|
||||||
|
const { h, s, l } = hexToHSL(state.primaryColor); |
||||||
|
root.style.setProperty('--color-primary-hover', hslToHex(h, s, Math.min(100, l + 10))); |
||||||
|
|
||||||
|
// Generate and apply derived colors
|
||||||
|
const derived = generateDerivedColors(state.primaryColor, effectiveMode === 'dark'); |
||||||
|
root.style.setProperty('--color-night', derived.night); |
||||||
|
root.style.setProperty('--color-dark', derived.dark); |
||||||
|
root.style.setProperty('--color-surface', derived.surface); |
||||||
|
root.style.setProperty('--color-background', derived.background); |
||||||
|
root.style.setProperty('--color-light', derived.light); |
||||||
|
root.style.setProperty('--color-text', derived.text); |
||||||
|
} |
||||||
|
|
||||||
|
function createThemeStore() { |
||||||
|
const { subscribe, set, update } = writable<ThemeState>(loadTheme()); |
||||||
|
|
||||||
|
return { |
||||||
|
subscribe, |
||||||
|
setMode: (mode: ThemeMode) => { |
||||||
|
update(state => { |
||||||
|
const newState = { ...state, mode }; |
||||||
|
saveTheme(newState); |
||||||
|
applyTheme(newState); |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
}, |
||||||
|
setPrimaryColor: (color: string) => { |
||||||
|
update(state => { |
||||||
|
const newState = { ...state, primaryColor: color }; |
||||||
|
saveTheme(newState); |
||||||
|
applyTheme(newState); |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
}, |
||||||
|
toggleMode: () => { |
||||||
|
update(state => { |
||||||
|
const modes: ThemeMode[] = ['dark', 'light', 'system']; |
||||||
|
const currentIndex = modes.indexOf(state.mode); |
||||||
|
const newMode = modes[(currentIndex + 1) % modes.length]; |
||||||
|
const newState: ThemeState = { ...state, mode: newMode }; |
||||||
|
saveTheme(newState); |
||||||
|
applyTheme(newState); |
||||||
|
return newState; |
||||||
|
}); |
||||||
|
}, |
||||||
|
reset: () => { |
||||||
|
set(defaultTheme); |
||||||
|
saveTheme(defaultTheme); |
||||||
|
applyTheme(defaultTheme); |
||||||
|
}, |
||||||
|
init: () => { |
||||||
|
const state = loadTheme(); |
||||||
|
applyTheme(state); |
||||||
|
set(state); |
||||||
|
} |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export const theme = createThemeStore(); |
||||||
|
|
||||||
|
// Derived stores for convenience
|
||||||
|
export const isDarkMode = derived(theme, $t => getEffectiveMode($t.mode) === 'dark'); |
||||||
|
export const primaryColor = derived(theme, $t => $t.primaryColor); |
||||||
|
export const themeMode = derived(theme, $t => $t.mode); |
||||||
|
|
||||||
|
// Initialize theme on load
|
||||||
|
if (browser) { |
||||||
|
applyTheme(loadTheme()); |
||||||
|
|
||||||
|
// Listen for system theme changes
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => { |
||||||
|
const state = loadTheme(); |
||||||
|
if (state.mode === 'system') { |
||||||
|
applyTheme(state); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,53 @@ |
|||||||
|
-- Task comments for kanban cards |
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS kanban_comments ( |
||||||
|
id UUID PRIMARY KEY DEFAULT gen_random_uuid(), |
||||||
|
card_id UUID NOT NULL REFERENCES kanban_cards(id) ON DELETE CASCADE, |
||||||
|
user_id UUID NOT NULL REFERENCES profiles(id) ON DELETE CASCADE, |
||||||
|
content TEXT NOT NULL, |
||||||
|
created_at TIMESTAMPTZ DEFAULT now(), |
||||||
|
updated_at TIMESTAMPTZ DEFAULT now() |
||||||
|
); |
||||||
|
|
||||||
|
-- Enable RLS |
||||||
|
ALTER TABLE kanban_comments ENABLE ROW LEVEL SECURITY; |
||||||
|
|
||||||
|
-- Comments inherit access from the card's board -> org |
||||||
|
CREATE POLICY "Comments inherit card access" ON kanban_comments |
||||||
|
FOR SELECT USING ( |
||||||
|
EXISTS ( |
||||||
|
SELECT 1 FROM kanban_cards c |
||||||
|
JOIN kanban_columns col ON c.column_id = col.id |
||||||
|
JOIN kanban_boards b ON col.board_id = b.id |
||||||
|
JOIN org_members m ON b.org_id = m.org_id |
||||||
|
WHERE c.id = kanban_comments.card_id |
||||||
|
AND m.user_id = auth.uid() |
||||||
|
) |
||||||
|
); |
||||||
|
|
||||||
|
-- Users can insert their own comments |
||||||
|
CREATE POLICY "Users can insert own comments" ON kanban_comments |
||||||
|
FOR INSERT WITH CHECK ( |
||||||
|
user_id = auth.uid() AND |
||||||
|
EXISTS ( |
||||||
|
SELECT 1 FROM kanban_cards c |
||||||
|
JOIN kanban_columns col ON c.column_id = col.id |
||||||
|
JOIN kanban_boards b ON col.board_id = b.id |
||||||
|
JOIN org_members m ON b.org_id = m.org_id |
||||||
|
WHERE c.id = kanban_comments.card_id |
||||||
|
AND m.user_id = auth.uid() |
||||||
|
) |
||||||
|
); |
||||||
|
|
||||||
|
-- Users can update their own comments |
||||||
|
CREATE POLICY "Users can update own comments" ON kanban_comments |
||||||
|
FOR UPDATE USING (user_id = auth.uid()); |
||||||
|
|
||||||
|
-- Users can delete their own comments |
||||||
|
CREATE POLICY "Users can delete own comments" ON kanban_comments |
||||||
|
FOR DELETE USING (user_id = auth.uid()); |
||||||
|
|
||||||
|
-- Index for faster lookups |
||||||
|
CREATE INDEX IF NOT EXISTS idx_kanban_comments_card ON kanban_comments(card_id); |
||||||
|
CREATE INDEX IF NOT EXISTS idx_kanban_comments_user ON kanban_comments(user_id); |
||||||
|
CREATE INDEX IF NOT EXISTS idx_kanban_comments_created ON kanban_comments(created_at DESC); |
||||||
Loading…
Reference in new issue