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/content-header.tsx

@@ -15,7 +15,7 @@ export const ContentHeader = React.forwardRef<
   return (
     <header
       className={cn(
-        "flex min-h-10 min-w-0 shrink-0 items-center gap-3 pl-8 pr-6 transition-opacity max-lg:px-4",
+        "flex min-h-10 min-w-0 shrink-0 items-center gap-3 border-b border-b-[var(--la-border-new)] px-6 py-3 transition-opacity max-lg:px-4",
         className,
       )}
       ref={ref}
@@ -48,7 +48,7 @@ export const SidebarToggleButton: React.FC = () => {
         size="icon"
         variant="ghost"
         aria-label="Menu"
-        className="text-primary/60"
+        className="-ml-2 cursor-default text-muted-foreground hover:bg-transparent"
         onClick={handleClick}
       >
         <LaIcon name="PanelLeft" />

web/app/components/custom/learning-state-selector.tsx

@@ -66,7 +66,7 @@ export const LearningStateSelector: React.FC<LearningStateSelectorProps> = ({
           type="button"
           role="combobox"
           variant="secondary"
-          className={cn("gap-x-2 text-sm", className)}
+          className={cn("h-7 gap-x-2 text-sm", className)}
         >
           {iconName && (
             <LaIcon

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>
+  )
+}

web/app/components/custom/textarea-autosize.tsx

@@ -10,7 +10,7 @@ const TextareaAutosize = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <BaseTextareaAutosize
         className={cn(
-          "border-input placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[60px] w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}