feat: Cleaner topbar + new post creation modal

- Simplified topbar design (cleaner, more minimal)
- Created PostCreateModal.jsx for single-screen post creation
- Removed complex animated gradients from topbar
- Made logo and brand text cleaner

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "sociowire-frontend",
   "private": true,
-  "version": "0.0.48",
+  "version": "0.0.49",
   "type": "module",
   "scripts": {
     "dev": "vite --host 0.0.0.0",

src/components/Layout/TopBarNew.jsx

@@ -480,88 +480,31 @@ export default function TopBarNew({ theme = "dark", onChangeTheme, onIslandsClic
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
       >
-        {/* Animated gradient background */}
+        {/* Clean dark background */}
-        <div className="absolute inset-0 bg-gradient-to-r from-surface-950 via-surface-900 to-surface-950" />
+        <div className="absolute inset-0 bg-surface-950/95 backdrop-blur-xl" />
-        <motion.div
+        {/* Subtle bottom border */}
-          className="absolute inset-0 opacity-30"
+        <div className="absolute bottom-0 left-0 right-0 h-px bg-surface-700/50" />
-          style={{
-            background: "linear-gradient(90deg, transparent, rgba(139,92,246,0.1), rgba(236,72,153,0.1), transparent)",
-            backgroundSize: "200% 100%",
-          }}
-          animate={{ backgroundPosition: ["0% 0%", "200% 0%"] }}
-          transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
-        />
-        {/* Glass overlay */}
-        <div className="absolute inset-0 backdrop-blur-xl bg-black/20" />
-        {/* Bottom glow line */}
-        <div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-accent/50 to-transparent" />
 
         <div className="relative flex items-center justify-between gap-2 px-3 py-2.5 sm:px-5 sm:py-3">
-          {/* Left: Logo & Brand with glow */}
+          {/* Left: Clean Logo */}
-          <motion.div
+          <div className="flex items-center gap-2.5">
-            className="flex items-center gap-2 sm:gap-3 cursor-pointer"
+            <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 p-0.5">
-            whileHover={{ scale: 1.02 }}
+              <div className="w-full h-full rounded-[10px] bg-surface-900 flex items-center justify-center">
-            whileTap={{ scale: 0.98 }}
+                <img src="/logo.png" alt="SocioWire" className="w-6 h-6 object-contain" />
-          >
-            {/* Logo with glow effect */}
-            <div className="relative">
-              <motion.div
-                className="absolute inset-0 rounded-2xl bg-gradient-to-br from-blue-500/40 to-cyan-500/40 blur-xl"
-                animate={{ opacity: [0.5, 0.8, 0.5] }}
-                transition={{ duration: 3, repeat: Infinity }}
-              />
-              <div className="relative w-10 h-10 sm:w-11 sm:h-11 rounded-2xl
-                              bg-gradient-to-br from-blue-500 to-cyan-500 p-0.5
-                              shadow-lg shadow-accent/30">
-                <div className="w-full h-full rounded-[14px] bg-surface-900 p-1.5 flex items-center justify-center">
-                  <img src="/logo.png" alt="SocioWire" className="w-full h-full object-contain" />
-                </div>
               </div>
             </div>
-
+            <div className="flex flex-col">
-            {/* Brand text */}
+              <span className="text-base font-bold text-white tracking-tight">sociowire</span>
-            <div className="flex flex-col leading-none">
+              <span className="flex items-center gap-1 text-[9px] text-surface-400">
-              <motion.span
-                className="text-base sm:text-lg font-black tracking-tight"
-                style={{
-                  background: "linear-gradient(135deg, #fff 0%, #60a5fa 50%, #38bdf8 100%)",
-                  WebkitBackgroundClip: "text",
-                  WebkitTextFillColor: "transparent",
-                }}
-              >
-                SOCIOWIRE
-              </motion.span>
-              <span className="flex items-center gap-1.5 text-[10px] font-medium text-surface-400">
                 <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                 {t('topbar.wiredToLife')}
               </span>
             </div>
-          </motion.div>
-
-          {/* Center: Theme selector - desktop */}
-          <div className="hidden lg:flex items-center gap-1 p-1 rounded-2xl bg-surface-900/60 border border-white/5 backdrop-blur-sm">
-            {THEMES.map((themeKey, idx) => (
-              <motion.button
-                key={themeKey}
-                type="button"
-                className={`relative px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-wider transition-all
-                  ${theme === themeKey ? "text-white" : "text-surface-500 hover:text-surface-300"}`}
-                onClick={() => onChangeTheme?.(themeKey)}
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-              >
-                {theme === themeKey && (
-                  <motion.div
-                    className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500 to-cyan-500"
-                    layoutId="themeIndicator"
-                    transition={{ type: "spring", stiffness: 500, damping: 35 }}
-                  />
-                )}
-                <span className="relative">{t(`theme.${themeKey}`)}</span>
-              </motion.button>
-            ))}
           </div>
 
+          {/* Center: Spacer for balance */}
+          <div className="hidden lg:block flex-1" />
+
           {/* Right: Actions */}
           <div className="flex items-center gap-2 sm:gap-2.5">
             {/* PWA Install */}

src/components/Posts/PostCreateModal.jsx

@@ -0,0 +1,333 @@
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslation } from "react-i18next";
+import { uploadImage } from "../../api/client";
+
+const CATEGORIES = [
+  { id: "News", icon: "fa-newspaper", color: "from-blue-500 to-cyan-500" },
+  { id: "Friends", icon: "fa-user-group", color: "from-emerald-500 to-green-500" },
+  { id: "Events", icon: "fa-calendar", color: "from-purple-500 to-violet-500" },
+  { id: "Market", icon: "fa-store", color: "from-amber-500 to-orange-500" },
+];
+
+const SUB_CATEGORIES = {
+  News: ["World", "Local", "Politics", "Tech", "Finance", "Sports"],
+  Friends: ["Nearby", "Stories", "Hangout", "Help"],
+  Events: ["Today", "Weekend", "Music", "Sports", "Food"],
+  Market: ["Deals", "Services", "Jobs", "Housing"],
+};
+
+export default function PostCreateModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  coords,
+  initialCategory = "News",
+  isSaving = false,
+  saveError = "",
+}) {
+  const { t } = useTranslation();
+  const [category, setCategory] = useState(initialCategory);
+  const [subCategory, setSubCategory] = useState(SUB_CATEGORIES[initialCategory]?.[0] || "");
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [images, setImages] = useState([]);
+  const [uploading, setUploading] = useState(false);
+  const fileInputRef = useRef(null);
+  const cameraInputRef = useRef(null);
+  const textareaRef = useRef(null);
+
+  // Reset on open
+  useEffect(() => {
+    if (isOpen) {
+      setTitle("");
+      setBody("");
+      setImages([]);
+      setCategory(initialCategory);
+      setSubCategory(SUB_CATEGORIES[initialCategory]?.[0] || "");
+    }
+  }, [isOpen, initialCategory]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    if (textareaRef.current) {
+      textareaRef.current.style.height = "auto";
+      textareaRef.current.style.height = textareaRef.current.scrollHeight + "px";
+    }
+  }, [body]);
+
+  const handleFileChange = useCallback(async (e) => {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+
+    setUploading(true);
+    try {
+      for (const file of files) {
+        const result = await uploadImage(file);
+        if (result?.url) {
+          setImages((prev) => [...prev, result.url]);
+        }
+      }
+    } catch (err) {
+      console.error("Upload failed:", err);
+    }
+    setUploading(false);
+    e.target.value = "";
+  }, []);
+
+  const removeImage = (index) => {
+    setImages((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = () => {
+    if (!title.trim() && !body.trim() && images.length === 0) return;
+
+    onSubmit?.({
+      title: title.trim(),
+      body: body.trim(),
+      category,
+      subCategory,
+      images,
+      coords,
+    });
+  };
+
+  const canSubmit = (title.trim() || body.trim() || images.length > 0) && !isSaving && !uploading;
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="fixed inset-0 z-[1200] flex items-end sm:items-center justify-center"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
+        {/* Backdrop */}
+        <motion.div
+          className="absolute inset-0 bg-black/70 backdrop-blur-sm"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          onClick={onClose}
+        />
+
+        {/* Modal */}
+        <motion.div
+          className="relative w-full max-w-lg mx-4 mb-0 sm:mb-0
+                     bg-gradient-to-br from-surface-900 via-surface-950 to-surface-900
+                     rounded-t-3xl sm:rounded-3xl border border-white/10
+                     shadow-2xl overflow-hidden"
+          initial={{ y: "100%", opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: "100%", opacity: 0 }}
+          transition={{ type: "spring", damping: 25, stiffness: 300 }}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+            <motion.button
+              className="w-9 h-9 rounded-full bg-surface-800/80 border border-white/10
+                         flex items-center justify-center text-surface-300 hover:text-white
+                         hover:bg-red-500/20 hover:border-red-500/40 transition-all"
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+              onClick={onClose}
+            >
+              <i className="fa-solid fa-times" />
+            </motion.button>
+
+            <h2 className="text-lg font-bold text-surface-100">Create Post</h2>
+
+            <motion.button
+              className={`px-5 py-2 rounded-full font-bold text-sm transition-all
+                         ${canSubmit
+                           ? "bg-gradient-to-r from-blue-500 to-cyan-500 text-white shadow-lg shadow-blue-500/30"
+                           : "bg-surface-700/50 text-surface-400 cursor-not-allowed"}`}
+              whileHover={canSubmit ? { scale: 1.05 } : {}}
+              whileTap={canSubmit ? { scale: 0.95 } : {}}
+              onClick={handleSubmit}
+              disabled={!canSubmit}
+            >
+              {isSaving ? (
+                <><i className="fa-solid fa-spinner fa-spin mr-2" />Posting...</>
+              ) : (
+                "Post"
+              )}
+            </motion.button>
+          </div>
+
+          {/* Content */}
+          <div className="p-5 max-h-[70vh] overflow-y-auto">
+            {/* Category chips */}
+            <div className="flex gap-2 mb-4 overflow-x-auto pb-2">
+              {CATEGORIES.map((cat) => (
+                <motion.button
+                  key={cat.id}
+                  className={`flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap
+                             transition-all border ${category === cat.id
+                               ? `bg-gradient-to-r ${cat.color} text-white border-white/20 shadow-lg`
+                               : "bg-surface-800/50 text-surface-300 border-white/5 hover:border-white/20"}`}
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  onClick={() => {
+                    setCategory(cat.id);
+                    setSubCategory(SUB_CATEGORIES[cat.id]?.[0] || "");
+                  }}
+                >
+                  <i className={`fa-solid ${cat.icon}`} />
+                  {cat.id}
+                </motion.button>
+              ))}
+            </div>
+
+            {/* Sub-category chips */}
+            <div className="flex gap-2 mb-5 overflow-x-auto pb-2">
+              {SUB_CATEGORIES[category]?.map((sub) => (
+                <motion.button
+                  key={sub}
+                  className={`px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap
+                             transition-all border ${subCategory === sub
+                               ? "bg-accent/20 text-accent border-accent/40"
+                               : "bg-surface-800/30 text-surface-400 border-white/5 hover:border-white/20"}`}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={() => setSubCategory(sub)}
+                >
+                  {sub}
+                </motion.button>
+              ))}
+            </div>
+
+            {/* Title input */}
+            <input
+              type="text"
+              placeholder="What's happening?"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              className="w-full px-4 py-3 mb-3 rounded-xl
+                         bg-surface-800/50 border border-white/10
+                         text-surface-100 text-lg font-medium
+                         placeholder:text-surface-500
+                         focus:outline-none focus:border-accent/50
+                         transition-colors"
+            />
+
+            {/* Body textarea */}
+            <textarea
+              ref={textareaRef}
+              placeholder="Add more details..."
+              value={body}
+              onChange={(e) => setBody(e.target.value)}
+              rows={2}
+              className="w-full px-4 py-3 mb-4 rounded-xl
+                         bg-surface-800/50 border border-white/10
+                         text-surface-200 text-sm
+                         placeholder:text-surface-500
+                         focus:outline-none focus:border-accent/50
+                         transition-colors resize-none"
+            />
+
+            {/* Image gallery */}
+            {images.length > 0 && (
+              <div className="grid grid-cols-3 gap-2 mb-4">
+                {images.map((url, idx) => (
+                  <div key={idx} className="relative aspect-square rounded-xl overflow-hidden group">
+                    <img src={url} alt="" className="w-full h-full object-cover" />
+                    <motion.button
+                      className="absolute top-2 right-2 w-6 h-6 rounded-full bg-black/60
+                                 flex items-center justify-center text-white text-xs
+                                 opacity-0 group-hover:opacity-100 transition-opacity"
+                      whileTap={{ scale: 0.9 }}
+                      onClick={() => removeImage(idx)}
+                    >
+                      <i className="fa-solid fa-times" />
+                    </motion.button>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Upload progress */}
+            {uploading && (
+              <div className="flex items-center gap-2 mb-4 text-surface-400 text-sm">
+                <i className="fa-solid fa-spinner fa-spin" />
+                Uploading...
+              </div>
+            )}
+
+            {/* Error */}
+            {saveError && (
+              <div className="flex items-center gap-2 mb-4 p-3 rounded-xl bg-red-500/10 border border-red-500/30 text-red-400 text-sm">
+                <i className="fa-solid fa-exclamation-circle" />
+                {saveError}
+              </div>
+            )}
+
+            {/* Location indicator */}
+            {coords && (
+              <div className="flex items-center gap-2 mb-4 text-surface-400 text-sm">
+                <i className="fa-solid fa-location-dot text-accent" />
+                <span>Location selected on map</span>
+              </div>
+            )}
+          </div>
+
+          {/* Bottom toolbar */}
+          <div className="flex items-center gap-3 px-5 py-4 border-t border-white/10 bg-surface-900/50">
+            <motion.button
+              className="flex items-center gap-2 px-4 py-2.5 rounded-xl
+                         bg-surface-800/50 border border-white/10
+                         text-surface-300 text-sm font-medium
+                         hover:bg-surface-700/50 hover:text-white transition-all"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={() => fileInputRef.current?.click()}
+              disabled={uploading}
+            >
+              <i className="fa-solid fa-image" />
+              Photo
+            </motion.button>
+
+            <motion.button
+              className="flex items-center gap-2 px-4 py-2.5 rounded-xl
+                         bg-surface-800/50 border border-white/10
+                         text-surface-300 text-sm font-medium
+                         hover:bg-surface-700/50 hover:text-white transition-all"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              onClick={() => cameraInputRef.current?.click()}
+              disabled={uploading}
+            >
+              <i className="fa-solid fa-camera" />
+              Camera
+            </motion.button>
+
+            <div className="flex-1" />
+
+            <span className="text-xs text-surface-500">
+              {title.length + body.length}/500
+            </span>
+          </div>
+
+          {/* Hidden file inputs */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            multiple
+            onChange={handleFileChange}
+            hidden
+          />
+          <input
+            ref={cameraInputRef}
+            type="file"
+            accept="image/*"
+            capture="environment"
+            onChange={handleFileChange}
+            hidden
+          />
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}