Allow user to toggle visible columns (#182)

* Maintain tag casing

* Persist column visibility in zustand

* Persist only visibleColumns key

* merge persisted state

* Only show ColumnVisibilityDropdown after rehydration

* Record storage rehydrated

* Add useIsClientRehydrated hook

* Hide ActionButton text on mobile

* Condense Paginator on mobile

---------

Co-authored-by: Kyle Corbitt <kyle@corbt.com>

app/src/state/persist.ts

@@ -1,13 +1,27 @@
 import { type PersistOptions } from "zustand/middleware/persist";
 import { type State } from "./store";
+import SuperJSON from "superjson";
+import { merge, pick } from "lodash-es";
+import { type PartialDeep } from "type-fest";
 
-export const stateToPersist = {
-  selectedProjectId: null as string | null,
-};
+export type PersistedState = PartialDeep<State>;
 
-export const persistOptions: PersistOptions<State, typeof stateToPersist> = {
+export const persistOptions: PersistOptions<State, PersistedState> = {
   name: "persisted-app-store",
   partialize: (state) => ({
     selectedProjectId: state.selectedProjectId,
+    columnVisibility: pick(state.columnVisibility, ["visibleColumns"]),
   }),
+  merge: (saved, state) => merge(state, saved),
+  storage: {
+    getItem: (key) => {
+      const data = localStorage.getItem(key);
+      return data ? SuperJSON.parse(data) : null;
+    },
+    setItem: (key, value) => localStorage.setItem(key, SuperJSON.stringify(value)),
+    removeItem: (key) => localStorage.removeItem(key),
+  },
+  onRehydrateStorage: (state) => {
+    if (state) state.isRehydrated = true;
+  },
 };