feat(space-navigator): pin button on space preview cards

.eslintrc.cjs

@@ -76,22 +76,22 @@ module.exports = {
         type: "plugin-family",
         mode: "full",
         capture: ["familyName"],
-        pattern: ["src/features/plugins/{home,thread,query-box,sidebar}/*"],
+        pattern: ["src/features/plugins/{home,thread,query-box}/*"],
       },
       {
         type: "nested-plugin-utils",
         mode: "full",
         capture: ["familyName", "utilsName"],
         pattern: [
-          "src/features/plugins/{home,thread,query-box,sidebar}/{assets,context,utils,types,components,hooks}/**/*",
+          "src/features/plugins/{home,thread,query-box}/{assets,context,utils,types,components,hooks}/**/*",
         ],
       },
       {
         type: "nested-plugin",
         mode: "full",
         capture: ["familyName", "nestedPluginName"],
         pattern: [
-          "src/features/plugins/{home,thread,query-box,sidebar}/*/**/*",
+          "src/features/plugins/{home,thread,query-box}/*/**/*",
         ],
       },
       {
@@ -100,7 +100,7 @@ module.exports = {
         capture: ["pluginName"],
         pattern: [
           "src/features/plugins/*/**/*",
-          "src/features/plugins/{home,thread,query-box,sidebar}/*/**/*",
+          "src/features/plugins/{home,thread,query-box}/*/**/*",
         ],
       },
       {

src/components/dnd/SwappableDndProvider.tsx

@@ -18,7 +18,7 @@ import {
   sortableKeyboardCoordinates,
   rectSwappingStrategy,
 } from "@dnd-kit/sortable";
-import { ReactNode } from "react";
+import { ReactNode, useRef, useState } from "react";
 
 type SwappableDndProviderProps = {
   items: string[];
@@ -38,7 +38,7 @@ export default function SwappableDndProvider({
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        delay: 100,
+        delay: 300,
         tolerance: 5,
       },
     }),
@@ -48,6 +48,7 @@ export default function SwappableDndProvider({
   );
 
   const [isDragging, setIsDragging] = useState(false);
+  const justFinishedDragging = useRef(false);
 
   const handleDragStart = (event: DragStartEvent) => {
     setIsDragging(true);
@@ -56,6 +57,23 @@ export default function SwappableDndProvider({
 
   const handleDragEnd = (event: DragEndEvent) => {
     setIsDragging(false);
+    justFinishedDragging.current = true;
+
+    // Reset the flag after the current event loop
+    setTimeout(() => {
+      justFinishedDragging.current = false;
+    }, 0);
+
+    // Prevent the click that follows dragEnd
+    const preventClickAfterDrag = (e: Event) => {
+      if (justFinishedDragging.current) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    document.addEventListener('click', preventClickAfterDrag, { capture: true, once: true });
+
     onDragEnd(event);
   };
 

src/components/dnd/SwappableSortableItem.tsx

@@ -20,7 +20,6 @@ export default function SwappableSortableItem({
   id,
   children,
   className,
-  onClick,
 }: SwappableSortableItemProps) {
   const isAnyDragging = useContext(DraggingContext);
   const {
@@ -41,12 +40,6 @@ export default function SwappableSortableItem({
     zIndex: isDragging ? 1 : undefined,
   };
 
-  const handleClick = () => {
-    if (!isDragging && onClick) {
-      onClick();
-    }
-  };
-
   const draggingStates = { isDragging, isAnyDragging };
 
   return (
@@ -58,7 +51,6 @@ export default function SwappableSortableItem({
       className={cn(
         typeof className === "function" ? className(draggingStates) : className,
       )}
-      onClick={handleClick}
     >
       {typeof children === "function" ? children(draggingStates) : children}
     </div>

src/data/plugins/plugins-data.ts

@@ -100,14 +100,6 @@ export const PLUGINS_METADATA: CplxPluginMetadata = {
     dependentPlugins: ["queryBox:focusSelector"],
     dependentCorePlugins: ["spaRouter", "domObserver"],
   },
-  "queryBox:spaceNavigator": {
-    id: "queryBox:spaceNavigator",
-    routeSegment: "query-box-space-navigator",
-    title: "Space Navigator",
-    description: "Search & navigate between spaces",
-    tags: ["ui", "ux"],
-    dependentCorePlugins: ["spaRouter", "domObserver"],
-  },
   "queryBox:slashCommandMenu:promptHistory": {
     id: "queryBox:slashCommandMenu:promptHistory",
     routeSegment: "query-box-slash-command-menu-prompt-history",
@@ -116,6 +108,14 @@ export const PLUGINS_METADATA: CplxPluginMetadata = {
     tags: ["new", "experimental", "slashCommand", "desktopOnly", "ui", "ux"],
     dependentCorePlugins: ["spaRouter", "domObserver", "networkIntercept"],
   },
+  spaceNavigator: {
+    id: "spaceNavigator",
+    routeSegment: "space-navigator",
+    title: "Space Navigator",
+    description: "Search & navigate between spaces",
+    tags: ["ui", "ux"],
+    dependentCorePlugins: ["spaRouter", "domObserver"],
+  },
   "queryBox:noFileCreationOnPaste": {
     id: "queryBox:noFileCreationOnPaste",
     routeSegment: "query-box-no-file-creation-on-paste",

src/entrypoints/background/listeners.ts

@@ -1,7 +1,9 @@
 import { onMessage } from "webext-bridge/background";
 
 import { ExtensionLocalStorageService } from "@/services/extension-local-storage/extension-local-storage";
+import { ExtensionLocalStorageApi } from "@/services/extension-local-storage/extension-local-storage-api";
 import { getThemeCss } from "@/utils/pplx-theme-loader-utils";
+import { EXT_UPDATE_MIGRATIONS } from "@/utils/update-migrations";
 import { compareVersions, getOptionsPageUrl } from "@/utils/utils";
 
 export type BackgroundEvents = {
@@ -15,6 +17,8 @@ export function setupBackgroundListeners() {
 
   onboardingFlowTrigger();
 
+  updateMigrations();
+
   invalidateCdnCache();
 
   createDashboardShortcut();
@@ -100,3 +104,26 @@ function extensionIconActionListener() {
     else chrome.runtime.openOptionsPage();
   });
 }
+
+function updateMigrations() {
+  chrome.runtime.onInstalled.addListener(
+    async ({ reason, previousVersion }) => {
+      if (reason !== chrome.runtime.OnInstalledReason.UPDATE) return;
+
+      if (!previousVersion || !(previousVersion in EXT_UPDATE_MIGRATIONS))
+        return;
+
+      const migrationFn =
+        EXT_UPDATE_MIGRATIONS[
+          previousVersion as keyof typeof EXT_UPDATE_MIGRATIONS
+        ];
+
+      if (!migrationFn) return;
+
+      migrationFn({
+        oldRawSettings: await ExtensionLocalStorageApi.get(),
+        previousVersion,
+      });
+    },
+  );
+}

src/entrypoints/content-scripts/loaders/cs-ui-plugins-loader/CsUiRoot.tsx

@@ -3,14 +3,13 @@
 import "@/assets/cs.css";
 
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { Fragment } from "react/jsx-runtime";
 
 import csUiRootCss from "@/assets/cs.css?inline";
 import CsUiPluginsGuard from "@/components/CsUiPluginsGuard";
 // import { SponsorHomeLink } from "@/components/SponsorHomeLink";
 import { PostUpdateReleaseNotesDialog } from "@/components/PostUpdateReleaseNotesDialog";
 import { Toaster } from "@/components/Toaster";
-import { useSpaRouter } from "@/features/plugins/_core/spa-router/listeners";
+import SpaceCardsWrapper from "@/features/plugins/space-navigator/spaces-page/Wrapper";
 
 const HomepageUpdateAnnouncer = lazy(
   () => import("@/components/HomepageUpdateAnnouncer"),
@@ -41,7 +40,7 @@ const BetterMessageToolbarsWrapper = lazy(
   () => import("@/features/plugins/thread/better-message-toolbars/Wrapper"),
 );
 const SpaceNavigatorWrapper = lazy(
-  () => import("@/features/plugins/sidebar/space-navigator/Wrapper"),
+  () => import("@/features/plugins/space-navigator/sidebar-content/Wrapper"),
 );
 const CollapsibleQueryWrapper = lazy(
   () =>
@@ -67,7 +66,7 @@ export default function CsUiRoot() {
       <CsUiPluginsGuard
         dependentPluginIds={[
           "queryBox:languageModelSelector",
-          "queryBox:spaceNavigator",
+          "spaceNavigator",
           "queryBox:slashCommandMenu:promptHistory",
           "queryBox:focusSelector",
           "queryBox:focusSelector:webRecency",
@@ -84,6 +83,13 @@ export default function CsUiRoot() {
       <CsUiPluginsGuard location={["thread"]}>
         <ThreadComponents />
       </CsUiPluginsGuard>
+      <CsUiPluginsGuard
+        desktopOnly
+        requiresLoggedIn
+        location={["collections_page"]}
+      >
+        <SpaceCardsWrapper />
+      </CsUiPluginsGuard>
       <CsUiPluginsGuard dependentPluginIds={["onCloudflareTimeoutAutoReload"]}>
         <OnCloudflareTimeout />
       </CsUiPluginsGuard>
@@ -141,7 +147,7 @@ function SidebarComponents() {
     <CsUiPluginsGuard
       desktopOnly
       requiresLoggedIn
-      dependentPluginIds={["queryBox:spaceNavigator"]}
+      dependentPluginIds={["spaceNavigator"]}
     >
       <SpaceNavigatorWrapper />
     </CsUiPluginsGuard>

src/entrypoints/content-scripts/loaders/index.ts

@@ -15,6 +15,7 @@ import "@/features/plugins/_core/dom-observer/observers/query-boxes/query-boxes"
 import "@/features/plugins/_core/dom-observer/observers/home/home-components";
 import "@/features/plugins/_core/dom-observer/observers/thread/thread-components";
 import "@/features/plugins/_core/dom-observer/observers/sidebar/sidebar-components";
+import "@/features/plugins/_core/dom-observer/observers/spaces-page/spaces-page-components";
 
 // Query Box Plugins
 import "@/features/plugins/query-box/language-model-selector/network-intercept-middlewares";
@@ -44,7 +45,7 @@ import "@/features/plugins/home/custom-slogan/custom-slogan";
 import "@/features/plugins/hide-get-mobile-app-cta-btn/hide-get-mobile-app-cta-btn";
 import "@/features/plugins/zen-mode/zen-mode";
 import "@/features/plugins/block-analytic-events/network-intercept-middlewares";
-import "@/features/plugins/sidebar/space-navigator/network-intercept-middlewares";
+import "@/features/plugins/space-navigator/sidebar-content/network-intercept-middlewares";
 
 // Global Stores
 import "@/data/color-scheme-store";

src/features/options-page/dashboard/pages/plugins/components/plugin-details/content/SpaceNavigator.tsx

@@ -4,7 +4,7 @@ import useExtensionLocalStorage from "@/services/extension-local-storage/useExte
 
 export default function SpaceNavigatorPluginDetails() {
   const { settings, mutation } = useExtensionLocalStorage();
-  const pluginSettings = settings?.plugins["queryBox:spaceNavigator"];
+  const pluginSettings = settings?.plugins["spaceNavigator"];
 
   if (!settings) return null;
 
@@ -15,7 +15,7 @@ export default function SpaceNavigatorPluginDetails() {
         checked={pluginSettings?.enabled ?? false}
         onCheckedChange={({ checked }) => {
           mutation.mutate((draft) => {
-            draft.plugins["queryBox:spaceNavigator"].enabled = checked;
+            draft.plugins["spaceNavigator"].enabled = checked;
           });
         }}
       />

src/features/options-page/dashboard/pages/plugins/components/plugin-details/plugins-details.tsx

@@ -27,7 +27,7 @@ export const PLUGIN_DETAILS: PluginPluginDetails = {
   "queryBox:languageModelSelector": <LanguageModelSelectorPluginDetails />,
   "queryBox:focusSelector": <FocusSelectorPluginDetails />,
   "queryBox:focusSelector:webRecency": <FocusWebRecencySelectorPluginDetails />,
-  "queryBox:spaceNavigator": <SpaceNavigatorPluginDetails />,
+  spaceNavigator: <SpaceNavigatorPluginDetails />,
   "queryBox:slashCommandMenu:promptHistory": <PromptHistoryPluginDetails />,
   "queryBox:fullWidthFollowUp": <FullWidthFollowUpQueryBoxPluginDetails />,
   "queryBox:noFileCreationOnPaste": <NoFileCreationOnPastePluginDetails />,

src/features/options-page/dashboard/pages/plugins/predefined-configs.ts

@@ -8,7 +8,7 @@ export const ESSENTIALS_ONLY: ExtensionLocalStorage["plugins"] = produce(
   DEFAULT_STORAGE.plugins,
   (draft) => {
     draft["queryBox:languageModelSelector"].enabled = true;
-    draft["queryBox:spaceNavigator"].enabled = true;
+    draft["spaceNavigator"].enabled = true;
     draft["thread:toc"].enabled = true;
     draft["thread:betterMessageToolbars"].enabled = true;
     draft["thread:exportThread"].enabled = true;
@@ -22,7 +22,7 @@ export const POWER_USER: ExtensionLocalStorage["plugins"] = produce(
   (draft) => {
     draft["queryBox:languageModelSelector"].enabled = true;
     draft["queryBox:focusSelector"].enabled = true;
-    draft["queryBox:spaceNavigator"].enabled = true;
+    draft["spaceNavigator"].enabled = true;
     draft["queryBox:slashCommandMenu:promptHistory"].enabled = true;
     draft["queryBox:noFileCreationOnPaste"].enabled = true;
     draft["queryBox:fullWidthFollowUp"].enabled = true;

src/features/plugins/_common/space-navigator/SpaceNavigatorContent.tsx

@@ -9,7 +9,7 @@ import {
   CommandList,
 } from "@/components/ui/command";
 import SpaceItem from "@/features/plugins/query-box/space-navigator/SpaceItem";
-import SpaceItemPreview from "@/features/plugins/sidebar/space-navigator/SpaceItemPreview";
+import SpaceItemPreview from "@/features/plugins/space-navigator/sidebar-content/SpaceItemPreview";
 import { useIsMobileStore } from "@/hooks/use-is-mobile-store";
 import { pplxApiQueries } from "@/services/pplx-api/query-keys";
 import UiUtils from "@/utils/UiUtils";