fix(pplx:ext): circular dependencies

Author: pnd280

packages/eslint-config/rules/imports.js

@@ -9,17 +9,22 @@ export default tseslint.config({
     import: importPlugin,
     "@limegrass/import-alias": importAliasPlugin,
   },
+  ignores: ["**/node_modules/**"],
   settings: {
     "import/resolver": {
       typescript: {
         alwaysTryTypes: true,
         project: "./tsconfig.json",
       },
     },
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/ignore": ["node_modules", "\.json$"],
   },
   rules: {
     "import/no-unresolved": "error",
-    // "import/no-cycle": ["error", { maxDepth: 10, ignoreExternal: true }],
+    "import/no-cycle": ["error", { ignoreExternal: true }],
     "import/no-self-import": "error",
     "import/order": [
       "warn",

perplexity/extension/.gitignore

@@ -27,5 +27,6 @@ unimport.d.ts
 /coverage
 /dist
 /release
+/changelogs/listing.json
 
 cdn

perplexity/extension/changelogs/1.13.2.md

@@ -0,0 +1,6 @@
+## Bug Fixes
+
+- Fixed an issue where the extension settings were not being updated correctly when:
+  - Importing data from an older version of the extension
+  - Changing TTS Voice won't persist across page reloads
+  - Post update release notes won't dismiss

perplexity/extension/changelogs/listing.json

@@ -31,7 +31,7 @@ async function processAllRemoteResourceFiles(): Promise<void> {
     listing = readResourceListing();
   } catch (error: any) {
     logger.error(`Failed to read resource listing: ${error.message}`);
-    process.exit(1); // Exit if we can't even read the listing
+    process.exit(1);
   }
 
   let updatedListing = { ...listing };
@@ -128,11 +128,11 @@ async function registerVersionedResource(params: {
     // If content hasn't changed, skip registration
     if (!contentChanged) {
       logger.info(
-        `Skipping resource ${chalk.yellow(
+        `Content unchanged for ${chalk.yellow(
           `["${resource.name}/${resourceFileName}"]`,
-        )} (content unchanged)`,
+        )}`,
       );
-      return listing; // Return the original listing unchanged
+      return listing;
     }
 
     // 2. Update listing object

perplexity/extension/cli/src/r2/remote-resources/versioned.ts

@@ -1,9 +1,9 @@
 {
   "name": "pplx-ext",
-  "version": "1.13.1",
+  "version": "1.13.2",
   "author": "pnd280",
   "dependencies": {
-    "@ark-ui/react": "^5.6.0",
+    "@ark-ui/react": "^5.7.0",
     "@codesandbox/sandpack-react": "^2.20.0",
     "@complexity/async-dep-registry": "workspace:*",
     "@dnd-kit/core": "^6.3.1",
@@ -83,7 +83,7 @@
     "@types/jquery": "^3.5.32",
     "@types/lodash": "^4.17.16",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^20.17.30",
+    "@types/node": "^20.17.31",
     "@types/pako": "^2.0.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

perplexity/extension/package.json

@@ -44,7 +44,10 @@ export function PostUpdateReleaseNotesDialog() {
             {t("common:releaseNotes.title", { version: APP_CONFIG.VERSION })}
           </DialogTitle>
         </DialogHeader>
-        <ChangelogRenderer changelog={changelog} />
+        <ChangelogRenderer
+          changelog={changelog}
+          className="x:md:max-w-[900px]"
+        />
         <DialogFooter>
           <DontShowAgainForFutureUpdatesConfirmDialog
             onConfirm={() => {

perplexity/extension/src/components/PostUpdateReleaseNotesDialog.tsx

@@ -1,14 +1,13 @@
-import { useRoutes } from "react-router-dom";
+import { useCallback } from "react";
 
 import { Input } from "@/components/ui/input";
-import PluginSettingsWrapper from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-settings-uis/PluginSettingsWrapper";
 import { PluginSections } from "@/entrypoints/options-page/dashboard/pages/plugins/components/PluginSections";
 import { TagsFilter } from "@/entrypoints/options-page/dashboard/pages/plugins/components/TagsFilter";
 import { useFilteredPlugins } from "@/entrypoints/options-page/dashboard/pages/plugins/hooks/useFilteredPlugins";
 import { usePluginCategories } from "@/entrypoints/options-page/dashboard/pages/plugins/hooks/usePluginCategories";
 import { usePluginFiltersStore } from "@/entrypoints/options-page/dashboard/pages/plugins/store";
 
-function PluginsListing() {
+export default function PluginsListing() {
   const filters = usePluginFiltersStore((state) => state.filters);
   const setFilters = usePluginFiltersStore((state) => state.setFilters);
 
@@ -57,16 +56,3 @@ function PluginsListing() {
     </div>
   );
 }
-
-export default function PluginsPage() {
-  return useRoutes([
-    {
-      path: ":pluginId/*",
-      element: <PluginSettingsWrapper />,
-    },
-    {
-      path: "*",
-      element: <PluginsListing />,
-    },
-  ]);
-}

perplexity/extension/src/entrypoints/options-page/dashboard/pages/plugins/PluginsPage.tsx renamed to perplexity/extension/src/entrypoints/options-page/dashboard/pages/plugins/PluginsListing.tsx

@@ -71,7 +71,7 @@ export function TagsFilter() {
         <PopoverTrigger asChild>
           <Button variant="ghost" className="x:py-2">
             <div className="x:flex x:items-center x:gap-2">
-              <span>Tags</span>
+              <span>Filter</span>
               {getActiveFiltersCount() > 0 && (
                 <div className="x:flex x:h-4 x:w-4 x:items-center x:justify-center x:rounded-full x:bg-primary/10 x:text-[10px] x:font-medium x:text-primary">
                   {getActiveFiltersCount()}

perplexity/extension/src/entrypoints/options-page/dashboard/pages/plugins/components/TagsFilter.tsx

@@ -7,7 +7,7 @@ import Page from "@/entrypoints/options-page/components/Page";
 import PluginSettingsModal from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-settings-uis/PluginSettingsModal";
 import PluginSettingsPage from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-settings-uis/PluginSettingsPage";
 import usePluginsStates from "@/entrypoints/options-page/dashboard/pages/plugins/hooks/usePluginsStates";
-import PluginsPage from "@/entrypoints/options-page/dashboard/pages/plugins/PluginsPage";
+import PluginsListing from "@/entrypoints/options-page/dashboard/pages/plugins/PluginsListing";
 import useClearLocationState from "@/hooks/useClearLocationState";
 
 export default function PluginSettingsWrapper() {
@@ -44,7 +44,7 @@ export default function PluginSettingsWrapper() {
     <>
       {isFromPluginList ? (
         <>
-          <PluginsPage />
+          <PluginsListing />
           <PluginSettingsModal pluginId={plugin.id} />
         </>
       ) : (

perplexity/extension/src/entrypoints/options-page/dashboard/pages/plugins/components/plugin-settings-uis/PluginSettingsWrapper.tsx

@@ -0,0 +1,17 @@
+import { useRoutes } from "react-router-dom";
+
+import PluginSettingsWrapper from "@/entrypoints/options-page/dashboard/pages/plugins/components/plugin-settings-uis/PluginSettingsWrapper";
+import PluginsListing from "@/entrypoints/options-page/dashboard/pages/plugins/PluginsListing";
+
+export function PluginRoutes() {
+  return useRoutes([
+    {
+      path: ":pluginId/*",
+      element: <PluginSettingsWrapper />,
+    },
+    {
+      path: "*",
+      element: <PluginsListing />,
+    },
+  ]);
+}

perplexity/extension/src/entrypoints/options-page/dashboard/pages/plugins/routes.tsx

@@ -3,8 +3,10 @@ import { storage } from "@wxt-dev/storage";
 import { Button } from "@/components/ui/button";
 import { toast } from "@/components/ui/use-toast";
 import type { ExtensionData } from "@/data/dashboard/extension-data.types";
+import { queryClient } from "@/data/query-client";
 import ImportDataPasteDialogWrapper from "@/entrypoints/options-page/dashboard/pages/settings/components/ImportDataPasteDialogWrapper";
 import { transfromFlatSchema } from "@/services/extension-settings/migrations";
+import { extensionSettingsQueries } from "@/services/extension-settings/query-keys";
 import type { ExtensionSettings } from "@/services/extension-settings/types";
 import { db } from "@/services/indexed-db";
 import { errorWrapper } from "@/utils/error-wrapper";
@@ -16,7 +18,7 @@ export default function ImportDataButtons() {
     const [, error] = await errorWrapper(async () => {
       const parsedData = JSON.parse(data) as ExtensionData;
 
-      if ("plugins" in parsedData.settings) {
+      if (parsedData.settings != null && "plugins" in parsedData.settings) {
         parsedData.settings = {
           settings: transfromFlatSchema(parsedData.settings),
           settings$: {
@@ -25,14 +27,26 @@ export default function ImportDataButtons() {
         };
       }
 
+      const settings =
+        "localStorage" in parsedData
+          ? (parsedData.localStorage as {
+              settings: ExtensionSettings;
+              settings$: { v: number };
+            })
+          : parsedData.settings;
+
       await storage.setItem<ExtensionSettings>(
         "local:settings",
-        parsedData.settings.settings,
+        settings.settings,
       );
       await storage.setMeta("local:settings", {
-        v: parsedData.settings["settings$"].v,
+        v: settings["settings$"].v,
       });
       db.import(parsedData.db);
+
+      queryClient.invalidateQueries({
+        queryKey: extensionSettingsQueries.all(),
+      });
     })();
 
     if (!error) {

perplexity/extension/src/entrypoints/options-page/dashboard/pages/settings/components/ImportDataButtons.tsx

@@ -7,7 +7,7 @@ import LoadingOverlay from "@/components/LoadingOverlay";
 import Page from "@/entrypoints/options-page/components/Page";
 import ErrorPage from "@/entrypoints/options-page/dashboard/pages/ErrorPage";
 import NotFoundPage from "@/entrypoints/options-page/dashboard/pages/NotFoundPage";
-import PluginsPage from "@/entrypoints/options-page/dashboard/pages/plugins/PluginsPage";
+import { PluginRoutes } from "@/entrypoints/options-page/dashboard/pages/plugins/routes";
 import { ThemesPageRoutes } from "@/entrypoints/options-page/dashboard/pages/themes/routes";
 
 const { Playground } = lazily(
@@ -54,7 +54,7 @@ export const router: ReturnType<typeof createHashRouter> = createHashRouter([
         children: [
           {
             path: "plugins/*",
-            element: <Page title="Plugins" page={PluginsPage} />,
+            element: <Page title="Plugins" page={PluginRoutes} />,
           },
           {
             path: "themes/*",

perplexity/extension/src/entrypoints/options-page/router.tsx

@@ -111,7 +111,7 @@ export function useIsEntryActive(entryId: keyof GlobalCssStoreRegistry) {
   }, deepEqual);
 }
 
-export function useRegisterGlobalCssEntry({
+export function useRegisteredGlobalCssEntry({
   entryIds,
   subscriberId,
   subscribe,