simple key manager

js/app/components/settings/keymgr.tsx

···
+import { YStack, XStack, Text, Separator, Button, ScrollView } from "tamagui";
+import { useEffect } from "react";
+import { Dices, X } from "@tamagui/lucide-icons";
+import {
+  deleteStreamKeyRecord,
+  getStreamKeyRecords,
+  selectKeyRecords,
+} from "features/bluesky/blueskySlice";
+import { useAppDispatch, useAppSelector } from "store/hooks";
+import { PlaceStreamKey } from "lexicons";
+import Loading from "components/loading/loading";
+import { timeAgo } from "utils/timeAgo";
+import AQLink from "components/aqlink";
+
+function KeyRow({
+  keyRecord,
+  rkey,
+  deleteKeyRecord,
+}: {
+  keyRecord: PlaceStreamKey.Record;
+  rkey: string;
+  deleteKeyRecord: (rkey: string) => void;
+}) {
+  return (
+    <XStack
+      style={{
+        justifyContent: "space-between",
+        alignItems: "center",
+      }}
+      gap="$4"
+    >
+      <XStack gap="$4">
+        {keyRecord?.signingKey && (
+          <Text
+            fontFamily="$mono"
+            fontSize="$2"
+            $sm={{ width: "$14" }}
+            ellipse
+            numberOfLines={1}
+          >
+            {keyRecord?.signingKey}
+          </Text>
+        )}
+        {keyRecord?.createdAt && (
+          <Text fontSize="$2" f={1}>
+            made {timeAgo(new Date(keyRecord.createdAt))}
+          </Text>
+        )}
+      </XStack>
+      <Button
+        aria-label="Delete"
+        size="$3"
+        aspectRatio={1 / 1}
+        padding="$2"
+        hoverStyle={{ backgroundColor: "#f46" }}
+        onPress={() => deleteKeyRecord(rkey)}
+      >
+        <X />
+      </Button>
+    </XStack>
+  );
+}
+
+export default function KeyManager() {
+  const dispatch = useAppDispatch();
+  const keyRecords = useAppSelector(selectKeyRecords);
+
+  const deleteKeyRecord = (rkey: string) => {
+    dispatch(deleteStreamKeyRecord({ rkey }));
+    dispatch(getStreamKeyRecords());
+  };
+
+  useEffect(() => {
+    dispatch(getStreamKeyRecords());
+  }, []);
+
+  return (
+    <ScrollView justifyContent="flex-start" alignItems="center">
+      <YStack f={1} p="$4" gap="$4" maxWidth={750}>
+        {keyRecords === null ? (
+          <Loading />
+        ) : keyRecords.records.length === 0 ? (
+          <>
+            <Text mt="$8">No keys here!</Text>
+            <AQLink to={{ screen: "LiveDashboard" }}>
+              <Text fontSize="$2" color="$color.blue7Light">
+                Go to the live dashboard to create a key.
+              </Text>
+            </AQLink>
+          </>
+        ) : (
+          <>
+            <YStack gap="$2">
+              <Text fontSize="$8">Existing Pubkeys</Text>
+              <Text fontSize="$2" color="$color.gray11Dark">
+                Your private stream key is the secret credential you use to
+                stream. Listed are the associated public keys.
+              </Text>
+              {keyRecords.records.map((keyRecord) => (
+                <KeyRow
+                  rkey={keyRecord.uri.split("/").pop() as string}
+                  keyRecord={keyRecord.value as any}
+                  deleteKeyRecord={deleteKeyRecord}
+                />
+              ))}
+              <Text fontSize="$2" color="$color.gray11Dark">
+                {keyRecords.records.length} key
+                {keyRecords.records.length > 1 && "s"}
+              </Text>
+            </YStack>
+            <Separator />
+
+            <Text fontSize="$2" color="$color.gray11Dark">
+              Go to the live dashboard to create a key.
+            </Text>
+          </>
+        )}
+      </YStack>
+    </ScrollView>
+  );
+}

js/app/features/bluesky/blueskySlice.tsx

···
 } from "@atproto/api";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
 import { bytesToMultibase, Secp256k1Keypair } from "@atproto/crypto";
-import { hydrate, STORED_KEY_KEY } from "features/base/baseSlice";
+import { hydrate, STORED_KEY_KEY, StreamKey } from "features/base/baseSlice";
 import { openLoginLink } from "features/platform/platformSlice";
 import {
   LivestreamViewHydrated,
···
   },
   newKey: null,
   storedKey: null,
+  isDeletingKey: false,
+  streamKeysResponse: null,
   newLivestream: null,
 };
 
···
       };
     }),
 
+    getStreamKeyRecords: create.asyncThunk(
+      async (_, thunkAPI) => {
+        const { bluesky } = thunkAPI.getState() as {
+          bluesky: BlueskyState;
+        };
+        if (!bluesky.pdsAgent) {
+          throw new Error("No agent");
+        }
+        const did = bluesky.oauthSession?.did;
+        if (!did) {
+          throw new Error("No DID");
+        }
+        const profile = bluesky.profiles[did];
+        if (!profile) {
+          throw new Error("No profile");
+        }
+        if (!did) {
+          throw new Error("No DID");
+        }
+        return await bluesky.pdsAgent.com.atproto.repo.listRecords({
+          repo: did,
+          collection: "place.stream.key",
+          limit: 100,
+        });
+      },
+      {
+        pending: (state) => {
+          return {
+            ...state,
+            streamKeysResponse: null,
+          };
+        },
+        fulfilled: (state, action) => {
+          console.log(action.payload);
+          return {
+            ...state,
+            streamKeysResponse: action.payload.data,
+          };
+        },
+        rejected: (state, action) => {
+          console.error("listStreamKeyRecords rejected", action.error);
+        },
+      },
+    ),
+
+    deleteStreamKeyRecord: create.asyncThunk(
+      async ({ rkey }: { rkey: string }, thunkAPI) => {
+        const { bluesky } = thunkAPI.getState() as {
+          bluesky: BlueskyState;
+        };
+        if (!bluesky.pdsAgent) {
+          throw new Error("No agent");
+        }
+        const did = bluesky.oauthSession?.did;
+        if (!did) {
+          throw new Error("No DID");
+        }
+        const profile = bluesky.profiles[did];
+        if (!profile) {
+          throw new Error("No profile");
+        }
+        if (!did) {
+          throw new Error("No DID");
+        }
+
+        return await bluesky.pdsAgent.com.atproto.repo.deleteRecord({
+          repo: did,
+          collection: "place.stream.key",
+          rkey,
+        });
+      },
+      {
+        pending: (state) => {
+          return {
+            ...state,
+            isDeletingKey: true,
+          };
+        },
+        fulfilled: (state, action) => {
+          return {
+            ...state,
+            isDeletingKey: false,
+          };
+        },
+        rejected: (state, action) => {
+          console.error("deleteStreamKeyRecord rejected", action.error);
+          return {
+            ...state,
+            isDeletingKey: false,
+          };
+        },
+      },
+    ),
+
     setPDS: create.asyncThunk(
       async (pds: string, thunkAPI) => {
         await Storage.setItem("pdsURL", pds);
···
     selectLogin: (bluesky) => bluesky.login,
     selectProfiles: (bluesky) => bluesky.profiles,
     selectStoredKey: (bluesky) => bluesky.storedKey,
+    selectKeyRecords: (bluesky) => bluesky.streamKeysResponse,
     selectUserProfile: (bluesky) => {
       const did = bluesky.oauthSession?.did;
       if (!did) return null;
···
   oauthError,
   createStreamKeyRecord,
   clearStreamKeyRecord,
+  getStreamKeyRecords,
+  deleteStreamKeyRecord,
   createLivestreamRecord,
   updateLivestreamRecord,
   createChatProfileRecord,
···
   selectPDS,
   selectLogin,
   selectStoredKey,
+  selectKeyRecords,
   selectIsReady,
   selectNewLivestream,
   selectChatProfile,

js/app/features/bluesky/blueskyTypes.tsx

···
 import { OAuthSession } from "@streamplace/atproto-oauth-client-react-native";
 import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
+import { OutputSchema } from "@atproto/api/dist/client/types/com/atproto/repo/listRecords";
 import { StreamKey } from "features/base/baseSlice";
 import { PlaceStreamChatProfile, PlaceStreamLivestream } from "streamplace";
 import { StreamplaceOAuthClient } from "./oauthClient";
···
   };
   newKey: null | StreamKey;
   storedKey: null | StreamKey;
+  isDeletingKey: boolean;
+  streamKeysResponse: null | OutputSchema;
   newLivestream: null | NewLivestream;
   chatProfile: {
     loading: boolean;

js/app/src/router.tsx

···
 import { store } from "store/store";
 import { loadStateFromStorage } from "features/base/sidebarSlice";
 import HomeScreen from "./screens/home";
+import KeyManager from "components/settings/keymgr";
 
 store.dispatch(loadStateFromStorage());
 
···
   Multi: { config: string };
   Support: undefined;
   Settings: undefined;
+  KeyManagement: undefined;
   GoLive: undefined;
   LiveDashboard: undefined;
   Login: undefined;
···
       Multi: "multi/:config",
       Support: "support",
       Settings: "settings",
+      KeyManagement: "settings/key-management",
       GoLive: "golive",
       LiveDashboard: "live",
       Login: "login",
···
           options={{
             drawerIcon: () => <SettingsIcon />,
             drawerLabel: () => <Text>Settings</Text>,
+          }}
+        />
+        <Drawer.Screen
+          name="Key Manager"
+          component={KeyManager}
+          options={{
+            drawerLabel: () => <Text>Key Manager</Text>,
+            drawerItemStyle: { display: "none" },
           }}
         />
         <Drawer.Screen

js/app/utils/timeAgo.ts

···
+export function timeAgo(date: Date) {
+  const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
+  let interval = Math.floor(seconds / 31536000);
+
+  // return date.toLocaleDateString("en-US");
+  if (interval > 1) {
+    const formatter = new Intl.DateTimeFormat("en-US", {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
+    return "on " + formatter.format(date);
+  }
+  interval = Math.floor(seconds / 86400);
+  // return date without years
+  if (interval > 1) {
+    const formatter = new Intl.DateTimeFormat("en-US", {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "numeric",
+    });
+    return formatter.format(date);
+  }
+  interval = Math.floor(seconds / 3600);
+  if (interval > 1) {
+    return interval + " hours ago";
+  }
+  interval = Math.floor(seconds / 60);
+  if (interval > 1) {
+    return interval + " minutes ago";
+  }
+  return Math.floor(seconds) + " seconds ago";
+}