Bump next from 14.1.4 to 14.2.13

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Nounspace",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "license": "",
   "private": true,
   "scripts": {
@@ -117,7 +117,7 @@
     "moment": "^2.30.1",
     "mutative": "^1.0.3",
     "neverthrow": "^6.2.2",
-    "next": "14.1",
+    "next": "14.2",
     "next-themes": "^0.3.0",
     "pino-pretty": "^11.2.0",
     "prop-types": "^15.8.1",

src/common/components/atoms/alert.tsx

@@ -7,8 +7,7 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default:
-          "border bg-background text-foreground/80 [&>svg]:text-gray-400",
+        default: "border bg-background opacity-80 [&>svg]:text-gray-400",
         destructive: "text-red-700 bg-red-100",
       },
     },

src/common/components/organisms/SearchAutocompleteInput.tsx

@@ -72,7 +72,7 @@ const SearchAutocompleteInput: React.FC<SearchAutocompleteInputProps> = ({
             >
               <div className="flex items-center py-1 px-1">
                 <MagnifyingGlassIcon className="mr-2 h-7 w-7 shrink-0 opacity-50" />
-                <div className="leading-[1.3] tracking-tight font-bold text-foreground/80">{`Search for "${query}"`}</div>
+                <div className="leading-[1.3] tracking-tight font-bold opacity-80">{`Search for "${query}"`}</div>
               </div>
             </CommandItem>
           )}
@@ -89,12 +89,8 @@ const SearchAutocompleteInput: React.FC<SearchAutocompleteInputProps> = ({
                     <AvatarImage src={user.pfp_url} alt={user.display_name} />
                   </Avatar>
                   <div className="leading-[1.3]">
-                    <p className="font-bold text-foreground/80">
-                      {user.display_name}
-                    </p>
-                    <p className="font-normal text-foreground/80">
-                      @{user.username}
-                    </p>
+                    <p className="font-bold opacity-80">{user.display_name}</p>
+                    <p className="font-normal opacity-80">@{user.username}</p>
                   </div>
                 </CommandItem>
               ))}

src/common/lib/utils/markdownRenderers.tsx

@@ -57,7 +57,13 @@ export const MarkdownRenderers = (linkColor?: string) => ({
         };
 
     return (
-      <a href={href} style={style} {...props}>
+      <a
+        href={href}
+        style={style}
+        {...props}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         {children}
       </a>
     );

src/constants/intialHomebase.ts

@@ -1,17 +1,94 @@
 import { SpaceConfig } from "@/common/components/templates/Space";
 import DEFAULT_THEME from "@/common/lib/theme/defaultTheme";
+const tutorialText = `
+ ## To start customizing, click the paintbrush in the bottom left next to 'Cast' ⬋🖌️⬋
+
+### Add Fidgets
+From customization mode, click the big blue **+** button. Then, drag a Fidget to an open spot on the grid. Finally, click Save so you can scroll down here for more instructions. 
+
+![DragFidget-ezgif.com-loop-count](https://hackmd.io/_uploads/S1MTNDTsC.gif)
+
+scroll down for more ⬇️ ⬇️ ⬇️ 
+
+### Customize Fidgets
+Click any Fidget on the grid to open its settings. In addition to configuring each Fidget's settings, you can customize its look in the 'Style' tab. Any Fidget style parameters set to "Theme" inherit their look from the theme of their Tab.  
+
+![EditFidget-ezgif.com-loop-count](https://hackmd.io/_uploads/r1pTND6s0.gif)
+
+### Arrange Fidgets
+- **Move:** Click and drag fidgets from the middle to move them
+![move fidget](https://nounspace.mypinata.cloud/ipfs/QmYWvdpdiyKwjVAqjhcFTBkiTUnc8rF4p2EGg3C4sTRsr6)
+- **Resize:** Click and drag fidgets' edges to resize them
+![2024-08-28 21.05.59](https://hackmd.io/_uploads/ryxADUpjC.gif)
+- **Stash in Fidget Tray:** Click a fidget then click the ⇱ icon above it to save it in your Fidget Tray for later.
+![image](https://hackmd.io/_uploads/Syz8wUajC.png)
+- **Delete:** Click a fidget then click the X icon above it to delete it forever.
+![image](https://hackmd.io/_uploads/SyhwvLpoR.png)
+
+### Customize Theme
+- **Templates:** One quick and easy option is to select a template. Then if you'd like, you can further customize to make it your own.
+- **Style:** Set a background color or gradient for each Tab, or set the default color, border, and shadows for all Fidgets on the selected Tab.
+- **Fonts:** Set the default header and body fonts for Fidgets on your space.
+- **Code:** Add HTML/CSS to fully customize your space's background. 
+
+![Edit Theme](https://hackmd.io/_uploads/Sk7sWw6sC.gif)
+
+### Customize Music
+Last but not least, search for or paste the link to any song or playlist on YouTube to play it for yourself on your homebase or on your space for your friends.
+
+### Homebase vs. Space
+**Your Homebase** is a private space that only you can see.
+
+**Your Space** is your public profile that everyone can see.
+
+You can use the same Fidgets and tricks to customize them both. Use your **Homebase** to access the content, communities, and functionality that you love, and use your **Space** to share the content and functionality you love with your friends.
+
+`;
+const onboardingFidgetID = "text:onboarding";
+const onboardingFidgetConfig = {
+  config: {
+    editable: true,
+    settings: {
+      title: "Welcome to Nounspace! 🚀 👾",
+      text: tutorialText,
+      urlColor: "blue",
+      fontFamily: "Londrina Solid",
+      fontColor: "#073b4c",
+      headingsFontFamily: "Londrina Solid",
+      headingsFontColor: "#2563ea",
+      backgroundColor: "#06d6a0",
+      borderColor: "#ffd166",
+    },
+    data: {},
+  },
+  fidgetType: "text",
+  id: onboardingFidgetID,
+};
 
 const layoutID = "";
 const INITIAL_HOMEBASE_CONFIG: SpaceConfig = {
   layoutID,
   layoutDetails: {
     layoutConfig: {
-      layout: [],
+      layout: [
+        // Existing layouts can go here, e.g., feed, profile, etc.
+        {
+          w: 6,
+          h: 7,
+          x: 8,
+          y: 3,
+          i: onboardingFidgetID,
+          moved: false,
+          static: false,
+        },
+      ],
     },
     layoutFidget: "grid",
   },
   theme: DEFAULT_THEME,
-  fidgetInstanceDatums: {},
+  fidgetInstanceDatums: {
+    [onboardingFidgetID]: onboardingFidgetConfig,
+  },
   isEditable: true,
   fidgetTrayContents: [],
 };

src/fidgets/farcaster/Feed.tsx

@@ -25,6 +25,7 @@ import {
 import ColorSelector from "@/common/components/molecules/ColorSelector";
 import BorderSelector from "@/common/components/molecules/BorderSelector";
 import ShadowSelector from "@/common/components/molecules/ShadowSelector";
+import FontSelector from "@/common/components/molecules/FontSelector";
 
 export enum FilterType {
   Channel = "channel_id",
@@ -153,6 +154,27 @@ const feedProperties: FidgetProperties<FeedFidgetSettings> = {
         settings.selectPlatform.name !== "The other app",
       default: "light",
     },
+    {
+      fieldName: "fontFamily",
+      default: "var(--user-theme-font)",
+      required: false,
+      inputSelector: FontSelector,
+      group: "style",
+    },
+    {
+      fieldName: "fontColor",
+      default: "var(--user-theme-font-color)",
+      required: false,
+      inputSelector: ColorSelector,
+      group: "style",
+    },
+    {
+      fieldName: "urlColor",
+      required: false,
+      inputSelector: ColorSelector,
+      default: "blue",
+      group: "style",
+    },
     {
       fieldName: "background",
       default: "var(--user-theme-fidget-background)",
@@ -300,7 +322,14 @@ const Feed: React.FC<FidgetArgs<FeedFidgetSettings>> = ({ settings }) => {
           </div>
         )}
         {!isError && (
-          <div ref={ref} className="h-3/6">
+          <div
+            ref={ref}
+            className="h-3/6"
+            style={{
+              fontFamily: settings.fontFamily,
+              color: settings.fontColor,
+            }}
+          >
             {isFetchingNextPage ? (
               <div className="h-full w-full bg-[#E6E6E6] flex flex-col justify-center items-center">
                 <Loading />
@@ -323,7 +352,13 @@ const Feed: React.FC<FidgetArgs<FeedFidgetSettings>> = ({ settings }) => {
   // Note: feed is mounted in its own scroll container to maintain its scroll position when
   // returning from a thread.
   return (
-    <>
+    <div
+      className="h-full"
+      style={{
+        fontFamily: settings.fontFamily,
+        color: settings.fontColor,
+      }}
+    >
       {isThreadView && (
         <div className="h-full overflow-y-scroll justify-center items-center">
           {renderThread()}
@@ -337,7 +372,7 @@ const Feed: React.FC<FidgetArgs<FeedFidgetSettings>> = ({ settings }) => {
       >
         {renderFeedContent()}
       </div>
-    </>
+    </div>
   );
 };
 

src/fidgets/farcaster/components/CastRow.tsx

@@ -20,7 +20,7 @@ import {
 } from "@neynar/nodejs-sdk/build/neynar-api/v2";
 import { useFarcasterSigner } from "@/fidgets/farcaster/index";
 import { CastReactionType } from "@/fidgets/farcaster/types";
-import { ReactionType } from "@farcaster/core";
+import { bytesToHexString, ReactionType } from "@farcaster/core";
 import { hexToBytes } from "@noble/ciphers/utils";
 import CreateCast, { DraftType } from "./CreateCast";
 import Modal from "@/common/components/molecules/Modal";
@@ -201,7 +201,7 @@ const CastAttributionPrimary = ({ cast }) => {
   if (!cast?.author?.display_name) return null;
 
   return (
-    <div className="flex items-center justify-start font-bold text-foreground/80 cursor-pointer gap-1 tracking-tight leading-[1.3] truncate flex-auto">
+    <div className="flex items-center justify-start font-bold opacity-80 cursor-pointer gap-1 tracking-tight leading-[1.3] truncate flex-auto">
       <PriorityLink
         href={`/s/${cast.author.username}`}
         className="cursor-pointer truncate"
@@ -227,7 +227,7 @@ const CastAttributionSecondary = ({ cast }) => {
   }, [cast?.timestamp]);
 
   return (
-    <div className="flex items-center justify-start tracking-tight leading-[1.3] truncate gap-1 text-foreground/60 font-normal">
+    <div className="flex items-center justify-start tracking-tight leading-[1.3] truncate gap-1 opacity-60 font-normal">
       <span className="truncate">@{cast.author.username}</span>
       {relativeDateString && (
         <>
@@ -342,7 +342,7 @@ const CastReactions = ({ cast }: { cast: CastWithInteractions }) => {
     return (
       <div
         key={`cast-${cast.hash}-${key}`}
-        className="mt-1.5 flex align-center cursor-pointer text-sm text-foreground/50 hover:text-foreground/85 hover:bg-background/85 py-1 px-1.5 rounded-md"
+        className="mt-1.5 flex align-center cursor-pointer text-sm opacity-50 hover:text-foreground/85 hover:bg-background/85 py-1 px-1.5 rounded-md"
         onClick={async (event) => {
           event.stopPropagation();
           onClickReaction(key, isActive);
@@ -359,8 +359,26 @@ const CastReactions = ({ cast }: { cast: CastWithInteractions }) => {
       username: cast.author.username,
       castId: cast.hash,
     });
+
+    // Clean the hash by removing the "0x" prefix if present
+    const cleanedHash = cast.hash.startsWith("0x")
+      ? cast.hash.slice(2)
+      : cast.hash;
+
+    // Convert the hex string to Uint8Array
+    const parentCastHash = hexToBytes(cleanedHash);
+
+    // Check for invalid length and prevent submission if necessary
+    if (parentCastHash.length !== 20) {
+      console.error(
+        "Hash must be 20 bytes, but received length:",
+        parentCastHash.length,
+      );
+      return;
+    }
+
     setReplyCastDraft({
-      parentCastId: castId,
+      parentCastId: { fid: cast.author.fid, hash: parentCastHash },
     });
     setReplyCastType("reply");
     setShowModal(true);
@@ -445,7 +463,7 @@ const CastReactions = ({ cast }: { cast: CastWithInteractions }) => {
         {cast.channel && cast.channel.name && (
           <div
             key={`cast-${cast.hash}-channel-name`}
-            className="mt-1.5 flex align-center text-sm text-foreground/40 py-1 px-1.5 rounded-md"
+            className="mt-1.5 flex align-center text-sm opacity-40 py-1 px-1.5 rounded-md"
           >
             /{cast.channel.name}
           </div>
@@ -643,7 +661,7 @@ export const CastRow = ({
             isReply={isReply}
           />
           {replyingToUsername && (
-            <p className="mb-1 tracking-tight text-sm leading-[1.3] truncate gap-1 text-foreground/60 font-medium">
+            <p className="mb-1 tracking-tight text-sm leading-[1.3] truncate gap-1 opacity-60 font-medium">
               Replying to{" "}
               <PriorityLink href={`/s/${replyingToUsername}`}>
                 <span className="cursor-pointer text-blue-500 hover:text-blue-500/70 hover:underline">

src/fidgets/farcaster/components/CastThreadView.tsx

@@ -91,7 +91,7 @@ const StickyHeader = ({ onBack }: { onBack?: () => void }) => {
         <Tooltip.Provider delayDuration={50} skipDelayDuration={0}>
           <>
             <IoArrowBack
-              className="size-5 group-hover:text-foreground/80 stroke-2"
+              className="size-5 group-hover:opacity-80 stroke-2"
               aria-hidden="true"
             />
           </>