feat: Lightsail + svg animation

packages/frontend/src/features/ec2/sgRuleHelpers.ts

@@ -1,9 +1,10 @@
 import { isValidCidr, isValidPort } from "@/lib/network";
+import { clientId } from "@/lib/clientId";
 import type { SgRule } from "./SgRuleTable";
 
 export function newRule(): SgRule {
   return {
-    id: crypto.randomUUID(),
+    id: clientId(),
     type: "custom-tcp",
     protocol: "tcp",
     fromPort: "",

packages/frontend/src/features/secretsmanager/SecretsManagerPage.tsx

@@ -30,6 +30,7 @@ import {
   usePutSecretValueMutation,
 } from '@/api/aws/secretsmanager.mutations'
 import { timeAgo } from '@/lib/utils'
+import { clientId } from '@/lib/clientId'
 
 type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue }
 type JsonValueKind = 'string' | 'number' | 'boolean' | 'null' | 'json'
@@ -338,7 +339,7 @@ function SecretDrawer({
   function addKeyValueEntry() {
     setKeyValueEntries((entries) => [
       ...entries,
-      { id: crypto.randomUUID(), key: '', value: '', kind: 'string' },
+      { id: clientId(), key: '', value: '', kind: 'string' },
     ])
     setEditorError('')
   }