chore: Enhancement + New Feature (#185)

* wip

* wip page

* chore: style

* wip pages

* wip pages

* chore: toggle

* chore: link

* feat: topic search

* chore: page section

* refactor: apply tailwind class ordering

* fix: handle loggedIn user for guest route

* feat: folder & image schema

* chore: move utils to shared

* refactor: tailwind class ordering

* feat: img ext for editor

* refactor: remove qa

* fix: tanstack start

* fix: wrong import

* chore: use toast

* chore: schema

web/app/components/custom/nav-item.tsx

@@ -0,0 +1,71 @@
+import { Link } from "@tanstack/react-router"
+import { cn } from "@/lib/utils"
+import { LaIcon } from "~/components/custom/la-icon"
+import { icons } from "lucide-react"
+import type { NavigateOptions } from "@tanstack/react-router"
+
+interface NavItemProps extends NavigateOptions {
+  title: string
+  count: number
+  icon: keyof typeof icons
+  className?: string
+}
+
+export function NavItem({
+  title,
+  count,
+  icon,
+  className,
+  ...linkProps
+}: NavItemProps) {
+  return (
+    <Link
+      className={cn(
+        "group/p",
+        "flex h-[30px] cursor-default items-center gap-px rounded-md px-2 text-sm font-medium",
+        "text-[var(--less-foreground)] hover:bg-[var(--item-hover)] focus-visible:outline-none focus-visible:ring-0",
+        className,
+      )}
+      activeProps={{
+        className:
+          'bg-[var(--item-active)] data-[status="active"]:hover:bg-[var(--item-active)]',
+      }}
+      {...linkProps}
+    >
+      {({ isActive }) => (
+        <>
+          <div className="flex items-center gap-1.5">
+            <LaIcon
+              name={icon}
+              className={cn("group-hover/p:text-foreground", {
+                "text-foreground": isActive,
+                "text-muted-foreground": !isActive,
+              })}
+            />
+            <span>{title}</span>
+          </div>
+          <span className="flex-grow" />
+          {count > 0 && <BadgeCount count={count} isActive={isActive} />}
+        </>
+      )}
+    </Link>
+  )
+}
+
+interface BadgeCountProps {
+  count: number
+  isActive: boolean
+}
+
+function BadgeCount({ count, isActive }: BadgeCountProps) {
+  return (
+    <span
+      className={cn("font-mono", {
+        "text-muted-foreground": !isActive,
+        "text-foreground": isActive,
+      })}
+    >
+      {count}
+    </span>
+  )
+}