feat: remember view selection

Author: G07cha

packages/web-extension/entrypoints/devtools-panel/App.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState } from "react";
+import { SpanFilter, useSpanFilter } from "~/utils/span-filter";
 import {
 	filterInBetweenSpans,
 	filterServerSpans,
@@ -20,20 +21,14 @@ import WaterfallChart, {
 
 const WS_URL = "ws://localhost:3300/";
 
-enum SpanFilter {
-	ALL = "All",
-	ROOT_SPANS = "Condensed",
-	REQUESTS_ONLY = "Requests",
-}
-
 export default function App() {
 	const [spans, setSpans] = useState<SpanTree>({});
 	const [selectedRequestId, setSelectedRequestId] = useState<string | null>(
 		null,
 	);
 	const [isPanelOpen, setIsPanelOpen] = useState(false);
 	const [catchUpReceived, setCatchUpReceived] = useState(false);
-	const [spanFilter, setSpanFilter] = useState(SpanFilter.ROOT_SPANS);
+	const [spanFilter, setSpanFilter] = useSpanFilter();
 	const {
 		send,
 		status: wsStatus,

packages/web-extension/package.json

@@ -17,6 +17,7 @@
 		"test:watch": "vitest"
 	},
 	"dependencies": {
+		"@wxt-dev/storage": "^1.2.0",
 		"clsx": "^2.1.1",
 		"debounce": "^2.2.0",
 		"react": "^19.1.1",

packages/web-extension/utils/span-filter.ts

@@ -0,0 +1,32 @@
+import { storage } from "@wxt-dev/storage";
+import { useCallback, useEffect, useState } from "react";
+
+export enum SpanFilter {
+	ALL = "All",
+	ROOT_SPANS = "Condensed",
+	REQUESTS_ONLY = "Requests",
+}
+
+export const spanFilterStorage = storage.defineItem<SpanFilter>(
+	"sync:spanFilter",
+	{
+		fallback: SpanFilter.ROOT_SPANS,
+	},
+);
+
+export const useSpanFilter = () => {
+	const [spanFilter, setSpanFilterValue] = useState<SpanFilter>(
+		spanFilterStorage.fallback,
+	);
+
+	const setSpanFilter = useCallback((value: SpanFilter) => {
+		spanFilterStorage.setValue(value);
+	}, []);
+
+	useEffect(() => {
+		spanFilterStorage.getValue().then(setSpanFilterValue);
+		return spanFilterStorage.watch(setSpanFilterValue);
+	}, []);
+
+	return [spanFilter, setSpanFilter] as const;
+};

packages/web-extension/wxt.config.ts

@@ -3,6 +3,9 @@ import { defineConfig } from "wxt";
 
 // See https://wxt.dev/api/config.html
 export default defineConfig({
+	manifest: {
+		permissions: ["storage"],
+	},
 	vite: () => ({
 		plugins: [tailwindcss()],
 	}),