feat: add shared overview and harden frontend session state (#407)

frontend/src/styles.css

@@ -431,6 +431,106 @@ body.modal-open {
 	color: var(--danger);
 }
 
+.reminder-status-skeleton .reminder-status-title {
+	color: var(--text-secondary);
+}
+
+.reminder-status-skeleton-lines {
+	gap: 0.45rem;
+}
+
+.skeleton-line {
+	display: block;
+	height: 0.75rem;
+	border-radius: 999px;
+	position: relative;
+	overflow: hidden;
+	background: color-mix(in srgb, var(--bg-tertiary) 78%, transparent);
+	max-width: 100%;
+}
+
+.skeleton-line::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	transform: translateX(-100%);
+	background: linear-gradient(
+		90deg,
+		transparent 0%,
+		color-mix(in srgb, var(--text-muted) 30%, transparent) 45%,
+		transparent 100%
+	);
+	animation: reminderSkeletonSweep 1.1s linear infinite;
+}
+
+.skeleton-line-long {
+	width: min(540px, 96%);
+}
+
+.skeleton-line-medium {
+	width: min(420px, 82%);
+}
+
+.skeleton-line-short {
+	width: min(300px, 68%);
+}
+
+.skeleton-pill {
+	width: 110px;
+	height: 2.25rem;
+	border-radius: 10px;
+}
+
+.dashboard-card-skeleton {
+	display: flex;
+	flex-direction: column;
+	gap: 0.55rem;
+	padding: 0.35rem 0;
+}
+
+.dashboard-actions-skeleton {
+	align-items: center;
+}
+
+.page-loading-skeleton {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+}
+
+.skeleton-card {
+	display: flex;
+	flex-direction: column;
+	gap: 0.65rem;
+	padding: 0.25rem 0;
+}
+
+.shared-schedule-loading-skeleton .skeleton-card {
+	max-width: 540px;
+	margin: 0.75rem auto 0;
+}
+
+.screen-reader-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+@keyframes reminderSkeletonSweep {
+	0% {
+		transform: translateX(-100%);
+	}
+	100% {
+		transform: translateX(100%);
+	}
+}
+
 .med-link {
 	font-weight: 600;
 	text-decoration: underline;
@@ -576,6 +676,7 @@ body.modal-open {
 	max-width: 100%;
 }
 
+.select-field.schedule-days-select,
 .schedule-days-select {
 	background-color: var(--accent-bg);
 	border: 1px solid var(--accent);
@@ -591,9 +692,11 @@ body.modal-open {
 	flex-shrink: 0;
 	background-position: right 0.6rem center;
 }
+.select-field.schedule-days-select:hover,
 .schedule-days-select:hover {
 	filter: brightness(1.15);
 }
+.select-field.schedule-days-select:focus,
 .schedule-days-select:focus {
 	border-color: var(--accent-light);
 }
@@ -1704,7 +1807,8 @@ textarea.auto-resize {
 	gap: 0.75rem;
 }
 
-/* Package type selector - simple dropdown style */
+/* Generic select variant used by multiple form contexts */
+.select-field,
 .package-type-select {
 	width: 100%;
 	padding: 0.6rem 2rem 0.6rem 0.75rem;
@@ -1717,6 +1821,12 @@ textarea.auto-resize {
 	background-position: right 0.9rem center;
 }
 
+.select-field:hover,
+.package-type-select:hover {
+	border-color: var(--accent);
+}
+
+.select-field:focus,
 .package-type-select:focus {
 	outline: none;
 	border-color: var(--accent);
@@ -1819,6 +1929,7 @@ button.has-validation-error {
 	min-width: 100px;
 }
 
+.select-field.dose-unit-select,
 .dose-unit-select {
 	width: auto;
 	min-width: unset;
@@ -1835,11 +1946,13 @@ button.has-validation-error {
 	background-position: right 0.6rem center;
 }
 
+.select-field.dose-unit-select:focus,
 .dose-unit-select:focus {
 	outline: none;
 	border-color: var(--accent);
 }
 
+.select-field.dose-unit-select:hover,
 .dose-unit-select:hover {
 	border-color: var(--accent);
 }
@@ -3166,6 +3279,7 @@ button.has-validation-error {
 	min-width: 100px;
 }
 
+.select-field.language-select,
 .language-select {
 	flex: 1 1 auto;
 	min-width: 140px;
@@ -3180,10 +3294,12 @@ button.has-validation-error {
 	background-position: right 0.9rem center;
 }
 
+.select-field.language-select:hover,
 .language-select:hover {
 	border-color: var(--accent);
 }
 
+.select-field.language-select:focus,
 .language-select:focus {
 	outline: none;
 	border-color: var(--accent);
@@ -4124,6 +4240,24 @@ button.has-validation-error {
 	padding-top: 0.5rem;
 }
 
+.api-key-actions {
+	padding-top: 0.35rem;
+	align-items: stretch;
+}
+
+.api-key-token-input {
+	flex: 1;
+	font-family: "SF Mono", "Fira Code", monospace;
+	font-size: 0.84rem;
+}
+
+@media (max-width: 700px) {
+	.api-key-actions {
+		flex-direction: column;
+		align-items: stretch;
+	}
+}
+
 .form-footer {
 	display: flex;
 	justify-content: flex-end;