Refine streak page

beaverhabits/frontend/cal_heatmap_page.py

@@ -1,8 +1,8 @@
-import calendar
 import datetime
 
 from nicegui import ui
 
+from beaverhabits.configs import settings
 from beaverhabits.frontend.components import (
     CalendarHeatmap,
     habit_heat_map,
@@ -12,20 +12,29 @@
 from beaverhabits.storage.meta import get_habit_page_path
 from beaverhabits.storage.storage import Habit
 
-WEEKS_TO_DISPLAY = 56
+WEEKS_TO_DISPLAY = 53
 
 
 def heatmap_page(today: datetime.date, habit: Habit):
     ui.add_css(CHECK_BOX_CSS)
 
     ticked_data = {x: True for x in habit.ticked_days}
-    habit_calendar = CalendarHeatmap.build(today, WEEKS_TO_DISPLAY, calendar.MONDAY)
+    start_date = min(ticked_data.keys()) if ticked_data else today
 
     root_path = get_habit_page_path(habit)
     title = habit.name
     menu_header(title, target=root_path)
 
-    with ui.column().classes("gap-0"):
-        with ui.card().classes("p-3 gap-0 no-shadow items-center"):
-            # ui.label("Last Year").classes("text-base")
-            habit_heat_map(habit, habit_calendar, ticked_data=ticked_data)
+    with ui.column():
+        while today > start_date:
+            with ui.card().classes("p-3 gap-0 no-shadow items-center"):
+                ui.label(today.strftime("%Y")).classes("text-base")
+
+                habit_calendar = CalendarHeatmap.build(
+                    today, WEEKS_TO_DISPLAY, settings.FIRST_DAY_OF_WEEK
+                )
+                habit_heat_map(
+                    habit, habit_calendar, ticked_data=ticked_data, readonly=True
+                )
+
+                today -= datetime.timedelta(days=7 * WEEKS_TO_DISPLAY)

beaverhabits/frontend/components.py

@@ -332,12 +332,13 @@ def habit_heat_map(
     habit: Habit,
     habit_calendar: CalendarHeatmap,
     ticked_data: dict[datetime.date, bool] | None = None,
+    readonly: bool = False,
 ):
     today = habit_calendar.today
 
     # Bind to external state data
     is_bind_data = True
-    if ticked_data is None:
+    if readonly or ticked_data is None:
         ticked_data = {x: True for x in habit.ticked_days}
         is_bind_data = False
 

beaverhabits/frontend/habit_page.py

@@ -19,9 +19,14 @@
 WEEKS_TO_DISPLAY = 15
 
 
+def card_title(title: str, target: str):
+    link(title, target).classes("text-base flex justify-center")
+
+
 @contextmanager
-def card(link: str | None = None):
-    with ui.card().classes("p-3 gap-0 no-shadow items-center") as card:
+def card(link: str | None = None, padding: float = 3):
+    with ui.card().classes("gap-0 no-shadow items-center") as card:
+        card.classes(f"p-{padding}")
         card.classes("w-full")
         card.style("max-width: 350px")
         if link:
@@ -34,20 +39,22 @@ def habit_page(today: datetime.date, habit: Habit):
     with ui.column().classes("gap-y-3"):
         ticked_data = {x: True for x in habit.ticked_days}
         habit_calendar = CalendarHeatmap.build(today, WEEKS_TO_DISPLAY, calendar.MONDAY)
+        target = get_habit_heatmap_path(habit)
 
         with card():
             HabitDateInput(today, habit, ticked_data)
 
         with card():
-            link("Last 3 Months", get_habit_heatmap_path(habit)).classes(
-                "text-base flex justify-center"
-            )
+            card_title("Last 3 Months", target)
             habit_heat_map(habit, habit_calendar, ticked_data=ticked_data)
 
         with card():
-            ui.label("History").classes("text-base flex justify-center")
+            card_title("History", target)
             habit_history(today, list(ticked_data.keys()))
 
+        with card(target, padding=0.5):
+            ui.icon("more_horiz", size="1.5em")
+
 
 def habit_page_ui(today: datetime.date, habit: Habit):
     ui.add_css(CHECK_BOX_CSS)