feat: /new content page with sortable fields

package.json

@@ -15,6 +15,10 @@
     "pre-commit": "lint-staged"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
@@ -25,6 +29,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "lucide-react": "^0.513.0",
+    "nanoid": "^5.1.5",
     "next": "15.3.3",
     "next-auth": "5.0.0-beta.28",
     "next-themes": "^0.4.6",

src/app/(app)/_components/header/header.tsx

@@ -39,8 +39,9 @@ export default function Header() {
         )}
       </nav>
       <div className="flex items-center gap-4">
-        <Button variant={'outline'}>
-          <MessageSquareQuote className="text-muted-foreground size-4" /> Feedback
+        <Button variant={'secondary'} className="text-muted-foreground">
+          <MessageSquareQuote className="size-4" />
+          <span>Feedback</span>
         </Button>
         <UserDropdown></UserDropdown>
       </div>

src/app/(app)/~/[repo]/new/_components/active-field-item.tsx

@@ -0,0 +1,46 @@
+import { cn } from '@/lib/utils';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, Trash } from 'lucide-react';
+
+interface Props {
+  id: string;
+  label: string;
+  Icon: React.ComponentType<{ className: string }>;
+  onDelete: (id: string) => void;
+}
+
+export default function ActiveFieldItem({ id, label, Icon, onDelete }: Props) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="bg-secondary/50 group hover:bg-secondary flex touch-none items-center gap-2 rounded-md p-2 transition-colors select-none"
+      {...attributes}
+    >
+      <Icon className="text-muted-foreground size-4 shrink-0" />
+      <span className="text-muted-foreground text-sm font-medium">{label}</span>
+      <Trash
+        className="text-destructive ml-auto size-4.5 opacity-0 transition-opacity group-hover:opacity-100"
+        onClick={() => onDelete(id)}
+      />
+      <GripVertical
+        className={cn(
+          'text-muted-foreground size-5 stroke-[1.5]',
+          isDragging ? 'cursor-grabbing' : 'cursor-grab',
+        )}
+        {...listeners}
+      />
+    </div>
+  );
+}

src/app/(app)/~/[repo]/new/_components/dnd/sortable.tsx

@@ -0,0 +1,40 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { HTMLAttributes } from 'react';
+
+interface Props {
+  id: string;
+  children: (props: { gripProps: HTMLAttributes<HTMLButtonElement> }) => React.ReactNode;
+}
+
+export default function Sortable({ id, children }: Props) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+  });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 1 : 0,
+  };
+
+  return (
+    // suppressing "...attributes" warning
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="bg-background rounded-lg"
+      {...attributes}
+      suppressHydrationWarning
+    >
+      {children({
+        gripProps: {
+          ...listeners,
+          className: `text-muted-foreground size-5 stroke-[1.5] ${
+            isDragging ? 'cursor-grabbing' : 'cursor-grab'
+          }`,
+        },
+      })}
+    </div>
+  );
+}

src/app/(app)/~/[repo]/new/_components/editor.tsx

@@ -0,0 +1,59 @@
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { useActiveField } from '../_contexts/active-field.context';
+import { FieldId } from '../_types/field';
+import Sortable from './dnd/sortable';
+import TextInput from './fields/text-input';
+
+export default function Editor() {
+  const { activeFields, setActiveFields } = useActiveField();
+
+  function getField(fieldId: FieldId) {
+    switch (fieldId) {
+      case 'text':
+        return TextInput;
+    }
+  }
+
+  function handleDragEnd(e: DragEndEvent) {
+    const { active, over } = e;
+
+    if (over && active.id !== over.id) {
+      setActiveFields((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+
+        const newArr = arrayMove(items, oldIndex, newIndex);
+        return newArr;
+      });
+    }
+  }
+
+  return (
+    <div className="col-span-3 flex flex-col gap-4 p-4">
+      <div className="flex flex-col">
+        <h3 className="font-medium">Editor</h3>
+        <span className="text-muted-foreground text-xs">
+          Arrange and edit frontmatter fields below
+        </span>
+      </div>
+      <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={handleDragEnd}>
+        <SortableContext items={activeFields} strategy={verticalListSortingStrategy}>
+          <div className="flex flex-col gap-2">
+            {activeFields.map(({ id, fieldId }) => {
+              const field = getField(fieldId);
+              if (!field) return null;
+
+              return (
+                <Sortable key={id} id={id}>
+                  {({ gripProps }) => field({ id, gripProps })}
+                </Sortable>
+              );
+            })}
+          </div>
+        </SortableContext>
+      </DndContext>
+    </div>
+  );
+}

src/app/(app)/~/[repo]/new/_components/field-item.tsx

@@ -0,0 +1,20 @@
+import { FieldId } from '../_types/field';
+
+interface Props {
+  id: FieldId;
+  label: string;
+  Icon: React.ComponentType<{ className: string }>;
+  addField: (id: FieldId) => void;
+}
+
+export default function FieldItem({ id, label, Icon, addField }: Props) {
+  return (
+    <button
+      className="hover:bg-secondary/50 flex touch-none items-center gap-2 rounded-md p-2 transition-colors select-none"
+      onClick={() => addField(id)}
+    >
+      <Icon className="text-muted-foreground size-4 shrink-0" />
+      <span className="text-muted-foreground text-sm font-medium">{label}</span>
+    </button>
+  );
+}

src/app/(app)/~/[repo]/new/_components/fields/text-input.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { GripVertical, RotateCcw, Trash, Type } from 'lucide-react';
+import { HTMLAttributes } from 'react';
+import { useActiveField } from '../../_contexts/active-field.context';
+
+interface Props {
+  id: string;
+  gripProps: HTMLAttributes<HTMLButtonElement>;
+}
+
+export default function TextInput({ id, gripProps }: Props) {
+  const { activeFields } = useActiveField();
+  const field = activeFields.find((field) => field.id === id);
+
+  if (!field) return null;
+
+  return (
+    <div className="bg-secondary/25 flex items-center gap-2 rounded-lg p-2">
+      <Type className="text-muted-foreground size-4 shrink-0" />
+      <Input placeholder="key" className="focus:border-border! border-border/25 w-50 shrink-0" />
+      <span className="text-muted-foreground text-sm select-none">:</span>
+      <Input placeholder="value" className="focus:border-border! border-border/25" />
+      <div className="flex items-center gap-1">
+        <Button size={'icon'} variant={'ghost'}>
+          <RotateCcw className="text-muted-foreground size-4 shrink-0" />
+        </Button>
+        <Button size={'icon'} variant={'ghost'}>
+          <Trash className="text-destructive size-4 shrink-0" />
+        </Button>
+        <button {...gripProps}>
+          <GripVertical className="text-muted-foreground size-5 stroke-[1.5]" />
+        </button>
+      </div>
+    </div>
+  );
+}

src/app/(app)/~/[repo]/new/_components/sidebar.tsx

@@ -0,0 +1,30 @@
+import { nanoid } from 'nanoid';
+import { useActiveField } from '../_contexts/active-field.context';
+import { FieldId } from '../_types/field';
+import { FIELD } from '../constants';
+import FieldItem from './field-item';
+
+export default function Sidebar() {
+  const { setActiveFields } = useActiveField();
+
+  function addField(fieldId: FieldId) {
+    setActiveFields((prev) => [
+      ...prev,
+      { id: `${fieldId}-${nanoid()}`, fieldId: fieldId, key: '', value: '' },
+    ]);
+  }
+
+  return (
+    <div className="sticky top-0 flex flex-col gap-4 p-4">
+      <div className="flex flex-col">
+        <h3 className="font-medium">Fields</h3>
+        <span className="text-muted-foreground text-xs">Click on a field below to add</span>
+      </div>
+      <div className="flex flex-col gap-2">
+        {Object.entries(FIELD).map(([id, { label, Icon }]) => (
+          <FieldItem key={id} id={id as FieldId} label={label} Icon={Icon} addField={addField} />
+        ))}
+      </div>
+    </div>
+  );
+}