Merge branch 'main' of https://github.com/dchat-app/dchat-app.github.io

package.json

@@ -12,11 +12,13 @@
 	"dependencies": {
 		"@monaco-editor/react": "^4.6.0",
 		"@radix-ui/react-avatar": "^1.1.0",
+		"@radix-ui/react-checkbox": "^1.1.2",
 		"@radix-ui/react-context-menu": "^2.2.1",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-dropdown-menu": "^2.1.1",
 		"@radix-ui/react-label": "^2.1.0",
 		"@radix-ui/react-navigation-menu": "^1.2.0",
+		"@radix-ui/react-popover": "^1.1.2",
 		"@radix-ui/react-progress": "^1.1.0",
 		"@radix-ui/react-separator": "^1.1.0",
 		"@radix-ui/react-slot": "^1.1.0",
@@ -44,6 +46,7 @@
 		"@rsbuild/core": "^1.0.1",
 		"@rsbuild/plugin-babel": "^1.0.1",
 		"@rsbuild/plugin-react": "^1.0.1",
+		"@tauri-apps/api": "^1.6.0",
 		"@types/gun": "^0.9.6",
 		"@types/react": "npm:types-react@rc",
 		"@types/react-dom": "npm:types-react-dom@rc",

rsbuild.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
 	},
 	tools: {
 		rspack: {
-			ignoreWarnings: [/Critical/g, /parse/g, /dependency/g],
+			ignoreWarnings: [/Critical/g, /Module parse warning:/g, /dependency/g],
 		},
 	},
 });

src/components/nav/login.tsx

@@ -11,6 +11,10 @@ import { useMainUser, UserContextValues } from '@/hooks/user/useMainUser';
 import { Alert, AlertDescription, AlertTitle } from '../ui/alert';
 import { AlertCircle } from 'lucide-react';
 import { ResponsiveDialog } from '../customDialog';
+import { isTauri } from '@/routes/chat/isTauri';
+import { Checkbox } from '../ui/checkbox';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { IoWarningOutline } from 'react-icons/io5';
 
 export function Login({
 	open,
@@ -47,10 +51,11 @@ export function Login({
 	);
 }
 
-function ProfileForm({ className, val }: { className: string; val: string }) {
+export function ProfileForm({ className, val }: { className: string; val: string }) {
 	const user = useMainUser() as UserContextValues;
 
 	const [err, setErr] = React.useState('');
+	const [remember, setRemember] = React.useState(isTauri);
 
 	React.useEffect(() => setErr(''), [val]);
 
@@ -69,6 +74,12 @@ function ProfileForm({ className, val }: { className: string; val: string }) {
 					try {
 						await user.account.login(username, password);
 
+						if (remember) {
+							// TODO: Add some basic encryption later on
+							localStorage.setItem("username", username);
+							localStorage.setItem("password", password);
+						}
+
 						// eslint-disable-next-line @typescript-eslint/no-explicit-any
 					} catch (e: any) {
 						console.log(e);
@@ -88,7 +99,7 @@ function ProfileForm({ className, val }: { className: string; val: string }) {
 				}
 			});
 		},
-		[val, user.account],
+		[val, user.account, remember],
 	);
 
 	return (
@@ -130,6 +141,29 @@ function ProfileForm({ className, val }: { className: string; val: string }) {
 					autoComplete="current-password"
 				/>
 			</div>
+
+			{
+				isTauri && val == "0" &&
+				<div className="flex items-center space-x-2">
+					<Checkbox id="terms" checked={remember} disabled={isPending} onClick={() => setRemember((r) => !r)} />
+					<label
+						htmlFor="terms"
+						className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex space-x-1"
+					>
+						Save Credentials
+						<Tooltip>
+							<TooltipTrigger type="button">
+								<IoWarningOutline className='ml-1 w-4 h-4 text-yellow-600' />
+							</TooltipTrigger>
+
+							<TooltipContent>
+								<p className='w-[30ch]'>The username and password will be stored as plain text, which can be read by anyone with access to your user account.</p>
+							</TooltipContent>
+						</Tooltip>
+					</label>
+				</div>
+			}
+
 			<Button type="submit" disabled={isPending}>
 				{val == '0' ? 'Login' : 'Sign Up'}
 			</Button>

src/components/ui/checkbox.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { Check } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

src/components/ui/popover.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

src/hooks/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-
+import { TooltipProvider } from '@/components/ui/tooltip';
 import { Loading } from './loading';
 import NotFound from './404';
 
@@ -26,6 +26,7 @@ const delay = (ms: number) => new Promise((r) => setTimeout(() => r(null), ms));
 
 const callbacks: ((data: { pathname: string; query: string }) => void)[] = [];
 
+
 export function usePage() {
 	const [page, setPage] = useState(<Loading />);
 	const [pathname, setPathname] = useState(window.location.pathname);
@@ -64,7 +65,9 @@ export function usePage() {
 		})();
 	}, [pathname, cache]);
 
-	return page;
+	return <TooltipProvider>
+		{page}
+	</TooltipProvider>;
 }
 
 export interface PageData {

src/hooks/loading.tsx

@@ -1,6 +1,7 @@
 import NavigationBar from '@/components/nav';
 
 import { cn } from '@/lib/utils';
+import { isTauri } from '@/routes/chat/isTauri';
 
 export const LoadingSpinner = ({ className }: { className?: string }) => (
 	<svg
@@ -22,10 +23,14 @@ export const LoadingSpinner = ({ className }: { className?: string }) => (
 export function Loading() {
 	return (
 		<div className="w-full">
-			<NavigationBar />
+			{isTauri ? <></> : <NavigationBar />}
 
-			<div className="h-[calc(100vh-6rem)] flex items-center text-center justify-center">
-				<LoadingSpinner className="w-[15vh] h-[15vh]" />
+			<div className={`${isTauri ? "h-screen" : "h-[calc(100vh-6rem)]"} flex items-center text-center justify-center`}>
+				{isTauri ?
+					<img src="/favicon.png" className='rounded-full w-32 h-32' />
+					:
+					<LoadingSpinner className="w-[15vh] h-[15vh]" />
+				}
 			</div>
 		</div>
 	);

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

@@ -4,7 +4,7 @@ import { IGunInstance, ISEAPair } from 'gun';
 import { type GunUserInstance } from '../../useMainUser';
 import { createAvatar } from '@/lib/utils/Avatar/createAvatar';
 import { PeerUser } from '../Base/PeerUser';
-import { getPeerCache } from '@/lib/Structs/Cache/PeerCache';
+import { getPeerCache } from '@/lib/structs/cache/PeerCache';
 import { Util } from '@/lib/utils/Utils/Util';
 
 type ClientUserOptions = {

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 '@/lib/Structs/Cache/Cache';
+import { Cache } from '@/lib/structs/cache/cache';
 
 class PeerCache extends Cache<PeerUser> {
 	constructor() {

src/lib/Structs/DMChannel/DMChannel.ts

@@ -4,7 +4,7 @@ import { formatDataStores } from '@/lib/Constants';
 import { Util } from '@/lib/utils/Utils/Util';
 import type { IGunInstance } from 'gun';
 import { Message, type MessageStructure } from '@/lib/Structs/Message/Message';
-import { getPeerCache } from '@/lib/Structs/Cache/PeerCache';
+import { getPeerCache } from '@/lib/structs/cache/PeerCache';
 
 export class DMChannel {
 	client: ClientUser;

src/lib/Structs/Message/Message.ts

@@ -1,4 +1,4 @@
-import { getPeerCache } from '@/lib/Structs/Cache/PeerCache';
+import { getPeerCache } from '@/lib/structs/cache/PeerCache';
 
 export type MessageStructure = {
 	content: string;

src/routes/chat/components/chat/commmand.tsx

@@ -11,12 +11,14 @@ import { ClientUser } from '@/hooks/user/helpers/User/ClientUser';
 import { useMainUser, UserContextValues } from '@/hooks/user/useMainUser';
 import { LogOut } from 'lucide-react';
 import { useEffect, useState } from 'react';
+import { useChats } from '../../chatsProvider';
+import { navigate } from '@/hooks';
 
-function Entry({ user }: { user: PeerUser | ClientUser }) {
+function Entry({ user, you = false, onClick }: { user: PeerUser | ClientUser, you?: boolean, onClick: () => void }) {
 	return (
-		<CommandItem>
-			<img src={user.info?.avatar} className="w-4 h-4 mr-2 rounded-full" />
-			<span>{user.info?.displayName || user.info?.username}</span>
+		<CommandItem onSelect={onClick}>
+			<img src={user.info?.avatar} className="w-6 h-6 mr-2 rounded-full" />
+			<span>{user.info?.displayName || user.info?.username || "Unknown"} {you && '(You)'}</span>
 		</CommandItem>
 	);
 }
@@ -25,6 +27,8 @@ export default function CommandBar() {
 	const { account, userInfo } = useMainUser() as UserContextValues;
 	const [open, setOpen] = useState(false);
 
+	const { friends } = useChats();
+
 	useEffect(() => {
 		window.addEventListener('keydown', (e) => {
 			if ((e.metaKey || e.ctrlKey) && e.key == 'k') {
@@ -43,10 +47,20 @@ export default function CommandBar() {
 				<CommandEmpty>No results found.</CommandEmpty>
 
 				<CommandGroup heading="Friends">
-					<Entry user={userInfo as ClientUser} />
+					<Entry user={userInfo as ClientUser} you onClick={() => {
+						navigate(`/?room=${userInfo?.info?.username}`);
+						setOpen(false);
+					}} />
+
+					{friends.map((friend) =>
+						<Entry user={friend} key={`fri-${friend.pub}`} onClick={() => {
+							navigate(`/?room=${friend.info?.username}`);
+							setOpen(false);
+						}} />
+					)}
 				</CommandGroup>
 
-				<CommandGroup heading="Settings">
+				<CommandGroup heading="Settings" className='mb-2'>
 					<CommandItem
 						accessKey="logout"
 						onSelect={() => {