feat(native): home and lock screen widgets in the TREK look

Four widgets instead of one plain text block, drawn in the phone tokens
(warm paper by day, near black by night) with contour lines and a route arc
as the travel motif:

- Trip (small, medium, large, lock screen): the cover photo, a countdown ring
  and a plane on its arc before the trip; the day of the trip as segments,
  the weather and the next stops on frosted glass while it runs
- Today (medium, large): the day as a timeline in its category colours, with
  a now line, the day's progress and the weather
- Bookings (small, medium, large, lock screen): flights, trains, hotels and
  tables ahead as coloured tiles, the next one featured, status dots
- To-dos (small, medium, large, lock screen): to-dos and packing as nested
  rings, the most pressing open to-dos with priority and due dates

The app now sends the destination, a small cover JPEG, the weather where the
trip is, the bookings ahead, the open to-dos and the packing count; every
new field is optional on both sides, so older binaries and servers keep
working. Timelines step every quarter hour so the now line moves without
the app. client/ios/WidgetPreviews renders every widget in every size, light
and dark, on the CI's Mac, uploaded as the widget-previews artifact.
This commit is contained in:
Maurice
2026-11-06 19:01:08 +01:00
parent 3466556849
commit b1037dec62
48 changed files with 3033 additions and 127 deletions
+83 -1
View File
@@ -13,7 +13,7 @@ vi.mock('./trekShell', () => ({
}));
import { TrekShell } from './trekShell';
import { buildSnapshot, pickTrip, publishWidgets, todayOf, tripDayState } from './widgets';
import { buildSnapshot, pickTrip, publishWidgets, todayOf, tripDayState, withBookings } from './widgets';
const trip = (id: number, start: string | null, end: string | null, archived = 0) =>
({ id, title: `Trip ${id}`, start_date: start, end_date: end, is_archived: archived }) as unknown as Trip;
@@ -129,3 +129,85 @@ describe('publishWidgets', () => {
expect(TrekShell.syncTripDay).not.toHaveBeenCalled();
});
});
describe('the richer snapshot', () => {
it('puts the timed bookings of the day between the stops and gives the day its place in the trip', () => {
const days = [
day(1, 1, '2026-11-06', [{ name: 'Museum', time: '09:00' }, { name: 'Walk' }, { name: 'Dinner', time: '19:30' }]),
day(2, 2, '2026-11-07', []),
];
const plain = todayOf(
trip(1, '2026-11-06', '2026-11-07'),
days,
'2026-11-06',
() => 'D',
(t) => t
);
if (!plain) throw new Error('the trip runs today');
const today = withBookings(
plain,
[
{ id: 1, trip_id: 1, title: 'Train', type: 'train', status: 'confirmed', reservation_time: '2026-11-06T12:15' },
{
id: 2,
trip_id: 1,
title: 'Tomorrow',
type: 'flight',
status: 'confirmed',
reservation_time: '2026-11-07T08:00',
},
{ id: 3, trip_id: 1, title: 'Gone', type: 'event', status: 'cancelled', reservation_time: '2026-11-06T10:00' },
] as never,
'2026-11-06',
(t) => t
);
expect(today.stops.map((s) => s.name)).toEqual(['Museum', 'Walk', 'Train', 'Dinner']);
expect(today.stops[2]).toMatchObject({ time: '12:15', minutes: 735, symbol: 'tram.fill' });
expect(today).toMatchObject({ index: 1, total: 2 });
expect(withBookings(plain, [], '2026-11-06', (t) => t)).toBe(plain);
});
it('carries the extras and leaves out what is empty', () => {
const snapshot = buildSnapshot(
{ ...trip(1, '2026-11-06', '2026-11-07'), day_count: 2 } as Trip,
{
tripTitle: 'Trip 1',
path: '/trips/1',
dayLabel: 'D',
index: 1,
total: 2,
stops: [{ name: 'Tea', time: '10:00', minutes: 600, color: '#2FA37A', symbol: 'leaf.fill' }],
},
labels,
{
place: 'Kyoto, Japan',
cover: null,
placeCount: 12,
memberCount: 0,
weather: { temp: 18, main: 'Clear', label: 'Sunny' },
bookings: [],
todos: { open: 1, total: 2, items: [], path: '/trips/1?tab=listen' },
packing: null,
}
);
expect(snapshot.trip).toEqual({
title: 'Trip 1',
start: '2026-11-06',
end: '2026-11-07',
path: '/trips/1',
place: 'Kyoto, Japan',
dayCount: 2,
placeCount: 12,
});
expect(snapshot.today).toEqual({
dayLabel: 'D',
index: 1,
total: 2,
stops: [{ name: 'Tea', time: '10:00', minutes: 600, color: '#2FA37A', symbol: 'leaf.fill' }],
});
expect(snapshot.weather).toEqual({ temp: 18, main: 'Clear', label: 'Sunny' });
expect(snapshot.bookings).toEqual([]);
expect(snapshot.todos?.open).toBe(1);
expect(snapshot).not.toHaveProperty('packing');
});
});