Add Remove Friends Feature

package.json

@@ -20,6 +20,7 @@
 		"@radix-ui/react-separator": "^1.1.0",
 		"@radix-ui/react-slot": "^1.1.0",
 		"@radix-ui/react-tabs": "^1.1.0",
+		"@radix-ui/react-tooltip": "^1.1.2",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.1",
 		"cmdk": "1.0.0",

src/components/nav/index.tsx

@@ -30,11 +30,14 @@ import { useEffect, useState } from 'react';
 import { getTheme, setTheme } from '@/utils/theme';
 import { Login } from './login';
 import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import { EditProfile } from './profile';
 
 export default function NavigationBar() {
 	const [theme, changeTheme] = useState(getTheme());
 	const [open, setOpen] = useState(false);
 
+	const [openEditProfile, setOpenEditProfile] = useState(false);
+
 	useEffect(() => setTheme(theme), [theme]);
 
 	const user = useMainUser();
@@ -102,17 +105,26 @@ export default function NavigationBar() {
 			>
 				{logged ? <></> : <HiOutlineRocketLaunch />}
 				{logged ? (
-					<ProfileDropdown user={user} />
+					<ProfileDropdown setOpen={setOpenEditProfile} user={user} />
 				) : (
 					<span className="ml-1">Get Started</span>
 				)}
 			</NavigationMenuLink>
 			<Login {...{ open, setOpen }} />
+			<EditProfile
+				{...{ open: openEditProfile, setOpen: setOpenEditProfile }}
+			/>
 		</NavigationMenu>
 	);
 }
 
-function ProfileDropdown({ user }: { user: UserContextValues | null }) {
+function ProfileDropdown({
+	user,
+	setOpen,
+}: {
+	user: UserContextValues | null;
+	setOpen: (v: boolean) => void;
+}) {
 	const alias = user?.userInfo?.info?.username;
 	const avatar = user?.userInfo?.info?.avatar;
 	const displayName = user?.userInfo?.info?.displayName;
@@ -134,7 +146,7 @@ function ProfileDropdown({ user }: { user: UserContextValues | null }) {
 				<DropdownMenuSeparator />
 
 				<DropdownMenuGroup>
-					<DropdownMenuItem>
+					<DropdownMenuItem onClick={() => setOpen(true)}>
 						<Settings className="mr-2 h-4 w-4" />
 						<span>Edit Profile</span>
 					</DropdownMenuItem>

src/components/nav/profile.tsx

@@ -0,0 +1,31 @@
+import { useMainUser, UserContextValues } from '@/hooks/user/useMainUser';
+import { ResponsiveDialog } from '../customDialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+
+export function EditProfile({
+  open,
+  setOpen,
+}: {
+  open: boolean;
+  setOpen: (a: boolean) => void;
+}) {
+  const { userInfo } = useMainUser() as UserContextValues;
+
+  // const displayName = userInfo?.info?.displayName;
+  // const bio = userInfo?.info?.bio;
+
+  return (
+    <ResponsiveDialog open={open} setOpen={setOpen} title="" description="">
+      <Tabs defaultValue="0" className="w-full">
+        <TabsList className="w-full grid grid-cols-2">
+          <TabsTrigger value="0">Profile</TabsTrigger>
+          <TabsTrigger value="1">Avatar</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="0"></TabsContent>
+
+        <TabsContent value="1"></TabsContent>
+      </Tabs>
+    </ResponsiveDialog>
+  );
+}

src/components/ui/tooltip.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '@/lib/utils';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+			className,
+		)}
+		{...props}
+	/>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/hooks/user/helpers/Base/BaseUser.ts

@@ -10,6 +10,7 @@ export interface UserInfo<T = true> {
 	displayName: string;
 	bio: string;
 	friends: UserFriends<T>;
+	pubKey: string;
 }
 
 export const UserKeys = {
@@ -18,6 +19,7 @@ export const UserKeys = {
 	DisplayName: 'display_name',
 	Avatar: 'avatar',
 	Friends: 'friends',
+	PubKey: 'pubKey',
 } as const;
 
 export const profileDefault =
@@ -29,6 +31,7 @@ export interface ValidUserInfo {
 	[UserKeys.DisplayName]: string;
 	[UserKeys.Username]: string;
 	[UserKeys.Friends]: string;
+	[UserKeys.PubKey]: string;
 }
 
 export type UserKeys = (typeof UserKeys)[keyof typeof UserKeys];
@@ -103,6 +106,7 @@ export class BaseUser {
 			displayName,
 			username,
 			friends: Object.values(friends),
+			pubKey: this._user.is?.pub as string,
 		};
 
 		if (updateCache) this._setUserInfo(userData);

src/hooks/user/helpers/Base/PeerUser.ts

@@ -83,6 +83,7 @@ export class PeerUser {
 			avatar:
 				d[UserKeys.Avatar] ||
 				`https://api.dicebear.com/7.x/notionists/svg/seed=${d[UserKeys.Username]}`,
+			pubKey: d.pub,
 		};
 	}
 

src/hooks/user/helpers/User/ClientUser.ts

@@ -59,7 +59,7 @@ export class ClientUser extends BaseUser {
 			delete data._;
 
 			const map = await Promise.all(
-				Object.values(data).map((v) => {
+				Object.values(data).filter((v) => v != null).map((v) => {
 					if (v.startsWith('~')) v = v.replace('~', '');
 
 					this.pushFriends(v);

src/lib/Structs/Cache/PeerCache.ts

@@ -1,6 +1,6 @@
 import { PeerUser } from '@/hooks/user/helpers/Base/PeerUser';
 import { getUser } from '@/lib/utils/Gun/Users/getUser';
-import { Cache } from "./cache"
+import { Cache } from './cache';
 
 class PeerCache extends Cache<PeerUser> {
 	constructor() {

src/lib/Structs/DMChannel/DMChannel.ts

@@ -3,7 +3,7 @@ import { ClientUser } from '@/hooks/user/helpers/User/ClientUser';
 import { formatDataStores } from '@/lib/Constants';
 import { Util } from '@/lib/utils/Utils/Util';
 import type { IGunInstance } from 'gun';
-import { Message } from "../Message/Message";
+import { Message } from '../Message/Message';
 import { getPeerCache } from '../cache/PeerCache';
 
 export class DMChannel {
@@ -32,7 +32,7 @@ export class DMChannel {
 
 		cache.set(refreshedPeer.pub, refreshedPeer);
 
-		return this.client.info?.friends.includes(refreshedPeer.pub)
+		return this.client.info?.friends.includes(refreshedPeer.pub);
 	}
 
 	/**
@@ -44,17 +44,17 @@ export class DMChannel {
 	 * @returns Event end function
 	 */
 	listenToMessages() {
-		if(this._isListening) return
+		if (this._isListening) return;
 
-		this._isListening = true
+		this._isListening = true;
 
 		const listener = this._db
 			.get(this.__createChannelQuery())
 			.map()
 			.on(async (d) => {
-				if (!d) return
+				if (!d) return;
 				const decrypted = await this.client.decrypt(d.content, this.peer.epub);
-				if(!decrypted?.trim()) return
+				if (!decrypted?.trim()) return;
 
 				d.content = decrypted;
 				d.timestamp = Util.getGunKey(d);
@@ -65,13 +65,13 @@ export class DMChannel {
 
 		return () => {
 			this._isListening = false;
-			listener.off()
+			listener.off();
 		};
 	}
 
 	__createChannelQuery() {
 		return formatDataStores(
-			[this.client._sea.epub, this.peer.epub].sort().join("-C-"),
+			[this.client._sea.epub, this.peer.epub].sort().join('-C-'),
 			'chat',
 		);
 	}

src/lib/utils/Chats/chatData.ts

@@ -38,9 +38,12 @@ export class ChatData {
 	// This will likely explode once we add group DMs
 
 	// OUT OF DATE
-	refreshCache() { }
+	refreshCache() {}
 
-	async getChannel(uid: string, update: (msg: ResolvedMessage) => void): Promise<DMChannel> {
+	async getChannel(
+		uid: string,
+		update: (msg: ResolvedMessage) => void,
+	): Promise<DMChannel> {
 		if (this.chPub == uid) {
 			throw new Error("Don't");
 		}
@@ -58,21 +61,29 @@ export class ChatData {
 				let author: ClientUser | PeerUser = this.user.userInfo as ClientUser;
 				if (channel.peer.pub == msg.author) {
 					author = channel.peer as PeerUser;
-					pub = channel.peer.pub
+					pub = channel.peer.pub;
 				} else {
-					pub = await (author as ClientUser).getPub()
+					pub = await (author as ClientUser).getPub();
 				}
 
 				// TODO: FIX THIS SHIT
-				if(this.messages.find((v) => msg.author === pub && msg.content === v.msg.content && v.msg.timestamp.getTime() === msg.timestamp.getTime())) return
+				if (
+					this.messages.find(
+						(v) =>
+							msg.author === pub &&
+							msg.content === v.msg.content &&
+							v.msg.timestamp.getTime() === msg.timestamp.getTime(),
+					)
+				)
+					return;
 
 				this.messages.push({ author, msg });
 
 				update({ author, msg });
 			},
 		);
 
-		channel.listenToMessages()
+		channel.listenToMessages();
 
 		this.chPub = channel.peer.pub;
 		return channel;

src/lib/utils/Gun/SEA/SEA.ts

@@ -21,4 +21,4 @@ export class ExperimentalSEA {
 
 		throw new Error('Unable to decrypt data');
 	}
-}
+}

src/routes/chat/components/chat/index.tsx

@@ -33,7 +33,7 @@ export default function Chat() {
 						const txt = textarea.current;
 
 						const val = txt.value as string;
-						txt.value = "";
+						txt.value = '';
 
 						if (msg) {
 							msg.channel?.send(val);