feat: preserve webview state

CONTRIBUTING.md

@@ -45,11 +45,3 @@ mise generate git-pre-commit --write --task=check
 ```shell
 mise tasks # list all available tasks
 ```
-
-## Roadmap
-
-- [ ] Automatically setup SDKs based on mise tools
-- [ ] Improve UI to install tools
-- [ ] Manage mise settings
-- [ ] Upgrade mise tools
-- ...

package.json

@@ -636,6 +636,7 @@
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
 		"react-error-boundary": "^4.1.2",
-		"toml-v1": "^1.0.0"
+		"toml-v1": "^1.0.0",
+		"zustand": "^5.0.2"
 	}
 }

src/webviewPanel.ts

@@ -1,5 +1,4 @@
 import { readFileSync, writeFileSync } from "node:fs";
-import { homedir } from "node:os";
 import * as os from "node:os";
 import path from "node:path";
 import * as cheerio from "cheerio";
@@ -19,7 +18,7 @@ export default class WebViewPanel {
 	private readonly _extContext: vscode.ExtensionContext;
 	private _disposables: vscode.Disposable[] = [];
 	private readonly miseService: MiseService;
-	private view: PanelView = "TOOLS";
+	private readonly view: PanelView = "TOOLS";
 
 	public static createOrShow(
 		extContext: vscode.ExtensionContext,

src/webviews/App.tsx

@@ -1,7 +1,6 @@
 import { Settings } from "./Settings";
 import { Tools } from "./Tools";
 import { TrackedConfigs } from "./TrackedConfigs";
-import { Tabs } from "./components/Tabs";
 
 export function App() {
 	const view = document

src/webviews/Settings.tsx

@@ -1,9 +1,9 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { VscodeCheckbox } from "@vscode-elements/react-elements";
-import React, { useState } from "react";
 import { type FlattenedProperty, getDefaultForType } from "../utils/miseUtilts";
 import CustomTable from "./components/CustomTable";
 import { IconButton } from "./components/IconButton";
+import { useWebviewStore } from "./store";
 import {
 	toDisplayPath,
 	useEditSettingMutation,
@@ -12,7 +12,12 @@ import {
 } from "./webviewVsCodeApi";
 
 export const Settings = () => {
-	const [showModifiedOnly, setShowModifiedOnly] = useState(true);
+	const showModifiedOnly = useWebviewStore(
+		(state) => state.showModifiedSettingsOnly,
+	);
+	const setShowModifiedOnly = useWebviewStore(
+		(state) => state.setShowModifiedSettingsOnly,
+	);
 	const openFileMutation = useOpenFileMutation();
 	const queryClient = useQueryClient();
 

src/webviews/Tools.tsx

@@ -1,8 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { VscodeButton, VscodeCheckbox } from "@vscode-elements/react-elements";
-import { useState } from "react";
 import CustomTable from "./components/CustomTable";
 import { IconButton } from "./components/IconButton";
+import { useWebviewStore } from "./store";
 import {
 	toDisplayPath,
 	trackedConfigsQueryOptions,
@@ -223,9 +223,17 @@ const ActionCell = ({
 
 export const Tools = () => {
 	const queryClient = useQueryClient();
-	const [selectedTool, setSelectedTool] = useState<MiseTool | null>(null);
-	const [showOutdatedOnly, setShowOutdatedOnly] = useState(false);
-	const [activeOnly, setActiveOnly] = useState(true);
+	const selectedTool = useWebviewStore((state) => state.selectedTool);
+	const setSelectedTool = useWebviewStore((state) => state.setSelectedTool);
+
+	const showOutdatedOnly = useWebviewStore((state) => state.showOutdatedOnly);
+	const setShowOutdatedOnly = useWebviewStore(
+		(state) => state.setShowOutdatedOnly,
+	);
+	const activeOnly = useWebviewStore((state) => state.showActiveToolsOnly);
+	const setActiveOnly = useWebviewStore(
+		(state) => state.setShowActiveToolsOnly,
+	);
 
 	const toolsQuery = useQuery({
 		queryKey: ["tools"],

src/webviews/store.ts

@@ -0,0 +1,54 @@
+import { create } from "zustand/index";
+import { type StorageValue, persist } from "zustand/middleware";
+import { vscode } from "./webviewVsCodeApi";
+
+interface WebviewStore {
+	showModifiedSettingsOnly: boolean;
+	setShowModifiedSettingsOnly: (value: boolean) => void;
+
+	selectedTool: MiseTool | null;
+	setSelectedTool: (value: MiseTool | null) => void;
+
+	showOutdatedOnly: boolean;
+	setShowOutdatedOnly: (value: boolean) => void;
+
+	showActiveToolsOnly: boolean;
+	setShowActiveToolsOnly: (value: boolean) => void;
+}
+
+export const useWebviewStore = create<WebviewStore>()(
+	persist(
+		(set) => ({
+			showModifiedSettingsOnly: true,
+			setShowModifiedSettingsOnly: (value: boolean) =>
+				set({ showModifiedSettingsOnly: value }),
+
+			selectedTool: null,
+			setSelectedTool: (value: MiseTool | null) => set({ selectedTool: value }),
+
+			showOutdatedOnly: false,
+			setShowOutdatedOnly: (value: boolean) => set({ showOutdatedOnly: value }),
+
+			showActiveToolsOnly: true,
+			setShowActiveToolsOnly: (value: boolean) =>
+				set({ showActiveToolsOnly: value }),
+		}),
+		{
+			name: "webview-store",
+			storage: {
+				getItem: async (name) => {
+					const state = await vscode.getState();
+					return state[name] as StorageValue<WebviewStore>;
+				},
+				setItem: async (name, value) => {
+					return vscode.setState({ [name]: value });
+				},
+				removeItem: async (name) => {
+					const state = await vscode.getState();
+					delete state[name];
+					vscode.setState(state);
+				},
+			},
+		},
+	),
+);

src/webviews/webviewVsCodeApi.ts

@@ -3,16 +3,14 @@ import { queryOptions, useMutation } from "@tanstack/react-query";
 declare global {
 	interface Window {
 		acquireVsCodeApi(): {
+			getState(): Promise<Record<string, unknown>>;
+			setState(state: Record<string, unknown>): void;
 			postMessage(message: unknown): void;
 		};
 	}
 }
 
-export function getVsCode() {
-	return window.acquireVsCodeApi();
-}
-
-export const vscode = getVsCode();
+export const vscode = window.acquireVsCodeApi();
 
 export const vscodeClient = {
 	async request({