this repo has no description
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: calendar ui view

+27 -17
+27 -17
mast-react-vite/src/components/ui/task.tsx
··· 6 6 import { TaskDetailView } from "@/components/ui/task-detail-view"; 7 7 import { useIsMobile } from "@/hooks/use-mobile"; 8 8 import { motion, animate, AnimatePresence } from "motion/react"; 9 - import { Flag } from "lucide-react"; 9 + import { Flag, Calendar } from "lucide-react"; 10 10 11 11 interface TaskProps { 12 12 selected?: boolean; ··· 64 64 const hasPreviewPriority = hasPreview && data.preview.priority !== undefined; 65 65 const displayPriority = hasPreviewPriority ? data.preview.priority : data.priority; 66 66 const isPreviewPriority = hasPreviewPriority && data.priority !== data.preview.priority; 67 + 68 + // Handle due date display with preview 69 + const hasPreviewDue = hasPreview && data.preview.due !== undefined; 70 + const displayDue = hasPreviewDue ? data.preview.due : data.due; 71 + const isPreviewDue = hasPreviewDue && data.due !== data.preview.due; 67 72 68 73 const getStateStyles = (status) => { 69 74 switch (status) { ··· 188 193 <div className="flex-1 min-w-0"> 189 194 {/* Priority flag icon in top right */} 190 195 {displayPriority && ( 191 - <div className={`absolute top-0 right-0 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-red-500'}`} title="Priority task"> 192 - <Flag className="w-5 h-5" fill="currentColor" /> 196 + <div className={`absolute -top-1 -right-1 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-red-500'}`} title="Priority task"> 197 + <Flag className="w-4 h-4" fill="currentColor" /> 193 198 </div> 194 199 )} 195 200 {!displayPriority && ( 196 - <div className={`absolute top-0 right-0 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-gray-300'}`} title="Normal priority"> 197 - <Flag className="w-5 h-5" /> 201 + <div className={`absolute -top-1 -right-1 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-gray-300'}`} title="Normal priority"> 202 + <Flag className="w-4 h-4" /> 203 + </div> 204 + )} 205 + 206 + {/* Display due date in bottom right */} 207 + {(data.due || (hasPreview && data.preview.due)) && ( 208 + <div className={`absolute ${displayProject ? 'bottom-0' : 'top-6'} right-0 text-xs flex items-center gap-1 border rounded px-1 py-0.5 ${ 209 + data.completed === 2 || isPreviewDue 210 + ? 'text-yellow-600 border-yellow-400 bg-yellow-100' 211 + : 'text-muted-foreground border-gray-300' 212 + }`}> 213 + <Calendar className="w-3.5 h-3.5" /> 214 + <span>{displayDue}</span> 198 215 </div> 199 216 )} 200 217 <div className="flex items-center gap-1 relative ml-[-0.5rem]"> ··· 214 231 {displayDescription} 215 232 </p> 216 233 <div className="-mt-2.5"> 217 - <TagList 218 - tags={tagList} 219 - previewTags={previewTags} 220 - status={data.completed} 221 - /> 234 + <TagList 235 + tags={tagList} 236 + previewTags={previewTags} 237 + status={data.completed} 238 + /> 222 239 </div> 223 - {/* Display due date if it exists (either from original data or preview) */} 224 - {(data.due || (hasPreview && data.preview.due)) && ( 225 - <div className="text-xs text-muted-foreground flex items-center gap-1"> 226 - <span>@</span> 227 - <span>{hasPreview && data.preview.due ? data.preview.due : data.due}</span> 228 - </div> 229 - )} 230 240 </div> 231 241 </div> 232 242 </div>