🎨 Refactor grid and header components; improve props handling and layout consistency, update search functions to use new naming convention, and remove unused view transitions component

src/components/grid.svelte

@@ -2,13 +2,21 @@
   import type { Snippet } from "svelte";
   import { cn } from "@/utils/cn";
 
-  let { className, children }: { className?: string; children?: Snippet } =
-    $props();
+  interface GridProps {
+    columns?: "default" | "4" | "3" | "2";
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { className, columns, children }: GridProps = $props();
 </script>
 
 <div
   class={cn(
     "grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5",
+    columns === "4" && "lg:grid-cols-3 xl:grid-cols-4",
+    columns === "3" && "lg:grid-cols-2 xl:grid-cols-3",
+    columns === "2" && "md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2",
     className,
   )}
 >