feat(home): add connect and browse buttons [EE-4182] (#8175)

app/react/hooks/current-environment-store.ts

@@ -0,0 +1,24 @@
+import { createStore } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import { keyBuilder } from '@/react/hooks/useLocalStorage';
+
+import { EnvironmentId } from '../portainer/environments/types';
+
+export const environmentStore = createStore<{
+  environmentId?: number;
+  setEnvironmentId(id: EnvironmentId): void;
+  clear(): void;
+}>()(
+  persist(
+    (set) => ({
+      environmentId: undefined,
+      setEnvironmentId: (id: EnvironmentId) => set({ environmentId: id }),
+      clear: () => set({ environmentId: undefined }),
+    }),
+    {
+      name: keyBuilder('environmentId'),
+      getStorage: () => sessionStorage,
+    }
+  )
+);

app/react/hooks/useListSelection.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export function useListSelection<T>(
+  initialValue: Array<T> = [],
+  compareFn: (a: T, b: T) => boolean = (a, b) => a === b
+) {
+  const [selectedItems, setSelectedItems] = useState<Array<T>>(initialValue);
+
+  function handleChangeSelect(currentItem: T, selected: boolean) {
+    if (selected) {
+      setSelectedItems((items) => [...items, currentItem]);
+    } else {
+      setSelectedItems((items) =>
+        items.filter((item) => !compareFn(item, currentItem))
+      );
+    }
+  }
+
+  return [selectedItems, handleChangeSelect] as const;
+}