feat: refactor billing plans section and remove unused components

- Updated BillingPlansSection.vue to clean up unused code and improve readability.
- Removed CardPopover.vue and VideoGrid.vue components as they were no longer needed.
- Enhanced VideoTable.vue by integrating BaseTable for better table management and added loading states.
- Introduced secure JSON transformer for enhanced data security in RPC routes.
- Added key resolver for managing server key pairs.
- Created a script to generate NaCl keys for secure communications.
- Implemented admin page header management for better UI consistency.

src/routes/admin/components/useAdminPageHeader.ts

@@ -0,0 +1,52 @@
+import { inject, onBeforeUnmount, reactive, watchEffect, type VNode } from 'vue';
+
+export type AdminHeaderAction = {
+  label: string;
+  icon?: string | VNode;
+  variant?: 'primary' | 'secondary' | 'danger';
+  onClick: () => void;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export type AdminPageHeaderState = {
+  eyebrow?: string;
+  badge?: string;
+  actions: AdminHeaderAction[];
+  owner: symbol | null;
+};
+
+export const adminPageHeaderKey = Symbol('admin-page-header');
+
+export const createAdminPageHeaderState = (): AdminPageHeaderState => reactive({
+  eyebrow: undefined,
+  badge: undefined,
+  actions: [],
+  owner: null,
+});
+
+export const useAdminPageHeader = (getConfig: () => Omit<AdminPageHeaderState, 'owner'>) => {
+  const state = inject<AdminPageHeaderState | null>(adminPageHeaderKey, null);
+
+  if (!state) {
+    return;
+  }
+
+  const owner = Symbol('admin-page-header-owner');
+
+  watchEffect(() => {
+    const config = getConfig();
+    state.owner = owner;
+    state.eyebrow = config.eyebrow;
+    state.badge = config.badge;
+    state.actions = config.actions;
+  });
+
+  onBeforeUnmount(() => {
+    if (state.owner !== owner) return;
+    state.owner = null;
+    state.eyebrow = undefined;
+    state.badge = undefined;
+    state.actions = [];
+  });
+};