@nexttylabs/echo 0.2.0

package/components/portal/create-post-dialog.tsx

@@ -0,0 +1,247 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useEffect, useId, useMemo, useState } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Field,
+  FieldContent,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  baseFeedbackSchema,
+  type BaseFeedbackInput,
+} from "@/lib/validators/feedback";
+
+const FEEDBACK_TYPE_OPTIONS = [
+  { value: "bug", label: "Bug" },
+  { value: "feature", label: "Feature Request" },
+  { value: "issue", label: "Issue" },
+  { value: "other", label: "Other" },
+] as const;
+
+interface CreatePostDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  organizationId: string;
+  initialValues?: Partial<BaseFeedbackInput>;
+}
+
+export function buildDefaultFeedbackValues(
+  initialValues?: Partial<BaseFeedbackInput>,
+): BaseFeedbackInput {
+  return {
+    title: initialValues?.title ?? "",
+    description: initialValues?.description ?? "",
+    type: initialValues?.type ?? "feature",
+    priority: initialValues?.priority ?? "medium",
+  };
+}
+
+export function CreatePostDialog({
+  open,
+  onOpenChange,
+  organizationId,
+  initialValues,
+}: CreatePostDialogProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const formId = useId();
+
+  const defaultValues = useMemo(
+    () => buildDefaultFeedbackValues(initialValues),
+    [initialValues],
+  );
+
+  const form = useForm<BaseFeedbackInput>({
+    resolver: zodResolver(baseFeedbackSchema),
+    defaultValues,
+    mode: "onBlur",
+  });
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+    reset,
+  } = form;
+
+  useEffect(() => {
+    if (open) {
+      reset(defaultValues);
+    }
+  }, [open, reset, defaultValues]);
+
+  const onSubmit = async (data: BaseFeedbackInput) => {
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch("/api/feedback", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "x-organization-id": organizationId,
+        },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to create post");
+      }
+
+      reset();
+      onOpenChange(false);
+      // Optionally refresh the page or update the list
+      window.location.reload();
+    } catch (error) {
+      console.error("Error creating post:", error);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleClose = () => {
+    reset(defaultValues);
+    onOpenChange(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[560px]">
+        <DialogHeader>
+          <DialogTitle>Create A New Post</DialogTitle>
+          <DialogDescription>
+            Share your feedback, ideas, or report issues.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col gap-5"
+        >
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor={`${formId}-title`}>Title</FieldLabel>
+              <FieldContent>
+                <Input
+                  id={`${formId}-title`}
+                  placeholder="Short, descriptive title"
+                  aria-invalid={!!errors.title}
+                  disabled={isSubmitting}
+                  {...register("title")}
+                />
+                <FieldError errors={[errors.title]} />
+              </FieldContent>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor={`${formId}-description`}>
+                Description
+              </FieldLabel>
+              <FieldContent>
+                <Textarea
+                  id={`${formId}-description`}
+                  placeholder="Provide more details about your feedback..."
+                  rows={5}
+                  aria-invalid={!!errors.description}
+                  disabled={isSubmitting}
+                  {...register("description")}
+                />
+                <FieldError errors={[errors.description]} />
+              </FieldContent>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor={`${formId}-type`}>Category</FieldLabel>
+              <FieldContent>
+                <Controller
+                  name="type"
+                  control={control}
+                  render={({ field }) => (
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      <SelectTrigger
+                        id={`${formId}-type`}
+                        aria-invalid={!!errors.type}
+                        disabled={isSubmitting}
+                        className="w-full"
+                      >
+                        <SelectValue placeholder="Select category" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {FEEDBACK_TYPE_OPTIONS.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  )}
+                />
+                <FieldError errors={[errors.type]} />
+              </FieldContent>
+            </Field>
+          </FieldGroup>
+
+          <DialogFooter className="mt-1">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleClose}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? "Creating..." : "Create Post"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/components/portal/feedback-board.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Search, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+import { FeedbackPostCard, type FeedbackPost } from "./feedback-post-card";
+import { ContributorsSidebar, type Contributor } from "./contributors-sidebar";
+import { CreatePostDialog } from "./create-post-dialog";
+
+type SortOption = "new" | "top" | "trending";
+
+interface FeedbackBoardProps {
+  organizationId: string;
+  organizationSlug: string;
+  posts: FeedbackPost[];
+  isAuthenticated: boolean;
+  contributors?: Contributor[];
+  totalCount?: number;
+  showVoteCount?: boolean;
+  showAuthor?: boolean;
+  allowPublicVoting?: boolean;
+  className?: string;
+}
+
+export function FeedbackBoard({
+  organizationId,
+  organizationSlug,
+  posts,
+  isAuthenticated,
+  contributors = [],
+  totalCount,
+  showVoteCount = true,
+  showAuthor = false,
+  allowPublicVoting = true,
+  className,
+}: FeedbackBoardProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [searchQuery, setSearchQuery] = useState("");
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+
+  const currentSort = (searchParams.get("sort") as SortOption) || "new";
+
+  const handleCreateClick = () => {
+    if (!isAuthenticated) {
+      router.push("/login");
+      return;
+    }
+    setCreateDialogOpen(true);
+  };
+
+  const handleSortChange = (sort: SortOption) => {
+    const params = new URLSearchParams(searchParams);
+    params.set("sort", sort);
+    router.push(`/${organizationSlug}?${params.toString()}`);
+  };
+
+  const filteredPosts = posts.filter(
+    (post) =>
+      post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      post.description?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const sortButtons: { value: SortOption; label: string }[] = [
+    { value: "new", label: "New" },
+    { value: "top", label: "Top" },
+    { value: "trending", label: "Trending" },
+  ];
+
+  return (
+    <div className={cn("flex flex-col lg:flex-row gap-8", className)}>
+      {/* Main Content */}
+      <div className="flex-1 space-y-6">
+        {/* Page Header */}
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">Feedback</h1>
+            <p className="text-muted-foreground mt-2">
+              Share ideas, vote on requests, and help shape the roadmap.
+            </p>
+            {typeof totalCount === "number" && (
+              <p className="text-sm text-muted-foreground mt-1">
+                {totalCount} posts collected so far
+              </p>
+            )}
+          </div>
+          <Button
+            size="lg"
+            className="w-full sm:w-auto"
+            onClick={handleCreateClick}
+          >
+            <Plus className="h-4 w-4 mr-2" />
+            Submit Feedback
+          </Button>
+        </div>
+
+        {/* Toolbar */}
+        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between rounded-lg border bg-muted/30 p-3">
+          {/* Search */}
+          <div className="relative w-full sm:max-w-xs">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search posts..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-9"
+            />
+          </div>
+
+          {/* Sort Controls */}
+          <div className="flex items-center gap-1 bg-muted/50 rounded-lg p-1">
+            {sortButtons.map((btn) => (
+              <Button
+                key={btn.value}
+                variant={currentSort === btn.value ? "secondary" : "ghost"}
+                size="sm"
+                onClick={() => handleSortChange(btn.value)}
+                className={cn(
+                  "text-sm",
+                  currentSort === btn.value && "bg-background shadow-sm"
+                )}
+              >
+                {btn.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+
+        {/* Posts List */}
+        <div className="space-y-3">
+          {filteredPosts.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              <p>No posts found</p>
+              <Button
+                variant="default"
+                onClick={handleCreateClick}
+                className="mt-3"
+              >
+                Create the first post
+              </Button>
+            </div>
+          ) : (
+            filteredPosts.map((post) => (
+              <FeedbackPostCard
+                key={post.id}
+                post={post}
+                organizationSlug={organizationSlug}
+                organizationId={organizationId}
+                showVoteCount={showVoteCount}
+                showAuthor={showAuthor}
+                allowPublicVoting={allowPublicVoting}
+              />
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Sidebar */}
+      {contributors.length > 0 && (
+        <aside className="lg:w-72 shrink-0">
+          <ContributorsSidebar contributors={contributors} />
+        </aside>
+      )}
+
+      {/* Floating Create Button */}
+      <Button
+        size="lg"
+        className="fixed bottom-6 right-6 shadow-lg gap-2 z-40 md:hidden"
+        onClick={handleCreateClick}
+      >
+        <Plus className="h-5 w-5" />
+        Create A New Post
+      </Button>
+
+      {/* Create Post Dialog */}
+      <CreatePostDialog
+        open={createDialogOpen}
+        onOpenChange={setCreateDialogOpen}
+        organizationId={organizationId}
+      />
+    </div>
+  );
+}

package/components/portal/feedback-post-card.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+
+/*
+ * Copyright (c) 2026 Echo Team
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useState, useCallback } from "react";
+import Link from "next/link";
+import { MessageCircle, ChevronUp } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface FeedbackPost {
+  id: number;
+  title: string;
+  description?: string | null;
+  type: string;
+  status: string;
+  voteCount: number;
+  commentCount: number;
+  createdAt: string;
+  author?: {
+    name: string;
+    image?: string | null;
+  } | null;
+}
+
+interface FeedbackPostCardProps {
+  post: FeedbackPost;
+  organizationSlug: string;
+  organizationId: string;
+  showVoteCount?: boolean;
+  showAuthor?: boolean;
+  allowPublicVoting?: boolean;
+  className?: string;
+}
+
+const statusColors: Record<string, string> = {
+  open: "bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300",
+  "in-progress": "bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300",
+  planned: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
+  completed: "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300",
+  closed: "bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300",
+};
+
+const typeLabels: Record<string, string> = {
+  bug: "Bug",
+  feature: "Feature",
+  issue: "Issue",
+  other: "Other",
+};
+
+export function FeedbackPostCard({
+  post,
+  organizationSlug,
+  organizationId,
+  showVoteCount = true,
+  showAuthor = false,
+  allowPublicVoting = true,
+  className,
+}: FeedbackPostCardProps) {
+  const [hasVoted, setHasVoted] = useState(false);
+  const [voteCount, setVoteCount] = useState(post.voteCount);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const statusColor = statusColors[post.status] ?? statusColors.open;
+  const typeLabel = typeLabels[post.type] ?? post.type;
+
+  const handleVote = useCallback(async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (isLoading) return;
+
+    setIsLoading(true);
+    const optimisticVoted = !hasVoted;
+    const optimisticCount = optimisticVoted ? voteCount + 1 : voteCount - 1;
+
+    // Optimistic update
+    setHasVoted(optimisticVoted);
+    setVoteCount(optimisticCount);
+
+    try {
+      const response = await fetch(`/api/feedback/${post.id}/vote`, {
+        method: optimisticVoted ? "POST" : "DELETE",
+        headers: {
+          "x-organization-id": organizationId,
+        },
+      });
+
+      if (!response.ok) {
+        // Rollback on error
+        setHasVoted(hasVoted);
+        setVoteCount(voteCount);
+
+        const error = await response.json();
+        if (error.code === "ALREADY_VOTED") {
+          // Sync state if already voted
+          setHasVoted(true);
+        }
+      }
+    } catch (error) {
+      // Rollback on error
+      setHasVoted(hasVoted);
+      setVoteCount(voteCount);
+      console.error("Error updating vote:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [hasVoted, voteCount, isLoading, post.id, organizationId]);
+
+  return (
+    <Link
+      href={`/${organizationSlug}/feedback/${post.id}`}
+      className={cn(
+        "group block rounded-xl border bg-card p-4 shadow-sm transition-all",
+        "hover:shadow-md hover:border-primary/30 hover:-translate-y-0.5",
+        className
+      )}
+    >
+      <div className="flex gap-4">
+        {/* Vote Button */}
+        {(showVoteCount || allowPublicVoting) && (
+          <div className="flex flex-col items-center">
+            <Button
+              variant={hasVoted ? "default" : "outline"}
+              size="sm"
+              disabled={isLoading || !allowPublicVoting}
+              className={cn(
+                "h-auto flex-col gap-0.5 px-3 py-2 transition-all",
+                hasVoted
+                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
+                  : "hover:bg-primary/10 hover:text-primary hover:border-primary/50",
+                !allowPublicVoting && "cursor-default opacity-70"
+              )}
+              onClick={allowPublicVoting ? handleVote : undefined}
+            >
+              <ChevronUp className={cn("h-4 w-4", hasVoted && "fill-current")} />
+              {showVoteCount && <span className="text-sm font-semibold">{voteCount}</span>}
+            </Button>
+          </div>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex flex-wrap items-center gap-2 mb-1">
+            <h3 className="font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-1">
+              {post.title}
+            </h3>
+            <Badge variant="outline" className={cn("text-xs", statusColor)}>
+              {post.status.replace("-", " ")}
+            </Badge>
+          </div>
+
+          {post.description && (
+            <p className="text-sm text-muted-foreground line-clamp-2 mb-2">
+              {post.description}
+            </p>
+          )}
+
+          <div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
+            <span className="px-2 py-0.5 rounded-full bg-muted">
+              {typeLabel}
+            </span>
+            <span className="flex items-center gap-1">
+              <MessageCircle className="h-3.5 w-3.5" />
+              {post.commentCount}
+            </span>
+            {showAuthor && post.author && (
+              <span>by {post.author.name}</span>
+            )}
+            <span>
+              {new Date(post.createdAt).toLocaleDateString("en-US", {
+                month: "short",
+                day: "numeric",
+              })}
+            </span>
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}