Schedule against the whole guest list, and say who cannot be read

The availability bar showed the guests it had free/busy for and quietly
left out the ones it did not. In one row that is survivable. As a grid it
would be a lie: a row with nothing in it reads as a diary with nothing in
it, and "we cannot see this person's calendar" is the one thing that must
not look like "this person is free".

So everyone the event concerns now gets a row, and the ones with no
free/busy to read are drawn hatched rather than empty, with a line under
the grid saying how many and why. You get a row too, first. Scheduling
around the other people and not around yourself is how two things end up
at the same time, and the organiser was the one calendar the panel never
showed.

Your own row is never unknown. Where the directory does not list you under
the address your identity sends from -- an alias, a login that differs
from the address -- the account is still yours to read, and Stalwart
answers for it under the account's own id.

The window steps backwards and forwards a screenful at a time without
touching the event, which is the "movable forwards & backwards" the report
asks for, and offers its way back when you have wandered off.

And the bars are somewhere to put the event rather than only something to
read: the pointer shows the half hour it is over, and a click moves the
event there keeping its length. Clicking while stepped away moves the
event to where you clicked and returns the view to it, so it lands where
you were looking instead of jumping.

Free/busy is answered per principal, and only the server's own accounts
are principals. Somebody at another domain has none to read -- which is
not a gap to be closed, it is what the protocol can see -- so the grid
says so rather than drawing them blank.

Closes #172

web/src/lib/availabilityWindow.ts

@@ -65,13 +65,19 @@ function spacing(days: number): { every: number; label: number } {
   return { every: 24, label: 24 };
 }
 
-export function availabilityWindow(start: Date, end: Date, opts: { maxDays?: number } = {}): AvailabilityWindow {
+export function availabilityWindow(start: Date, end: Date, opts: { maxDays?: number; offsetDays?: number } = {}): AvailabilityWindow {
   const maxDays = opts.maxDays ?? 7;
-  const from = startOfDay(start);
+  /*
+   * Days moved from where the event sits, for looking around it without
+   * changing it. The whole window slides rather than growing: keeping the span
+   * fixed means what you compare when you step forward is the same width as
+   * what you were looking at, which is the point of stepping.
+   */
+  const from = addDays(startOfDay(start), opts.offsetDays ?? 0);
   // The last day is the one the event ends *on*. An event ending exactly at
   // midnight ends on the day before, not at the start of a day it never
   // touches -- that is the whole of what all-day events do.
-  const lastDay = startOfDay(new Date(Math.max(end.getTime() - 1, start.getTime())));
+  const lastDay = addDays(startOfDay(new Date(Math.max(end.getTime() - 1, start.getTime()))), opts.offsetDays ?? 0);
   const total = Math.max(1, Math.round((lastDay.getTime() - from.getTime()) / DAY_MS) + 1);
   const days = Math.min(total, maxDays);
   const to = addDays(from, days);