Visual cleanup, sponsor everyone, and RSS Fidget

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Nounspace",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "license": "",
   "private": true,
   "scripts": {
@@ -145,6 +145,7 @@
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-html": "^16.0.1",
+    "rss-parser": "^3.13.0",
     "sharp": "^0.33.4",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.0",

src/authenticators/farcaster/signers/NounspaceManagedSignerAuthenticator.tsx

@@ -240,11 +240,36 @@ const initializer: AuthenticatorInitializer<
 
   return (
     <div className="flex flex-col justify-center items-center align-center">
-      <h1 className="text-4xl font-extrabold">Connect Farcaster</h1>
+      <h1 className="text-4xl font-extrabold justify-start">
+        Connect Farcaster
+      </h1>
       {isUndefined(data.status) ||
       !isDataInitialized(data) ||
       data.status === "revoked" ? (
-        <Button onClick={createSigner}>Link Warpcast Account</Button>
+        <>
+          <p className="text-lg text-gray-500 mt-4">
+            Use of Nounspace requires a Farcaster account. Click the button
+            below to connect your Farcaster account via Warpcast.
+          </p>
+          <Button
+            style={{
+              backgroundColor: "#7a5fbb",
+              display: "flex",
+              alignItems: "center",
+              gap: "6px",
+              marginTop: "2em",
+            }}
+            className="px-10"
+            onClick={createSigner}
+          >
+            <span>Sign in with</span>
+            <img
+              src="/images/farcaster_nude.png"
+              alt="Icon"
+              style={{ width: "22px", height: "22px" }}
+            />
+          </Button>
+        </>
       ) : loading && warpcastSignerUrl ? (
         <>
           <div className="text-center mt-4">

src/common/components/atoms/reorderable-tab.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { motion, Reorder } from "framer-motion";
 import { CloseIcon } from "./icons/CloseIcon";
 import EditableText from "./editable-text";
-import { FaX } from "react-icons/fa6";
 
 interface Props {
   tabName: string;

src/common/components/molecules/DaoSelector.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import {
   Select,
-  SelectGroup,
   SelectValue,
   SelectTrigger,
   SelectContent,
-  SelectLabel,
   SelectItem,
-  SelectSeparator,
 } from "@/common/components/atoms/select";
 
 import { DAO_OPTIONS } from "@/constants/basedDaos";

src/common/components/molecules/ImageScaleSlider.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { Slider } from "@mui/material";
+
+export type ImageScaleSliderProps = {
+  min: number;
+  max: number;
+  step?: number;
+  defaultValue?: number;
+  onChange: (value: number) => void;
+};
+
+const ImageScaleSlider: React.FC<ImageScaleSliderProps> = ({
+  min = 0.2,
+  max = 3,
+  step = 0.1,
+  defaultValue = 1,
+  onChange,
+}) => {
+  return (
+    <div className="ml-3 mr-3">
+      <Slider
+        defaultValue={defaultValue}
+        step={step}
+        min={min}
+        max={max}
+        onChange={(_, value) => onChange(value as number)}
+      />
+    </div>
+  );
+};
+
+export default ImageScaleSlider;

src/common/components/molecules/LinksInput.tsx

@@ -94,12 +94,12 @@ const LinksInput = forwardRef<HTMLInputElement, LinksInputProps>(
       const newLink = {
         text: "New Link",
         url: "https://",
-        avatar: "/images/chainEmoji.png",
+        avatar: "https://www.nounspace.com/images/chainEmoji.png",
         description: "Description",
       };
 
       onChange?.([...value, newLink]);
-      setVisibleFields([...visibleFields, true]); // Automatically expand new link
+      setVisibleFields([...visibleFields, true]);
     };
 
     const removeLink = (index: number) => {
@@ -133,8 +133,9 @@ const LinksInput = forwardRef<HTMLInputElement, LinksInputProps>(
                 value={link.url}
                 onChange={(e: any) => {
                   handleLinkChange(index, { ...link, url: e.target.value });
-                  showAdditionalFields(index); // Show fields when URL is updated
+                  showAdditionalFields(index);
                 }}
+                onFocus={() => showAdditionalFields(index)}
               />
               <TextFieldSlot>
                 <p

src/common/components/molecules/Modal.tsx

@@ -23,19 +23,19 @@ const Modal = ({
   title,
   description,
   children,
-  focusMode,
+  focusMode = true,
   showClose = true,
   overlay = true,
 }: ModalProps) => (
-  <Dialog.Root open={open} onOpenChange={setOpen} modal={focusMode || true}>
+  <Dialog.Root open={open} onOpenChange={setOpen} modal={focusMode}>
     <Dialog.Portal>
       {overlay && open && (
         <Dialog.Overlay className="bg-muted/95 data-[state=open]:animate-overlayShow fixed inset-0 z-50" />
       )}
       <Dialog.Content
         className={mergeClasses(
           "data-[state=open]:animate-contentShow fixed bg-background top-[40%]",
-          "left-[50%] w-[100vw] max-w-[600px] translate-x-[-50%] translate-y-[-40%] rounded-[30px] p-[25px]",
+          "left-[50%] w-[100vw] max-w-[600px] translate-x-[-50%] translate-y-[-40%] rounded-[10px] p-[25px]",
           "shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none",
           "z-50",
         )}
@@ -67,7 +67,7 @@ const Modal = ({
         {showClose ? (
           <Dialog.Close asChild>
             <button
-              className="text-card-foreground/80 bg-background/90 focus:shadow-background/90 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
+              className=" text-gray-400 text-card-foreground/80 bg-background/90 focus:shadow-background/90 absolute top-[10px] right-[10px] inline-flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-full focus:shadow-[0_0_0_2px] focus:outline-none"
               aria-label="Close"
             >
               <Cross2Icon />

src/common/components/organisms/Navigation.tsx

@@ -163,10 +163,10 @@ const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
       <Modal
         open={showCastModal}
         setOpen={setShowCastModal}
-        focusMode
+        focusMode={false}
         showClose={false}
       >
-        <CreateCast />
+        <CreateCast afterSubmit={() => setShowCastModal(false)} />
       </Modal>
       <SearchModal ref={searchRef} />
       <div className="pt-12 pb-12 h-full md:block hidden">

src/common/components/organisms/NogsChecker.tsx

@@ -21,7 +21,7 @@ export default function NogsChecker() {
   return (
     <>
       <p className="mb-2">
-        Tabs are only for early supporters holding a nounspace OG NFT (nOGs){" "}
+        For now Tabs are only for early supporters holding a nounspace OG NFT (nOGs){" "}
         <br />
         Mint a pair{" "}
         <a

src/common/components/organisms/TabBar.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import AddFidgetIcon from "@/common/components/atoms/icons/AddFidget";
 import { FaPlus } from "react-icons/fa6";
 import { first, map } from "lodash";
 import { useLoadFarcasterUser } from "@/common/data/queries/farcaster";
@@ -352,7 +351,7 @@ const TabBar = memo(function TabBar({
       </Reorder.Group>
 
       {inEditMode ? (
-        <div className="flex flex-row pr-32">
+        <div className="flex flex-row pr-32 z-infinity">
           <NogsGateButton
             onClick={handleCreateTab}
             className="items-center flex rounded-xl p-2 m-3 px-auto bg-[#F3F4F6] hover:bg-sky-100 text-[#1C64F2] font-semibold"

src/common/components/templates/Space.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useMemo } from "react";
+import React, { ReactNode, useEffect } from "react";
 import {
   FidgetConfig,
   FidgetInstanceData,
@@ -109,14 +109,14 @@ export default function Space({
 
   return (
     <div className="user-theme-background w-full h-full relative flex-col">
-      <CustomHTMLBackground html={config.theme?.properties.backgroundHTML} />
       {isNil(profile) && (
         <TabBar
           hasProfile={!isNil(profile)}
           inEditMode={editMode}
           profileFid={fid ? fid : 0}
         />
       )}
+      <CustomHTMLBackground html={config.theme?.properties.backgroundHTML} />
       <div className="w-full transition-all duration-100 ease-out h-[calc(100vh-64px)]">
         <div className="flex flex-col h-full">
           <div style={{ position: "fixed", zIndex: 9999 }}>

src/common/components/templates/SpaceLoading.tsx

@@ -1,24 +1,27 @@
-import React, { ReactNode, useMemo } from "react";
+import React, { ReactNode, useState, useEffect } from "react";
 import { isUndefined } from "lodash";
 import useWindowSize from "@/common/lib/hooks/useWindowSize";
 
 export default function SpaceLoading({ profile }: { profile?: ReactNode }) {
+  const [rowHeight, setRowHeight] = useState(70);
+  const { height } = useWindowSize();
   const maxRows = 12;
   const cols = 12;
   const margin = [16, 16];
   const containerPadding = [16, 16];
-  const { height } = useWindowSize();
-  const rowHeight = useMemo(
-    () =>
+
+  useEffect(() => {
+    setRowHeight(
       height
         ? Math.round(
             // The 64 magic number here is the height of the tabs bar above the grid
             (height - 64 - margin[0] * maxRows - containerPadding[0] * 2) /
               maxRows,
           )
         : 70,
-    [height],
-  );
+    ),
+      [height];
+  });
 
   return (
     <>

src/common/fidgets/FidgetWrapper.tsx

@@ -70,7 +70,6 @@ export function FidgetWrapper({
     homebaseConfig: state.homebase.homebaseConfig,
   }));
 
-  console.log(homebaseConfig);
   function onClickEdit() {
     setSelectedFidgetID(bundle.id);
     setCurrentFidgetSettings(

src/common/fidgets/index.d.ts

@@ -4,7 +4,8 @@ import HTMLInput from "@/common/ui/molecules/HTMLInput";
 import ColorSelector from "@/common/components/molecules/ColorSelector";
 import FontSelector from "@/common/components/molecules/FontSelector";
 import type { ThemeSettings, FontFamily, Color } from "@/common/lib/theme";
-
+import SwitchButton from "../components/molecules/ViewSelector";
+import ImageScaleSlider from "@/common/components/molecules/ImageScaleSlider";
 export type FidgetSettings = Record<string, any>;
 export type FidgetSettingsStyle = {
   background?: Color;
@@ -15,6 +16,9 @@ export type FidgetSettingsStyle = {
   fidgetBorderWidth?: string;
   fidgetBorderColor?: Color;
   fidgetShadow?: string;
+  itemBorderWidth?: string;
+  itemBorderColor?: Color;
+  itemBackground?: Color;
 };
 export type FidgetData = Record<string, any>;
 
@@ -38,7 +42,9 @@ export type FidgetFieldConfig<S extends FidgetSettings = FidgetSettings> = {
     | typeof ColorSelector
     | typeof FontSelector
     | typeof CSSInput
-    | typeof HTMLInput;
+    | typeof HTMLInput
+    | typeof ImageScaleSlider
+    | typeof SwitchButton; // change the name of ViewSelector.tsx file in next link fidget PR
   readonly default?: any;
   readonly required: boolean;
   readonly group?: FidgetGroup;

src/common/lib/theme/ThemeCard.tsx

@@ -25,7 +25,7 @@ export const ThemeCard = ({
 
   return (
     <div
-      className={`bg-gray-50 hover:bg-gray-100 rounded-lg grid [grid-template-areas:'cell'] h-11 cursor-pointer relative ${active ? activeRingBeforeElementClasses : ""}`}
+      className={`shadow-md w-full bg-gray-50 hover:bg-gray-100 rounded-lg grid [grid-template-areas:'cell'] h-11 cursor-pointer relative ${active ? activeRingBeforeElementClasses : ""}`}
       style={{
         backgroundColor: themeProps.background,
       }}

src/common/lib/theme/ThemeSettingsEditor.tsx

@@ -34,6 +34,9 @@ import { FaInfoCircle } from "react-icons/fa";
 import { THEMES } from "@/constants/themes";
 import { ThemeCard } from "@/common/lib/theme/ThemeCard";
 import { FONT_FAMILY_OPTIONS_BY_NAME } from "@/common/lib/theme/fonts";
+import { GiOpenBook } from "react-icons/gi";
+import { FaBook } from "react-icons/fa";
+import { MdMenuBook } from "react-icons/md";
 
 export type ThemeSettingsEditorArgs = {
   theme: ThemeSettings;
@@ -153,9 +156,16 @@ export function ThemeSettingsEditor({
                 type="checkbox"
               />
               {/* Templates Dropdown */}
-              <span className="block max-h-12 max-w-xs overflow-hidden rounded-lg transition-all duration-300 peer-checked/showLabel:max-h-full p-1">
-                {/* Theme Card Example */}
-                <ThemeCard themeProps={theme.properties} />
+              <span className="block max-h-14 max-w-xs overflow-hidden rounded-lg transition-all duration-300 peer-checked/showLabel:max-h-full p-1">
+                <div className="flex flex-row w-full">
+                  <div className="flex basis-3/4 grow">
+                    {/* Theme Card Example */}
+                    <ThemeCard themeProps={theme.properties} />
+                  </div>
+                  <div className="flex basis-1/4 items-center justify-center">
+                    <MdMenuBook className="w-6 h-6" />
+                  </div>
+                </div>
 
                 <div className="grid grid-cols-2 gap-3 pb-3 pt-3">
                   {THEMES.map((theme, i) => (

src/common/lib/utils/generateUserMetadataHtml.tsx

@@ -31,7 +31,6 @@ export const generateUserMetadataHtml = (userMetadata?: UserMetadata) => {
       <meta property="twitter:domain" content="https://nounspace.com/" />
       <meta property="og:url" content={spaceUrl} />
       <meta property="twitter:url" content={spaceUrl} />
-      <meta property="og:image" content={ogImageUrl} />
       {bio && (
         <>
           <meta name="description" content={bio} />
@@ -41,9 +40,9 @@ export const generateUserMetadataHtml = (userMetadata?: UserMetadata) => {
       )}
       {pfpUrl && (
         <>
-          <meta property="og:image" content={pfpUrl} />
           <meta name="twitter:card" content={pfpUrl} />
-          <meta name="twitter:image" content={pfpUrl} />
+          <meta property="og:image" content={ogImageUrl} />
+          <meta name="twitter:image" content={ogImageUrl} />
         </>
       )}
     </>