Add loading animation and show current/previous week labels

Pulsing dot animation while waiting for the summary. Week dropdown
now defaults to current week number with (current) and (previous)
labels on the appropriate entries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: hubyrod

app/summary/summary-form.tsx

@@ -6,18 +6,28 @@ interface SummaryFormProps {
   groups: string[];
 }
 
-const WEEK_OPTIONS = [
-  { value: "current", label: "Current week" },
-  { value: "previous", label: "Previous week" },
-  ...Array.from({ length: 52 }, (_, i) => ({
-    value: `week${String(i + 1).padStart(2, "0")}`,
-    label: `Week ${String(i + 1).padStart(2, "0")}`,
-  })),
-];
+function getISOWeek(date: Date): number {
+  const d = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+  d.setUTCDate(d.getUTCDate() + 4 - (d.getUTCDay() || 7));
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+  return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
+
+const currentWeek = getISOWeek(new Date());
+const previousWeek = getISOWeek(new Date(Date.now() - 7 * 86400000));
+
+const WEEK_OPTIONS = Array.from({ length: 52 }, (_, i) => {
+  const num = i + 1;
+  const pad = String(num).padStart(2, "0");
+  let label = `Week ${pad}`;
+  if (num === currentWeek) label += " (current)";
+  else if (num === previousWeek) label += " (previous)";
+  return { value: `week${pad}`, label };
+});
 
 export default function SummaryForm({ groups }: SummaryFormProps) {
   const [group, setGroup] = useState(groups[0] ?? "");
-  const [week, setWeek] = useState("current");
+  const [week, setWeek] = useState(`week${String(currentWeek).padStart(2, "0")}`);
   const [loading, setLoading] = useState(false);
   const [summary, setSummary] = useState("");
   const [postCount, setPostCount] = useState<number | null>(null);
@@ -109,6 +119,15 @@ export default function SummaryForm({ groups }: SummaryFormProps) {
         </div>
       </form>
 
+      {loading && (
+        <div className="sum-loading">
+          <div className="sum-loading-dots">
+            <span /><span /><span />
+          </div>
+          <span>Summarizing...</span>
+        </div>
+      )}
+
       {error && (
         <div className="sum-error">{error}</div>
       )}

app/summary/summary.css

@@ -125,6 +125,43 @@
   cursor: not-allowed;
 }
 
+/* Loading */
+.sum-loading {
+  margin-top: 1.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-family: var(--cfg-mono);
+  font-size: 0.75rem;
+  color: var(--cfg-text-muted);
+}
+
+.sum-loading-dots {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.sum-loading-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--cfg-accent);
+  animation: sum-dot-pulse 1.2s ease-in-out infinite;
+}
+
+.sum-loading-dots span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.sum-loading-dots span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes sum-dot-pulse {
+  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
 /* Error */
 .sum-error {
   margin-top: 1rem;