aslan/pulsar-web
SHA256
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added end to end encryption

Browse source
This commit is contained in:
Aslan 2026-01-13 17:33:23 -05:00
parent 9153ba841d
commit 575e9e2010
131 changed files with 2289 additions and 1670 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Community/Community.tsx
View file

@ -8,7 +8,7 @@ const Community: Component<ICommunityProps> = (props: ICommunityProps) => {
onClick={() => props.onCommunityClick?.(props.id)}
>
<div
class={`w-full transition-[border-radius] duration-300 outline-stone-300 ${props.active ? "rounded-lg outline-3 hover:outline-3" : "rounded-4xl hover:outline-2"}`}
class={`w-full transition-all duration-300 hover:outline-stone-300 ${props.active ? "rounded-lg outline-3 outline-stone-300 hover:outline-3" : "outline-transparent rounded-4xl outline-2"}`}
>
<img src={props.avatar} />
</div>

37
src/components/CommunityBar/CommunityBar.tsx
View file

@ -1,10 +1,36 @@
import type { Component } from "solid-js";
import { type Component, type JSXElement } from "solid-js";
import { ICommunityBarProps } from "./types";
import { SettingsIcon } from "../icons";
import { SettingsIcon } from "../../icons";
import { state } from "../../store/state";
const CommunityBar: Component<ICommunityBarProps> = (
props: ICommunityBarProps,
) => {
const settingsIconHtml = (): JSXElement | undefined => {
const activeCommunityId = state.community.active;
if (!activeCommunityId) {
return undefined;
}
const community = state.community.communities[activeCommunityId];
if (!community) {
return undefined;
}
if (false) {
return undefined;
}
return (
<div
class="bg-stone-950/25 cursor-pointer rounded-full w-10 h-10 p-2 hover:bg-stone-950/75 transition-transform duration-300 hover:rotate-30"
onClick={props.onSettingsClick}
>
<SettingsIcon />
</div>
);
};
return (
<div
class={`absolute w-full top-0 z-10 bg-cover bg-top bg-no-repeat bg-[url('${props.avatar}')]`}
@ -14,12 +40,7 @@ const CommunityBar: Component<ICommunityBarProps> = (
<h2 class="text-sm font-bold">{props.name}</h2>
<p class="text-xs">{props.description}</p>
</div>
<div
class="bg-stone-950/25 cursor-pointer rounded-full w-10 h-10 p-2 hover:bg-stone-950/75"
onClick={props.onSettingsClick}
>
<SettingsIcon />
</div>
{settingsIconHtml()}
</div>
</div>
);

119
src/components/CommunityModal/CommunityModal.tsx
View file

@ -1,119 +0,0 @@
import { createSignal, type Component } from "solid-js";
import { ICommunityModalProps } from "./types";
import { dispatch } from "../../store/state";
import { CommunityActionTypes } from "../../store/community";
import { InviteActionTypes } from "../../store/invite";
const CommunityModal: Component<ICommunityModalProps> = (props) => {
const [getCommunityName, setCommunityName] = createSignal("");
const [getInviteId, setInviteId] = createSignal("");
const onCreateCommunity = () => {
const communityName = getCommunityName();
if (!communityName || communityName.trim().length < 1) {
return;
}
dispatch({
type: CommunityActionTypes.CREATE_COMMUNITY_START,
payload: {
name: communityName,
},
});
setCommunityName("");
props.onClose?.();
};
const onJoinCommunity = () => {
const inviteId = getInviteId();
if (!inviteId || inviteId.trim().length < 1) {
return;
}
dispatch({
type: InviteActionTypes.ACCEPT_INVITE_START,
payload: inviteId,
});
setInviteId("");
props.onClose?.();
};
const handleEnter = (e: KeyboardEvent, callback: () => void) => {
if (e.key === "Enter") {
callback();
}
};
const createCommunityHtml = () => (
<>
<h3 class="text-lg font-bold text-center mb-6">
Create a new Community
</h3>
<div class="bg-stone-800 h-16 p-2 flex flex-row gap-2 rounded-2xl">
<label class="bg-stone-800 input w-full h-full rounded-xl focus:border-none outline-none">
<input
type="text"
placeholder="Enter name of the new community"
value={getCommunityName()}
onInput={(e) => setCommunityName(e.currentTarget.value)}
onKeyDown={(e) => handleEnter(e, onCreateCommunity)}
/>
</label>
<button
class="bg-stone-950 btn btn-neutral h-full rounded-xl"
onClick={onCreateCommunity}
>
Create
</button>
</div>
</>
);
const joinCommunityHtml = () => (
<>
<h3 class="text-lg font-bold text-center mb-6">
Join an existing Community
</h3>
<div class="bg-stone-800 h-16 p-2 flex flex-row gap-2 rounded-2xl">
<label class="bg-stone-800 input w-full h-full rounded-xl focus:border-none outline-none">
<input
type="text"
placeholder="Enter invite ID"
value={getInviteId()}
onInput={(e) => setInviteId(e.currentTarget.value)}
onKeyDown={(e) => handleEnter(e, onJoinCommunity)}
/>
</label>
<button
class="bg-stone-950 btn btn-neutral h-full rounded-xl"
onClick={onJoinCommunity}
>
Join
</button>
</div>
</>
);
return (
<div>
<dialog ref={props.dialogRef} class="modal bg-[#00000050]">
<div class="modal-box bg-stone-950 rounded-3xl">
{createCommunityHtml()}
<div class="divider my-8"></div>
{joinCommunityHtml()}
</div>
<form
onClick={props.onClose}
method="dialog"
class="modal-backdrop"
></form>
</dialog>
</div>
);
};
export default CommunityModal;

2
src/components/CommunityModal/index.ts
View file

@ -1,2 +0,0 @@
export * from "./CommunityModal";
export * from "./types";

6
src/components/CommunityModal/types.ts
View file

@ -1,6 +0,0 @@
interface ICommunityModalProps {
dialogRef?: (element: HTMLDialogElement) => void;
onClose?: () => void;
}
export { type ICommunityModalProps };

26
src/components/CommunitySettingsModal/CommunitySettingsModal.tsx
View file

@ -1,26 +0,0 @@
import type { Component } from "solid-js";
import { ICommunitySettingsModalProps } from "./types";
const CommunitySettingsModal: Component<ICommunitySettingsModalProps> = (
props,
) => {
return (
<div>
<dialog ref={props.dialogRef} class="modal bg-[#00000050]">
<div class="modal-box bg-stone-950 rounded-3xl">
<h3 class="text-lg font-bold text-center">
Community Settings
</h3>
<p class="py-4 text-center">Not implemented yet</p>
</div>
<form
onClick={props.onClose}
method="dialog"
class="modal-backdrop"
></form>
</dialog>
</div>
);
};
export default CommunitySettingsModal;

2
src/components/CommunitySettingsModal/index.ts
View file

@ -1,2 +0,0 @@
export * from "./CommunitySettingsModal";
export * from "./types";

6
src/components/CommunitySettingsModal/types.ts
View file

@ -1,6 +0,0 @@
interface ICommunitySettingsModalProps {
dialogRef?: (element: HTMLDialogElement) => void;
onClose?: () => void;
}
export { type ICommunitySettingsModalProps };

2
src/components/HomeCard/HomeCard.tsx
View file

@ -5,7 +5,7 @@ import { Dynamic } from "solid-js/web";
const HomeCard: Component<IHomeCardProps> = (props: IHomeCardProps) => {
return (
<a class="w-60 cursor-pointer" onClick={props.onClick}>
<div class="card border-2 bg-stone-800 border-stone-500 hover:border-stone-100 w-60 h-60">
<div class="card outline-2 bg-stone-800 outline-stone-500 hover:outline-stone-100 w-60 h-60">
<div class="flex flex-col h-full gap-1 m-6">
<div class="w-20">
<Dynamic component={props.icon} />

2
src/components/HomeCard/types.ts
View file

@ -1,5 +1,5 @@
import { JSXElement } from "solid-js";
import { IconParameters } from "../icons";
import { IconParameters } from "../../icons";
interface IHomeCardProps {
title: string;

40
src/components/Input/Input.tsx Normal file
View file

@ -0,0 +1,40 @@
import { type Component, type JSXElement } from "solid-js";
import { IInputProps } from "./types";
const Input: Component<IInputProps> = (props: IInputProps) => {
const handleEnter = (e: KeyboardEvent) => {
if (e.key === "Enter") {
props.onSubmit?.();
}
};
const submitHtml = (): JSXElement => (
<button
class={`bg-stone-950 btn btn-neutral h-full ${props.rounded ? "rounded-full" : "rounded-xl"}`}
onClick={props.onSubmit}
>
{props.submitText}
</button>
);
return (
<div
class={`bg-stone-800 h-16 p-2 flex flex-row gap-2 ${props.rounded ? "rounded-full" : "rounded-2xl"} ${props.outline ? "outline-2" : ""}`}
>
<label
class={`bg-stone-800 input px-5 w-full h-full focus:border-none outline-none ${props.rounded ? "rounded-full" : "rounded-xl"}`}
>
<input
type={props.type ? props.type : "text"}
placeholder={props.placeholder}
value={props.value}
onInput={(e) => props.onChange?.(e.currentTarget.value)}
onKeyDown={handleEnter}
/>
</label>
{props.submitText ? submitHtml() : undefined}
</div>
);
};
export { Input };

2
src/components/Input/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./Input";
export * from "./types";

12
src/components/Input/types.ts Normal file
View file

@ -0,0 +1,12 @@
interface IInputProps {
value: string;
type?: "text" | "password" | "email";
outline?: boolean;
rounded?: boolean;
placeholder?: string;
submitText?: string;
onChange?: (value: string) => void;
onSubmit?: () => void;
}
export { type IInputProps };

10
src/components/Message/Message.tsx
View file

@ -13,8 +13,14 @@ const Message: Component<IMessageProps> = (props: IMessageProps) => {
</div>
</div>
<div>
<div>{props.username}</div>
<p class="list-col-wrap text-xs">{props.message}</p>
<div class="font-bold">{props.username}</div>
{props.decryptionStatus ? (
<p class="list-col-wrap text-xs">{props.message}</p>
) : (
<p class="list-col-wrap text-xs italic">
Decryption failed
</p>
)}
</div>
</li>
);

1
src/components/Message/types.ts
View file

@ -4,6 +4,7 @@ interface IMessageProps {
userId: string;
username: string;
avatar: string;
decryptionStatus: boolean;
onProfileClick?: (userId: string) => void;
}

7
src/components/MessageBar/MessageBar.tsx
View file

@ -1,5 +1,6 @@
import type { Component } from "solid-js";
import { IMessageBarProps } from "./types";
import { UpIcon } from "../../icons";
const MessageBar: Component<IMessageBarProps> = (props: IMessageBarProps) => {
const handleEnter = (e: KeyboardEvent) => {
@ -23,10 +24,12 @@ const MessageBar: Component<IMessageBarProps> = (props: IMessageBarProps) => {
/>
</label>
<button
class="bg-stone-950/50 backdrop-blur-lg btn btn-neutral h-full rounded-full"
class="bg-stone-950/50 backdrop-blur-lg btn btn-neutral w-12 p-0 h-full rounded-full"
onClick={props.onSend}
>
Send
<div class="w-5">
<UpIcon />
</div>
</button>
</div>
</div>

64
src/components/RichSettingsItem/RichSettingsItem.tsx Normal file
View file

@ -0,0 +1,64 @@
import type { Component, JSXElement } from "solid-js";
import { IRichSettingsItemProps } from "./types";
import { Dynamic } from "solid-js/web";
const RichSettingsItem: Component<IRichSettingsItemProps> = (
props: IRichSettingsItemProps,
) => {
const pictureHtml = (): JSXElement => {
if (props.avatar) {
return (
<div class="avatar">
<div class="w-12 rounded-lg">
<img src={props.avatar} />
</div>
</div>
);
}
if (props.icon) {
return (
<div
class={`bg-stone-700 w-12 rounded-lg p-${props.iconPadding ? props.iconPadding : 1}`}
>
<Dynamic component={props.icon} />
</div>
);
}
return undefined;
};
const infoHtml = (): JSXElement | undefined => {
if (!props.info) {
return undefined;
}
return (
<>
<div class="flex-1"></div>
<div class="badge badge-primary badge-outline p-4 mr-11">
{props.info}
</div>
</>
);
};
return (
<div
class={`collapse collapse-arrow rounded-xl transition-all border-2 border-stone-700 ${props.active ? "bg-stone-700 hover:bg-stone-700" : "bg-stone-900 hover:bg-stone-800"}`}
>
<input type="checkbox" />
<div class="collapse-title font-semibold flex flex-row items-center gap-4 p-1">
{pictureHtml()}
{props.title}
{infoHtml()}
</div>
<div class="collapse-content text-sm font-semibold">
<div class="mt-2">{props.children}</div>
</div>
</div>
);
};
export { RichSettingsItem };

2
src/components/RichSettingsItem/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./RichSettingsItem";
export * from "./types";

17
src/components/RichSettingsItem/types.ts Normal file
View file

@ -0,0 +1,17 @@
import { JSXElement } from "solid-js";
import { IconParameters } from "../../icons";
interface IRichSettingsItemProps {
id: string;
title: string;
text?: string;
info?: string;
avatar?: string;
icon?: (props: IconParameters) => JSXElement;
iconPadding?: number;
active: boolean;
children?: JSXElement;
onClick?: (id: string) => void;
}
export { type IRichSettingsItemProps };

17
src/components/SettingsItem/SettingsItem.tsx Normal file
View file

@ -0,0 +1,17 @@
import type { Component } from "solid-js";
import { ISettingsItemProps } from "./types";
const SettingsItem: Component<ISettingsItemProps> = (
props: ISettingsItemProps,
) => {
return (
<div
class={`w-48 py-2 cursor-pointer rounded-xl text-center text-md font-semibold transition-all border-2 border-stone-700 ${props.active ? "bg-stone-700 hover:bg-stone-700" : "bg-stone-900 hover:bg-stone-800"}`}
onClick={() => props.onClick?.(props.id)}
>
{props.text}
</div>
);
};
export { SettingsItem };

2
src/components/SettingsItem/index.ts Normal file
View file

@ -0,0 +1,2 @@
export * from "./SettingsItem";
export * from "./types";

8
src/components/SettingsItem/types.ts Normal file
View file

@ -0,0 +1,8 @@
interface ISettingsItemProps {
id: string;
text: string;
active: boolean;
onClick?: (id: string) => void;
}
export { type ISettingsItemProps };

22
src/components/SettingsModal/SettingsModal.tsx
View file

@ -1,22 +0,0 @@
import type { Component } from "solid-js";
import { ISettingsModalProps } from "./types";
const SettingsModal: Component<ISettingsModalProps> = (props) => {
return (
<div>
<dialog ref={props.dialogRef} class="modal bg-[#00000050]">
<div class="modal-box bg-stone-950 rounded-3xl">
<h3 class="text-lg font-bold text-center">Settings</h3>
<p class="py-4 text-center">Not implemented yet</p>
</div>
<form
onClick={props.onClose}
method="dialog"
class="modal-backdrop"
></form>
</dialog>
</div>
);
};
export default SettingsModal;

2
src/components/SettingsModal/index.ts
View file

@ -1,2 +0,0 @@
export * from "./SettingsModal";
export * from "./types";

6
src/components/SettingsModal/types.ts
View file

@ -1,6 +0,0 @@
interface ISettingsModalProps {
dialogRef?: (element: HTMLDialogElement) => void;
onClose?: () => void;
}
export { type ISettingsModalProps };

13
src/components/SidebarItem/SidebarItem.tsx
View file

@ -5,9 +5,20 @@ import { Dynamic } from "solid-js/web";
const SidebarItem: Component<ISidebarItemProps> = (
props: ISidebarItemProps,
) => {
const rotateCss = (): string => {
switch (props.hoverRotate) {
case 30:
return "hover:rotate-30";
case 45:
return "hover:rotate-45";
}
return "";
};
return (
<div
class={`bg-stone-800 w-full p-2 cursor-pointer transition-[border-radius] duration-300 outline-stone-300 ${props.active ? "rounded-lg outline-3 hover:outline-3" : "rounded-4xl hover:outline-2"}`}
class={`bg-stone-800 w-full p-2 cursor-pointer transition-all duration-300 ${rotateCss()} hover:outline-stone-300 ${props.active ? "rounded-lg outline-3 outline-stone-300 hover:outline-3" : "outline-transparent rounded-4xl outline-2"}`}
onClick={() => props.onClick?.()}
>
<Dynamic component={props.icon} />

3
src/components/SidebarItem/types.ts
View file

@ -1,9 +1,10 @@
import { JSXElement } from "solid-js";
import { IconParameters } from "../icons";
import { IconParameters } from "../../icons";
interface ISidebarItemProps {
icon: (props: IconParameters) => JSXElement;
active: boolean;
hoverRotate?: 30 | 45;
onClick?: () => void;
}

28
src/components/icons/HomeIcon.tsx
View file

@ -1,28 +0,0 @@
import type { Component } from "solid-js";
import { IconParameters, defaultFillIconParameters as defaults } from "./types";
const HomeIcon: Component<IconParameters> = ({
width,
height,
fill = defaults.fill,
stroke = defaults.stroke,
strokeWidth = defaults.strokeWidth,
}: IconParameters) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
fill={fill}
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke={stroke}
>
<path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
<path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
</svg>
);
};
export default HomeIcon;

31
src/components/icons/PlusIcon.tsx
View file

@ -1,31 +0,0 @@
import type { Component } from "solid-js";
import { IconParameters, defaultFillIconParameters as defaults } from "./types";
const PlusIcon: Component<IconParameters> = ({
width,
height,
fill = defaults.fill,
stroke = defaults.stroke,
strokeWidth = defaults.strokeWidth,
}: IconParameters) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
fill={fill}
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke={stroke}
>
<path
fill-rule="evenodd"
d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
clip-rule="evenodd"
/>
</svg>
);
};
export default PlusIcon;

31
src/components/icons/SettingsIcon.tsx
View file

@ -1,31 +0,0 @@
import type { Component } from "solid-js";
import { IconParameters, defaultFillIconParameters as defaults } from "./types";
const SettingsIcon: Component<IconParameters> = ({
width,
height,
fill = defaults.fill,
stroke = defaults.stroke,
strokeWidth = defaults.strokeWidth,
}: IconParameters) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width={width}
height={height}
fill={fill}
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke={stroke}
>
<path
fill-rule="evenodd"
d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z"
clip-rule="evenodd"
/>
</svg>
);
};
export default SettingsIcon;

7
src/components/icons/index.ts
View file

@ -1,7 +0,0 @@
import HomeIcon from "./HomeIcon";
import SettingsIcon from "./SettingsIcon";
import PlusIcon from "./PlusIcon";
import type { IconParameters } from "./types";
export { IconParameters, HomeIcon, SettingsIcon, PlusIcon };

26
src/components/icons/types.ts
View file

@ -1,26 +0,0 @@
interface IconParameters {
width?: number
height?: number
fill?: string
stroke?: string
strokeWidth?: number
}
const defaultFillIconParameters: IconParameters = {
width: 24,
height: 24,
fill: 'currentColor',
stroke: 'none',
strokeWidth: 0,
}
const defaultStrokeIconParameters: IconParameters = {
width: 24,
height: 24,
fill: 'none',
stroke: 'currentColor',
strokeWidth: 1.5,
}
export type { IconParameters }
export { defaultFillIconParameters, defaultStrokeIconParameters }