diff --git a/frontend/src/views/JournalView.vue b/frontend/src/views/JournalView.vue index 551ecfe..d776336 100644 --- a/frontend/src/views/JournalView.vue +++ b/frontend/src/views/JournalView.vue @@ -4,6 +4,7 @@ import { useBackgroundRefresh } from '@/composables/useBackgroundRefresh' import { useChatStore } from '@/stores/chat' import ChatPanel from '@/components/ChatPanel.vue' import WeatherCard from '@/components/WeatherCard.vue' +import { RotateCcw } from 'lucide-vue-next' import { apiGet, apiPost, @@ -273,7 +274,9 @@ onMounted(async () => { :disabled="refreshingWeather" @click="refreshWeather" title="Refresh weather" - >↻ + > + + { } .journal-header-left { display: flex; align-items: baseline; gap: 0.75rem; } .journal-title { - font-family: 'Fraunces', Georgia, serif; + /* h1 inherits Fraunces from theme.css; weight 500 follows the doc's "two weights only" rule */ font-size: 1.3rem; - font-weight: 700; margin: 0; color: var(--color-text); } @@ -382,6 +384,12 @@ onMounted(async () => { .journal-chat-panel { flex: 1; min-height: 0; } +/* Long-form reading line-height for journal assistant bubbles + (the daily prep is prose, not chat snippets — wants the doc's 1.7) */ +.journal-chat-panel :deep(.role-assistant .message-content) { + line-height: 1.7; +} + /* ── Right column ─────────────────────────────────────────────────────────── */ .journal-right { grid-column: 2; @@ -434,7 +442,7 @@ onMounted(async () => { background: color-mix(in srgb, var(--color-primary) 12%, transparent); border-color: var(--color-primary); color: var(--color-primary); - font-weight: 600; + font-weight: 500; } .events-section { padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); } @@ -444,7 +452,7 @@ onMounted(async () => { .events-day-group { display: flex; flex-direction: column; gap: 0.2rem; } .events-day-label { font-size: 0.72rem; - font-weight: 700; + font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; @@ -457,70 +465,19 @@ onMounted(async () => { flex-shrink: 0; margin-top: 5px; } .event-body { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } -.event-title { font-size: 0.82rem; font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.event-title { font-size: 0.82rem; font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-time { font-size: 0.72rem; color: var(--color-text-muted); } .event-loc { font-size: 0.7rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.news-section { - flex: 1; - overflow-y: auto; - padding: 0.75rem 1rem 1rem; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - .panel-label { font-size: 0.72rem; - font-weight: 700; + font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); flex-shrink: 0; } .panel-label-row { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } -.news-count { font-size: 0.72rem; color: var(--color-text-muted); } -.panel-empty { font-size: 0.82rem; color: var(--color-text-muted); padding: 0.5rem 0; } - -.news-card { - background: var(--color-bg-card); - border: 1px solid var(--color-border); - border-radius: 10px; - padding: 0.65rem 0.85rem; - display: flex; - flex-direction: column; - gap: 0.25rem; - flex-shrink: 0; -} -.news-card-meta { display: flex; align-items: center; gap: 0.5rem; } -.news-source { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); } -.news-date { font-size: 0.72rem; color: var(--color-text-muted); } -.news-title { font-size: 0.88rem; font-weight: 600; color: var(--color-text); line-height: 1.35; text-decoration: none; margin: 0; } -a.news-title:hover { text-decoration: underline; color: var(--color-primary); } -.news-snippet { - font-size: 0.78rem; - color: var(--color-text-muted); - line-height: 1.45; - margin: 0; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} -.news-reactions { display: flex; gap: 0.3rem; margin-top: 0.15rem; } -.reaction-btn { - background: none; - border: 1px solid var(--color-border); - border-radius: 6px; - padding: 0.1rem 0.35rem; - cursor: pointer; - font-size: 0.82rem; - line-height: 1.4; - opacity: 0.55; - transition: opacity 0.15s, border-color 0.15s; -} -.reaction-btn:hover { opacity: 1; border-color: var(--color-primary); } -.reaction-btn.active { opacity: 1; border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, transparent); } @media (max-width: 900px) { .journal-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }