feat: blue-grey look, lit cards, page glow, unclipped rings and a Today that fits the window (#59)

* feat: deep blue-grey look, lit cards, page glow and a Today page that fits the window

* fix: share the card head, keep Today fitting the window, and clip hidden tables in cards

---------

Co-authored-by: Atharva Acharya <acharyaatharva07@gmail.com>

Author: atharva-acharya

src-tauri/src/fitness.rs

@@ -163,6 +163,15 @@ pub(crate) fn days(index: &Index, today: &str) -> rusqlite::Result<Vec<Day>> {
         .collect())
 }
 
+/// The daily steps and protein goals: the plan's, or the defaults.
+pub(crate) fn daily_goals(index: &Index) -> rusqlite::Result<(i64, i64)> {
+    Ok(
+        plan(index)?.map_or((DEFAULT_STEPS_GOAL, DEFAULT_PROTEIN_GOAL), |p| {
+            (p.steps_goal, p.protein_goal)
+        }),
+    )
+}
+
 fn plan(index: &Index) -> rusqlite::Result<Option<PlanView>> {
     index
         .conn()

src-tauri/src/today.rs

@@ -17,6 +17,9 @@ pub struct Today {
     pub applications: Option<i64>,
     pub gym: Option<String>,
     pub habits: Habits,
+    /// Daily goals from the fitness plan (or its defaults), for the Today rings.
+    pub steps_goal: i64,
+    pub protein_goal: i64,
     pub follow_ups: Vec<FollowUp>,
     pub project: Option<Resume>,
     /// Notes the app could not read, so the owner can fix them.
@@ -120,6 +123,8 @@ pub fn today(index: &Index, date: &str) -> rusqlite::Result<Today> {
 
     out.follow_ups = follow_ups(conn, date)?;
     out.project = resume(conn)?;
+    (out.steps_goal, out.protein_goal) = crate::fitness::daily_goals(index)?;
+
     out.parse_errors = conn.query_row(
         "SELECT COUNT(*) FROM notes WHERE error IS NOT NULL",
         [],
@@ -220,6 +225,8 @@ mod tests {
             }
         );
         assert_eq!(t.parse_errors, 1);
+        // The fixture's Fitness/Plan.md sets both goals.
+        assert_eq!((t.steps_goal, t.protein_goal), (8500, 160));
     }
 
     #[test]

src/App.tsx

@@ -145,6 +145,8 @@ export default function App() {
         expanded={railOpen}
         onToggle={toggleRail}
       />
+      {/* One soft glow in the page's own colour; it fades in on each page. */}
+      <div key={route.id} className="page-glow" data-page={route.id} aria-hidden="true" />
       <main
         className="main"
         ref={setMain}

src/api.ts

@@ -63,6 +63,9 @@ export interface Today {
   applications: number | null;
   gym: string | null;
   habits: Habits;
+  /** Daily goals from the fitness plan, or its defaults. */
+  stepsGoal: number;
+  proteinGoal: number;
   followUps: FollowUp[];
   project: Resume | null;
   parseErrors: number;

src/components/Card.tsx

@@ -176,3 +176,26 @@ export function Metric({
     </section>
   );
 }
+
+/** A card's own title row: the title inside the card, an action on the right. */
+export function CardHead({ id, title, action }: { id: string; title: string; action?: ReactNode }) {
+  return (
+    <div className="card__head">
+      <h2 id={id} className="card__title">
+        {title}
+      </h2>
+      {action}
+    </div>
+  );
+}
+
+export function MoreLink({ children, onClick }: { children: ReactNode; onClick: () => void }) {
+  return (
+    <button type="button" className="link-button card__action" onClick={onClick}>
+      {children}
+      <svg viewBox="0 0 12 12" aria-hidden="true" focusable="false">
+        <path d="M4.5 2.5 8 6l-3.5 3.5" />
+      </svg>
+    </button>
+  );
+}

src/components/Rings.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties } from "react";
+import { useId, type CSSProperties } from "react";
 
 /** One activity ring: progress towards a daily goal. */
 export interface Ring {
@@ -14,8 +14,9 @@ export interface Ring {
   hint?: string;
 }
 
-const STROKE = 14;
-const GAP = 4;
+/** Room around the rings for the stroke's round caps and the fill's glow, so
+ *  nothing is ever clipped at the edge of the drawing. */
+const PAD = 10;
 
 /** Share of the goal reached, 0 to 1 (a ring is full at its goal). */
 export function progress(value: number, goal: number): number {
@@ -28,21 +29,55 @@ function legendValue(r: Ring, n: number): string {
   return `${Math.round(n).toLocaleString("en-GB")}${r.unit ?? ""}`;
 }
 
-/** Concentric activity rings in the style of Apple Health. The legend
- * carries every value as text, so the drawing itself is decorative. */
-export function Rings({ rings, size = 168 }: { rings: Ring[]; size?: number }) {
+/** The plain number of a value, without its unit, for the large legend. */
+function bareValue(r: Ring, n: number): string {
+  if (r.format) return r.format(n);
+  return Math.round(n).toLocaleString("en-GB");
+}
+
+/** Concentric activity rings in the style of Apple Health. Each ring sits in
+ *  a recessed track. The legend carries every value as text, so the drawing
+ *  itself is decorative. `hero` draws thicker rings with a large legend. */
+export function Rings({
+  rings,
+  size = 168,
+  variant = "compact",
+}: {
+  rings: Ring[];
+  size?: number;
+  variant?: "compact" | "hero";
+}) {
+  const stroke = variant === "hero" ? 18 : 14;
+  const gap = variant === "hero" ? 5 : 4;
   const centre = size / 2;
+  const inset = `rings-inset-${useId().replace(/:/g, "")}`;
+  const box = size + PAD * 2;
   return (
-    <figure className="rings">
+    <figure className={`rings rings--${variant}`}>
       <svg
         width={size}
         height={size}
-        viewBox={`0 0 ${String(size)} ${String(size)}`}
+        viewBox={`${String(-PAD)} ${String(-PAD)} ${String(box)} ${String(box)}`}
         role="presentation"
         focusable="false"
       >
+        <defs>
+          {/* A dark edge along the top of each track: the light comes from
+              above, so the track reads as pressed into the card. */}
+          <filter id={inset} x="-10%" y="-10%" width="120%" height="120%">
+            <feOffset dy="1.5" in="SourceAlpha" result="offset" />
+            <feComposite in="SourceAlpha" in2="offset" operator="out" result="edge" />
+            <feGaussianBlur in="edge" stdDeviation="1" result="soft" />
+            <feFlood floodColor="#000" floodOpacity="0.75" />
+            <feComposite in2="soft" operator="in" result="shadow" />
+            <feMerge>
+              <feMergeNode in="SourceGraphic" />
+              <feMergeNode in="shadow" />
+            </feMerge>
+          </filter>
+        </defs>
         {rings.map((r, i) => {
-          const radius = centre - STROKE / 2 - i * (STROKE + GAP);
+          const radius = centre - stroke / 2 - i * (stroke + gap);
           if (radius <= 0) return null;
           const p = progress(r.value, r.goal);
           return (
@@ -53,13 +88,23 @@ export function Rings({ rings, size = 168 }: { rings: Ring[]; size?: number }) {
                 cy={centre}
                 r={radius}
                 stroke={r.color}
+                strokeWidth={stroke}
+              />
+              <circle
+                className="rings__well"
+                cx={centre}
+                cy={centre}
+                r={radius}
+                strokeWidth={stroke}
+                filter={`url(#${inset})`}
               />
               <circle
                 className="rings__fill"
                 cx={centre}
                 cy={centre}
                 r={radius}
                 stroke={r.color}
+                strokeWidth={stroke}
                 pathLength={1}
                 style={
                   {
@@ -77,16 +122,31 @@ export function Rings({ rings, size = 168 }: { rings: Ring[]; size?: number }) {
       </svg>
       <figcaption>
         <ul className="rings__legend">
-          {rings.map((r) => (
-            <li key={r.key}>
-              <span className="bar-chart__swatch" style={{ background: r.color }} />
-              <span className="rings__name">{r.name}</span>
-              <span className="rings__value">
-                {legendValue(r, r.value)} / {legendValue(r, r.goal)}
-              </span>
-              {r.hint && <span className="rings__hint">{r.hint}</span>}
-            </li>
-          ))}
+          {rings.map((r) =>
+            variant === "hero" ? (
+              <li key={r.key}>
+                <span className="rings__line">
+                  <span className="rings__name" style={{ color: r.color }}>
+                    {r.name}
+                  </span>
+                  {r.hint && <span className="rings__hint">{r.hint}</span>}
+                </span>
+                <span className="rings__big">
+                  <span className="rings__number">{bareValue(r, r.value)}</span>
+                  <span className="rings__of"> of {legendValue(r, r.goal)}</span>
+                </span>
+              </li>
+            ) : (
+              <li key={r.key}>
+                <span className="bar-chart__swatch" style={{ background: r.color }} />
+                <span className="rings__name">{r.name}</span>
+                <span className="rings__value">
+                  {legendValue(r, r.value)} / {legendValue(r, r.goal)}
+                </span>
+                {r.hint && <span className="rings__hint">{r.hint}</span>}
+              </li>
+            ),
+          )}
         </ul>
       </figcaption>
     </figure>

src/pages/EmptyStates.test.tsx

@@ -18,6 +18,8 @@ const BLANK_TODAY: Today = {
   applications: null,
   gym: null,
   habits: { weighIn: false, steps: null, proteinG: null, mealsTracked: false, mobility: false },
+  stepsGoal: 8000,
+  proteinGoal: 170,
   followUps: [],
   project: null,
   parseErrors: 0,

src/pages/TodayPage.test.tsx

@@ -14,6 +14,8 @@ const TODAY: Today = {
   applications: 4,
   gym: "Pull A",
   habits: { weighIn: true, steps: 10450, proteinG: 165, mealsTracked: true, mobility: false },
+  stepsGoal: 8000,
+  proteinGoal: 170,
   followUps: [
     {
       path: "Jobs/Companies/Example Security Ltd.md",
@@ -52,7 +54,11 @@ describe("TodayPage", () => {
     expect(screen.getByTitle("Since the last weigh-in")).toHaveTextContent("−0.2 kg");
     expect(within(screen.getByLabelText("Applied today")).getByText("4")).toBeInTheDocument();
     expect(within(screen.getByLabelText("Gym session")).getByText("Pull A")).toBeInTheDocument();
-    expect(screen.getByText("4 / 5")).toBeInTheDocument();
+    // Rings: habits done of five, then steps and protein against the plan's goals.
+    expect(screen.getByText("of 5")).toBeInTheDocument();
+    expect(screen.getByText("of 8,000")).toBeInTheDocument();
+    expect(screen.getByText("Goal reached")).toBeInTheDocument();
+    expect(screen.getByText("5 g to go")).toBeInTheDocument();
   });
 
   it("lists overdue follow-ups and where to resume", async () => {