feat: add table fidget

package.json

@@ -119,6 +119,7 @@
     "neverthrow": "^6.2.2",
     "next": "14.1",
     "next-themes": "^0.3.0",
+    "papaparse": "^5.4.1",
     "pino-pretty": "^11.2.0",
     "prop-types": "^15.8.1",
     "radix-colors-for-tailwind": "^2.0.0",
@@ -145,6 +146,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/common/components/molecules/CSVInput.tsx

@@ -0,0 +1,104 @@
+import React, { forwardRef, useCallback, useRef, useState } from "react";
+import styled from "styled-components";
+import { TextareaProps } from "@/common/components/atoms/textarea";
+import { Box } from "@mui/material";
+import { Button } from "../atoms/button";
+
+export interface CSVInputProps extends Omit<TextareaProps, "onChange"> {
+  value: string;
+  onChange?: (value: string) => void;
+}
+
+const TextareaRoot = styled.div<{ isActive: boolean }>`
+  display: flex;
+  align-items: center;
+  position: relative;
+  background: white;
+  border: ${({ isActive }) =>
+    isActive ? "1px solid lightblue" : "1px solid lightgray"};
+  padding: 5px;
+  border-radius: 4px;
+  width: 100%;
+`;
+
+const TextareaInput = styled.textarea`
+  border: none;
+  outline: none;
+  flex: 1;
+  padding: 0 5px;
+  resize: vertical;
+  min-height: 100px;
+`;
+
+const HiddenFileInput = styled.input`
+  display: none;
+`;
+
+const CSVInput = forwardRef<HTMLTextAreaElement, CSVInputProps>(
+  (props, ref) => {
+    const [isActive, setIsActive] = useState(false);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    const onChange = useCallback<React.ChangeEventHandler<HTMLTextAreaElement>>(
+      (event) => {
+        props.onChange?.(event.target.value);
+      },
+      [props.onChange],
+    );
+
+    const handleFocus = () => {
+      setIsActive(true);
+    };
+
+    const handleBlur = () => {
+      setIsActive(false);
+    };
+
+    const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          const text = e.target?.result as string;
+          props.onChange?.(text);
+          if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+          }
+        };
+        reader.readAsText(file);
+      }
+    };
+
+    return (
+      <Box>
+        <TextareaRoot isActive={isActive}>
+          <TextareaInput
+            {...props}
+            ref={ref}
+            value={props.value ?? ""}
+            onChange={onChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+          />
+        </TextareaRoot>
+        <HiddenFileInput
+          type="file"
+          accept=".csv"
+          onChange={handleFileChange}
+          id="csvFileInput"
+          ref={fileInputRef}
+        />
+        <label
+          htmlFor="csvFileInput"
+          className="w-full mt-2 cursor-pointer inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-gray-200 hover:bg-gray-300 active:bg-gray-300 h-10 px-4 rounded-md py-2 text-md flex-1"
+        >
+          Upload CSV
+        </label>
+      </Box>
+    );
+  },
+);
+
+CSVInput.displayName = "CSVInput";
+
+export default CSVInput;

src/common/components/molecules/CsvSelector.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+  Select,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from "@/common/components/atoms/select";
+
+export interface CSVSelectorOption {
+  name: string;
+}
+
+export interface CSVSelectorProps {
+  onChange: (selectedApp: CSVSelectorOption) => void;
+  value: CSVSelectorOption | null;
+  className?: string;
+}
+
+export const CSVSelector: React.FC<CSVSelectorProps> = ({
+  onChange,
+  value = { name: "Text" },
+  className,
+}) => {
+  const settings: CSVSelectorOption[] = [
+    {
+      name: "Text",
+    },
+    {
+      name: "External URL",
+    },
+  ];
+
+  return (
+    <div className={className}>
+      <Select
+        value={value?.name}
+        onValueChange={(selectedName) => {
+          const selectedApp = settings.find((app) => app.name === selectedName);
+          if (selectedApp) {
+            onChange(selectedApp);
+          }
+        }}
+      >
+        <SelectTrigger>
+          <SelectValue>
+            <div className="flex items-center">
+              {value?.name || "Select Platform"}
+            </div>
+          </SelectValue>
+        </SelectTrigger>
+        <SelectContent>
+          {settings.map((app: CSVSelectorOption) => (
+            <SelectItem key={app.name} value={app.name}>
+              <div className="flex items-center">
+                <span>{app.name}</span>
+              </div>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+};

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,11 +23,11 @@ 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" />

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

@@ -352,7 +352,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

@@ -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

@@ -15,6 +15,9 @@ export type FidgetSettingsStyle = {
   fidgetBorderWidth?: string;
   fidgetBorderColor?: Color;
   fidgetShadow?: string;
+  itemBorderWidth?: string;
+  itemBorderColor?: Color;
+  itemBackground?: Color;
 };
 export type FidgetData = Record<string, any>;
 

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/ethereum.ts

@@ -0,0 +1,6 @@
+export const isEthereumAddress = (address: string) =>
+  /^0x[a-fA-F0-9]{40}$/.test(address);
+
+export const formatEthereumAddress = (address: string, size: number = 4) => {
+  return `${address.slice(0, size + 2)}...${address.slice(-size)}`;
+};

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} />
         </>
       )}
     </>