+
+
+
+
@@ -38,22 +69,42 @@
:dark="isDark"
/>
-
-
-
-
+
+
+
-
+
Emotional Level
@@ -85,28 +136,26 @@
Sehr positiv
-
-
- Farbverlauf
-
+
+
-
-
-
@@ -129,10 +178,41 @@
-
+
+
+ Punktfarbe (optional)
+
+
+
+
Weitere Medien
-
@@ -149,6 +229,60 @@
/>
+
+
+ ![]()
+
+
+
+ Key Image entfernen?
+
+ Das Key Image wird endgültig aus diesem Event entfernt.
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
![]()
+
{{ event.title }}
{{ formattedDate }}
@@ -43,9 +49,9 @@ const eventsStore = useEventsStore()
const settingsStore = useSettingsStore()
// Resolve image: cached thumbnail from IndexedDB or fetch & cache
-const { resolvedSrc: imageSrc } = props.event.image
- ? useImageCache(props.event.image, props.event.id)
- : { resolvedSrc: computed(() => null) }
+const imageUrl = computed(() => props.event.image || null)
+const eventId = computed(() => props.event.id)
+const { resolvedSrc: imageSrc } = useImageCache(imageUrl, eventId)
const fl = computed(() => settingsStore.floatingLines)
const glowColor = computed(() => eventsStore.getGlowColor(props.event))
@@ -67,19 +73,42 @@ const formattedDate = computed(() => {
const d = new Date(props.event.date)
return `${d.getDate()}. ${MONTH_SHORT[d.getMonth()]} ${d.getFullYear()}`
})
+const dotAriaLabel = computed(() => {
+ if (props.isGhost) return undefined
+ const title = props.event.title || 'Event'
+ return `${title}, ${formattedDate.value}`
+})
// Label font sizes per setting
-const LABEL_FONT = { small: { title: 10, date: 9 }, medium: { title: 12, date: 11 }, large: { title: 14, date: 13 } }
+const LABEL_FONT = {
+ small: { title: 10, date: 9 },
+ medium: { title: 12, date: 11 },
+ large: { title: 14, date: 13 },
+ xlarge: { title: 18, date: 16 }
+}
const labelFont = computed(() => LABEL_FONT[fl.value.labelSize] ?? LABEL_FONT.small)
const labelColor = computed(() => fl.value.labelColor ?? '#ffffff')
+const labelOpacity = computed(() => Math.max(0.5, Math.min(1, fl.value.labelOpacity ?? 0.75)))
+const connectorLengthScale = computed(() => Math.max(0, Math.min(1, fl.value.labelConnectorLength ?? 0.2)))
+// 0 -> no connector, 1 -> ~5x current connector length (about 70px)
+const connectorLengthPx = computed(() => connectorLengthScale.value * 70)
+const labelGapPx = computed(() => 4 + connectorLengthPx.value)
const labelStyle = computed(() => ({
- maxWidth: labelFont.value.title >= 14 ? '120px' : '90px'
+ maxWidth: labelFont.value.title >= 18 ? '150px' : labelFont.value.title >= 14 ? '120px' : '90px',
+ '--label-gap': `${labelGapPx.value}px`,
+ '--label-connector-len': `${connectorLengthPx.value}px`,
+ '--label-opacity': labelOpacity.value.toFixed(2),
+ '--label-connector-color': labelColor.value,
+ '--label-connector-opacity': Math.max(0.45, labelOpacity.value * 0.9).toFixed(2)
+}))
+const connectorStyle = computed(() => ({
+ display: connectorLengthPx.value <= 0.5 ? 'none' : 'block'
}))
const titleStyle = computed(() => ({
fontSize: `${labelFont.value.title}px`,
color: labelColor.value,
- maxWidth: labelFont.value.title >= 14 ? '120px' : '90px'
+ maxWidth: labelFont.value.title >= 18 ? '150px' : labelFont.value.title >= 14 ? '120px' : '90px'
}))
const dateStyle = computed(() => ({
fontSize: `${labelFont.value.date}px`,
@@ -93,14 +122,18 @@ const dotStyle = computed(() => ({
height: `${dotSize.value}px`
}))
-// Two-layer box-shadow: tight bright core + wide soft halo
-const glowShadow = computed(() => {
- const size = fl.value.glowSize
+const innerStyle = computed(() => {
+ const size = fl.value.glowSize
const strength = fl.value.glowStrength
- const color = glowColor.value
- const core = alphaHex(Math.min(strength / 3, 1))
- const halo = alphaHex(Math.min(strength / 7, 1))
- return `0 0 ${size}px 0px ${color}${core}, 0 0 ${size * 2.5}px ${size * 0.3}px ${color}${halo}`
+ const color = glowColor.value
+ const core = alphaHex(Math.min(strength / 3, 1))
+ const halo = alphaHex(Math.min(strength / 7, 1))
+ const shadow = `0 0 ${size}px 0px ${color}${core}, 0 0 ${size * 2.5}px ${size * 0.3}px ${color}${halo}`
+ const bw = fl.value.dotBorderWidth ?? 0
+ return {
+ boxShadow: shadow,
+ border: bw > 0 ? `${bw}px solid ${fl.value.dotBorderColor ?? '#ffffff'}` : 'none'
+ }
})
function alphaHex(a) {
@@ -163,25 +196,41 @@ function onSelect() {
position: absolute;
left: 50%;
transform: translateX(-50%);
- top: calc(100% + 6px);
+ top: calc(100% + var(--label-gap, 18px));
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
max-width: 90px;
pointer-events: none;
+ opacity: var(--label-opacity, 0.75);
}
/* When dot is in lower half, show label above */
.glow-dot--label-above .glow-dot__label {
top: auto;
- bottom: calc(100% + 6px);
+ bottom: calc(100% + var(--label-gap, 18px));
+}
+
+.glow-dot__connector {
+ position: absolute;
+ left: 50%;
+ width: 1px;
+ height: var(--label-connector-len, 14px);
+ top: calc(-1 * var(--label-connector-len, 14px));
+ transform: translateX(-50%);
+ background: var(--label-connector-color, #ffffff);
+ opacity: var(--label-connector-opacity, 0.65);
+}
+
+.glow-dot--label-above .glow-dot__connector {
+ top: auto;
+ bottom: calc(-1 * var(--label-connector-len, 14px));
}
.glow-dot__title {
font-size: 10px;
font-weight: 600;
- opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -193,7 +242,6 @@ function onSelect() {
.glow-dot__date {
font-size: 9px;
font-weight: 400;
- opacity: 0.4;
white-space: nowrap;
line-height: 1.2;
}
diff --git a/frontend/src/components/LifeWaveSettings.vue b/frontend/src/components/LifeWaveSettings.vue
index c36579a..2e1a665 100644
--- a/frontend/src/components/LifeWaveSettings.vue
+++ b/frontend/src/components/LifeWaveSettings.vue
@@ -17,6 +17,23 @@
Einstellungen
+
+
+ Modus
+
+
+
+
+
+
Linien
@@ -28,7 +45,7 @@
@@ -38,7 +55,7 @@
@@ -48,7 +65,7 @@
@@ -58,7 +75,7 @@
@@ -68,7 +85,17 @@
+ Linienstärke
+ {{ (fl.lineThickness ?? 1).toFixed(2) }}
+
+
@@ -78,7 +105,7 @@
@@ -88,7 +115,7 @@
@@ -191,7 +297,7 @@
Hintergrundfarbe
@@ -98,7 +125,7 @@
+
@@ -108,7 +135,7 @@
@@ -174,6 +266,13 @@
>
Keins
+
@@ -118,7 +145,7 @@
+
+
@@ -128,7 +155,52 @@
+
+
+
+ Rahmen Stärke
+ {{ (fl.dotBorderWidth ?? 0) === 0 ? 'aus' : `${fl.dotBorderWidth}px` }}
+
+
+ Rahmen Farbe
+
+
+
+ Linienfarbe
+
+
@@ -160,6 +232,26 @@
class="lw-settings__color-input"
/>
+ Farbe
+
+
+
+
+ Schatten
+ {{ (fl.staticLineShadowStrength ?? 0).toFixed(2) }}
+
+
+ Transparenz
+ {{ (fl.labelOpacity ?? 0.75).toFixed(2) }}
+
+
+ Strichlänge
+ {{ (fl.labelConnectorLength ?? 0.2).toFixed(2) }}
+
+
- BG Mitte
+ {{ isSplit ? 'Unten' : 'BG Mitte' }}
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 226eb50..61939f8 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,6 +1,7 @@
import { defineRouter } from '#q-app/wrappers'
import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'
+import { AUTH_STORAGE_KEY, DEMO_USERS } from 'stores/auth'
/*
* If not building with SSR mode, you can
@@ -26,5 +27,28 @@ export default defineRouter(function (/* { store, ssrContext } */) {
history: createHistory(process.env.VUE_ROUTER_BASE)
})
+ Router.beforeEach((to) => {
+ const stored = localStorage.getItem(AUTH_STORAGE_KEY)
+ let userId = null
+
+ try {
+ userId = stored ? JSON.parse(stored)?.userId ?? null : null
+ } catch {
+ userId = null
+ }
+
+ const isAuthenticated = DEMO_USERS.some(user => user.id === userId)
+
+ if (to.meta.requiresAuth && !isAuthenticated) {
+ return { path: '/login', query: { redirect: to.fullPath } }
+ }
+
+ if (to.path === '/login' && isAuthenticated) {
+ return { path: '/' }
+ }
+
+ return true
+ })
+
return Router
})
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index ccc6533..cd4a478 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -1,7 +1,13 @@
const routes = [
+ {
+ path: '/login',
+ component: () => import('pages/LoginPage.vue'),
+ meta: { public: true }
+ },
{
path: '/',
component: () => import('layouts/LifeWaveLayout.vue'),
+ meta: { requiresAuth: true },
children: [
{ path: '', component: () => import('pages/LifeWavePage.vue') }
]
diff --git a/frontend/src/services/syncService.js b/frontend/src/services/syncService.js
index f360f61..b3e0f36 100644
--- a/frontend/src/services/syncService.js
+++ b/frontend/src/services/syncService.js
@@ -167,9 +167,12 @@ async function pullRemoteChanges() {
id: remote.id,
title: remote.title,
date: remote.date,
+ location: remote.location ?? '',
emotion: remote.emotion,
customColor: remote.customColor,
gradientPreset: remote.gradientPreset,
+ gradientStartColor: remote.gradientStartColor ?? null,
+ gradientEndColor: remote.gradientEndColor ?? null,
image: remote.image,
note: remote.note,
syncStatus: 'synced',
@@ -181,9 +184,12 @@ async function pullRemoteChanges() {
await db.events.update(remote.id, {
title: remote.title,
date: remote.date,
+ location: remote.location ?? '',
emotion: remote.emotion,
customColor: remote.customColor,
gradientPreset: remote.gradientPreset,
+ gradientStartColor: remote.gradientStartColor ?? null,
+ gradientEndColor: remote.gradientEndColor ?? null,
image: remote.image,
note: remote.note,
syncStatus: 'synced',
diff --git a/frontend/src/stores/auth.js b/frontend/src/stores/auth.js
new file mode 100644
index 0000000..03de3ab
--- /dev/null
+++ b/frontend/src/stores/auth.js
@@ -0,0 +1,67 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+
+export const AUTH_STORAGE_KEY = 'thatsme-auth'
+
+export const DEMO_USERS = Array.from({ length: 5 }, (_, index) => {
+ const number = index + 1
+ return {
+ id: `demo-user-${number}`,
+ email: `user${number}@thats-me.app`,
+ password: 'pass',
+ name: `User ${number}`,
+ avatar: `U${number}`
+ }
+})
+
+function loadStoredUserId() {
+ try {
+ const stored = localStorage.getItem(AUTH_STORAGE_KEY)
+ return stored ? JSON.parse(stored)?.userId ?? null : null
+ } catch {
+ return null
+ }
+}
+
+export const useAuthStore = defineStore('auth', () => {
+ const currentUserId = ref(loadStoredUserId())
+ const lastError = ref('')
+
+ const currentUser = computed(() =>
+ DEMO_USERS.find(user => user.id === currentUserId.value) ?? null
+ )
+ const isAuthenticated = computed(() => currentUser.value !== null)
+
+ function login(email, password) {
+ const normalizedEmail = String(email).trim().toLowerCase()
+ const user = DEMO_USERS.find(candidate =>
+ candidate.email === normalizedEmail && candidate.password === password
+ )
+
+ if (!user) {
+ lastError.value = 'E-Mail oder Passwort ist falsch.'
+ return false
+ }
+
+ currentUserId.value = user.id
+ lastError.value = ''
+ localStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify({ userId: user.id }))
+ return true
+ }
+
+ function logout() {
+ currentUserId.value = null
+ lastError.value = ''
+ localStorage.removeItem(AUTH_STORAGE_KEY)
+ }
+
+ return {
+ users: DEMO_USERS,
+ currentUserId,
+ currentUser,
+ isAuthenticated,
+ lastError,
+ login,
+ logout
+ }
+})
diff --git a/frontend/src/stores/events.js b/frontend/src/stores/events.js
index ab4eb55..935b00d 100644
--- a/frontend/src/stores/events.js
+++ b/frontend/src/stores/events.js
@@ -1,7 +1,10 @@
import { defineStore } from 'pinia'
import { ref, computed, watch } from 'vue'
+import Dexie from 'dexie'
import { db } from 'src/db'
import { startAutoSync, getToken } from 'src/services/syncService'
+import { useSettingsStore, DEFAULT_EMOTION_GRADIENT_START, DEFAULT_EMOTION_GRADIENT_END } from 'stores/settings'
+import { useAuthStore } from 'stores/auth'
// Color interpolation
function lerpColor(a, b, t) {
@@ -17,55 +20,24 @@ function lerpColor(a, b, t) {
return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${blue.toString(16).padStart(2, '0')}`
}
-// Gradient presets: [negative, neutral, positive]
-const GRADIENT_PRESETS = [
- { name: 'Standard', colors: ['#E91E63', '#FFD700', '#4CAF50'] },
- { name: 'Sunset', colors: ['#FD1D1D', '#FCB045', '#833AB4'] },
- { name: 'Earth', colors: ['#ED8153', '#ED8153', '#217B9E'] },
- { name: 'Ocean', colors: ['#00D4FF', '#164173', '#440559'] },
- { name: 'Spring', colors: ['#FDBB2D', '#96BE74', '#22C1C3'] },
- { name: 'Neon', colors: ['#FC466B', '#9A52B6', '#3F5EFB'] },
- { name: 'Pastel', colors: ['#EEAECA', '#C2B4D9', '#94BBE9'] },
- { name: 'Aurora', colors: ['#FF6B6B', '#C084FC', '#67E8F9'] },
- { name: 'Forest', colors: ['#DC2626', '#A3A830', '#059669'] },
- { name: 'Berry', colors: ['#F472B6', '#FB923C', '#A78BFA'] }
-]
-
-// Glow color logic: emotion value → color, with optional gradient preset
-function emotionToColor(emotion, gradientIdx = null) {
- const preset = gradientIdx !== null ? GRADIENT_PRESETS[gradientIdx] : null
- if (preset) {
- const [neg, mid, pos] = preset.colors
- if (emotion >= 0) {
- return lerpColor(mid, pos, emotion)
- } else {
- return lerpColor(mid, neg, Math.abs(emotion))
- }
- }
- if (emotion >= 0) {
- if (emotion < 0.5) {
- return lerpColor('#FF6B35', '#FFD700', emotion / 0.5)
- }
- return lerpColor('#FFD700', '#4CAF50', (emotion - 0.5) / 0.5)
- } else {
- const abs = Math.abs(emotion)
- if (abs < 0.5) {
- return lerpColor('#2196F3', '#9C27B0', abs / 0.5)
- }
- return lerpColor('#9C27B0', '#E91E63', (abs - 0.5) / 0.5)
- }
+// Glow color logic: emotion value mapped on one continuous gradient.
+function emotionToColor(emotion, gradientStartColor = null, gradientEndColor = null) {
+ const start = gradientStartColor || DEFAULT_EMOTION_GRADIENT_START
+ const end = gradientEndColor || DEFAULT_EMOTION_GRADIENT_END
+ const t = Math.max(0, Math.min(1, (emotion + 1) / 2))
+ return lerpColor(start, end, t)
}
// Demo seed data
const demoEvents = [
- { id: crypto.randomUUID(), title: 'Erster Schultag', date: '1995-09-01', emotion: 0.6, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
- { id: crypto.randomUUID(), title: 'Abiball', date: '2004-06-25', emotion: 0.85, customColor: null, gradientPreset: 1, image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', note: 'Was für eine Party!', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
- { id: crypto.randomUUID(), title: 'Trennung', date: '2010-03-15', emotion: -0.7, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
- { id: crypto.randomUUID(), title: 'Bergwanderung', date: '2014-08-12', emotion: 0.75, customColor: null, gradientPreset: 4, image: 'demo/photo-1534067783941-51c9c23ecefd.jpeg', note: 'Unvergesslicher Ausblick', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
- { id: crypto.randomUUID(), title: 'Jobverlust', date: '2016-11-03', emotion: -0.6, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
- { id: crypto.randomUUID(), title: 'Hochzeit', date: '2018-07-20', emotion: 0.95, customColor: null, gradientPreset: 5, image: 'demo/photo-1506905925346-21bda4d32df4.jpeg', note: 'Der schönste Tag', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
- { id: crypto.randomUUID(), title: 'Umzug', date: '2021-04-01', emotion: -0.3, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
- { id: crypto.randomUUID(), title: 'Neuer Job', date: '2023-01-10', emotion: 0.5, customColor: null, gradientPreset: null, image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', note: 'Neues Kapitel', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }
+ { id: crypto.randomUUID(), title: 'Erster Schultag', date: '1995-09-01', location: '', emotion: 0.6, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
+ { id: crypto.randomUUID(), title: 'Abiball', date: '2004-06-25', location: '', emotion: 0.85, customColor: null, gradientPreset: null, image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', note: 'Was für eine Party!', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
+ { id: crypto.randomUUID(), title: 'Trennung', date: '2010-03-15', location: '', emotion: -0.7, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
+ { id: crypto.randomUUID(), title: 'Bergwanderung', date: '2014-08-12', location: '', emotion: 0.75, customColor: null, gradientPreset: null, image: 'demo/photo-1534067783941-51c9c23ecefd.jpeg', note: 'Unvergesslicher Ausblick', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
+ { id: crypto.randomUUID(), title: 'Jobverlust', date: '2016-11-03', location: '', emotion: -0.6, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
+ { id: crypto.randomUUID(), title: 'Hochzeit', date: '2018-07-20', location: '', emotion: 0.95, customColor: null, gradientPreset: null, image: 'demo/photo-1506905925346-21bda4d32df4.jpeg', note: 'Der schönste Tag', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
+ { id: crypto.randomUUID(), title: 'Umzug', date: '2021-04-01', location: '', emotion: -0.3, customColor: null, gradientPreset: null, image: null, note: '', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() },
+ { id: crypto.randomUUID(), title: 'Neuer Job', date: '2023-01-10', location: '', emotion: 0.5, customColor: null, gradientPreset: null, image: 'demo/photo-1530103862676-de8c9debad1d.jpeg', note: 'Neues Kapitel', syncStatus: 'local', createdAt: Date.now(), updatedAt: Date.now() }
]
// Generate realistic demo events for testing at scale
@@ -144,16 +116,14 @@ function generateManyEvents(count = 500) {
const note = hasNote ? pick(cat.notes) : ''
const hasImage = rand() < 0.15 // 15% chance
const image = hasImage ? pick(demoImages) : null
- const hasPreset = rand() < 0.25 // 25% chance
- const gradientPreset = hasPreset ? randInt(0, 9) : null
-
evts.push({
id: crypto.randomUUID(),
title,
date,
+ location: '',
emotion,
customColor: null,
- gradientPreset,
+ gradientPreset: null,
image,
note,
syncStatus: 'local',
@@ -167,21 +137,44 @@ function generateManyEvents(count = 500) {
return evts
}
-export { emotionToColor, GRADIENT_PRESETS, demoEvents, generateManyEvents }
+export {
+ emotionToColor,
+ demoEvents,
+ generateManyEvents
+}
export const useEventsStore = defineStore('events', () => {
+ const settingsStore = useSettingsStore()
+ const authStore = useAuthStore()
const events = ref([])
const isLoaded = ref(false)
const selectedEventId = ref(null)
const panelOpen = ref(false)
const editingEventId = ref(null)
+ const AUTOSAVE_DELAY_MS = 300
+ let persistTimer = null
+ let skipNextPersist = false
// Load events from IndexedDB; seed demo data on first launch
async function init() {
+ const userId = authStore.currentUserId
+ if (!userId) {
+ events.value = []
+ isLoaded.value = true
+ return
+ }
+
+ isLoaded.value = false
try {
- let stored = await db.events.orderBy('date').toArray()
+ let stored = await db.events
+ .where('[userId+date]')
+ .between([userId, Dexie.minKey], [userId, Dexie.maxKey])
+ .toArray()
if (stored.length === 0) {
- const seed = generateManyEvents(500)
+ const seed = generateManyEvents(500).map(event => ({
+ ...event,
+ userId
+ }))
await db.events.bulkPut(seed)
stored = seed
}
@@ -200,7 +193,7 @@ export const useEventsStore = defineStore('events', () => {
// Fire-and-forget DB write (UI already updated via ref)
function dbPut(event) {
- db.events.put(event).catch(e => console.warn('Dexie put failed:', e))
+ db.events.put({ ...event, userId: event.userId ?? authStore.currentUserId }).catch(e => console.warn('Dexie put failed:', e))
}
function dbDelete(id) {
@@ -208,27 +201,95 @@ export const useEventsStore = defineStore('events', () => {
}
function dbQueueSync(eventId, action, payload) {
- db.syncQueue.add({ eventId, action, payload, createdAt: Date.now() })
- .catch(e => console.warn('Dexie sync queue failed:', e))
+ const userId = authStore.currentUserId
+ if (!userId) return
+
+ const queue = async () => {
+ if (action === 'update') {
+ await db.syncQueue
+ .where('eventId')
+ .equals(eventId)
+ .and(item => item.userId === userId && item.action === 'update')
+ .delete()
+ }
+
+ await db.syncQueue.add({ userId, eventId, action, payload, createdAt: Date.now() })
+ }
+
+ queue().catch(e => console.warn('Dexie sync queue failed:', e))
+ }
+
+ function cloneMedia(media) {
+ return Array.isArray(media)
+ ? media.map(item => ({ ...item }))
+ : []
+ }
+
+ function mediaMeta(media) {
+ return cloneMedia(media).map(({ id, type, name, createdAt }) => ({
+ id,
+ type,
+ name,
+ createdAt
+ }))
+ }
+
+ function persistEventMedia(eventId, userId, media) {
+ const mediaItems = cloneMedia(media)
+ const persist = async () => {
+ await db.eventMedia.where('eventId').equals(eventId).delete()
+ if (mediaItems.length === 0) return
+ await db.eventMedia.bulkPut(mediaItems.map(item => ({
+ ...item,
+ eventId,
+ userId
+ })))
+ }
+
+ persist().catch(e => console.warn('Dexie media persist failed:', e))
+ }
+
+ async function loadEventMedia(event) {
+ const fallback = Array.isArray(event.media) ? cloneMedia(event.media) : []
+ ghostMedia.value = fallback
+
+ try {
+ const stored = await db.eventMedia
+ .where('eventId')
+ .equals(event.id)
+ .toArray()
+
+ if (editingEventId.value !== event.id || stored.length === 0) return
+
+ ghostMedia.value = stored
+ .sort((a, b) => (a.createdAt ?? 0) - (b.createdAt ?? 0))
+ .map(({ eventId, userId, ...item }) => item)
+ } catch (e) {
+ console.warn('Dexie media load failed:', e)
+ }
}
// Ghost event for live preview while creating/editing
const ghostEmotion = ref(0)
const ghostCustomColor = ref(null)
- const ghostGradientPreset = ref(null)
const ghostTitle = ref('')
const ghostDate = ref(new Date().toISOString().slice(0, 10))
+ const ghostLocation = ref('')
const ghostNote = ref('')
const ghostImage = ref(null)
+ const ghostKeyImageTitle = ref('')
+ const ghostMedia = ref([])
const ghostEvent = computed(() => ({
id: '__ghost__',
title: ghostTitle.value || 'New Event',
date: ghostDate.value,
+ location: ghostLocation.value,
emotion: ghostEmotion.value,
customColor: ghostCustomColor.value,
- gradientPreset: ghostGradientPreset.value,
image: ghostImage.value,
+ keyImageTitle: ghostKeyImageTitle.value,
+ media: ghostMedia.value,
note: ghostNote.value
}))
@@ -245,22 +306,27 @@ export const useEventsStore = defineStore('events', () => {
editingEventId.value = eventId
const event = events.value.find((e) => e.id === eventId)
if (event) {
+ skipNextPersist = true
ghostTitle.value = event.title
ghostDate.value = event.date
+ ghostLocation.value = event.location || ''
ghostEmotion.value = event.emotion
ghostCustomColor.value = event.customColor
- ghostGradientPreset.value = event.gradientPreset ?? null
ghostImage.value = event.image || null
+ ghostKeyImageTitle.value = event.keyImageTitle || ''
+ loadEventMedia(event)
ghostNote.value = event.note
}
} else {
editingEventId.value = null
ghostTitle.value = ''
ghostDate.value = new Date().toISOString().slice(0, 10)
+ ghostLocation.value = ''
ghostEmotion.value = 0
ghostCustomColor.value = null
- ghostGradientPreset.value = null
ghostImage.value = null
+ ghostKeyImageTitle.value = ''
+ ghostMedia.value = []
ghostNote.value = ''
}
panelOpen.value = true
@@ -275,33 +341,75 @@ export const useEventsStore = defineStore('events', () => {
...events.value[idx],
title: ghostTitle.value,
date: ghostDate.value,
+ location: ghostLocation.value,
emotion: ghostEmotion.value,
customColor: ghostCustomColor.value,
- gradientPreset: ghostGradientPreset.value,
+ gradientPreset: null,
image: ghostImage.value,
+ keyImageTitle: ghostKeyImageTitle.value,
+ media: mediaMeta(ghostMedia.value),
note: ghostNote.value,
syncStatus: 'modified',
+ userId: events.value[idx].userId ?? authStore.currentUserId,
updatedAt: Date.now()
}
events.value[idx] = updated
dbPut(updated)
+ persistEventMedia(updated.id, updated.userId, ghostMedia.value)
+ dbQueueSync(updated.id, 'update', { ...updated })
+ }
+
+ function schedulePersistToEvent() {
+ if (!editingEventId.value) return
+ if (persistTimer) clearTimeout(persistTimer)
+ persistTimer = setTimeout(() => {
+ persistTimer = null
+ persistToEvent()
+ }, AUTOSAVE_DELAY_MS)
+ }
+
+ function flushPersistToEvent() {
+ if (!persistTimer) return
+ clearTimeout(persistTimer)
+ persistTimer = null
+ persistToEvent()
+ }
+
+ function saveGhostNow() {
+ if (persistTimer) {
+ clearTimeout(persistTimer)
+ persistTimer = null
+ }
+ persistToEvent()
}
watch(
- [ghostTitle, ghostDate, ghostEmotion, ghostCustomColor, ghostGradientPreset, ghostImage, ghostNote],
- () => { persistToEvent() }
+ [ghostTitle, ghostDate, ghostLocation, ghostEmotion, ghostCustomColor, ghostImage, ghostKeyImageTitle, ghostMedia, ghostNote],
+ () => {
+ if (skipNextPersist) {
+ skipNextPersist = false
+ return
+ }
+ schedulePersistToEvent()
+ }
)
function closePanel() {
+ flushPersistToEvent()
+
if (!editingEventId.value && ghostTitle.value.trim()) {
const newEvent = {
id: crypto.randomUUID(),
+ userId: authStore.currentUserId,
title: ghostTitle.value,
date: ghostDate.value,
+ location: ghostLocation.value,
emotion: ghostEmotion.value,
customColor: ghostCustomColor.value,
- gradientPreset: ghostGradientPreset.value,
+ gradientPreset: null,
image: ghostImage.value,
+ keyImageTitle: ghostKeyImageTitle.value,
+ media: mediaMeta(ghostMedia.value),
note: ghostNote.value,
syncStatus: 'local',
createdAt: Date.now(),
@@ -309,6 +417,7 @@ export const useEventsStore = defineStore('events', () => {
}
events.value.push(newEvent)
dbPut(newEvent)
+ persistEventMedia(newEvent.id, newEvent.userId, ghostMedia.value)
dbQueueSync(newEvent.id, 'create', { ...newEvent })
}
panelOpen.value = false
@@ -317,6 +426,10 @@ export const useEventsStore = defineStore('events', () => {
}
function deleteEvent(id) {
+ if (editingEventId.value === id) {
+ if (persistTimer) clearTimeout(persistTimer)
+ persistTimer = null
+ }
events.value = events.value.filter((e) => e.id !== id)
dbDelete(id)
dbQueueSync(id, 'delete', null)
@@ -325,12 +438,27 @@ export const useEventsStore = defineStore('events', () => {
function getGlowColor(event) {
if (event.customColor) return event.customColor
- return emotionToColor(event.emotion, event.gradientPreset ?? null)
+ return emotionToColor(
+ event.emotion,
+ settingsStore.emotionGradientStart || DEFAULT_EMOTION_GRADIENT_START,
+ settingsStore.emotionGradientEnd || DEFAULT_EMOTION_GRADIENT_END
+ )
}
// Auto-init on store creation
init()
+ watch(() => authStore.currentUserId, () => {
+ panelOpen.value = false
+ editingEventId.value = null
+ selectedEventId.value = null
+ if (persistTimer) {
+ clearTimeout(persistTimer)
+ persistTimer = null
+ }
+ init()
+ })
+
return {
events,
isLoaded,
@@ -339,17 +467,20 @@ export const useEventsStore = defineStore('events', () => {
editingEventId,
ghostEmotion,
ghostCustomColor,
- ghostGradientPreset,
ghostTitle,
ghostDate,
+ ghostLocation,
ghostNote,
ghostImage,
+ ghostKeyImageTitle,
+ ghostMedia,
ghostEvent,
sortedEvents,
selectEvent,
openPanel,
closePanel,
deleteEvent,
+ saveGhostNow,
getGlowColor
}
})
diff --git a/frontend/src/stores/settings.js b/frontend/src/stores/settings.js
index bea0137..74eaaa1 100644
--- a/frontend/src/stores/settings.js
+++ b/frontend/src/stores/settings.js
@@ -1,15 +1,33 @@
import { defineStore } from 'pinia'
import { ref, watch } from 'vue'
+import { useAuthStore } from 'stores/auth'
-const STORAGE_KEY = 'thatsme-settings'
+const STORAGE_KEY_PREFIX = 'thatsme-settings'
+const PERSIST_DELAY_MS = 250
+export const DEFAULT_EMOTION_GRADIENT_START = '#2d2e83'
+export const DEFAULT_EMOTION_GRADIENT_END = '#3aaa35'
+export const DEFAULT_TIMELINE_ZOOM = 1
+export const DEFAULT_TIMELINE_SCROLL_LEFT = null
export const ACCENT_COLORS = [
- { label: 'Standard', value: 'default', hex: '#9e9e9e' },
- { label: 'Blau', value: 'blue', hex: '#2196F3' },
- { label: 'Grün', value: 'green', hex: '#4CAF50' },
- { label: 'Gelb', value: 'yellow', hex: '#FFC107' },
- { label: 'Rosa', value: 'pink', hex: '#E91E63' },
- { label: 'Orange', value: 'orange', hex: '#FF9800' }
+ { label: 'Base', value: 'base', hex: '#737373' },
+ { label: 'Red', value: 'red', hex: '#ef4444' },
+ { label: 'Orange', value: 'orange', hex: '#f97316' },
+ { label: 'Amber', value: 'amber', hex: '#f59e0b' },
+ { label: 'Yellow', value: 'yellow', hex: '#eab308' },
+ { label: 'Lime', value: 'lime', hex: '#84cc16' },
+ { label: 'Green', value: 'green', hex: '#22c55e' },
+ { label: 'Emerald', value: 'emerald', hex: '#10b981' },
+ { label: 'Teal', value: 'teal', hex: '#14b8a6' },
+ { label: 'Cyan', value: 'cyan', hex: '#06b6d4' },
+ { label: 'Sky', value: 'sky', hex: '#0ea5e9' },
+ { label: 'Blue', value: 'blue', hex: '#3b82f6' },
+ { label: 'Indigo', value: 'indigo', hex: '#6366f1' },
+ { label: 'Violet', value: 'violet', hex: '#8b5cf6' },
+ { label: 'Purple', value: 'purple', hex: '#a855f7' },
+ { label: 'Fuchsia', value: 'fuchsia', hex: '#d946ef' },
+ { label: 'Pink', value: 'pink', hex: '#ec4899' },
+ { label: 'Rose', value: 'rose', hex: '#f43f5e' }
]
export const LANGUAGES = [
@@ -24,6 +42,7 @@ const FLOATING_LINES_DEFAULTS = {
spread: 0.05,
fanSpread: 0.05,
lineSharpness: 8.0,
+ lineThickness: 1.0,
waveFrequency: 7.0,
bezierCurvature: 0.2,
circleRadius: 75,
@@ -35,51 +54,177 @@ const FLOATING_LINES_DEFAULTS = {
bgEdge: '#000000',
gradientStops: '#e947f5\n#2f4ba2\n#0a0a12',
backgroundImage: '',
+ // Horizont
+ horizonMode: 'off', // 'off' | 'fog' | 'split' | 'glow'
+ horizonOpacity: 0.5, // Nebel + Glow: Helligkeit
+ horizonBlend: 0.2, // Trennung: 0=scharf 1=weich
// Labels
- labelSize: 'small', // 'small' | 'medium' | 'large'
- labelColor: '#ffffff'
+ labelSize: 'small', // 'small' | 'medium' | 'large' | 'xlarge'
+ labelColor: '#ffffff',
+ labelOpacity: 0.75,
+ labelConnectorLength: 0.2,
+ // Dot-Rahmen
+ dotBorderWidth: 0, // 0 = kein Rahmen, in px
+ dotBorderColor: '#ffffff',
+ // Modus
+ lineMode: 'glow', // 'glow' | 'static'
+ staticLineColor: '#2196F3', // Linienfarbe im Static-Modus
+ staticLineShadowStrength: 0 // 0 = klar, 1 = ursprünglicher Schatten
}
-function loadFromStorage() {
+function getStorageKey(userId) {
+ return `${STORAGE_KEY_PREFIX}:${userId || 'guest'}`
+}
+
+function loadFromStorage(userId) {
try {
- const stored = localStorage.getItem(STORAGE_KEY)
+ const stored = localStorage.getItem(getStorageKey(userId))
return stored ? JSON.parse(stored) : null
} catch {
return null
}
}
+function clone(value) {
+ return JSON.parse(JSON.stringify(value))
+}
+
+function normalizeAccentColor(value) {
+ if (value === 'default') return 'base'
+ return ACCENT_COLORS.some(c => c.value === value) ? value : 'base'
+}
+
+function hexToRgb(hex) {
+ const clean = hex.replace('#', '')
+ const full = clean.length === 3
+ ? clean.split('').map(ch => ch + ch).join('')
+ : clean
+ const r = parseInt(full.slice(0, 2), 16)
+ const g = parseInt(full.slice(2, 4), 16)
+ const b = parseInt(full.slice(4, 6), 16)
+ return { r, g, b }
+}
+
+function applyAccentCssVariables(value) {
+ if (typeof document === 'undefined') return
+ const key = normalizeAccentColor(value)
+ const accent = ACCENT_COLORS.find(c => c.value === key) ?? ACCENT_COLORS[0]
+ const { r, g, b } = hexToRgb(accent.hex)
+ document.documentElement.style.setProperty('--tm-accent', accent.hex)
+ document.documentElement.style.setProperty('--tm-accent-rgb', `${r}, ${g}, ${b}`)
+ // Keep Quasar semantic color channels in sync with the active accent.
+ document.documentElement.style.setProperty('--q-primary', accent.hex)
+ document.documentElement.style.setProperty('--q-secondary', accent.hex)
+ document.documentElement.style.setProperty('--q-accent', accent.hex)
+}
+
export { FLOATING_LINES_DEFAULTS }
export const useSettingsStore = defineStore('settings', () => {
- const stored = loadFromStorage()
+ const authStore = useAuthStore()
+ const stored = loadFromStorage(authStore.currentUserId)
+ const initialActivePreset = stored?.presets?.find(preset => preset.id === stored?.activePresetId)
+ const initialSettings = initialActivePreset?.settings ?? stored
+ let persistTimer = null
- const theme = ref(stored?.theme ?? 'light')
- const floatingLines = ref(stored?.floatingLines ?? { ...FLOATING_LINES_DEFAULTS })
+ const theme = ref(initialSettings?.theme ?? 'light')
+ const floatingLines = ref({
+ ...FLOATING_LINES_DEFAULTS,
+ ...(initialSettings?.floatingLines ?? {})
+ })
// App preferences
- const appearance = ref(stored?.appearance ?? 'system') // 'system' | 'light' | 'dark'
- const accentColor = ref(stored?.accentColor ?? 'default')
- const language = ref(stored?.language ?? 'de')
+ const appearance = ref(initialSettings?.appearance ?? 'system') // 'system' | 'light' | 'dark'
+ const accentColor = ref(normalizeAccentColor(initialSettings?.accentColor ?? 'base'))
+ const language = ref(initialSettings?.language ?? 'de')
+ const emotionGradientStart = ref(initialSettings?.emotionGradientStart ?? DEFAULT_EMOTION_GRADIENT_START)
+ const emotionGradientEnd = ref(initialSettings?.emotionGradientEnd ?? DEFAULT_EMOTION_GRADIENT_END)
+ const timelineZoom = ref(initialSettings?.timelineZoom ?? DEFAULT_TIMELINE_ZOOM)
+ const timelineScrollLeft = ref(stored?.timelineScrollLeft ?? DEFAULT_TIMELINE_SCROLL_LEFT)
+ const presets = ref(stored?.presets ?? [])
+ const activePresetId = ref(stored?.activePresetId ?? null)
// Developer / debug
- const showFps = ref(stored?.showFps ?? false)
+ const showFps = ref(initialSettings?.showFps ?? false)
+
+ function createSnapshot() {
+ return {
+ theme: theme.value,
+ floatingLines: clone(floatingLines.value),
+ appearance: appearance.value,
+ accentColor: accentColor.value,
+ language: language.value,
+ emotionGradientStart: emotionGradientStart.value,
+ emotionGradientEnd: emotionGradientEnd.value,
+ timelineZoom: timelineZoom.value,
+ showFps: showFps.value
+ }
+ }
+
+ function applySnapshot(snapshot) {
+ theme.value = snapshot?.theme ?? 'light'
+ floatingLines.value = {
+ ...FLOATING_LINES_DEFAULTS,
+ ...(snapshot?.floatingLines ?? {})
+ }
+ appearance.value = snapshot?.appearance ?? 'system'
+ accentColor.value = normalizeAccentColor(snapshot?.accentColor ?? 'base')
+ language.value = snapshot?.language ?? 'de'
+ emotionGradientStart.value = snapshot?.emotionGradientStart ?? DEFAULT_EMOTION_GRADIENT_START
+ emotionGradientEnd.value = snapshot?.emotionGradientEnd ?? DEFAULT_EMOTION_GRADIENT_END
+ timelineZoom.value = snapshot?.timelineZoom ?? DEFAULT_TIMELINE_ZOOM
+ showFps.value = snapshot?.showFps ?? false
+ }
function persist() {
+ if (persistTimer) {
+ clearTimeout(persistTimer)
+ persistTimer = null
+ }
+
+ if (!authStore.currentUserId) return
+
localStorage.setItem(
- STORAGE_KEY,
+ getStorageKey(authStore.currentUserId),
JSON.stringify({
- theme: theme.value,
- floatingLines: floatingLines.value,
- appearance: appearance.value,
- accentColor: accentColor.value,
- language: language.value,
- showFps: showFps.value
+ ...createSnapshot(),
+ timelineScrollLeft: timelineScrollLeft.value,
+ presets: presets.value,
+ activePresetId: activePresetId.value
})
)
}
- watch([theme, floatingLines, appearance, accentColor, language, showFps], persist, { deep: true })
+ function schedulePersist() {
+ if (persistTimer) clearTimeout(persistTimer)
+ persistTimer = setTimeout(persist, PERSIST_DELAY_MS)
+ }
+
+ function applyStoredSettingsForUser(userId) {
+ if (persistTimer) {
+ clearTimeout(persistTimer)
+ persistTimer = null
+ }
+
+ const nextStored = loadFromStorage(userId)
+ presets.value = nextStored?.presets ?? []
+ activePresetId.value = nextStored?.activePresetId ?? null
+
+ const activePreset = presets.value.find(preset => preset.id === activePresetId.value)
+ applySnapshot(activePreset?.settings ?? nextStored)
+ timelineScrollLeft.value = nextStored?.timelineScrollLeft ?? DEFAULT_TIMELINE_SCROLL_LEFT
+ }
+
+ watch([theme, floatingLines, appearance, accentColor, language, emotionGradientStart, emotionGradientEnd, timelineZoom, timelineScrollLeft, showFps, presets, activePresetId], schedulePersist, { deep: true })
+ watch(() => authStore.currentUserId, applyStoredSettingsForUser)
+ watch(accentColor, (value) => {
+ const normalized = normalizeAccentColor(value)
+ if (accentColor.value !== normalized) {
+ accentColor.value = normalized
+ return
+ }
+ applyAccentCssVariables(normalized)
+ }, { immediate: true })
function toggleTheme() {
theme.value = theme.value === 'light' ? 'dark' : 'light'
@@ -93,15 +238,67 @@ export const useSettingsStore = defineStore('settings', () => {
floatingLines.value = { ...FLOATING_LINES_DEFAULTS }
}
+ function resetEmotionGradient() {
+ emotionGradientStart.value = DEFAULT_EMOTION_GRADIENT_START
+ emotionGradientEnd.value = DEFAULT_EMOTION_GRADIENT_END
+ }
+
+ function saveTimelineScrollLeft(value, immediate = false) {
+ timelineScrollLeft.value = Number.isFinite(value) ? value : DEFAULT_TIMELINE_SCROLL_LEFT
+ if (immediate) {
+ persist()
+ }
+ }
+
+ function savePreset(name) {
+ const trimmedName = String(name || '').trim()
+ if (!trimmedName) return null
+
+ const existing = presets.value.find(preset => preset.name.toLowerCase() === trimmedName.toLowerCase())
+ const savedPreset = {
+ id: existing?.id ?? crypto.randomUUID(),
+ name: trimmedName,
+ settings: createSnapshot(),
+ updatedAt: Date.now()
+ }
+
+ presets.value = existing
+ ? presets.value.map(preset => preset.id === existing.id ? savedPreset : preset)
+ : [...presets.value, savedPreset]
+ activePresetId.value = savedPreset.id
+ persist()
+ return savedPreset
+ }
+
+ function applyPreset(presetId) {
+ const preset = presets.value.find(candidate => candidate.id === presetId)
+ if (!preset) return false
+
+ activePresetId.value = preset.id
+ applySnapshot(preset.settings)
+ persist()
+ return true
+ }
+
return {
theme,
floatingLines,
appearance,
accentColor,
language,
+ emotionGradientStart,
+ emotionGradientEnd,
+ timelineZoom,
+ timelineScrollLeft,
+ presets,
+ activePresetId,
showFps,
toggleTheme,
updateFloatingLines,
- resetFloatingLines
+ resetFloatingLines,
+ resetEmotionGradient,
+ saveTimelineScrollLeft,
+ savePreset,
+ applyPreset
}
})
diff --git a/workspace.code-workspace b/workspace.code-workspace
new file mode 100644
index 0000000..114863a
--- /dev/null
+++ b/workspace.code-workspace
@@ -0,0 +1,30 @@
+{
+ "folders": [
+ {
+ "path": "."
+ }
+ ],
+ "settings": {
+ "workbench.colorCustomizations": {
+ "activityBar.activeBackground": "#2c58b1",
+ "activityBar.background": "#2c58b1",
+ "activityBar.foreground": "#e7e7e7",
+ "activityBar.inactiveForeground": "#e7e7e799",
+ "activityBarBadge.background": "#4d1326",
+ "activityBarBadge.foreground": "#e7e7e7",
+ "commandCenter.border": "#e7e7e799",
+ "sash.hoverBorder": "#2c58b1",
+ "statusBar.background": "#224488",
+ "statusBar.foreground": "#e7e7e7",
+ "statusBarItem.hoverBackground": "#2c58b1",
+ "statusBarItem.remoteBackground": "#224488",
+ "statusBarItem.remoteForeground": "#e7e7e7",
+ "titleBar.activeBackground": "#224488",
+ "titleBar.activeForeground": "#e7e7e7",
+ "titleBar.inactiveBackground": "#22448899",
+ "titleBar.inactiveForeground": "#e7e7e799"
+ },
+ "peacock.color": "#224488", //not sure if this is relevant; I have an extension called Peacock
+ "editor.formatOnSave": true
+ }
+}
\ No newline at end of file
- BG Rand
+ {{ isSplit ? 'Oben' : 'BG Rand' }}
-
-
- Farbverlauf (je Zeile ein Hex)
-
-
-
-
Extras
+
+
+ Horizont
+
+
+
+
+
+
+
+ Übergang
+
+ {{ (fl.horizonBlend ?? 0.2) < 0.1 ? 'scharf' : (fl.horizonBlend ?? 0.2) > 0.6 ? 'weich' : '' }}
+ {{ (fl.horizonBlend ?? 0.2).toFixed(2) }}
+
+
+
+ Deckkraft
+ {{ (fl.horizonOpacity ?? 0.5).toFixed(2) }}
+
+
{{ isDark ? 'Hell-Modus' : 'Dunkel-Modus' }}
+
+
+ Presets
+
+
+
Preset speichern
+
+ Speichert alle aktuellen Life Wave Settings inklusive Hintergrundbild.
+
+