dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(calendar): add week hover jump for month rows

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-21 12:03:16 +07:00
parent 29c5354ff8
commit 5bff62b62f
1 changed files with 301 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

293
frontend/app.vue
View File

@@ -358,6 +358,22 @@ const pilotWaveContainer = ref<HTMLDivElement | null>(null);
const livePilotUserText = ref("");
const livePilotAssistantText = ref("");
const pilotLiveLogs = ref<Array<{ id: string; text: string; at: string }>>([]);
const PILOT_LIVE_LOGS_PREVIEW_LIMIT = 5;
const pilotLiveLogsExpanded = ref(false);
const pilotLiveLogHiddenCount = computed(() => {
const hidden = pilotLiveLogs.value.length - PILOT_LIVE_LOGS_PREVIEW_LIMIT;
return hidden > 0 ? hidden : 0;
});
const pilotVisibleLiveLogs = computed(() => {
if (pilotLiveLogsExpanded.value || pilotLiveLogHiddenCount.value === 0) return pilotLiveLogs.value;
return pilotLiveLogs.value.slice(-PILOT_LIVE_LOGS_PREVIEW_LIMIT);
});
const pilotVisibleLogCount = computed(() =>
Math.min(pilotLiveLogs.value.length, PILOT_LIVE_LOGS_PREVIEW_LIMIT),
);
function togglePilotLiveLogsExpanded() {
pilotLiveLogsExpanded.value = !pilotLiveLogsExpanded.value;
}
let pilotMediaRecorder: MediaRecorder | null = null;
let pilotRecorderStream: MediaStream | null = null;
let pilotRecordingChunks: Blob[] = [];
@@ -422,6 +438,15 @@ let pilotBackgroundPoll: ReturnType<typeof setInterval> | null = null;
const lifecycleNowMs = ref(Date.now());
let lifecycleClock: ReturnType<typeof setInterval> | null = null;
watch(
() => pilotLiveLogs.value.length,
(len) => {
if (len === 0 || len <= PILOT_LIVE_LOGS_PREVIEW_LIMIT) {
pilotLiveLogsExpanded.value = false;
}
},
);
watch(
() => authMe.value?.conversation.id,
(id) => {
@@ -763,6 +788,7 @@ async function sendPilotText(rawText: string) {
pilotInput.value = "";
livePilotUserText.value = text;
livePilotAssistantText.value = "";
pilotLiveLogsExpanded.value = false;
pilotLiveLogs.value = [];
try {
await pilotChat.sendMessage({ text });
@@ -1883,6 +1909,38 @@ const calendarViewOptions: { value: CalendarView; label: string }[] = [
{ value: "agenda", label: "Agenda" },
];
const calendarZoomOptions: Array<{ value: number; label: string }> = [
{ value: 1, label: "400%" },
{ value: 2, label: "250%" },
{ value: 3, label: "100%" },
{ value: 4, label: "50%" },
];
const calendarZoomLevel = computed<number>({
get() {
if (calendarView.value === "day") return 1;
if (calendarView.value === "week") return 2;
if (calendarView.value === "month" || calendarView.value === "agenda") return 3;
return 4;
},
set(next) {
const level = Math.max(1, Math.min(4, Number(next) || 3));
if (level === 1) {
calendarView.value = "day";
return;
}
if (level === 2) {
calendarView.value = "week";
return;
}
if (level === 3) {
calendarView.value = "month";
return;
}
calendarView.value = "year";
},
});
const monthCells = computed(() => {
const year = calendarCursor.value.getFullYear();
const month = calendarCursor.value.getMonth();
@@ -1903,6 +1961,20 @@ const monthCells = computed(() => {
});
});
const monthRows = computed(() => {
const rows: Array<{ key: string; startKey: string; cells: typeof monthCells.value }> = [];
for (let index = 0; index < monthCells.value.length; index += 7) {
const cells = monthCells.value.slice(index, index + 7);
if (!cells.length) continue;
rows.push({
key: `${cells[0]?.key ?? index}-week-row`,
startKey: cells[0]?.key ?? selectedDateKey.value,
cells,
});
}
return rows;
});
function monthCellHasFocusedEvent(events: CalendarEvent[]) {
const id = focusedCalendarEventId.value.trim();
if (!id) return false;
@@ -2023,6 +2095,16 @@ function pickDate(key: string) {
calendarCursor.value = new Date(d.getFullYear(), d.getMonth(), 1);
}
function openDayView(key: string) {
pickDate(key);
calendarView.value = "day";
}
function openWeekView(key: string) {
pickDate(key);
calendarView.value = "week";
}
function openYearMonth(monthIndex: number) {
focusedCalendarEventId.value = "";
const year = calendarCursor.value.getFullYear();
@@ -3393,8 +3475,21 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
</div>
</div>
<div v-if="pilotLiveLogs.length" class="pilot-stream-status">
<div class="pilot-stream-head">
<p v-if="!pilotLiveLogsExpanded && pilotLiveLogHiddenCount > 0" class="pilot-stream-caption">
Showing last {{ pilotVisibleLogCount }} steps
</p>
<button
v-if="pilotLiveLogHiddenCount > 0 || pilotLiveLogsExpanded"
type="button"
class="pilot-stream-toggle"
@click="togglePilotLiveLogsExpanded"
>
{{ pilotLiveLogsExpanded ? "Show less" : `Show all (+${pilotLiveLogHiddenCount})` }}
</button>
</div>
<p
v-for="log in pilotLiveLogs"
v-for="log in pilotVisibleLiveLogs"
:key="`pilot-log-${log.id}`"
class="pilot-stream-line"
:class="log.id === pilotLiveLogs[pilotLiveLogs.length - 1]?.id ? 'pilot-stream-line-current' : ''"
@@ -3546,19 +3641,18 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
<div class="grid grid-cols-[auto_1fr_auto] items-center gap-2">
<div class="flex items-center gap-1">
<button class="btn btn-xs" @click="setToday">Today</button>
<button class="btn btn-xs btn-ghost" @click="shiftCalendar(-1)">←</button>
<button class="btn btn-xs btn-ghost" @click="shiftCalendar(1)">→</button>
</div>
<div class="text-center text-sm font-medium">
{{ calendarPeriodLabel }}
</div>
<div class="justify-self-end">
<select v-model="calendarView" class="select select-bordered select-xs w-36">
<div class="justify-self-end flex items-center gap-2">
<span class="text-[10px] uppercase tracking-wide text-base-content/60">Zoom</span>
<select v-model.number="calendarZoomLevel" class="select select-bordered select-xs w-24">
<option
v-for="option in calendarViewOptions"
:key="`calendar-view-${option.value}`"
v-for="option in calendarZoomOptions"
:key="`calendar-zoom-${option.value}`"
:value="option.value"
>
{{ option.label }}
@@ -3579,7 +3673,24 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
<p class="mt-1 text-xs text-base-content/80">{{ focusedCalendarEvent.note || "No note" }}</p>
</article>
<div class="min-h-0 flex-1 overflow-y-auto pr-1">
<div class="calendar-content-wrap min-h-0 flex-1">
<button
class="calendar-side-nav calendar-side-nav-left"
type="button"
title="Previous period"
@click="shiftCalendar(-1)"
>
<span>←</span>
</button>
<button
class="calendar-side-nav calendar-side-nav-right"
type="button"
title="Next period"
@click="shiftCalendar(1)"
>
<span>→</span>
</button>
<div class="calendar-content-scroll min-h-0 h-full overflow-y-auto pr-1">
<div v-if="calendarView === 'month'" class="space-y-1">
<div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
<span>Sun</span>
@@ -3591,11 +3702,25 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
<span>Sat</span>
</div>
<div class="space-y-1">
<div
v-for="row in monthRows"
:key="row.key"
class="group relative"
>
<button
type="button"
class="calendar-hover-jump calendar-hover-jump-row"
title="Open week view"
@click.stop="openWeekView(row.startKey)"
>
Week
</button>
<div class="grid grid-cols-7 gap-1">
<button
v-for="cell in monthCells"
v-for="cell in row.cells"
:key="cell.key"
class="min-h-24 rounded-lg border p-1 text-left"
class="group relative min-h-24 rounded-lg border p-1 text-left"
:class="[
cell.inMonth ? 'border-base-300 bg-base-100' : 'border-base-200 bg-base-200/40 text-base-content/40',
selectedDateKey === cell.key ? 'border-primary bg-primary/5' : '',
@@ -3604,6 +3729,13 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
@click="pickDate(cell.key)"
>
<p class="mb-1 text-xs font-semibold">{{ cell.day }}</p>
<span
class="calendar-hover-jump"
title="Open day view"
@click.stop="openDayView(cell.key)"
>
Day
</span>
<button
v-for="event in monthCellEvents(cell.events)"
:key="event.id"
@@ -3616,16 +3748,26 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
</button>
</div>
</div>
</div>
</div>
<div v-else-if="calendarView === 'week'" class="space-y-2">
<article
v-for="day in weekDays"
:key="day.key"
class="rounded-xl border border-base-300 p-3"
class="group relative rounded-xl border border-base-300 p-3"
:class="selectedDateKey === day.key ? 'border-primary bg-primary/5' : ''"
@click="pickDate(day.key)"
>
<p class="mb-2 text-sm font-semibold">{{ day.label }} {{ day.day }}</p>
<button
type="button"
class="calendar-hover-jump calendar-hover-jump-week"
title="Open day view"
@click.stop="openDayView(day.key)"
>
Day
</button>
<div class="space-y-1">
<button
v-for="event in day.events"
@@ -3691,6 +3833,7 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
</button>
</div>
</div>
</div>
</section>
<section v-else-if="selectedTab === 'communications' && false" class="space-y-3">
@@ -4732,6 +4875,102 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
</template>
<style scoped>
.calendar-content-wrap {
position: relative;
padding-left: 40px;
padding-right: 40px;
}
.calendar-content-scroll {
height: 100%;
}
.calendar-side-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 28px;
height: 28px;
border: 1px solid color-mix(in oklab, var(--color-base-content) 16%, transparent);
border-radius: 999px;
background: color-mix(in oklab, var(--color-base-100) 88%, transparent);
color: color-mix(in oklab, var(--color-base-content) 86%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.calendar-side-nav:hover {
border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
background: color-mix(in oklab, var(--color-primary) 14%, var(--color-base-100));
transform: translateY(-50%) scale(1.03);
}
.calendar-side-nav-left {
left: 4px;
}
.calendar-side-nav-right {
right: 4px;
}
.calendar-hover-jump {
position: absolute;
top: 4px;
right: 4px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 20px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
background: color-mix(in oklab, var(--color-base-100) 86%, transparent);
color: color-mix(in oklab, var(--color-base-content) 78%, transparent);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease;
transform: translateY(-2px);
cursor: pointer;
}
.group:hover > .calendar-hover-jump,
.group:focus-within > .calendar-hover-jump {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.calendar-hover-jump:hover {
background: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
}
.calendar-hover-jump-week,
.calendar-hover-jump-row {
top: 8px;
right: 10px;
min-width: 46px;
}
@media (max-width: 960px) {
.calendar-content-wrap {
padding-left: 32px;
padding-right: 32px;
}
.calendar-side-nav {
width: 24px;
height: 24px;
}
}
.pilot-shell {
background:
radial-gradient(circle at 10% -10%, rgba(124, 144, 255, 0.25), transparent 40%),
@@ -5030,6 +5269,38 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
gap: 3px;
}
.pilot-stream-head {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 2px;
}
.pilot-stream-caption {
margin: 0;
text-align: center;
font-size: 10px;
line-height: 1.3;
color: rgba(174, 185, 223, 0.72);
}
.pilot-stream-toggle {
border: 1px solid rgba(164, 179, 230, 0.35);
background: rgba(25, 33, 56, 0.45);
color: rgba(229, 235, 255, 0.92);
border-radius: 999px;
font-size: 10px;
line-height: 1.2;
padding: 3px 8px;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.pilot-stream-toggle:hover {
border-color: rgba(180, 194, 240, 0.6);
background: rgba(35, 45, 72, 0.7);
}
.pilot-stream-line {
margin: 0;
text-align: center;