From 48ae4d607e6ac00bd8a5f749d5702c4d1b42395c Mon Sep 17 00:00:00 2001
From: Joshua Seigler <2583159+seigler@users.noreply.github.com>
Date: Fri, 18 Apr 2025 19:29:21 -0700
Subject: [PATCH] nice touches

---
 src/Dashboard.tsx | 124 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 87 insertions(+), 37 deletions(-)

diff --git a/src/Dashboard.tsx b/src/Dashboard.tsx
index 0ab0cca..b7edd81 100644
--- a/src/Dashboard.tsx
+++ b/src/Dashboard.tsx
@@ -1,22 +1,39 @@
 import { For, Show, createMemo } from "solid-js";
 import useAppModel from "./useAppModel";
-import { css } from 'vite-plugin-inline-css-modules'
+import { css } from "vite-plugin-inline-css-modules";
 
 const styles = css`
+  .calendarWrapper {
+    column-width: 14em;
+  }
   .calendar {
-    column-width: 7em;
-    column-gap: 0.3em;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.25em;
+  }
+  .calendarHeader {
+    flex-shrink: 1;
+    width: 100%;
+    border-bottom: 1px solid var(--color-foreground-trace);
   }
   .entry {
-    width: 0.8em;
-    margin: 0.1em;
+    break-before: avoid-column;
+    break-inside: avoid-column;
+    width: 2em;
     display: inline-block;
-    height: 0.8em;
-    border-radius: 25%;
-    background-color: gray;
+    height: 2em;
+    border-radius: 10%;
+    background-color: var(--color-foreground-faint);
+    &:empty {
+      background: none;
+    }
   }
-  .entryBlank {
-    background: none;
+  .entryDate {
+    color: var(--color-foreground);
+    margin: 0.2em;
+    font-size: 1.2em;
+    font-weight: 300;
   }
   .nextPuzzle {
     display: flex;
@@ -28,48 +45,81 @@ const styles = css`
     color: var(--color-foreground);
     background-color: var(--group-green);
     margin-bottom: 1em;
-    &:hover, &:focus-visible, &:active {
+    &:hover,
+    &:focus-visible,
+    &:active {
       color: var(--color-foreground);
       outline: none;
       background-color: var(--group-yellow);
     }
   }
-`
+`;
 
 const colorStrings = [
-  'var(--group-purple)',
-  'var(--group-blue)',
-  'var(--group-green)',
-  'var(--group-yellow)',
-]
+  "var(--group-purple)",
+  "var(--group-blue)",
+  "var(--group-green)",
+  "var(--group-yellow)",
+];
 
 export default function Dashboard() {
   const { connections, store } = useAppModel();
   const nextUnsolvedId = createMemo(() => {
-    return connections.find(x => store.solutions[x.id] === undefined)?.id
-  })
+    return connections.find((x) => store.solutions[x.id] === undefined)?.id;
+  });
   return (
     <div>
       <Show when={nextUnsolvedId() !== undefined}>
-        <a class={styles.nextPuzzle} href={`/puzzle/${nextUnsolvedId()}`}>Next puzzle: #{nextUnsolvedId()}</a>
+        <a class={styles.nextPuzzle} href={`/puzzle/${nextUnsolvedId()}`}>
+          Next puzzle: #{nextUnsolvedId()}
+        </a>
       </Show>
-      <div class={styles.calendar}>
-        <div class={`${styles.entry} ${styles.entryBlank}`}></div>
-        <For each={connections}>
-          {(item) => {
-            const isSolved = store.solutions[item.id] !== undefined;
-            return (
-              <a
-                href={`/puzzle/${item.id}`}
-                class={styles.entry}
-                style={isSolved ? {
-                  "background-color": colorStrings[store.solutions[item.id].guesses - 4] ?? 'var(--color-foreground)'
-                } : {}}
-                title={`#${item.id}, ${item.date}, ${store.solutions[item.id]?.guesses}`}
-              />
-            );
-          }}
-        </For>
+      <div class={styles.calendarWrapper}>
+        <div class={styles.calendar}>
+          <For each={connections}>
+            {(item) => {
+              const isSolved = store.solutions[item.id] !== undefined;
+              const date = new Date(item.date);
+              const showHeader = item.id === 1 || date.getDate() === 1;
+              return (
+                <>
+                  {showHeader && (
+                    <>
+                      <div class={styles.calendarHeader}>
+                        {date.toLocaleString("default", {
+                          month: "long",
+                          year: "numeric",
+                        })}
+                      </div>
+                      <For each={Array.from({ length: date.getDay() })}>
+                        {() => (
+                          <div class={`${styles.entry} ${styles.entryBlank}`} />
+                        )}
+                      </For>
+                    </>
+                  )}
+                  <a
+                    href={`/puzzle/${item.id}`}
+                    class={styles.entry}
+                    style={
+                      isSolved
+                        ? {
+                            "background-color":
+                              colorStrings[
+                                store.solutions[item.id].guesses - 4
+                              ] ?? "var(--color-foreground)",
+                          }
+                        : {}
+                    }
+                    title={`#${item.id}, ${item.date}`}
+                  >
+                    <div class={styles.entryDate}>{date.getDate()}</div>
+                  </a>
+                </>
+              );
+            }}
+          </For>
+        </div>
       </div>
     </div>
   );