Edit mode improved visualization + grid

src/common/ui/components/UserAuthForm.tsx

@@ -89,7 +89,7 @@ export function UserAuthForm({ className }: { className?: string }) {
     posthog.identify(uuidv4(), { isLocalOnly: true });
 
     setUserMessage("Setup done. Welcome to the Nounspace experience!");
-    router.push("/feed");
+    router.push("/Homebase");
     setIsLoading(false);
   };
 
@@ -121,7 +121,7 @@ export function UserAuthForm({ className }: { className?: string }) {
 
     posthog.identify(data?.user?.id, { email });
     await hydrate();
-    router.push("/feed");
+    router.push("/homebase");
     setIsLoading(false);
   }
 

src/common/ui/templates/home/index.tsx

@@ -112,11 +112,11 @@ const Home = ({ children }: { children: React.ReactNode }) => {
       getTitle: () => "Your notifications",
       shortcut: "Shift + N",
     },
-    {
-      name: "Hats Protocol",
-      router: "/hats",
-      icon: <span className="grayscale group-hover:grayscale-0 text-xl h-6 w-6 shrink-0" aria-hidden="true">🧢</span>,
-    },
+    // {
+    //   name: "Hats Protocol",
+    //   router: "/hats",
+    //   icon: <span className="grayscale group-hover:grayscale-0 text-xl h-6 w-6 shrink-0" aria-hidden="true">🧢</span>,
+    // },
     {
       name: "Settings",
       router: "/settings",

src/common/ui/templates/space/index.tsx

@@ -26,7 +26,7 @@ export default function Space({ config, isEditable }: SpaceArgs){
   function generateDOM() {    
     return _.map(_.range(config.layoutConfig.items), function(i) {
       return (
-        <div key={i} data-grid={config.fidgetConfigs[i]} className="overflow-hidden rounded-md flex m-4 items-center">
+        <div key={i} data-grid={config.fidgetConfigs[i]} className="overflow-hidden rounded-md flex justify-center items-center">
           {config.fidgetConfigs[i].f}
         </div>
       );
@@ -38,8 +38,10 @@ export default function Space({ config, isEditable }: SpaceArgs){
   }
 
   return (
-    <ReactGridLayout onLayoutChange={onLayoutChange} {...config.layoutConfig}>
-      {generateDOM()}
-    </ReactGridLayout>
+    <div className="m-4">
+      <ReactGridLayout onLayoutChange={onLayoutChange} {...config.layoutConfig}>
+        {generateDOM()}
+      </ReactGridLayout>
+    </div>
   );
 }

src/fidgets/ui/frameFidget.tsx

@@ -0,0 +1,48 @@
+import { useState } from 'react';
+import { FaGear } from "react-icons/fa6";
+import Modal from "@/common/ui/components/Modal";
+import Frame from '@/common/ui/molecules/Frame';
+
+export default function FrameFidget() {
+    const images = ["image1","image2","image3"]
+
+    const [editMode, setMode] = useState(false);
+    const [frameURL, setFrameURL] = useState("https://far.cards/api/trade/user/4865");
+
+    function switchMode() {
+      setMode(!editMode);
+    }
+
+    const handleSubmit = (event) => {
+      const formData = new FormData(event.currentTarget);
+      event.preventDefault();
+      setFrameURL(formData.get("URL"));
+      switchMode();
+    };
+
+    return (
+      <>
+        <div className ="rounded-md flex-1 items-center justify-center overflow-hidden relative bg-contain">
+          <Frame url = { frameURL }/>
+            <button onClick={switchMode} className = "size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
+                <FaGear />
+            </button>
+        </div>
+        <Modal
+          open={editMode}
+          setOpen={setMode}
+        >
+          <form onSubmit={handleSubmit}>
+            <label>
+              <h2 className = "m-2">URL</h2>            
+              <input name="URL" type="text" className = "p-2 m-2"/>
+            </label>
+            <br/>
+            <button type="submit" className = "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 m-2 rounded">
+              Update
+            </button>
+          </form>
+        </Modal>
+      </>
+    )
+}

src/fidgets/ui/gallery.tsx

@@ -28,7 +28,7 @@ export default function Gallery() {
           className = "flex-1 inset-0 bg-center bg-cover z-0 rounded-md"
         />
         <div className = "opacity-0 hover:opacity-100 duration-500 absolute inset-0 z-10 flex bg-slate-400 bg-opacity-0 justify-center items-center">
-          <button onClick={switchMode} className = "size-4/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
+          <button onClick={switchMode} className = "size-1/12 opacity-50 hover:opacity-100 duration-500 z-10 flex justify-center items-center text-white font-semibold text-2xl">
             <FaGear />
           </button>
         </div>

src/pages/feed/index.tsx

@@ -345,7 +345,7 @@ export default function Feed() {
     );
 
   const renderContent = () => (
-    <div className="p-4 border-2 row-span-8 col-span-6 max-h-full overflow-scroll rounded-md">
+    <div className="p-4 border-2 row-span-8 col-span-6 max-h-full overflow-scroll rounded-md bg-white ">
       <div className="min-w-full">
         {isLoadingFeed && isEmpty(feed) && (
           <div className="ml-4">

src/pages/homebase/index.tsx

@@ -3,6 +3,7 @@ import { useAccountStore } from "@/common/data/stores/useAccountStore";
 import { useState } from 'react';
 import { RiPencilFill } from "react-icons/ri";
 import Gallery from "@/fidgets/ui/gallery";
+import FrameFidget from "@/fidgets/ui/frameFidget";
 import Feed from "@/pages/feed";
 
 export default function Homebase(spaceID) {
@@ -14,30 +15,48 @@ export default function Homebase(spaceID) {
     const availableHandles = ["s", "w", "e", "n", "sw", "nw", "se", "ne"];
 
     const [fidgetConfigs, setFidgetConfigs] = useState([
-        {   
-            f: <Feed/>,
+        {   f: <Feed/>,
             resizeHandles: availableHandles,
             x: 0,
             y: 0,
             w: 6,
             minW: 4,
             maxW: 8,
-            h: 20,
-            minH: 10,
-            maxH: 20
+            h: 10,
+            minH: 6,
+            maxH: 12
         },
-        {
-            f: <Gallery/>,
+        {   f: <Gallery/>,
             resizeHandles: availableHandles,
             x: 6,
             y: 0,
-            w: 4,
+            w: 2,
+            minW: 1,
+            h: 4,
+            minH: 1
+        },
+        {   f: <FrameFidget/>,
+            resizeHandles: availableHandles,
+            x: 8,
+            y: 0,
+            w: 2,
             minW: 2,
             maxW: 4,
-            h: 9,
+            h: 4,
             minH: 3,
             maxH: 12
         },
+        {   f: <FrameFidget/>,
+            resizeHandles: availableHandles,
+            x: 12,
+            y: 0,
+            w: 2,
+            minW: 2,
+            maxW: 4,
+            h: 4,
+            minH: 3,
+            maxH: 12
+        }
     ]);
 
     function switchMode() {
@@ -48,9 +67,9 @@ export default function Homebase(spaceID) {
         const layoutConfig = {
             isDraggable: editMode,
             isResizable: editMode,
-            items: 2,
+            items: 4,
             cols: 12,
-            rowHeight: 30,
+            rowHeight: 70,
             onLayoutChange: function(){},
             // This turns off compaction so you can place items wherever.
             compactType: null,
@@ -64,9 +83,10 @@ export default function Homebase(spaceID) {
 
     return (
         <div>
+            <div className={editMode ? "edit-grid absolute inset-0 z-0" : "no-edit-grid  absolute inset-0 z-0"} />
             <button onClick={switchMode} 
-                    className = "size-12 absolute top-4 right-0 z-10 flex opacity-50 hover:opacity-100 duration-500 ">
-                <RiPencilFill className="text-gray-700 font-semibold text-3xl"/>
+                    className = {editMode ? "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-90 hover:opacity-100 duration-500" : "rounded-full bg-white size-12 absolute top-6 right-4 z-10 flex opacity-50 hover:opacity-100 duration-500"}>
+                <RiPencilFill className={editMode ? "text-slate-900 font-semibold text-3xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" : "text-gray-700 font-semibold text-3xl absolute transform -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"}/>
             </button>
             <Space config={retrieveConfig(user, spaceID)} isEditable={editMode}></Space>
         </div>

src/pages/login/index.tsx

@@ -40,7 +40,7 @@ export default function Login() {
                 <div className="text-center">
                   <h1 className="bg-gradient-to-tl from-white via-stone-200 to-stone-500 bg-clip-text text-center text-5xl font-bold leading-tight tracking-tight text-transparent drop-shadow-sm dark:from-white dark:via-gray-200 dark:to-stone-500 md:text-7xl md:leading-[6rem] lg:leading-[1.1]">
                     <p className="inline-block">
-                      <span>The Fastest Farcaster</span>
+                      <span>A Creative Farcaster</span>
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         width="42"

src/pages/welcome/index.tsx

@@ -10,8 +10,8 @@ export default function Welcome() {
     <div className="w-full">
       <div className="space-y-6 p-10 pb-16 block">
         <div className="space-y-1 max-w-lg">
-          <h2 className="text-2xl font-bold tracking-tight">Welcome to Nounsapce</h2>
-          <p className="text-muted-foreground">Nounsapce is a client for Farcaster with focus on keyboard-first desktop experience for power users and teams</p>
+          <h2 className="text-2xl font-bold tracking-tight">Welcome to Nounspace</h2>
+          <p className="text-muted-foreground">Nounspace is a client for Farcaster with focus on keyboard-first desktop experience for power users and teams</p>
         </div>
         <Separator className="my-6" />
         <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">

src/styles/globals.css

@@ -60,6 +60,39 @@
     @apply bg-background text-foreground;
   }
 } */
+.no-edit-grid {
+  /* background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); */
+
+  background-color:rgba(255, 255, 255, 0);
+  background-image: linear-gradient(white 10px, transparent 10px),
+  linear-gradient(90deg, white 10px, transparent 10px);
+  background-size: 80px 80px, 114px 114px, 40px 40px, 40px 40px;
+  margin-top:20px;
+  margin-right:14px;
+  margin-left:100px;
+  height:96vh;
+
+  -webkit-transition: background-color 1000ms linear;
+  -ms-transition: background-color 1000ms linear;
+  transition: background-color 1000ms linear;
+}
+
+.edit-grid {
+  /* background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px); */
+
+  background-color:rgba(200, 227, 248, 0.523);
+  background-image: linear-gradient(white 10px, transparent 10px),
+  linear-gradient(90deg, white 10px, transparent 10px);
+  background-size: 80px 80px, 114px 114px, 40px 40px, 40px 40px;
+  margin-top:20px;
+  margin-right:14px;
+  margin-left:100px;
+  height:96vh;
+
+  -webkit-transition: background-color 1000ms linear;
+  -ms-transition: background-color 1000ms linear;
+  transition: background-color 1000ms linear;
+}
 
 .react-grid-layout {
   position: relative;