chore: search prep and breakpoint shift

.claude/settings.json

@@ -71,7 +71,7 @@
       "WebFetch(domain:vercel.com)",
       "WebFetch(domain:vitest.dev)"
     ],
-    "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/OLD/**)"],
+    "deny": ["Read(**/.env)", "Read(**/.envrc)", "Read(x_docs/DONE/**)"],
     "ask": []
   },
   "enabledPlugins": {
@@ -80,7 +80,9 @@
     "frontend-design@my-claude-plugins": false,
     "tailwindcss@my-claude-plugins": false,
     "shadcn-ui@my-claude-plugins": true,
-    "feature-dev@claude-plugins-official": true
+    "feature-dev@claude-plugins-official": true,
+    "code-review@claude-plugins-official": true,
+    "pr-review-toolkit@claude-plugins-official": true
   },
   "extraKnownMarketplaces": {
     "playwright-skill": {

.mcp.json

@@ -4,6 +4,10 @@
       "type": "stdio",
       "command": "npx",
       "args": ["@playwright/mcp@latest", "--device", "iPhone 11"]
+    },
+    "shadcn": {
+      "command": "npx",
+      "args": ["shadcn@latest", "mcp"]
     }
   }
 }

app/(app)/layout.tsx

@@ -21,7 +21,7 @@ const RootLayout = async ({ children }: { children: React.ReactNode }) => {
 
         {/* Content + Right Sidebar row */}
         <div className="flex flex-1">
-          <main className="flex-1 pt-6 pb-10 px-10 lg:px-14">
+          <main className="flex-1 pt-6 pb-10 px-4 md:px-8 lg:px-10 xl:px-14">
             <div className="mx-auto w-full max-w-5xl">{children}</div>
           </main>
           <RightSidebar />

app/globals.css

@@ -68,7 +68,7 @@
 /* Raw CSS variables (no Tailwind utilities generated). Access via var(--background), etc. */
 :root {
   /* Layout */
-  --top-bar-height: 4rem; /* 64px — desktop & mobile top navigation */
+  --top-bar-height: 5rem; /* 64px — desktop & mobile top navigation */
   --right-sidebar-width: 22rem; /* 352px — right sidebar width at xl+ */
 
   /* Base */

components/navigation/desktop-topbar.tsx

@@ -1,14 +1,14 @@
 import { SignedOut, SignInButton, SignUpButton } from "@clerk/nextjs";
-import { GlobalSearch } from "@/components/search/global-search";
+import { Searchbox } from "@/components/search/searchbox";
 import { Button } from "@/components/ui/button";
 
 export function DesktopTopBar() {
   return (
-    <header className="sticky top-0 z-40 hidden h-(--top-bar-height) items-center bg-background sm:flex">
+    <header className="sticky top-0 z-40 hidden h-(--top-bar-height) items-center bg-background md:flex">
       {/* Left section: matches main content structure (padding + max-w-5xl centering) */}
-      <div className="flex flex-1 items-center px-6 md:px-8 lg:px-12">
+      <div className="flex flex-1 items-center md:px-8 lg:px-10 xl:px-14">
         <div className="mx-auto w-full max-w-5xl">
-          <GlobalSearch />
+          <Searchbox />
         </div>
       </div>
 

components/navigation/mobile-nav.tsx

@@ -26,7 +26,7 @@ import {
 } from "@/components/ui/sheet";
 import { cn } from "@/lib/utils";
 
-const MOBILE_NAV_MAX_WIDTH = "max-w-[320px]";
+const MOBILE_NAV_MAX_WIDTH = "max-w-[280px]";
 
 export function MobileNav() {
   const [open, setOpen] = useState(false);
@@ -39,7 +39,7 @@ export function MobileNav() {
         <button
           type="button"
           tabIndex={-1}
-          className="animate-in fade-in-0 fixed inset-0 z-40 cursor-default bg-overlay/50 duration-500 sm:hidden"
+          className="animate-in fade-in-0 fixed inset-0 z-40 cursor-default bg-overlay/50 duration-500 md:hidden"
           onClick={() => setOpen(false)}
           data-slot="sheet-overlay"
           aria-label="Dismiss menu"
@@ -50,24 +50,24 @@ export function MobileNav() {
           <Button
             variant="ghost"
             size="icon-lg"
-            className="text-sidebar-foreground sm:hidden"
+            className="text-sidebar-foreground md:hidden"
             aria-label={open ? "Close navigation menu" : "Open navigation menu"}
           >
-            {open ? <X className="size-5" /> : <Menu className="size-5" />}
+            {open ? <X className="size-7" /> : <Menu className="size-7" />}
           </Button>
         </SheetTrigger>
         <SheetContent
           side="left"
           className={cn(
-            "flex flex-col gap-6 bg-sidebar p-6 shadow-2xl",
+            "flex flex-col gap-6 bg-sidebar px-4 py-6 shadow-2xl",
             MOBILE_NAV_MAX_WIDTH,
           )}
         >
           <SheetHeader className="flex-row items-center p-0">
             <SheetTitle className="sr-only">Mobile navigation menu</SheetTitle>
             <SheetClose asChild>
               <Link href="/" className="flex items-center">
-                <ThemedFullLogo className="h-7" />
+                <ThemedFullLogo className="h-8" />
               </Link>
             </SheetClose>
           </SheetHeader>

components/navigation/mobile-navlink.tsx

@@ -32,7 +32,7 @@ export function MobileNavLink({
       href={route}
       onClick={onClick}
       className={cn(
-        "flex items-center gap-3 rounded-lg px-3 py-3",
+        "flex items-center gap-3 rounded-lg px-2 py-3",
         isActive
           ? NAV_LINK_ACTIVE_CLASSES
           : `${NAV_LINK_INACTIVE_CLASSES} text-sidebar-foreground hover:bg-muted`,

components/navigation/mobile-topbar.tsx

@@ -3,11 +3,11 @@ import { MobileNav } from "@/components/navigation/mobile-nav";
 
 export function MobileTopBar() {
   return (
-    <header className="sticky top-0 z-40 flex h-(--top-bar-height) w-full items-center justify-between bg-background px-4 sm:hidden">
+    <header className="sticky top-0 z-40 flex h-(--top-bar-height) w-full items-center justify-between bg-background px-4 md:hidden">
       <Link href="/" aria-label="DevFlow mobile logo">
         {/* biome-ignore lint/a11y/useAltText: Decorative logo, aria-label on parent link */}
         {/* biome-ignore lint/performance/noImgElement: SVG logo doesn't benefit from next/image optimisation */}
-        <img src="/images/site-logo.svg" className="size-7" />
+        <img src="/images/site-logo.svg" className="size-8" />
       </Link>
 
       <MobileNav />

components/navigation/nav-links.constants.ts

@@ -14,7 +14,7 @@ export const NAV_LINKS = [
   { iconUrl: "/icons/tag.svg", route: "/tags", label: "Tags" },
   {
     iconUrl: "/icons/question.svg",
-    route: "/ask-question",
-    label: "Ask a question",
+    route: "/questions/ask",
+    label: "Ask Question",
   },
 ] as const satisfies readonly NavLink[];

components/question-card.tsx

@@ -22,7 +22,7 @@ export function QuestionCard({ question }: QuestionCardProps) {
         </span>
       </div>
 
-      <Link href={`/question/${question._id}`} className="group">
+      <Link href={`/questions/${question._id}`} className="group">
         <h2 className="text-heading-sm mb-2 group-hover:text-primary">
           {question.title}
         </h2>

components/right-sidebar/question-link.tsx

@@ -9,7 +9,7 @@ type QuestionLinkProps = {
 export function QuestionLink({ id, title }: QuestionLinkProps) {
   return (
     <Link
-      href={`/question/${id}`}
+      href={`/questions/${id}`}
       className="group -mx-2 flex items-center gap-2 rounded-md p-2"
     >
       <span className="flex-1 text-sm leading-snug text-foreground decoration-muted-foreground/50 underline-offset-2 group-hover:underline">

components/search/searchbox.tsx

@@ -0,0 +1,5 @@
+// TODO: Implement search similar to stackoverflow
+
+export function Searchbox() {
+  return <p className="text-muted-foreground">Searchbox</p>;
+}

components/ui/command.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};