count0/HabitGrid
1
0
Fork 0
mirror of https://github.com/nagaoo0/HabbitGrid.git synced 2026-01-11 23:44:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

bug fixes

Browse Source
This commit is contained in:
_count0
2025-10-13 18:44:46 +02:00
parent c64eeb3928
commit 7b513bca28
1 changed files with 15 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/HabitGrid.jsx
View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react'; import React, { useMemo, useEffect } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { getColorIntensity, isToday, formatDate, getWeekdayLabel } from '../lib/utils-habit'; import { getColorIntensity, isToday, formatDate, getWeekdayLabel } from '../lib/utils-habit';
import { toggleCompletion } from '../lib/storage'; import { toggleCompletion } from '../lib/storage';
@@ -29,29 +29,37 @@ const HabitGrid = ({ habit, onUpdate, fullView = false }) => {
return weeksArray; return weeksArray;
}, [fullView]); }, [fullView]);
useEffect(() => {
// Scroll to the rightmost (most recent) week on mount
const gridScroll = document.querySelector('.grid-scroll');
if (gridScroll) {
gridScroll.scrollLeft = gridScroll.scrollWidth;
}
}, []);
const handleCellClick = (date) => { const handleCellClick = (date) => {
toggleCompletion(habit.id, formatDate(date)); toggleCompletion(habit.id, formatDate(date));
onUpdate(); onUpdate();
}; };
return ( return (
<div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-sm border border-slate-200 dark:border-slate-700"> <div className="bg-white dark:bg-slate-800 rounded-2xl p-4 pt-0 shadow-sm border border-slate-200 dark:border-slate-700">
<div className="mb-4"> <div className="mb-2">
<h2 className="text-lg font-semibold mb-1">Activity Calendar</h2> <h2 className="text-lg font-semibold mb-1">Activity Calendar</h2>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Tap any day to mark it as complete Tap any day to mark it as complete
</p> </p>
</div> </div>
<div className="overflow-x-auto grid-scroll"> <div className="overflow-x-auto grid-scroll mt-2">
<div className="inline-flex gap-1"> <div className="inline-flex gap-1 mb-4">
{/* Weekday labels: Monday (top) to Sunday (bottom) */} {/* Weekday labels: Monday (top) to Sunday (bottom) */}
<div className="flex flex-col gap-1 mr-2"> <div className="flex flex-col gap-1 mr-2">
<div className="h-3" /> <div className="h-1" />
{[1, 2, 3, 4, 5, 6, 0].map((day) => ( {[1, 2, 3, 4, 5, 6, 0].map((day) => (
<div <div
key={day} key={day}
className="h-3 flex items-center justify-end text-xs text-muted-foreground pr-1" className="h-3 flex items-center justify-end text-xs text-muted-foreground pr-0"
> >
{getWeekdayLabel(day)} {getWeekdayLabel(day)}
</div> </div>