build(deps-dev): bump @typescript-eslint/parser from 7.14.1 to 7.17.0

src/common/components/organisms/FidgetSettingsEditor.tsx

@@ -28,7 +28,7 @@ export type FidgetSettingsEditorProps = {
   fidgetId: string;
   readonly properties: FidgetProperties;
   settings: FidgetSettings;
-  onSave: (settings: FidgetSettings) => void;
+  onSave: (settings: FidgetSettings, shouldUnselect?: boolean) => void;
   unselect: () => void;
   removeFidget: (fidgetId: string) => void;
 };
@@ -97,7 +97,8 @@ const FidgetSettingsGroup: React.FC<{
   fields: FidgetFieldConfig[];
   state: FidgetSettings;
   setState: (state: FidgetSettings) => void;
-}> = ({ fields, state, setState, fidgetId }) => {
+  onSave: (state: FidgetSettings) => void;
+}> = ({ fields, state, setState, onSave, fidgetId }) => {
   return (
     <>
       {fields.map((field, i) => (
@@ -107,10 +108,13 @@ const FidgetSettingsGroup: React.FC<{
           id={`${fidgetId}-${i}-${field.fieldName}`}
           value={state[field.fieldName]}
           onChange={(val) => {
-            setState({
+            const data = {
               ...state,
               [field.fieldName]: val,
-            });
+            };
+
+            setState(data);
+            onSave(data);
           }}
           hide={field.disabledIf && field.disabledIf(state)}
         />
@@ -136,7 +140,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
 
   const _onSave = (e) => {
     e.preventDefault();
-    onSave(state);
+    onSave(state, true);
     analytics.track(AnalyticsEvent.EDIT_FIDGET, {
       fidgetType: properties.fidgetName,
     });
@@ -194,6 +198,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
                 fields={groupedFields.settings}
                 state={state}
                 setState={setState}
+                onSave={onSave}
               />
             </TabsContent>
             {groupedFields.style.length > 0 && (
@@ -203,6 +208,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
                   fields={groupedFields.style}
                   state={state}
                   setState={setState}
+                  onSave={onSave}
                 />
               </TabsContent>
             )}
@@ -213,6 +219,7 @@ export const FidgetSettingsEditor: React.FC<FidgetSettingsEditorProps> = ({
                   fields={groupedFields.code}
                   state={state}
                   setState={setState}
+                  onSave={onSave}
                 />
               </TabsContent>
             )}

src/common/components/organisms/Navigation.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { useRouter } from "next/router";
 import { mergeClasses } from "@/common/lib/utils/mergeClasses";
 import BrandHeader from "../molecules/BrandHeader";
 import Player from "@/common/components/organisms/Player";
@@ -13,8 +14,10 @@ import { first } from "lodash";
 import { IoMdRocket } from "react-icons/io";
 import { Button } from "../atoms/button";
 import { FaPaintbrush, FaDiscord } from "react-icons/fa6";
+import { PiGlobeHemisphereEastBold } from "react-icons/pi";
 import { NOUNISH_LOWFI_URL } from "@/constants/nounishLowfi";
 import { UserTheme } from "@/common/lib/theme";
+import { useUserTheme } from "@/common/lib/theme/UserThemeProvider";
 import {
   AnalyticsEvent,
   analytics,
@@ -33,21 +36,17 @@ type NavItemProps = {
 type NavProps = {
   isEditable: boolean;
   enterEditMode: () => void;
-  theme?: UserTheme;
 };
 
-const Navigation: React.FC<NavProps> = ({
-  isEditable,
-  enterEditMode,
-  theme: userTheme,
-}) => {
+const Navigation: React.FC<NavProps> = ({ isEditable, enterEditMode }) => {
   const { setModalOpen, getIsLoggedIn, getIsInitializing } = useAppStore(
     (state) => ({
       setModalOpen: state.setup.setModalOpen,
       getIsLoggedIn: state.getIsAccountReady,
       getIsInitializing: state.getIsInitializing,
     }),
   );
+  const userTheme: UserTheme = useUserTheme();
   const logout = useLogout();
 
   function turnOnEditMode() {
@@ -79,12 +78,7 @@ const Navigation: React.FC<NavProps> = ({
     [user],
   );
 
-  const [currentUrl, setCurrentUrl] = useState("");
-
-  useEffect(() => {
-    // Get the current URL
-    setCurrentUrl(window.location.pathname);
-  }, []);
+  const router = useRouter();
 
   const NavItem: React.FC<NavItemProps> = ({
     label,
@@ -100,7 +94,7 @@ const Navigation: React.FC<NavProps> = ({
           href={disable ? "#" : href}
           className={mergeClasses(
             "flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group w-full",
-            href === currentUrl ? "bg-gray-100" : "",
+            href === router.asPath ? "bg-gray-100" : "",
           )}
           onClick={onClick}
           rel={openInNewTab ? "noopener noreferrer" : undefined}
@@ -143,7 +137,11 @@ const Navigation: React.FC<NavProps> = ({
                   }
                   openInNewTab
                 />
-                {/* <NavItem label="Explore" Icon={ExploreIcon} href="/explore"/> */}
+                <NavItem
+                  label="Explore"
+                  Icon={PiGlobeHemisphereEastBold}
+                  href="/explore"
+                />
                 {isLoggedIn && (
                   <NavItem
                     label={"My Space"}
@@ -199,7 +197,7 @@ const Navigation: React.FC<NavProps> = ({
           <div className="flex flex-col flex-auto justify-between border-t px-4">
             <div className="mt-8 px-2">
               <Player
-                url={userTheme?.properties.musicURL || NOUNISH_LOWFI_URL}
+                url={userTheme?.properties?.musicURL || NOUNISH_LOWFI_URL}
               />
             </div>
             {isLoggedIn && (

src/common/components/organisms/Sidebar.tsx

@@ -1,30 +1,70 @@
-import React from "react";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useMemo,
+} from "react";
 import Navigation from "./Navigation";
-import { UserTheme } from "@/common/lib/theme";
 
-export interface SidebarProps {
+export interface SidebarProps {}
+
+export type SidebarContextProviderProps = { children: React.ReactNode };
+
+export type SidebarContextValue = {
   editMode: boolean;
-  enterEditMode: () => void;
-  theme?: UserTheme;
-  isEditable: boolean;
+  setEditMode: (value: boolean) => void;
+  sidebarEditable: boolean;
+  setSidebarEditable: (value: boolean) => void;
   portalRef: React.RefObject<HTMLDivElement>;
-}
-
-export const Sidebar: React.FC<SidebarProps> = ({
-  editMode,
-  enterEditMode,
-  isEditable,
-  portalRef,
-  theme,
+};
+
+export const SidebarContext = createContext<SidebarContextValue>(
+  {} as SidebarContextValue,
+);
+
+export const SidebarContextProvider: React.FC<SidebarContextProviderProps> = ({
+  children,
 }) => {
+  const [editMode, setEditMode] = useState(false);
+  const [sidebarEditable, setSidebarEditable] = useState(false);
+  const portalRef = useRef<HTMLDivElement>(null);
+
+  const value = useMemo(
+    () => ({
+      editMode,
+      setEditMode,
+      sidebarEditable,
+      setSidebarEditable,
+      portalRef,
+    }),
+    [editMode, sidebarEditable, portalRef],
+  );
+
+  return (
+    <SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>
+  );
+};
+
+export const useSidebarContext = (): SidebarContextValue => {
+  return useContext(SidebarContext);
+};
+
+export const Sidebar: React.FC<SidebarProps> = () => {
+  const { editMode, setEditMode, sidebarEditable, portalRef } =
+    useSidebarContext();
+
+  function enterEditMode() {
+    setEditMode(true);
+  }
+
   return (
     <>
       <div ref={portalRef} className={editMode ? "w-full" : ""}></div>
       <div className={editMode ? "hidden" : "flex mx-auto"}>
         <Navigation
-          isEditable={isEditable}
+          isEditable={sidebarEditable}
           enterEditMode={enterEditMode}
-          theme={theme}
         />
       </div>
     </>

src/common/components/pages/SpacePage.tsx

@@ -1,8 +1,8 @@
-import React, { ReactNode, useRef, useState } from "react";
-import Sidebar from "../organisms/Sidebar";
+import React, { ReactNode } from "react";
 import Space, { SpaceConfig, SpaceConfigSaveDetails } from "../templates/Space";
 import { isUndefined } from "lodash";
-import SpaceLoading from "../templates/SpaceLoading";
+import SpaceLoading from "@/common/components/templates/SpaceLoading";
+import { useSidebarContext } from "@/common/components/organisms/Sidebar";
 
 type SpacePageArgs = {
   config?: SpaceConfig;
@@ -21,28 +21,11 @@ export default function SpacePage({
   profile,
   loading,
 }: SpacePageArgs) {
-  const [editMode, setEditMode] = useState(false);
-  const [sidebarEditable, setSidebarEditable] = useState(false);
-  const portalRef = useRef<HTMLDivElement>(null);
-
-  function enterEditMode() {
-    setEditMode(true);
-  }
+  const { editMode, setEditMode, setSidebarEditable, portalRef } =
+    useSidebarContext();
 
   return (
-    <div
-      className="flex w-full h-full"
-      style={{ background: "var(--user-theme-background)" }}
-    >
-      <div className="flex mx-auto transition-all duration-100 ease-out z-10">
-        <Sidebar
-          editMode={editMode}
-          enterEditMode={enterEditMode}
-          isEditable={sidebarEditable}
-          portalRef={portalRef}
-          theme={config?.theme}
-        />
-      </div>
+    <>
       {isUndefined(config) ||
       isUndefined(saveConfig) ||
       isUndefined(commitConfig) ||
@@ -62,6 +45,6 @@ export default function SpacePage({
           portalRef={portalRef}
         />
       )}
-    </div>
+    </>
   );
 }

src/common/components/templates/Space.tsx

@@ -27,6 +27,7 @@ export type SpaceConfig = {
   isEditable: boolean;
   fidgetTrayContents: FidgetInstanceData[];
   theme: UserTheme;
+  timestamp?: string;
 };
 
 export type SpaceConfigSaveDetails = Partial<

src/common/data/explore/loadExploreMarkdown.ts

@@ -1,6 +1,6 @@
 import matter from "gray-matter";
 import supabaseClient from "../database/supabase/clients/server";
-import { isNull, map } from "lodash";
+import { endsWith, filter, isNull, map, startsWith } from "lodash";
 
 type MatterResultData = {
   title: string;
@@ -50,6 +50,9 @@ export async function getAllSlugs() {
     if (isNull(data)) {
       return [];
     }
-    return map(data, (d) => d.name.replace(/\.md$/, ""));
+    return map(
+      filter(data, (d) => endsWith(d.name, ".md") && !startsWith(d.name, ".")),
+      (d) => d.name.replace(/\.md$/, ""),
+    );
   }
 }

src/common/data/stores/app/accounts/authenticatorStore.ts

@@ -19,7 +19,7 @@ export interface AuthenticatorState {
 
 export interface AuthenticatorActions {
   loadAuthenitcators: () => Promise<void>;
-  commitAuthenticatorUpdatesToDatabase: () => Promise<void>;
+  commitAuthenticatorUpdatesToDatabase: () => Promise<void> | undefined;
   saveAuthenticatorConfig: (newConfig: AuthenticatorConfig) => Promise<void>;
   listInstalledAuthenticators: () => string[];
   resetAuthenticators: () => void;
@@ -87,38 +87,36 @@ export const authenticatorStore = (
       console.debug("Could not locate authenticator data");
     }
   },
-  commitAuthenticatorUpdatesToDatabase: async () => {
-    debounce(async () => {
-      if (
-        get().account.authenticatorConfig ===
-        get().account.authenticatorRemoteConfig
-      ) {
-        // Only update if changes have been made
-        return;
-      }
-      const configFile = await get().account.createEncryptedSignedFile(
-        stringify(get().account.authenticatorConfig),
-        "json",
-      );
-      const postData: AuthenticatorUpdateRequest = {
-        file: configFile,
-        identityPublicKey: get().account.currentSpaceIdentityPublicKey!,
-      };
+  commitAuthenticatorUpdatesToDatabase: debounce(async () => {
+    if (
+      get().account.authenticatorConfig ===
+      get().account.authenticatorRemoteConfig
+    ) {
+      // Only update if changes have been made
+      return;
+    }
+    const configFile = await get().account.createEncryptedSignedFile(
+      stringify(get().account.authenticatorConfig),
+      "json",
+    );
+    const postData: AuthenticatorUpdateRequest = {
+      file: configFile,
+      identityPublicKey: get().account.currentSpaceIdentityPublicKey!,
+    };
 
-      try {
-        await axiosBackend.post("/api/space/authenticators/", postData, {
-          headers: { "Content-Type": "application/json" },
-        });
-        set((draft) => {
-          draft.account.authenticatorRemoteConfig =
-            get().account.authenticatorConfig;
-        }, "commitAuthenticatorUpdatesToDatabase");
-      } catch (e) {
-        console.debug("failed to save authenticator data, trying again");
-        get().account.commitAuthenticatorUpdatesToDatabase();
-      }
-    }, 1000)();
-  },
+    try {
+      await axiosBackend.post("/api/space/authenticators/", postData, {
+        headers: { "Content-Type": "application/json" },
+      });
+      set((draft) => {
+        draft.account.authenticatorRemoteConfig =
+          get().account.authenticatorConfig;
+      }, "commitAuthenticatorUpdatesToDatabase");
+    } catch (e) {
+      console.debug("failed to save authenticator data, trying again");
+      get().account.commitAuthenticatorUpdatesToDatabase();
+    }
+  }, 1000),
   saveAuthenticatorConfig: async (newConfig) => {
     set((draft) => {
       draft.account.authenticatorConfig = newConfig;