[beam] add DayDivider to list views

[crabinak]

@agritheory
I've added a DayDivider to the Beam ListView. I centered-aligned the text to help it visually stand out amongst the lists. The medium gray worked best here as the darker colors overpowered the navigation menu. This takes in month, day, and year as props and formats them to display, but it could be reworked to take in an object or however the date would be passed in.

[github-actions]

Coverage Report for ./beam

Status	Category	Percentage	Covered / Total
🔴	Lines	5.3% (🎯 70%)	7 / 132
🔴	Statements	5.63% (🎯 70%)	8 / 142
🔴	Functions	2.43% (🎯 70%)	1 / 41
🔴	Branches	0% (🎯 70%)	0 / 79

File Coverage

File	Stmts	Branches	Functions	Lines	Uncovered Lines
Changed Files
beam/src/components/BeamDayDivider.vue	0%	0%	0%	0%	17-2
beam/src/components/ListView.vue	0%	0%	0%	0%	29-2
Unchanged Files
beam/src/components/ActionFooter.vue	0%	100%	0%	0%	12-5
beam/src/components/BeamArrow.vue	0%	0%	100%	0%	2-4
beam/src/components/BeamFilter.vue	0%	0%	0%	0%	18-9
beam/src/components/BeamFilterOption.vue	0%	0%	0%	0%	41-21
beam/src/components/BeamMetadata.vue	0%	0%	0%	0%	2-1
beam/src/components/BeamModal.vue	0%	0%	0%	0%	3-5
beam/src/components/BeamModalOutlet.vue	0%	100%	100%	0%	2
beam/src/components/BeamProgress.vue	0%	0%	0%	0%	22-3
beam/src/components/Confirm.vue	0%	0%	0%	0%	4-1
beam/src/components/ItemCheck.vue	0%	0%	0%	0%	9-3
beam/src/components/ItemCount.vue	0%	0%	0%	0%	20-1
beam/src/components/ListAnchor.vue	0%	100%	100%	0%	1
beam/src/components/ListItem.vue	0%	0%	0%	0%	27-15
beam/src/components/Navbar.vue	0%	0%	0%	0%	13-null
beam/src/components/ScanInput.vue	88.88%	100%	50%	87.5%	23
beam/src/components/SplitColumn.vue	0%	0%	100%	0%	5-8
beam/src/composables/mqtt.ts	0%	0%	0%	0%	8-40

Generated in workflow #437 for commit 4a29b14 by the Vitest Coverage Report Action

[agritheory]

I'd like to see the specimen use the ListView component API, I left an example that works but doesn't look right

[Alchez]

@crabinak I've added a commit that merges changes from the main branch, so you will have to pull before making more changes.

[crabinak]

@agritheory I updated this to use linkComponent. It accepts a Date object as the prop as well as an option to specify the format. As an example, I provided two date dividers: one as the default DateString and the other using ISOString. I didn't add more format types just incase this feature was not desired.

I also left-aligned the DayeDivider content as having it center-aligned made it stand out but not in a good way.

[Alchez]

@agritheory @crabinak

I added some minor processing changes, and here's what the latest iteration looks like:

Let me know if that looks okay.

[agritheory]

@crabinak @Alchez How do we feel about using the lighter blue "cell change color" as background for this?

[crabinak]

@Alchez Looks good to me.

@agritheory I updated this to use that light blue color you requested. I also removed the top border from the day divider as it was causing a double border with the bottom border from the previous item.