+
{/* Predefined tags */}
-
- {predefinedTags.map((tag) => (
-
- ))}
+
+ {predefinedTags.map((tag) => {
+ const isActive = tags.some(
+ (t) => t.text.toLowerCase() === tag.toLowerCase()
+ );
+ const disabled = isTagDisabled(tag);
+
+ return (
+
+ );
+ })}
-
+
Add up to 5 tags to describe your post.
-
+
{
if (e.key === "Enter") e.preventDefault();
@@ -178,18 +194,28 @@ const TagsInput = ({ tags, setTags }) => {
handleInputChange={handleInputChange}
inputFieldPosition="bottom"
placeholder="Start typing to search for tags"
+ classNames={{
+ tags: "space-y-2",
+ selected: "flex flex-wrap gap-2",
+ tag: "inline-flex items-center gap-2 rounded-full bg-zinc-800 px-3 py-1 text-xs font-medium text-zinc-100",
+ remove:
+ "inline-flex h-5 w-5 items-center justify-center rounded-full text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950",
+ tagInput: "w-full",
+ tagInputField:
+ "w-full rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-100 placeholder:text-zinc-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950",
+ }}
/>
{inputValue && renderFilteredTags()}
{!error ? (
-
+
Allowed characters: letters, numbers, spaces, dots, underscores, plus
(+), hyphens (-), hashtags (#).
-
+
) : (
-
{error}
+
{error}
)}
);
diff --git a/src/components/TopPostCard.jsx b/src/components/TopPostCard.jsx
index 24ed2ae..9ed5990 100644
--- a/src/components/TopPostCard.jsx
+++ b/src/components/TopPostCard.jsx
@@ -19,6 +19,8 @@ import { useNavigate } from "react-router-dom";
function TopPostCard({ post }) {
const navigate = useNavigate();
+ const goToPost = () => navigate(`/post/${post.id}`);
+
// Preview teksta (description → content fallback, skracivanje na 120 karaktera)
const previewText = useMemo(() => {
const desc = post?.description?.trim();
@@ -43,36 +45,43 @@ function TopPostCard({ post }) {
navigate(`/post/${post.id}`)}
- onKeyDown={(e) =>
- (e.key === "Enter" || e.key === " ") && navigate(`/post/${post.id}`)
- }
- className="bg-white shadow rounded p-4 hover:shadow-md transition cursor-pointer"
+ onClick={goToPost}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") goToPost();
+ if (e.key === " ") {
+ e.preventDefault();
+ goToPost();
+ }
+ }}
+ className="ui-card p-4 cursor-pointer transition duration-200 hover:bg-zinc-900/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400 focus-visible:ring-offset-2 focus-visible:ring-offset-zinc-950"
>
{/* Naslov */}
-
+
{post?.title ?? "Untitled"}
{/* Preview teksta */}
-
+
{previewText}
{/* Kategorija i tagovi */}
-
-
+
+
{post?.category?.trim() || "Uncategorized"}
+
{tagList && (
-
+
{tagList}
)}
{/* Reakcije */}
- 👍 {post?.reactionsCount ?? 0}
+
+ 👍 {post?.reactionsCount ?? 0}
+
);
}
diff --git a/src/components/comments/CommentForm.jsx b/src/components/comments/CommentForm.jsx
index d7544eb..d8b65da 100644
--- a/src/components/comments/CommentForm.jsx
+++ b/src/components/comments/CommentForm.jsx
@@ -7,20 +7,15 @@ import { addCommentSecure } from "../../firebase/functions";
import { showErrorToast, showInfoToast } from "../../utils/toastUtils";
/**
- * Komponenta za unos komentara.
+ * @component CommentForm
+ * Komponenta za unos komentara (root ili reply).
*
- * Omogucava korisniku da napise komentar i posalje ga u Firestore.
- * Moze se koristiti za dodavanje glavnih komentara ili odgovora (replies) ako je prosledjen `parentId`.
- * Podrzava automatsko fokusiranje i vizuelni indikator preostalog broja karaktera.
- *
- * @component
- * @param {string} postId - ID posta na koji se dodaje komentar.
- * @param {string} userId - ID trenutno prijavljenog korisnika koji unosi komentar.
- * @param {string|null} parentId - ID roditeljskog komentara ako se radi o odgovoru.
- * @param {Function} [onSubmitSuccess] - Callback koji se poziva nakon uspesnog unosa komentara.
- * @param {boolean} [autoFocus=false] - Ako je true, automatski fokusira textarea pri mountovanju komponente.
+ * Props:
+ * - postId: id posta
+ * - parentId: id roditeljskog komentara (ako je reply)
+ * - onSubmitSuccess: callback posle uspesnog submit-a
+ * - autoFocus: fokusira textarea i scrolluje u centar
*/
-
const CommentForm = ({
postId,
parentId,
@@ -28,7 +23,7 @@ const CommentForm = ({
autoFocus = false,
}) => {
const { currentUser } = useContext(AuthContext);
- const user = currentUser || auth.currentUser; // fallback
+ const user = currentUser || auth.currentUser;
const [commentContent, setCommentContent] = useState("");
const [error, setError] = useState("");
@@ -36,7 +31,6 @@ const CommentForm = ({
const isCommentValid = commentContent.trim().length > 0;
useEffect(() => {
- // Ako je autoFocus aktivan, fokusiraj textarea i skroluj je u centar ekrana
if (autoFocus && textareaRef.current) {
textareaRef.current.focus();
textareaRef.current.scrollIntoView({
@@ -46,17 +40,9 @@ const CommentForm = ({
}
}, [autoFocus]);
- /**
- * Obradjuje submit forme.
- * Sprecava osvecavanje stranice i slanje praznog komentara.
- * Dodaje komentar u Firestore i resetuje polje za unos.
- *
- * @param {Event} e - Objekat dogadjaja submit event-a.
- */
-
const handleSubmit = async (e) => {
- e.preventDefault(); // Sprecava reload stranice
- e.stopPropagation(); // Sprecava klik da pokrene `onClick` event iz PostCard
+ e.preventDefault();
+ e.stopPropagation();
try {
if (!user) {
@@ -65,7 +51,6 @@ const CommentForm = ({
}
if (!commentContent.trim()) {
- // Sprecava slanje praznog komentara
setError("Comment form cannot be empty.");
return;
}
@@ -75,8 +60,9 @@ const CommentForm = ({
content: commentContent,
parentId,
});
- setCommentContent(""); // Resetuje textarea nakon uspesnog slanja
- onSubmitSuccess?.(); // Poziva se nakon uspesnog unosa komentara (npr. zatvaranje forme kod odgovora)
+
+ setCommentContent("");
+ onSubmitSuccess?.();
} catch (error) {
if (
error.message.includes("too quickly") ||
@@ -91,10 +77,9 @@ const CommentForm = ({
}
};
- // Prikaz broja preostalih karaktera (maksimum 500)
const remainingChars = 500 - commentContent.length;
const charCountColor =
- remainingChars <= 50 ? "text-red-500" : "text-gray-500";
+ remainingChars <= 50 ? "text-rose-300" : "text-zinc-500";
return (