ux updates

This commit is contained in:
beo3000 2026-02-20 22:33:48 +01:00
parent 46047ca543
commit 6818c469f6
6 changed files with 22 additions and 48 deletions

View File

@ -4,12 +4,12 @@
interface Props {
context: AgendaContext;
mode: 'prep' | 'meeting';
onmodechange: (mode: 'prep' | 'meeting') => void;
mode?: 'prep' | 'meeting';
onmodechange?: (mode: 'prep' | 'meeting') => void;
}
let { context, mode, onmodechange }: Props = $props();
const showModeSwitch = $derived(context.type === 'meeting' && context.id !== 'daily-log');
const showModeSwitch = $derived(!!onmodechange && context.type === 'meeting' && context.id !== 'daily-log');
const canRename = $derived(context.id !== 'daily-log');
let editing = $state(false);
let nameInput = $state('');
@ -71,13 +71,13 @@
<div class="flex gap-1 rounded-full bg-[#333] p-1">
<button
class="rounded-full border-none px-4 py-2 font-bold transition-all {mode === 'prep' ? 'bg-accent text-white shadow-md' : 'bg-transparent text-[#aaa] cursor-pointer'}"
onclick={() => onmodechange('prep')}
onclick={() => onmodechange?.('prep')}
>
Vorbereitung
</button>
<button
class="rounded-full border-none px-4 py-2 font-bold transition-all {mode === 'meeting' ? 'bg-warning text-[#222] shadow-md' : 'bg-transparent text-[#aaa] cursor-pointer'}"
onclick={() => onmodechange('meeting')}
onclick={() => onmodechange?.('meeting')}
>
Meeting
</button>

View File

@ -19,9 +19,10 @@
let { contextId }: Props = $props();
const context = liveQuery(() => db.contexts.get(contextId));
const isDailyLog = $derived(contextId === 'daily-log');
let mode = $state<'prep' | 'meeting'>(contextId === 'daily-log' ? 'meeting' : 'prep');
let activeView = $state('agenda');
let activeView = $state('journal');
let compact = $state(false);
// Rating modal state
@ -30,7 +31,7 @@
// Default view based on context type
$effect(() => {
if ($context) {
if (contextId === 'daily-log') {
if (isDailyLog) {
activeView = 'journal';
} else if ($context.type === 'meeting') {
activeView = 'agenda';
@ -81,8 +82,13 @@
<div bind:this={containerEl}>
{#if $context}
<ContextHeader context={$context} {mode} onmodechange={handleModeChange} />
<ViewTabs context={$context} {activeView} {compact} onviewchange={handleViewChange} ontogglecompact={toggleCompact} />
{#if isDailyLog}
<ContextHeader context={$context} />
<ViewTabs context={$context} {activeView} onviewchange={handleViewChange} />
{:else}
<ContextHeader context={$context} {mode} onmodechange={handleModeChange} />
<ViewTabs context={$context} {activeView} {compact} onviewchange={handleViewChange} ontogglecompact={toggleCompact} />
{/if}
{#if activeView === 'agenda'}
<AgendaView {contextId} {mode} />

View File

@ -196,7 +196,7 @@
class="self-start rounded bg-accent px-4 py-2 font-bold text-white hover:brightness-110"
onclick={handleAddEntry}
>
+ Eintrag hinzufügen
+ {selectedLinkedContextId ? 'Thema hinzufügen' : 'Notiz hinzufügen'}
</button>
</div>

View File

@ -1,13 +1,12 @@
<script lang="ts">
import type { AgendaContext, PersonMeta } from '@ka-note/shared';
import { settings } from '$lib/stores/settings';
interface Props {
context: AgendaContext;
activeView: string;
compact: boolean;
compact?: boolean;
onviewchange: (view: string) => void;
ontogglecompact: () => void;
ontogglecompact?: () => void;
}
let { context, activeView, compact, onviewchange, ontogglecompact }: Props = $props();
@ -21,16 +20,13 @@
const isCompany = $derived(context.type === 'company');
const isEmployee = $derived(isPerson && ((context.meta as PersonMeta | null)?.personSubType ?? 'contact') === 'employee');
const showAgenda = $derived(!isDailyLog || $settings.showAgendaTab);
const showSnoozed = $derived(!isDailyLog || $settings.showSnoozedTab);
const tabs = $derived<Tab[]>(
isMeeting
? [
...(showAgenda ? [{ id: 'agenda', label: 'Agenda / Eingabe' }] : []),
...(isDailyLog ? [] : [{ id: 'agenda', label: 'Agenda / Eingabe' }]),
{ id: 'journal', label: 'Journal / Historie' },
{ id: 'persons', label: 'Personen (All)' },
...(showSnoozed ? [{ id: 'snoozed', label: 'Verschoben' }] : [])
...(isDailyLog ? [] : [{ id: 'snoozed', label: 'Verschoben' }])
]
: [
{ id: 'dashboard', label: `Dashboard: ${context.name.replace(/^(Project |Person |Firma )/, '')}` },
@ -50,7 +46,7 @@
</button>
{/each}
{#if isMeeting && activeView === 'agenda'}
{#if isMeeting && activeView === 'agenda' && ontogglecompact}
<div class="ml-auto">
<button
class="rounded border border-[#555] bg-transparent px-2.5 py-1 text-sm text-[#ccc] hover:bg-[#333]"

View File

@ -1,14 +1,12 @@
import { writable } from 'svelte/store';
export interface AppSettings {
showAgendaTab: boolean;
showSnoozedTab: boolean;
}
const STORAGE_KEY = 'ka-note-settings';
const defaults: AppSettings = {
showAgendaTab: false,
showSnoozedTab: true
};

View File

@ -1,29 +1,3 @@
<script lang="ts">
import { settings } from '$lib/stores/settings';
</script>
<h1 class="mb-6 text-2xl font-bold text-accent">Einstellungen</h1>
<div class="rounded-lg border border-border bg-sidebar p-5">
<h2 class="mb-4 text-lg font-bold text-white">Daily Log Tabs</h2>
<label class="mb-3 flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
class="h-4 w-4 accent-accent"
checked={$settings.showAgendaTab}
onchange={(e) => settings.patch({ showAgendaTab: e.currentTarget.checked })}
/>
<span class="text-[#ccc]">Agenda-Tab anzeigen</span>
</label>
<label class="flex items-center gap-3 cursor-pointer">
<input
type="checkbox"
class="h-4 w-4 accent-accent"
checked={$settings.showSnoozedTab}
onchange={(e) => settings.patch({ showSnoozedTab: e.currentTarget.checked })}
/>
<span class="text-[#ccc]">Verschoben-Tab anzeigen</span>
</label>
</div>
<div class="text-muted">Keine Einstellungen vorhanden.</div>