refactor: improve invoice editor UX and fix visual issues

- Remove clock icons and hour text from calendar month view, show only activity bars
- Fix calendar week view mobile layout (2-column grid instead of vertical stack)
- Update invoice form skeleton to match actual layout structure
- Add client-side validation for empty invoice item descriptions with auto-scroll to error
- Fix hourly rate defaulting logic with proper type guards
- Update invoice details skeleton to match page structure with PageHeader
- Fix hydration error in sidebar (div inside button -> span)
- Improve dashboard chart color consistency (draft status now matches monthly metrics)
- Fix mobile header layout to prevent text squishing (vertical stack on mobile)
- Add IDs to invoice line items for scroll-into-view functionality

src/components/ui/image-with-skeleton.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import Image, { type ImageProps } from "next/image";
+import { cn } from "~/lib/utils";
+import { Skeleton } from "~/components/ui/skeleton";
+
+interface ImageWithSkeletonProps extends ImageProps {
+    containerClassName?: string;
+}
+
+export function ImageWithSkeleton({
+    className,
+    containerClassName,
+    alt,
+    ...props
+}: ImageWithSkeletonProps) {
+    const [isLoading, setIsLoading] = useState(true);
+
+    return (
+        <div className={cn("relative overflow-hidden", containerClassName)}>
+            {isLoading && (
+                <Skeleton className="absolute inset-0 h-full w-full animate-pulse" />
+            )}
+            <Image
+                className={cn(
+                    "duration-700 ease-in-out",
+                    isLoading
+                        ? "scale-110 blur-2xl grayscale"
+                        : "scale-100 blur-0 grayscale-0",
+                    className
+                )}
+                onLoad={() => setIsLoading(false)}
+                alt={alt}
+                {...props}
+            />
+        </div>
+    );
+}