diff --git a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
index 2bbf39e7..ac5317a2 100644
--- a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
+++ b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
@@ -1,6 +1,6 @@
{name}
- {verified && (
-
- {name}
+ {verified && (
+
+ => {
- closeMenu();
- await navigator.clipboard.writeText(`${siteURL}/user/${username}`);
- toast.success('Copied to clipboard');
- };
+ const handleCopy = (closeMenu: () => void) => async (): Promise => {
+ closeMenu();
+ await navigator.clipboard.writeText(`${siteURL}/user/${username}`);
+ toast.success('Copied to clipboard');
+ };
- return (
-
- {({ open, close }): JSX.Element => (
- <>
-
+ {({ open, close }): JSX.Element => (
+ <>
+
-
-
- {open && (
-
+
+
+ {open && (
+
-
-
-
+ as={motion.div}
+ {...variants}
+ static
+ >
+
+
+
+ )}
+
+
)}
-
-
- )}
-
- );
+
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-tooltip.tsx b/platforms/blabsy/src/components/user/user-tooltip.tsx
index 0321d297..80ae0efb 100644
--- a/platforms/blabsy/src/components/user/user-tooltip.tsx
+++ b/platforms/blabsy/src/components/user/user-tooltip.tsx
@@ -11,128 +11,131 @@ import type { ReactNode } from 'react';
import type { User } from '@lib/types/user';
type UserTooltipProps = Pick<
- User,
- | 'id'
- | 'bio'
- | 'name'
- | 'verified'
- | 'username'
- | 'photoURL'
- | 'following'
- | 'followers'
- | 'coverPhotoURL'
+ User,
+ | 'id'
+ | 'bio'
+ | 'name'
+ | 'verified'
+ | 'username'
+ | 'photoURL'
+ | 'following'
+ | 'followers'
+ | 'coverPhotoURL'
> & {
- modal?: boolean;
- avatar?: boolean;
- children: ReactNode;
+ modal?: boolean;
+ avatar?: boolean;
+ children: ReactNode;
};
type Stats = [string, string, number];
export function UserTooltip({
- id,
- bio,
- name,
- modal,
- avatar,
- verified,
- children,
- photoURL,
- username,
- following,
- followers,
- coverPhotoURL
+ id,
+ bio,
+ name,
+ modal,
+ avatar,
+ verified,
+ children,
+ photoURL,
+ username,
+ following,
+ followers,
+ coverPhotoURL
}: UserTooltipProps): JSX.Element {
- const { isMobile } = useWindow();
+ const { isMobile } = useWindow();
- if (isMobile || modal) return <>{children};
+ if (isMobile || modal) return <>{children};
- const userLink = `/user/${username}`;
+ const userLink = `/user/${username}`;
- const allStats: Readonly = [
- ['following', 'Following', following.length],
- ['followers', 'Followers', followers.length]
- ];
+ const allStats: Readonly = [
+ ['following', 'Following', following.length],
+ ['followers', 'Followers', followers.length]
+ ];
- return (
- ;
+ parentId: string;
+ viewTweetRef: RefObject;
};
export function ViewParentTweet({
- parentId,
- viewTweetRef
+ parentId,
+ viewTweetRef
}: ViewParentTweetProps): JSX.Element | null {
- const { data, loading } = useDocument(doc(tweetsCollection, parentId), {
- includeUser: true,
- allowNull: true
- });
+ const { data, loading } = useDocument(doc(tweetsCollection, parentId), {
+ includeUser: true,
+ allowNull: true
+ });
- useEffect(() => {
- if (!loading) viewTweetRef.current?.scrollIntoView();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [data?.id, loading]);
+ useEffect(() => {
+ if (!loading) viewTweetRef.current?.scrollIntoView();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [data?.id, loading]);
- if (loading) return null;
- if (!data)
- return (
-
+ );
- return
parsed: any;
};
};
@@ -62,7 +63,11 @@ export class VaultController {
/**
* Set the profile creation status
*/
- set profileCreationStatus(status: "idle" | "loading" | "success" | "failed") {
+ set profileCreationStatus(status:
+ | "idle"
+ | "loading"
+ | "success"
+ | "failed") {
this.#profileCreationStatus = status;
}
@@ -76,20 +81,23 @@ export class VaultController {
}
this.profileCreationStatus = "loading";
-
+
try {
const userData = await this.#userController.user;
const displayName = userData?.name || vault.ename;
-
+
await this.createUserProfileInEVault(
vault.ename,
displayName,
- vault.ename
+ vault.ename,
);
-
+
this.profileCreationStatus = "success";
} catch (error) {
- console.error("Failed to create UserProfile in eVault (retry):", error);
+ console.error(
+ "Failed to create UserProfile in eVault (retry):",
+ error,
+ );
this.profileCreationStatus = "failed";
throw error;
}
@@ -101,7 +109,7 @@ export class VaultController {
private async resolveEndpoint(w3id: string): Promise {
try {
const response = await axios.get(
- new URL(`resolve?w3id=${w3id}`, PUBLIC_REGISTRY_URL).toString()
+ new URL(`resolve?w3id=${w3id}`, PUBLIC_REGISTRY_URL).toString(),
);
return new URL("/graphql", response.data.uri).toString();
} catch (error) {
@@ -128,10 +136,10 @@ export class VaultController {
ename: string,
displayName: string,
w3id: string,
- maxRetries: number = 10
+ maxRetries = 10,
): Promise {
- console.log("attempting")
- const username = ename.replace('@', '');
+ console.log("attempting");
+ const username = ename.replace("@", "");
const now = new Date().toISOString();
const userProfile: UserProfile = {
@@ -145,14 +153,16 @@ export class VaultController {
isPrivate: false,
createdAt: now,
updatedAt: now,
- isArchived: false
+ isArchived: false,
};
for (let attempt = 1; attempt <= maxRetries; attempt++) {
try {
const client = await this.ensureClient(w3id);
- console.log(`Attempting to create UserProfile in eVault (attempt ${attempt}/${maxRetries})`);
+ console.log(
+ `Attempting to create UserProfile in eVault (attempt ${attempt}/${maxRetries})`,
+ );
const response = await client.request(
STORE_META_ENVELOPE,
@@ -162,57 +172,64 @@ export class VaultController {
payload: userProfile,
acl: ["*"],
},
- }
+ },
);
- console.log("UserProfile created successfully in eVault:", response.storeMetaEnvelope.metaEnvelope.id);
+ console.log(
+ "UserProfile created successfully in eVault:",
+ response.storeMetaEnvelope.metaEnvelope.id,
+ );
return;
} catch (error) {
- console.error(`Failed to create UserProfile in eVault (attempt ${attempt}/${maxRetries}):`, error);
+ console.error(
+ `Failed to create UserProfile in eVault (attempt ${attempt}/${maxRetries}):`,
+ error,
+ );
if (attempt === maxRetries) {
- console.error("Max retries reached, giving up on UserProfile creation");
+ console.error(
+ "Max retries reached, giving up on UserProfile creation",
+ );
throw error;
}
// Wait before retrying (exponential backoff)
- const delay = Math.min(1000 * Math.pow(2, attempt - 1), 10000);
+ const delay = Math.min(1000 * 2 ** (attempt - 1), 10000);
console.log(`Waiting ${delay}ms before retry...`);
- await new Promise(resolve => setTimeout(resolve, delay));
+ await new Promise((resolve) => setTimeout(resolve, delay));
}
}
}
- set vault(
- vault:
- | Promise | undefined>
- | Record
- | undefined,
- ) {
- if (vault instanceof Promise) {
+ set vault(vault:
+ | Promise | undefined>
+ | Record
+ | undefined) {
+ if (vault instanceof Promise)
vault
.then(async (resolvedUser) => {
if (resolvedUser?.ename) {
this.#store.set("vault", resolvedUser);
-
// Set loading status
this.profileCreationStatus = "loading";
-
// Get user data for display name
const userData = await this.#userController.user;
- const displayName = userData?.name || resolvedUser.ename;
-
+ const displayName =
+ userData?.name || resolvedUser?.ename;
+
try {
await this.createUserProfileInEVault(
- resolvedUser.ename,
- displayName,
- resolvedUser.ename
+ resolvedUser?.ename as string,
+ displayName as string,
+ resolvedUser?.ename as string,
);
this.profileCreationStatus = "success";
} catch (error) {
- console.error("Failed to create UserProfile in eVault:", error);
+ console.error(
+ "Failed to create UserProfile in eVault:",
+ error,
+ );
this.profileCreationStatus = "failed";
- // Don't throw here to avoid breaking the vault setting
}
}
})
@@ -220,42 +237,46 @@ export class VaultController {
console.error("Failed to set vault:", error);
this.profileCreationStatus = "failed";
});
- } else {
- if (vault?.ename) {
- this.#store.set("vault", vault);
-
- // Set loading status
- this.profileCreationStatus = "loading";
-
- // Get user data for display name and create UserProfile
- (async () => {
+ else if (vault?.ename) {
+ this.#store.set("vault", vault);
+
+ // Set loading status
+ this.profileCreationStatus = "loading";
+
+ // Get user data for display name and create UserProfile
+ (async () => {
+ try {
+ const userData = await this.#userController.user;
+ const displayName = userData?.name || vault.ename;
+
+ await this.createUserProfileInEVault(
+ vault.ename,
+ displayName,
+ vault.ename,
+ );
+ this.profileCreationStatus = "success";
+ } catch (error) {
+ console.error(
+ "Failed to get user data or create UserProfile:",
+ error,
+ );
+ // Fallback to using ename as display name
try {
- const userData = await this.#userController.user;
- const displayName = userData?.name || vault.ename;
-
await this.createUserProfileInEVault(
vault.ename,
- displayName,
- vault.ename
+ vault.ename,
+ vault.ename,
);
this.profileCreationStatus = "success";
- } catch (error) {
- console.error("Failed to get user data or create UserProfile:", error);
- // Fallback to using ename as display name
- try {
- await this.createUserProfileInEVault(
- vault.ename,
- vault.ename,
- vault.ename
- );
- this.profileCreationStatus = "success";
- } catch (fallbackError) {
- console.error("Failed to create UserProfile in eVault (fallback):", fallbackError);
- this.profileCreationStatus = "failed";
- }
+ } catch (fallbackError) {
+ console.error(
+ "Failed to create UserProfile in eVault (fallback):",
+ fallbackError,
+ );
+ this.profileCreationStatus = "failed";
}
- })();
- }
+ }
+ })();
}
}
@@ -275,11 +296,11 @@ export class VaultController {
}
// Getters for internal properties
- get client() {
+ getclient() {
return this.#client;
}
- get endpoint() {
+ getendpoint() {
return this.#endpoint;
}
}
diff --git a/infrastructure/eid-wallet/src/lib/global/controllers/user.ts b/infrastructure/eid-wallet/src/lib/global/controllers/user.ts
index ce3ee5fe..54ce1f22 100644
--- a/infrastructure/eid-wallet/src/lib/global/controllers/user.ts
+++ b/infrastructure/eid-wallet/src/lib/global/controllers/user.ts
@@ -55,14 +55,10 @@ export class UserController {
* @throws {Error} If the user state cannot be set in the store
*/
-
-
- set user(
- user:
- | Promise | undefined>
- | Record
- | undefined,
- ) {
+ set user(user:
+ | Promise | undefined>
+ | Record
+ | undefined) {
if (user instanceof Promise) {
user.then((resolvedUser) => {
this.#store.set("user", resolvedUser);
@@ -89,13 +85,7 @@ export class UserController {
});
}
-
- set isFake(
- f:
- | Promise
- | boolean
- | undefined,
- ) {
+ set isFake(f: Promise | boolean | undefined) {
if (f instanceof Promise) {
f.then((resolved) => {
this.#store.set("fake", resolved);
@@ -122,12 +112,10 @@ export class UserController {
});
}
- set document(
- document:
- | Promise | undefined>
- | Record
- | undefined,
- ) {
+ set document(document:
+ | Promise | undefined>
+ | Record
+ | undefined) {
if (document instanceof Promise) {
document
.then((resolvedDoc) => {
diff --git a/infrastructure/eid-wallet/src/lib/global/state.ts b/infrastructure/eid-wallet/src/lib/global/state.ts
index 7fde698b..e1f1d1af 100644
--- a/infrastructure/eid-wallet/src/lib/global/state.ts
+++ b/infrastructure/eid-wallet/src/lib/global/state.ts
@@ -1,7 +1,7 @@
import { Store } from "@tauri-apps/plugin-store";
+import { VaultController } from "./controllers/evault";
import { SecurityController } from "./controllers/security";
import { UserController } from "./controllers/user";
-import { VaultController } from "./controllers/evault";
/**
* @author SoSweetHam
* @description A centralized state that can be used to control the global state of the application, meant to be used as a singleton through the main layout component.
diff --git a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
index f380472f..82372f47 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte
@@ -1,56 +1,56 @@
-
- = [
- [location, 'MapPinIcon'],
- [website, 'LinkIcon'],
- [`Joined ${formatDate(createdAt, 'joined')}`, 'CalendarDaysIcon']
- ];
+ const detailIcons: Readonly = [
+ [location, 'MapPinIcon'],
+ [website, 'LinkIcon'],
+ [`Joined ${formatDate(createdAt, 'joined')}`, 'CalendarDaysIcon']
+ ];
- return (
- <>
-
- {loading || statsLoading ? (
-
+ {loading || statsLoading ? (
+
-
-
-
- ) : !user ? (
-
- {isInFollowPage ? `@${id as string}` : 'User'}
-
- ) : (
-
-
- )}
-
- );
+ {...variants}
+ key='loading'
+ >
+
+
+
+ ) : !user ? (
+
+ {isInFollowPage ? `@${id as string}` : 'User'}
+
+ ) : (
+
+
+ )}
+
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-home-avatar.tsx b/platforms/blabsy/src/components/user/user-home-avatar.tsx
index 1777da10..3b1c4f53 100644
--- a/platforms/blabsy/src/components/user/user-home-avatar.tsx
+++ b/platforms/blabsy/src/components/user/user-home-avatar.tsx
@@ -6,48 +6,51 @@ import { ImageModal } from '@components/modal/image-modal';
import type { ImageData } from '@lib/types/file';
type UserHomeAvatarProps = {
- profileData?: ImageData | null;
+ profileData?: ImageData | null;
};
export function UserHomeAvatar({
- profileData
+ profileData
}: UserHomeAvatarProps): JSX.Element {
- const { open, openModal, closeModal } = useModal();
+ const { open, openModal, closeModal } = useModal();
- return (
-
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-home-cover.tsx b/platforms/blabsy/src/components/user/user-home-cover.tsx
index f98d93a0..7de41542 100644
--- a/platforms/blabsy/src/components/user/user-home-cover.tsx
+++ b/platforms/blabsy/src/components/user/user-home-cover.tsx
@@ -6,34 +6,37 @@ import { ImageModal } from '@components/modal/image-modal';
import type { ImageData } from '@lib/types/file';
type UserHomeCoverProps = {
- coverData?: ImageData | null;
+ coverData?: ImageData | null;
};
export function UserHomeCover({ coverData }: UserHomeCoverProps): JSX.Element {
- const { open, openModal, closeModal } = useModal();
+ const { open, openModal, closeModal } = useModal();
- return (
-
- import { cn } from "$lib/utils";
- import { onMount } from "svelte";
- import type { HTMLAttributes } from "svelte/elements";
-
- const KEYBOARD = {
- BACKSPACE: "Backspace",
- DELETE: "Delete",
- ANDROID_BACKSPACE: "Backspace",
- };
-
- let inputs = $state([0]);
- let pins: { [key: number]: string } = $state({});
-
- interface IInputPinProps extends HTMLAttributes {
- pin: string;
- variant?: "lg" | "sm";
- size?: number;
- focusOnMount?: boolean | undefined;
- inFocus?: boolean | undefined;
- isError?: boolean;
- }
-
- let {
- pin = $bindable(""),
- variant = "lg",
- size = 4,
- focusOnMount = true,
- inFocus = false,
- isError = $bindable(false),
- ...restProps
- }: IInputPinProps = $props();
-
- onMount(async () => {
- inputs = createArray(size);
- pins = await createValueSlot(inputs);
- pin = calcPin(pins);
- if (!focusOnMount) return;
- document.getElementById("pin0")?.focus();
- });
-
- $effect(() => {
- pin = calcPin(pins);
- });
-
- const calcPin = (pins: { [key: number]: string }) => {
- return Object.values(pins).join("") || "";
- };
-
- const isKeyDelete = (key: string) => {
- return (
- key === KEYBOARD.BACKSPACE ||
- key === KEYBOARD.DELETE ||
- key === KEYBOARD.ANDROID_BACKSPACE
- );
- };
-
- const changeHandler = (e: KeyboardEvent, i: number) => {
- const current =
- document.activeElement ?? document.getElementById("pin0");
- const items = Array.from(document.getElementsByClassName("pin-item"));
- const currentIndex = items.indexOf(current as HTMLElement);
- let newIndex: number;
-
- const regx = /^\d+$/;
-
- if (isKeyDelete(e.key)) {
- e.preventDefault();
- if (pins[i] !== "") {
- pins[i] = "";
- return;
- }
- if (currentIndex > 0) {
- newIndex = currentIndex - 1;
- (items[newIndex] as HTMLInputElement)?.focus();
- }
- }
-
- if (regx.test(e.key)) {
- e.preventDefault();
- pins[i] = e.key;
- if (currentIndex < items.length - 1) {
- newIndex = currentIndex + 1;
- (items[newIndex] as HTMLInputElement)?.focus();
- }
+import { cn } from "$lib/utils";
+import { onMount } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+
+const KEYBOARD = {
+ BACKSPACE: "Backspace",
+ DELETE: "Delete",
+ ANDROID_BACKSPACE: "Backspace",
+};
+
+let inputs = $state([0]);
+let pins: { [key: number]: string } = $state({});
+
+interface IInputPinProps extends HTMLAttributes {
+ pin: string;
+ variant?: "lg" | "sm";
+ size?: number;
+ focusOnMount?: boolean | undefined;
+ inFocus?: boolean | undefined;
+ isError?: boolean;
+}
+
+let {
+ pin = $bindable(""),
+ variant = "lg",
+ size = 4,
+ focusOnMount = true,
+ inFocus = false,
+ isError = $bindable(false),
+ ...restProps
+}: IInputPinProps = $props();
+
+onMount(async () => {
+ inputs = createArray(size);
+ pins = await createValueSlot(inputs);
+ pin = calcPin(pins);
+ if (!focusOnMount) return;
+ document.getElementById("pin0")?.focus();
+});
+
+$effect(() => {
+ pin = calcPin(pins);
+});
+
+const calcPin = (pins: { [key: number]: string }) => {
+ return Object.values(pins).join("") || "";
+};
+
+const isKeyDelete = (key: string) => {
+ return (
+ key === KEYBOARD.BACKSPACE ||
+ key === KEYBOARD.DELETE ||
+ key === KEYBOARD.ANDROID_BACKSPACE
+ );
+};
+
+const changeHandler = (e: KeyboardEvent, i: number) => {
+ const current = document.activeElement ?? document.getElementById("pin0");
+ const items = Array.from(document.getElementsByClassName("pin-item"));
+ const currentIndex = items.indexOf(current as HTMLElement);
+ let newIndex: number;
+
+ const regx = /^\d+$/;
+
+ if (isKeyDelete(e.key)) {
+ e.preventDefault();
+ if (pins[i] !== "") {
+ pins[i] = "";
+ return;
}
-
- // Allow arrow keys for navigation
- if (e.key === "ArrowLeft" && currentIndex > 0) {
+ if (currentIndex > 0) {
newIndex = currentIndex - 1;
(items[newIndex] as HTMLInputElement)?.focus();
}
+ }
- if (e.key === "ArrowRight" && currentIndex < items.length - 1) {
+ if (regx.test(e.key)) {
+ e.preventDefault();
+ pins[i] = e.key;
+ if (currentIndex < items.length - 1) {
newIndex = currentIndex + 1;
(items[newIndex] as HTMLInputElement)?.focus();
}
- };
-
- const createArray = (size: number) => {
- return new Array(size);
- };
-
- const createValueSlot = (arr: number[]) => {
- return arr.reduce(
- (obj, item) => {
- obj[item] = "";
- return obj;
- },
- {} as Record,
- );
- };
-
- const uniqueId = `input${Math.random().toString().split(".")[1]}`;
- const cBase =
- "relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
+ }
+
+ // Allow arrow keys for navigation
+ if (e.key === "ArrowLeft" && currentIndex > 0) {
+ newIndex = currentIndex - 1;
+ (items[newIndex] as HTMLInputElement)?.focus();
+ }
+
+ if (e.key === "ArrowRight" && currentIndex < items.length - 1) {
+ newIndex = currentIndex + 1;
+ (items[newIndex] as HTMLInputElement)?.focus();
+ }
+};
+
+const createArray = (size: number) => {
+ return new Array(size);
+};
+
+const createValueSlot = (arr: number[]) => {
+ return arr.reduce(
+ (obj, item) => {
+ obj[item] = "";
+ return obj;
+ },
+ {} as Record,
+ );
+};
+
+const uniqueId = `input${Math.random().toString().split(".")[1]}`;
+const cBase =
+ "relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
) => void;
- closeModal: () => void;
- updateData: () => Promise;
- removeCoverImage: () => void;
- resetUserEditData: () => void;
+ loading: boolean;
+ children: ReactNode;
+ inputNameError: string;
+ editImage: (
+ type: 'cover' | 'profile'
+ ) => ({ target: { files } }: ChangeEvent) => void;
+ closeModal: () => void;
+ updateData: () => Promise;
+ removeCoverImage: () => void;
+ resetUserEditData: () => void;
};
export function EditProfileModal({
- name,
- loading,
- photoURL,
- children,
- coverPhotoURL,
- inputNameError,
- editImage,
- closeModal,
- updateData,
- removeCoverImage,
- resetUserEditData
+ name,
+ loading,
+ photoURL,
+ children,
+ coverPhotoURL,
+ inputNameError,
+ editImage,
+ closeModal,
+ updateData,
+ removeCoverImage,
+ resetUserEditData
}: EditProfileModalProps): JSX.Element {
- const coverInputFileRef = useRef(null);
- const profileInputFileRef = useRef(null);
+ const coverInputFileRef = useRef(null);
+ const profileInputFileRef = useRef(null);
- const handleClick = (type: 'cover' | 'profile') => (): void => {
- if (type === 'cover') coverInputFileRef.current?.click();
- else profileInputFileRef.current?.click();
- };
+ const handleClick = (type: 'cover' | 'profile') => (): void => {
+ if (type === 'cover') coverInputFileRef.current?.click();
+ else profileInputFileRef.current?.click();
+ };
- return (
- <>
-
- = [
- ['prev', null, 'ArrowLeftIcon'],
- ['next', 'order-1', 'ArrowRightIcon']
+ ['prev', null, 'ArrowLeftIcon'],
+ ['next', 'order-1', 'ArrowRightIcon']
];
export function ImageModal({
- tweet,
- imageData,
- previewCount,
- selectedIndex,
- handleNextIndex
+ tweet,
+ imageData,
+ previewCount,
+ selectedIndex,
+ handleNextIndex
}: ImageModalProps): JSX.Element {
- const [indexes, setIndexes] = useState([]);
- const [loading, setLoading] = useState(true);
+ const [indexes, setIndexes] = useState([]);
+ const [loading, setLoading] = useState(true);
- const { src, alt, type } = imageData;
+ const { src, alt, type } = imageData;
- const isVideo = type?.includes('video');
+ const isVideo = type?.includes('video');
- const requireArrows = handleNextIndex && previewCount > 1;
+ const requireArrows = handleNextIndex && previewCount > 1;
- useEffect(() => {
- if (
- tweet &&
- selectedIndex !== undefined &&
- !indexes.includes(selectedIndex)
- ) {
- setLoading(true);
- setIndexes([...indexes, selectedIndex]);
- }
+ useEffect(() => {
+ if (
+ tweet &&
+ selectedIndex !== undefined &&
+ !indexes.includes(selectedIndex)
+ ) {
+ setLoading(true);
+ setIndexes([...indexes, selectedIndex]);
+ }
- const media = isVideo ? document.createElement('video') : new Image();
+ const media = isVideo ? document.createElement('video') : new Image();
- media.src = src;
+ media.src = src;
- const handleLoadingCompleted = (): void => setLoading(false);
+ const handleLoadingCompleted = (): void => setLoading(false);
- if (isVideo) media.onloadeddata = handleLoadingCompleted;
- else media.onload = handleLoadingCompleted;
- }, [...(tweet && previewCount > 1 ? [src] : [])]);
+ if (isVideo) media.onloadeddata = handleLoadingCompleted;
+ else media.onload = handleLoadingCompleted;
+ }, [...(tweet && previewCount > 1 ? [src] : [])]);
- useEffect(() => {
- if (!requireArrows) return;
+ useEffect(() => {
+ if (!requireArrows) return;
- const handleKeyDown = ({ key }: KeyboardEvent): void => {
- const callback =
- key === 'ArrowLeft'
- ? handleNextIndex('prev')
- : key === 'ArrowRight'
- ? handleNextIndex('next')
- : null;
+ const handleKeyDown = ({ key }: KeyboardEvent): void => {
+ const callback =
+ key === 'ArrowLeft'
+ ? handleNextIndex('prev')
+ : key === 'ArrowRight'
+ ? handleNextIndex('next')
+ : null;
- if (callback) callback();
- };
+ if (callback) callback();
+ };
- document.addEventListener('keydown', handleKeyDown);
- return () => document.removeEventListener('keydown', handleKeyDown);
- }, [handleNextIndex]);
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, [handleNextIndex]);
- return (
- <>
- {requireArrows &&
- arrowButtons.map(([name, className, iconName]) => (
-
+ ))}
+
+ {loading ? (
+
+
+ ) : (
+
+ {isVideo ? (
+
+ 
+
- {alt}
-
-
- )}
-
+ {alt}
+
+
+ )}
+
- Open original
-
-
- )}
-
-
- );
+ href={src}
+ target='_blank'
+ rel='noreferrer'
+ onClick={preventBubbling(null, true)}
+ >
+ Open original
+
+
+ )}
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/modal/modal.tsx b/platforms/blabsy/src/components/modal/modal.tsx
index acc06acd..347b7b30 100644
--- a/platforms/blabsy/src/components/modal/modal.tsx
+++ b/platforms/blabsy/src/components/modal/modal.tsx
@@ -5,74 +5,74 @@ import type { ReactNode } from 'react';
import type { Variants } from 'framer-motion';
type ModalProps = {
- open: boolean;
- children: ReactNode;
- className?: string;
- modalAnimation?: Variants;
- modalClassName?: string;
- closePanelOnClick?: boolean;
- closeModal: () => void;
+ open: boolean;
+ children: ReactNode;
+ className?: string;
+ modalAnimation?: Variants;
+ modalClassName?: string;
+ closePanelOnClick?: boolean;
+ closeModal: () => void;
};
const variants: Variants[] = [
- {
- initial: { opacity: 0 },
- animate: { opacity: 1 },
- exit: { opacity: 0 }
- },
- {
- initial: { opacity: 0, scale: 0.8 },
- animate: {
- opacity: 1,
- scale: 1,
- transition: { type: 'spring', duration: 0.5, bounce: 0.4 }
+ {
+ initial: { opacity: 0 },
+ animate: { opacity: 1 },
+ exit: { opacity: 0 }
},
- exit: { opacity: 0, scale: 0.8, transition: { duration: 0.15 } }
- }
+ {
+ initial: { opacity: 0, scale: 0.8 },
+ animate: {
+ opacity: 1,
+ scale: 1,
+ transition: { type: 'spring', duration: 0.5, bounce: 0.4 }
+ },
+ exit: { opacity: 0, scale: 0.8, transition: { duration: 0.15 } }
+ }
];
export const [backdrop, modal] = variants;
export function Modal({
- open,
- children,
- className,
- modalAnimation,
- modalClassName,
- closePanelOnClick,
- closeModal
+ open,
+ children,
+ className,
+ modalAnimation,
+ modalClassName,
+ closePanelOnClick,
+ closeModal
}: ModalProps): JSX.Element {
- return (
-
- {open && (
-
- )}
-
- );
+
+ );
}
diff --git a/platforms/blabsy/src/components/modal/tweet-reply-modal.tsx b/platforms/blabsy/src/components/modal/tweet-reply-modal.tsx
index abc6af1d..c9e8ea5f 100644
--- a/platforms/blabsy/src/components/modal/tweet-reply-modal.tsx
+++ b/platforms/blabsy/src/components/modal/tweet-reply-modal.tsx
@@ -3,22 +3,22 @@ import { Tweet } from '@components/tweet/tweet';
import type { TweetProps } from '@components/tweet/tweet';
type TweetReplyModalProps = {
- tweet: TweetProps;
- closeModal: () => void;
+ tweet: TweetProps;
+ closeModal: () => void;
};
export function TweetReplyModal({
- tweet,
- closeModal
+ tweet,
+ closeModal
}: TweetReplyModalProps): JSX.Element {
- return (
-
- ) => Promise;
- cancelUpdateUsername: () => void;
+ loading: boolean;
+ children: ReactNode;
+ available: boolean;
+ alreadySet: boolean;
+ changeUsername: (e: FormEvent) => Promise;
+ cancelUpdateUsername: () => void;
};
const usernameModalData = [
- {
- title: 'What should we call you?',
- description: 'Your @username is unique. You can always change it later.',
- cancelLabel: 'Skip'
- },
- {
- title: 'Change your username?',
- description:
- 'Your @username is unique. You can always change it here again.',
- cancelLabel: 'Cancel'
- }
+ {
+ title: 'What should we call you?',
+ description:
+ 'Your @username is unique. You can always change it later.',
+ cancelLabel: 'Skip'
+ },
+ {
+ title: 'Change your username?',
+ description:
+ 'Your @username is unique. You can always change it here again.',
+ cancelLabel: 'Cancel'
+ }
] as const;
export function UsernameModal({
- loading,
- children,
- available,
- alreadySet,
- changeUsername,
- cancelUpdateUsername
+ loading,
+ children,
+ available,
+ alreadySet,
+ changeUsername,
+ cancelUpdateUsername
}: UsernameModalProps): JSX.Element {
- const { title, description, cancelLabel } = usernameModalData[+alreadySet];
+ const { title, description, cancelLabel } = usernameModalData[+alreadySet];
- return (
-
+ );
}
diff --git a/platforms/blabsy/src/components/sidebar/menu-link.tsx b/platforms/blabsy/src/components/sidebar/menu-link.tsx
index 7f0b33b2..0000942e 100644
--- a/platforms/blabsy/src/components/sidebar/menu-link.tsx
+++ b/platforms/blabsy/src/components/sidebar/menu-link.tsx
@@ -3,16 +3,16 @@ import Link from 'next/link';
import type { ComponentPropsWithRef } from 'react';
type MenuLinkProps = ComponentPropsWithRef<'a'> & {
- href: string;
+ href: string;
};
// eslint-disable-next-line react/display-name
export const MenuLink = forwardRef(
- ({ href, children, ...rest }, ref) => (
-
-
- {children}
-
-
- )
+ ({ href, children, ...rest }, ref) => (
+
+
+ {children}
+
+
+ )
);
diff --git a/platforms/blabsy/src/components/sidebar/mobile-sidebar-link.tsx b/platforms/blabsy/src/components/sidebar/mobile-sidebar-link.tsx
index 52eaa43f..269f96d3 100644
--- a/platforms/blabsy/src/components/sidebar/mobile-sidebar-link.tsx
+++ b/platforms/blabsy/src/components/sidebar/mobile-sidebar-link.tsx
@@ -5,34 +5,34 @@ import { HeroIcon } from '@components/ui/hero-icon';
import type { MobileNavLink } from '@components/modal/mobile-sidebar-modal';
type MobileSidebarLinkProps = MobileNavLink & {
- bottom?: boolean;
+ bottom?: boolean;
};
export function MobileSidebarLink({
- href,
- bottom,
- linkName,
- iconName,
- disabled
+ href,
+ bottom,
+ linkName,
+ iconName,
+ disabled
}: MobileSidebarLinkProps): JSX.Element {
- return (
-
-
+
-
-
-
-
- );
+ return (
+ <>
+
+
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/sidebar/sidebar-link.tsx b/platforms/blabsy/src/components/sidebar/sidebar-link.tsx
index fa36e2d1..2a534898 100644
--- a/platforms/blabsy/src/components/sidebar/sidebar-link.tsx
+++ b/platforms/blabsy/src/components/sidebar/sidebar-link.tsx
@@ -6,52 +6,52 @@ import { HeroIcon } from '@components/ui/hero-icon';
import type { NavLink } from './sidebar';
type SidebarLinkProps = NavLink & {
- username?: string;
+ username?: string;
};
export function SidebarLink({
- href,
- username,
- iconName,
- linkName,
- disabled,
- canBeHidden
+ href,
+ username,
+ iconName,
+ linkName,
+ disabled,
+ canBeHidden
}: SidebarLinkProps): JSX.Element {
- const { asPath } = useRouter();
- const isActive = username ? asPath.includes(username) : asPath === href;
+ const { asPath } = useRouter();
+ const isActive = username ? asPath.includes(username) : asPath === href;
- return (
-
-
-
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/sidebar/sidebar-profile.tsx b/platforms/blabsy/src/components/sidebar/sidebar-profile.tsx
index 91de5116..d29fab1b 100644
--- a/platforms/blabsy/src/components/sidebar/sidebar-profile.tsx
+++ b/platforms/blabsy/src/components/sidebar/sidebar-profile.tsx
@@ -1,6 +1,7 @@
import { AnimatePresence, motion } from 'framer-motion';
import { Menu } from '@headlessui/react';
import cn from 'clsx';
+import { useEffect, useState } from 'react';
import { useAuth } from '@lib/context/auth-context';
import { useModal } from '@lib/hooks/useModal';
import { Modal } from '@components/modal/modal';
@@ -13,144 +14,155 @@ import { UserName } from '@components/user/user-name';
import { UserUsername } from '@components/user/user-username';
import { variants } from './more-settings';
import type { User } from '@lib/types/user';
-import { useEffect, useState } from 'react';
export function SidebarProfile(): JSX.Element {
- const { user, signOut } = useAuth();
- const { open, openModal, closeModal } = useModal();
+ const { user, signOut } = useAuth();
+ const { open, openModal, closeModal } = useModal();
- let [name, setName] = useState();
- let [username, setUsername] = useState();
- let [verified, setVerified] = useState();
- let [photoURL, setPhotoUrl] = useState();
+ const [name, setName] = useState();
+ const [username, setUsername] = useState();
+ const [verified, setVerified] = useState();
+ const [photoURL, setPhotoUrl] = useState();
- useEffect(() => {
- if (user ) {
- const { name, username, verified, photoURL } = user as User;
- setName(name);
- setUsername(username);
- setVerified(verified);
- setPhotoUrl(photoURL);
- }}, [user]);
+ useEffect(() => {
+ if (user) {
+ const { name, username, verified, photoURL } = user;
+ setName(name);
+ setUsername(username);
+ setVerified(verified);
+ setPhotoUrl(photoURL);
+ }
+ }, [user]);
- return (
- <>
-
-
-
-
- );
+ >
+
-
- );
+ return (
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/ui/tooltip.tsx b/platforms/blabsy/src/components/ui/tooltip.tsx
index aafd5e08..ea3ab5fd 100644
--- a/platforms/blabsy/src/components/ui/tooltip.tsx
+++ b/platforms/blabsy/src/components/ui/tooltip.tsx
@@ -1,34 +1,34 @@
import cn from 'clsx';
type ToolTipProps = {
- tip: string;
- modal?: boolean;
- className?: string;
- groupInner?: boolean;
+ tip: string;
+ modal?: boolean;
+ className?: string;
+ groupInner?: boolean;
};
export function ToolTip({
- tip,
- modal,
- className,
- groupInner
+ tip,
+ modal,
+ className,
+ groupInner
}: ToolTipProps): JSX.Element | null {
- if (modal) return null;
+ if (modal) return null;
- return (
-
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-card.tsx b/platforms/blabsy/src/components/user/user-card.tsx
index dff46abd..cdaa69b9 100644
--- a/platforms/blabsy/src/components/user/user-card.tsx
+++ b/platforms/blabsy/src/components/user/user-card.tsx
@@ -8,45 +8,50 @@ import { UserUsername } from './user-username';
import type { User } from '@lib/types/user';
type UserCardProps = User & {
- modal?: boolean;
- follow?: boolean;
+ modal?: boolean;
+ follow?: boolean;
};
export function UserCard(user: UserCardProps): JSX.Element {
- const { id, bio, name, modal, follow, username, verified, photoURL } = user;
+ const { id, bio, name, modal, follow, username, verified, photoURL } = user;
- return (
-
-
-
diff --git a/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte b/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte
index 88ca2189..cd2020fc 100644
--- a/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte
+++ b/infrastructure/eid-wallet/src/lib/ui/Selector/Selector.svelte
@@ -1,31 +1,31 @@
+ );
}
diff --git a/platforms/blabsy/src/components/modal/edit-profile-modal.tsx b/platforms/blabsy/src/components/modal/edit-profile-modal.tsx
index b9c3d8f8..f2182519 100644
--- a/platforms/blabsy/src/components/modal/edit-profile-modal.tsx
+++ b/platforms/blabsy/src/components/modal/edit-profile-modal.tsx
@@ -9,183 +9,188 @@ import type { ReactNode, ChangeEvent } from 'react';
import type { User } from '@lib/types/user';
type EditProfileModalProps = Pick<
- User,
- 'name' | 'photoURL' | 'coverPhotoURL'
+ User,
+ 'name' | 'photoURL' | 'coverPhotoURL'
> & {
- loading: boolean;
- children: ReactNode;
- inputNameError: string;
- editImage: (
- type: 'cover' | 'profile'
- ) => ({ target: { files } }: ChangeEvent
-
+
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/modal/image-modal.tsx b/platforms/blabsy/src/components/modal/image-modal.tsx
index 1ad64bb6..b4d06620 100644
--- a/platforms/blabsy/src/components/modal/image-modal.tsx
+++ b/platforms/blabsy/src/components/modal/image-modal.tsx
@@ -13,157 +13,163 @@ import type { ImageData } from '@lib/types/file';
import type { IconName } from '@components/ui/hero-icon';
type ImageModalProps = {
- tweet?: boolean;
- imageData: ImageData;
- previewCount: number;
- selectedIndex?: number;
- handleNextIndex?: (type: 'prev' | 'next') => () => void;
+ tweet?: boolean;
+ imageData: ImageData;
+ previewCount: number;
+ selectedIndex?: number;
+ handleNextIndex?: (type: 'prev' | 'next') => () => void;
};
type ArrowButton = ['prev' | 'next', string | null, IconName];
const arrowButtons: Readonly
+
+
+ ) : (
+
-
- {(alwaysShowStats || !!stats) && (
-
- {formatNumber(stats)}
-
- )}
-
-
- );
+ return (
+
+
+ {(alwaysShowStats || !!stats) && (
+
+ {formatNumber(stats)}
+
+ )}
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/tweet/stats-empty.tsx b/platforms/blabsy/src/components/tweet/stats-empty.tsx
index 42459426..4fa52f40 100644
--- a/platforms/blabsy/src/components/tweet/stats-empty.tsx
+++ b/platforms/blabsy/src/components/tweet/stats-empty.tsx
@@ -3,38 +3,38 @@ import { NextImage } from '@components/ui/next-image';
import type { ImageData } from '@lib/types/file';
export type StatsEmptyProps = {
- title: string;
- modal?: boolean;
- imageData?: ImageData;
- description: string;
+ title: string;
+ modal?: boolean;
+ imageData?: ImageData;
+ description: string;
};
export function StatsEmpty({
- title,
- modal,
- imageData,
- description
+ title,
+ modal,
+ imageData,
+ description
}: StatsEmptyProps): JSX.Element {
- return (
-
-
-
- {type === 'pin' ? (
-
- );
+ return (
+
+
+ {type === 'pin' ? (
+
+ );
}
diff --git a/platforms/blabsy/src/components/tweet/tweet-with-parent.tsx b/platforms/blabsy/src/components/tweet/tweet-with-parent.tsx
index ab01ec61..10379029 100644
--- a/platforms/blabsy/src/components/tweet/tweet-with-parent.tsx
+++ b/platforms/blabsy/src/components/tweet/tweet-with-parent.tsx
@@ -4,39 +4,39 @@ import { TweetParent } from './tweet-parent';
import type { TweetWithUser } from '@lib/types/tweet';
type TweetWithParentProps = {
- data: TweetWithUser[];
+ data: TweetWithUser[];
};
export type LoadedParents = Record<'parentId' | 'childId', string>[];
export function TweetWithParent({ data }: TweetWithParentProps): JSX.Element {
- const [loadedParents, setLoadedParents] = useState([]);
+ const [loadedParents, setLoadedParents] = useState([]);
- const addParentId = (parentId: string, targetChildId: string): void =>
- setLoadedParents((prevLoadedParents) =>
- prevLoadedParents.some((item) => item.parentId === parentId)
- ? prevLoadedParents
- : [...prevLoadedParents, { parentId, childId: targetChildId }]
- );
+ const addParentId = (parentId: string, targetChildId: string): void =>
+ setLoadedParents((prevLoadedParents) =>
+ prevLoadedParents.some((item) => item.parentId === parentId)
+ ? prevLoadedParents
+ : [...prevLoadedParents, { parentId, childId: targetChildId }]
+ );
- const filteredData = data.filter(
- (child) => !loadedParents.some((parent) => parent.parentId === child.id)
- );
+ const filteredData = data.filter(
+ (child) => !loadedParents.some((parent) => parent.parentId === child.id)
+ );
- return (
- <>
- {filteredData.map((tweet) => (
- (
- ({ className, loading, disabled, children, ...rest }, ref) => {
- // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
- const isDisabled = loading || disabled;
+ ({ className, loading, disabled, children, ...rest }, ref) => {
+ // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+ const isDisabled = loading || disabled;
- return (
-
- );
- }
+ return (
+
+ );
+ }
);
diff --git a/platforms/blabsy/src/components/ui/custom-icon.tsx b/platforms/blabsy/src/components/ui/custom-icon.tsx
index 04d70683..9cf81863 100644
--- a/platforms/blabsy/src/components/ui/custom-icon.tsx
+++ b/platforms/blabsy/src/components/ui/custom-icon.tsx
@@ -3,174 +3,174 @@ import cn from 'clsx';
type IconName = keyof typeof Icons;
type IconProps = {
- className?: string;
+ className?: string;
};
type CustomIconProps = IconProps & {
- iconName: IconName;
+ iconName: IconName;
};
const Icons = {
- PinIcon,
- AppleIcon,
- PinOffIcon,
- GoogleIcon,
- TwitterIcon,
- FeatherIcon,
- SpinnerIcon,
- TriangleIcon
+ PinIcon,
+ AppleIcon,
+ PinOffIcon,
+ GoogleIcon,
+ TwitterIcon,
+ FeatherIcon,
+ SpinnerIcon,
+ TriangleIcon
};
export function CustomIcon({
- iconName,
- className
+ iconName,
+ className
}: CustomIconProps): JSX.Element {
- const Icon = Icons[iconName];
+ const Icon = Icons[iconName];
- return
+ );
}
diff --git a/platforms/blabsy/src/components/ui/hero-icon.tsx b/platforms/blabsy/src/components/ui/hero-icon.tsx
index 96c1de5c..d34242ac 100644
--- a/platforms/blabsy/src/components/ui/hero-icon.tsx
+++ b/platforms/blabsy/src/components/ui/hero-icon.tsx
@@ -6,17 +6,17 @@ import * as OutlineIcons from '@heroicons/react/24/outline';
export type IconName = keyof typeof SolidIcons | keyof typeof OutlineIcons;
type HeroIconProps = {
- solid?: boolean;
- iconName: IconName;
- className?: string;
+ solid?: boolean;
+ iconName: IconName;
+ className?: string;
};
export function HeroIcon({
- solid,
- iconName,
- className
+ solid,
+ iconName,
+ className
}: HeroIconProps): JSX.Element {
- const Icon = solid ? SolidIcons[iconName] : OutlineIcons[iconName];
+ const Icon = solid ? SolidIcons[iconName] : OutlineIcons[iconName];
- return
-
- );
+ );
}
diff --git a/platforms/blabsy/src/components/tweet/tweet-option.tsx b/platforms/blabsy/src/components/tweet/tweet-option.tsx
index c720fc2f..12ba3ae2 100644
--- a/platforms/blabsy/src/components/tweet/tweet-option.tsx
+++ b/platforms/blabsy/src/components/tweet/tweet-option.tsx
@@ -6,53 +6,53 @@ import { NumberStats } from './number-stats';
import type { IconName } from '@components/ui/hero-icon';
type TweetOption = {
- tip: string;
- move?: number;
- stats?: number;
- iconName: IconName;
- disabled?: boolean;
- className: string;
- viewTweet?: boolean;
- iconClassName: string;
- onClick?: (...args: unknown[]) => unknown;
+ tip: string;
+ move?: number;
+ stats?: number;
+ iconName: IconName;
+ disabled?: boolean;
+ className: string;
+ viewTweet?: boolean;
+ iconClassName: string;
+ onClick?: (...args: unknown[]) => unknown;
};
export function TweetOption({
- tip,
- move,
- stats,
- disabled,
- iconName,
- className,
- viewTweet,
- iconClassName,
- onClick
+ tip,
+ move,
+ stats,
+ disabled,
+ iconName,
+ className,
+ viewTweet,
+ iconClassName,
+ onClick
}: TweetOption): JSX.Element {
- return (
-
- );
+ disabled && 'cursor-not-allowed',
+ className
+ )}
+ onClick={preventBubbling(onClick)}
+ >
+
+
- {imageData && (
-
-
-
+ return (
+ {title}
-- {description} -
-
+
-
+
+ {imageData && (
+
+
+
+ {title}
++ {description} +
+
- {tweet.parent && (
-
- ))}
-
- );
+ return (
+ <>
+ {filteredData.map((tweet) => (
+
+ {tweet.parent && (
+
+ ))}
+
+ );
}
diff --git a/platforms/blabsy/src/components/ui/button.tsx b/platforms/blabsy/src/components/ui/button.tsx
index 1ac2dace..8fa3d794 100644
--- a/platforms/blabsy/src/components/ui/button.tsx
+++ b/platforms/blabsy/src/components/ui/button.tsx
@@ -4,35 +4,36 @@ import { Loading } from './loading';
import type { ComponentPropsWithRef } from 'react';
type ButtonProps = ComponentPropsWithRef<'button'> & {
- loading?: boolean;
+ loading?: boolean;
};
// eslint-disable-next-line react/display-name
export const Button = forwardRef
-
-
- );
+ >
+
+ {message ?? 'Something went wrong. Try Loading.'}
-{message ?? 'Something went wrong. Try Loading.'}
+
- {tip}
-
- );
+ className ?? 'translate-y-3'
+ )}
+ >
+ {tip}
+
-
-
-
- );
+
-
- {follow && bio &&
-
-
-
-
-
-
+
- {follow &&
- {bio}
} -
+
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-details.tsx b/platforms/blabsy/src/components/user/user-details.tsx
index 542f3471..e019c56f 100644
--- a/platforms/blabsy/src/components/user/user-details.tsx
+++ b/platforms/blabsy/src/components/user/user-details.tsx
@@ -8,89 +8,100 @@ import type { IconName } from '@components/ui/hero-icon';
import type { User } from '@lib/types/user';
type UserDetailsProps = Pick<
- User,
- | 'id'
- | 'bio'
- | 'name'
- | 'website'
- | 'username'
- | 'location'
- | 'verified'
- | 'createdAt'
- | 'following'
- | 'followers'
+ User,
+ | 'id'
+ | 'bio'
+ | 'name'
+ | 'website'
+ | 'username'
+ | 'location'
+ | 'verified'
+ | 'createdAt'
+ | 'following'
+ | 'followers'
>;
type DetailIcon = [string | null, IconName];
export function UserDetails({
- id,
- bio,
- name,
- website,
- username,
- location,
- verified,
- createdAt,
- following,
- followers
+ id,
+ bio,
+ name,
+ website,
+ username,
+ location,
+ verified,
+ createdAt,
+ following,
+ followers
}: UserDetailsProps): JSX.Element {
- const detailIcons: Readonly
+
+ {follow && bio && (
+
+
+
+
+
+
+
+ {follow &&
+ {bio}
+ )} +
-
-
-
- @{username}
-
- {bio && & {
- inputId: EditableData;
+ inputId: EditableData;
};
type UserImages = Record<
- Extract,
- FilesWithId
+ Extract,
+ FilesWithId
>;
type TrimmedTexts = Pick<
- EditableUserData,
- Exclude
+ EditableUserData,
+ Exclude
>;
type UserEditProfileProps = {
- hide?: boolean;
+ hide?: boolean;
};
export function UserEditProfile({ hide }: UserEditProfileProps): JSX.Element {
- const { user } = useUser();
- const { open, openModal, closeModal } = useModal();
+ const { user } = useUser();
+ const { open, openModal, closeModal } = useModal();
- const [loading, setLoading] = useState(false);
+ const [loading, setLoading] = useState(false);
- const { bio, name, website, location, photoURL, coverPhotoURL } =
- user as User;
+ const { bio, name, website, location, photoURL, coverPhotoURL } =
+ user as User;
- const [editUserData, setEditUserData] = useState({
- bio,
- name,
- website,
- photoURL,
- location,
- coverPhotoURL
- });
+ const [editUserData, setEditUserData] = useState({
+ bio,
+ name,
+ website,
+ photoURL,
+ location,
+ coverPhotoURL
+ });
- const [userImages, setUserImages] = useState({
- photoURL: [],
- coverPhotoURL: []
- });
+ const [userImages, setUserImages] = useState({
+ photoURL: [],
+ coverPhotoURL: []
+ });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- useEffect(() => cleanImage, []);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ useEffect(() => cleanImage, []);
- const inputNameError = !editUserData.name?.trim()
- ? "Name can't be blank"
- : '';
+ const inputNameError = !editUserData.name?.trim()
+ ? "Name can't be blank"
+ : '';
- const updateData = async (): Promise => {
- setLoading(true);
+ const updateData = async (): Promise => {
+ setLoading(true);
- const userId = user?.id as string;
+ const userId = user?.id as string;
- const { photoURL, coverPhotoURL: coverURL } = userImages;
+ const { photoURL, coverPhotoURL: coverURL } = userImages;
- const [newPhotoURL, newCoverPhotoURL] = await Promise.all(
- [photoURL, coverURL].map((image) => uploadImages(userId, image))
- );
+ const [newPhotoURL, newCoverPhotoURL] = await Promise.all(
+ [photoURL, coverURL].map((image) => uploadImages(userId, image))
+ );
- const newImages: Partial> = {
- coverPhotoURL:
- coverPhotoURL === editUserData.coverPhotoURL
- ? coverPhotoURL
- : newCoverPhotoURL?.[0].src ?? null,
- ...(newPhotoURL && { photoURL: newPhotoURL[0].src })
- };
+ const newImages: Partial> = {
+ coverPhotoURL:
+ coverPhotoURL === editUserData.coverPhotoURL
+ ? coverPhotoURL
+ : newCoverPhotoURL?.[0].src ?? null,
+ ...(newPhotoURL && { photoURL: newPhotoURL[0].src })
+ };
- const trimmedKeys: Readonly = [
- 'name',
- 'bio',
- 'location',
- 'website'
- ];
+ const trimmedKeys: Readonly = [
+ 'name',
+ 'bio',
+ 'location',
+ 'website'
+ ];
- const trimmedTexts = trimmedKeys.reduce(
- (acc, curr) => ({ ...acc, [curr]: editUserData[curr]?.trim() ?? null }),
- {} as TrimmedTexts
- );
+ const trimmedTexts = trimmedKeys.reduce(
+ (acc, curr) => ({
+ ...acc,
+ [curr]: editUserData[curr]?.trim() ?? null
+ }),
+ {} as TrimmedTexts
+ );
- const newUserData: Readonly = {
- ...editUserData,
- ...trimmedTexts,
- ...newImages
- };
+ const newUserData: Readonly = {
+ ...editUserData,
+ ...trimmedTexts,
+ ...newImages
+ };
- await sleep(500);
+ await sleep(500);
- await updateUserData(userId, newUserData);
+ await updateUserData(userId, newUserData);
- closeModal();
+ closeModal();
- cleanImage();
+ cleanImage();
- setLoading(false);
- setEditUserData(newUserData);
+ setLoading(false);
+ setEditUserData(newUserData);
- toast.success('Profile updated successfully');
- };
+ toast.success('Profile updated successfully');
+ };
- const editImage =
- (type: 'cover' | 'profile') =>
- ({ target: { files } }: ChangeEvent): void => {
- const imagesData = getImagesData(files);
+ const editImage =
+ (type: 'cover' | 'profile') =>
+ ({ target: { files } }: ChangeEvent): void => {
+ const imagesData = getImagesData(files);
- if (!imagesData) {
- toast.error('Please choose a valid GIF or Photo');
- return;
- }
+ if (!imagesData) {
+ toast.error('Please choose a valid GIF or Photo');
+ return;
+ }
- const { imagesPreviewData, selectedImagesData } = imagesData;
+ const { imagesPreviewData, selectedImagesData } = imagesData;
- const targetKey = type === 'cover' ? 'coverPhotoURL' : 'photoURL';
- const newImage = imagesPreviewData[0].src;
+ const targetKey = type === 'cover' ? 'coverPhotoURL' : 'photoURL';
+ const newImage = imagesPreviewData[0].src;
- setEditUserData({
- ...editUserData,
- [targetKey]: newImage
- });
+ setEditUserData({
+ ...editUserData,
+ [targetKey]: newImage
+ });
- setUserImages({
- ...userImages,
- [targetKey]: selectedImagesData
- });
- };
+ setUserImages({
+ ...userImages,
+ [targetKey]: selectedImagesData
+ });
+ };
- const removeCoverImage = (): void => {
- setEditUserData({
- ...editUserData,
- coverPhotoURL: null
- });
+ const removeCoverImage = (): void => {
+ setEditUserData({
+ ...editUserData,
+ coverPhotoURL: null
+ });
- setUserImages({
- ...userImages,
- coverPhotoURL: []
- });
+ setUserImages({
+ ...userImages,
+ coverPhotoURL: []
+ });
- URL.revokeObjectURL(editUserData.coverPhotoURL ?? '');
- };
+ URL.revokeObjectURL(editUserData.coverPhotoURL ?? '');
+ };
- const cleanImage = (): void => {
- const imagesKey: Readonly[]> = [
- 'photoURL',
- 'coverPhotoURL'
- ];
+ const cleanImage = (): void => {
+ const imagesKey: Readonly[]> = [
+ 'photoURL',
+ 'coverPhotoURL'
+ ];
- imagesKey.forEach((image) =>
- URL.revokeObjectURL(editUserData[image] ?? '')
- );
+ imagesKey.forEach((image) =>
+ URL.revokeObjectURL(editUserData[image] ?? '')
+ );
- setUserImages({
- photoURL: [],
- coverPhotoURL: []
- });
- };
-
- const resetUserEditData = (): void =>
- setEditUserData({
- bio,
- name,
- website,
- photoURL,
- location,
- coverPhotoURL
- });
+ setUserImages({
+ photoURL: [],
+ coverPhotoURL: []
+ });
+ };
- const handleChange =
- (key: EditableData) =>
- ({
- target: { value }
- }: ChangeEvent) =>
- setEditUserData({ ...editUserData, [key]: value });
-
- const handleKeyboardShortcut = ({
- key,
- target,
- ctrlKey
- }: KeyboardEvent): void => {
- if (ctrlKey && key === 'Enter' && !inputNameError) {
- target.blur();
- void updateData();
- }
- };
-
- const inputFields: Readonly = [
- {
- label: 'Name',
- inputId: 'name',
- inputValue: editUserData.name,
- inputLimit: 50,
- errorMessage: inputNameError
- },
- {
- label: 'Bio',
- inputId: 'bio',
- inputValue: editUserData.bio,
- inputLimit: 160,
- useTextArea: true
- },
- {
- label: 'Location',
- inputId: 'location',
- inputValue: editUserData.location,
- inputLimit: 30
- },
- {
- label: 'Website',
- inputId: 'website',
- inputValue: editUserData.website,
- inputLimit: 100
- }
- ];
-
- return (
-
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-follow-stats.tsx b/platforms/blabsy/src/components/user/user-follow-stats.tsx
index 38e79bbd..432b3aab 100644
--- a/platforms/blabsy/src/components/user/user-follow-stats.tsx
+++ b/platforms/blabsy/src/components/user/user-follow-stats.tsx
@@ -10,64 +10,68 @@ type UserFollowStatsProps = Pick;
type Stats = [string, string, number, number];
export function UserFollowStats({
- following,
- followers
+ following,
+ followers
}: UserFollowStatsProps): JSX.Element {
- const totalFollowing = following.length;
- const totalFollowers = followers.length;
+ const totalFollowing = following.length;
+ const totalFollowers = followers.length;
- const [{ currentFollowers, currentFollowing }, setCurrentStats] = useState({
- currentFollowing: totalFollowing,
- currentFollowers: totalFollowers
- });
-
- useEffect(() => {
- setCurrentStats({
- currentFollowing: totalFollowing,
- currentFollowers: totalFollowers
+ const [{ currentFollowers, currentFollowing }, setCurrentStats] = useState({
+ currentFollowing: totalFollowing,
+ currentFollowers: totalFollowers
});
- }, [totalFollowing, totalFollowers]);
- const followingMove = useMemo(
- () => (totalFollowing > currentFollowing ? -25 : 25),
- [totalFollowing]
- );
+ useEffect(() => {
+ setCurrentStats({
+ currentFollowing: totalFollowing,
+ currentFollowers: totalFollowers
+ });
+ }, [totalFollowing, totalFollowers]);
+
+ const followingMove = useMemo(
+ () => (totalFollowing > currentFollowing ? -25 : 25),
+ [totalFollowing]
+ );
- const followersMove = useMemo(
- () => (totalFollowers > currentFollowers ? -25 : 25),
- [totalFollowers]
- );
+ const followersMove = useMemo(
+ () => (totalFollowers > currentFollowers ? -25 : 25),
+ [totalFollowers]
+ );
- const {
- query: { id }
- } = useRouter();
+ const {
+ query: { id }
+ } = useRouter();
- const userPath = `/user/${id as string}`;
+ const userPath = `/user/${id as string}`;
- const allStats: Readonly = [
- ['Following', `${userPath}/following`, followingMove, currentFollowing],
- ['Follower', `${userPath}/followers`, followersMove, currentFollowers]
- ];
+ const allStats: Readonly = [
+ ['Following', `${userPath}/following`, followingMove, currentFollowing],
+ ['Follower', `${userPath}/followers`, followersMove, currentFollowers]
+ ];
- return (
-
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-following.tsx b/platforms/blabsy/src/components/user/user-following.tsx
index 3b54b6fe..cb252ee2 100644
--- a/platforms/blabsy/src/components/user/user-following.tsx
+++ b/platforms/blabsy/src/components/user/user-following.tsx
@@ -1,22 +1,22 @@
import { useAuth } from '@lib/context/auth-context';
type UserFollowingProps = {
- userTargetId: string;
+ userTargetId: string;
};
export function UserFollowing({
- userTargetId
+ userTargetId
}: UserFollowingProps): JSX.Element | null {
- const { user } = useAuth();
+ const { user } = useAuth();
- const isOwner =
- user?.id !== userTargetId && user?.followers.includes(userTargetId);
+ const isOwner =
+ user?.id !== userTargetId && user?.followers.includes(userTargetId);
- if (!isOwner) return null;
+ if (!isOwner) return null;
- return (
- {bio}
} -
- {detailIcons.map(
- ([detail, icon], index) =>
- detail && (
-
+
-
-
- {detail}
- )} + return ( + <> +
+
-
+
- )
- )}
- @{username}
+
+ {bio && (
+
+ {bio}
+ )} +
+ {detailIcons.map(
+ ([detail, icon], index) =>
+ detail && (
+
+ )
+ )}
+
+ a>div]:font-bold [&>a>div]:text-light-primary
dark:[&>a>div]:text-dark-primary'
- >
- {allStats.map(([title, link, move, stats], index) => (
-
-
-
- );
+ >
+ {index === 1 && stats > 1 ? `${title}s` : title}
- - - ))} -{index === 1 && stats > 1 ? `${title}s` : title}
+ + + ))} +- Follows you -
- ); + return ( ++ Follows you +
+ ); } diff --git a/platforms/blabsy/src/components/user/user-header.tsx b/platforms/blabsy/src/components/user/user-header.tsx index 4a5d6462..2135d179 100644 --- a/platforms/blabsy/src/components/user/user-header.tsx +++ b/platforms/blabsy/src/components/user/user-header.tsx @@ -9,86 +9,96 @@ import { UserName } from './user-name'; import type { Variants } from 'framer-motion'; export const variants: Variants = { - initial: { opacity: 0 }, - animate: { opacity: 1, transition: { duration: 0.4 } }, - exit: { opacity: 0, transition: { duration: 0.2 } } + initial: { opacity: 0 }, + animate: { opacity: 1, transition: { duration: 0.4 } }, + exit: { opacity: 0, transition: { duration: 0.2 } } }; export function UserHeader(): JSX.Element { - const { - pathname, - query: { id } - } = useRouter(); + const { + pathname, + query: { id } + } = useRouter(); - const { user, loading } = useUser(); + const { user, loading } = useUser(); - const userId = user ? user.id : null; + const userId = user ? user.id : null; - const { data: statsData, loading: statsLoading } = useDocument( - doc(userStatsCollection(userId ?? 'null'), 'stats'), - { - allowNull: true, - disabled: !userId - } - ); + const { data: statsData, loading: statsLoading } = useDocument( + doc(userStatsCollection(userId ?? 'null'), 'stats'), + { + allowNull: true, + disabled: !userId + } + ); - const { tweets, likes } = statsData ?? {}; + const { tweets, likes } = statsData ?? {}; - const [totalTweets, totalPhotos, totalLikes] = [ - (user?.totalTweets ?? 0) + (tweets?.length ?? 0), - user?.totalPhotos, - likes?.length - ]; + const [totalTweets, totalPhotos, totalLikes] = [ + (user?.totalTweets ?? 0) + (tweets?.length ?? 0), + user?.totalPhotos, + likes?.length + ]; - const currentPage = pathname.split('/').pop() ?? ''; + const currentPage = pathname.split('/').pop() ?? ''; - const isInTweetPage = ['[id]', 'with_replies'].includes(currentPage); - const isInFollowPage = ['following', 'followers'].includes(currentPage); + const isInTweetPage = ['[id]', 'with_replies'].includes(currentPage); + const isInFollowPage = ['following', 'followers'].includes(currentPage); - return ( -- {isInFollowPage - ? `@${user.username}` - : isInTweetPage - ? totalTweets - ? `${totalTweets} ${`Tweet${isPlural(totalTweets)}`}` - : 'No Tweet' - : currentPage === 'media' - ? totalPhotos - ? `${totalPhotos} Photo${isPlural(totalPhotos)} & GIF${isPlural( - totalPhotos - )}` - : 'No Photo & GIF' - : totalLikes - ? `${totalLikes} Like${isPlural(totalLikes)}` - : 'No Like'} -
-+ {isInFollowPage + ? `@${user.username}` + : isInTweetPage + ? totalTweets + ? `${totalTweets} ${`Tweet${isPlural( + totalTweets + )}`}` + : 'No Tweet' + : currentPage === 'media' + ? totalPhotos + ? `${totalPhotos} Photo${isPlural( + totalPhotos + )} & GIF${isPlural(totalPhotos)}` + : 'No Photo & GIF' + : totalLikes + ? `${totalLikes} Like${isPlural(totalLikes)}` + : 'No Like'} +
+
-
-
-
- );
+ imgClassName='rounded-full'
+ src={profileData.src}
+ alt={profileData.alt}
+ layout='fill'
+ key={profileData.src}
+ />
+ ) : (
+
+
+
+ )}
+
+
-
-
- {coverData ? (
-
- ) : (
-
- )}
-
- );
+ return (
+
+
+
+ {coverData ? (
+
+ ) : (
+
+ )}
+
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-name.tsx b/platforms/blabsy/src/components/user/user-name.tsx
index 86a8da35..304f81ad 100644
--- a/platforms/blabsy/src/components/user/user-name.tsx
+++ b/platforms/blabsy/src/components/user/user-name.tsx
@@ -3,45 +3,48 @@ import Link from 'next/link';
import { HeroIcon } from '@components/ui/hero-icon';
type UserNameProps = {
- tag?: keyof JSX.IntrinsicElements;
- name: string;
- verified: boolean;
- username?: string;
- className?: string;
- iconClassName?: string;
+ tag?: keyof JSX.IntrinsicElements;
+ name: string;
+ verified: boolean;
+ username?: string;
+ className?: string;
+ iconClassName?: string;
};
export function UserName({
- tag,
- name,
- verified,
- username,
- className,
- iconClassName
+ tag,
+ name,
+ verified,
+ username,
+ className,
+ iconClassName
}: UserNameProps): JSX.Element {
- const CustomTag = tag ? tag : 'p';
+ const CustomTag = tag ? tag : 'p';
- return (
-
-
-
-
-
-
- );
+ >
+ i]:scale-100 [&>i]:opacity-100' - : 'text-light-secondary dark:text-dark-secondary' - )} - > - {name} - -
-
+
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-share.tsx b/platforms/blabsy/src/components/user/user-share.tsx
index d9abdc25..63feb29b 100644
--- a/platforms/blabsy/src/components/user/user-share.tsx
+++ b/platforms/blabsy/src/components/user/user-share.tsx
@@ -10,54 +10,58 @@ import { ToolTip } from '@components/ui/tooltip';
import { variants } from '@components/tweet/tweet-actions';
type UserShareProps = {
- username: string;
+ username: string;
};
export function UserShare({ username }: UserShareProps): JSX.Element {
- const handleCopy = (closeMenu: () => void) => async (): Promisei]:scale-100 [&>i]:opacity-100' + : 'text-light-secondary dark:text-dark-secondary' + )} + > + {name} + +
+div]:translate-y-2' : 'grid [&>div]:translate-y-7'
- )}
- >
- {children}
-
- );
+ );
}
diff --git a/platforms/blabsy/src/components/user/user-username.tsx b/platforms/blabsy/src/components/user/user-username.tsx
index 838d0273..5df29579 100644
--- a/platforms/blabsy/src/components/user/user-username.tsx
+++ b/platforms/blabsy/src/components/user/user-username.tsx
@@ -2,28 +2,28 @@ import Link from 'next/link';
import cn from 'clsx';
type UserUsernameProps = {
- username: string;
- className?: string;
- disableLink?: boolean;
+ username: string;
+ className?: string;
+ disableLink?: boolean;
};
export function UserUsername({
- username,
- className,
- disableLink
+ username,
+ className,
+ disableLink
}: UserUsernameProps): JSX.Element {
- return (
-
-
- @{username}
-
-
- );
+ return (
+
+
+ @{username}
+
+
+ );
}
diff --git a/platforms/blabsy/src/components/view/view-parent-tweet.tsx b/platforms/blabsy/src/components/view/view-parent-tweet.tsx
index f6587f25..4671c246 100644
--- a/platforms/blabsy/src/components/view/view-parent-tweet.tsx
+++ b/platforms/blabsy/src/components/view/view-parent-tweet.tsx
@@ -6,44 +6,44 @@ import { Tweet } from '@components/tweet/tweet';
import type { RefObject } from 'react';
type ViewParentTweetProps = {
- parentId: string;
- viewTweetRef: RefObjectdiv]:translate-y-2' : 'grid [&>div]:translate-y-7'
+ )}
+ >
+ {children}
+
-
-
-
-
-
+
- {coverPhotoURL ? (
-
-
-
-
-
+
-
+
- {bio &&
+ {bio && {bio}
} - +{bio}
} +
+ {allStats.map(([id, label, stat]) => (
+
+
-
+ >
+ {stat}
-- {label} -
- - - ))} -{stat}
++ {label} +
+ + + ))} +
-
- );
+ >
+ This Tweet was deleted by the Tweet author.{' '}
+
+ Learn more
+
+
+ +
- This Tweet was deleted by the Tweet author.{' '} - - Learn more - -
-
-
diff --git a/platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte b/platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte
index 84ec6a08..e2b5e35b 100644
--- a/platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte
+++ b/platforms/pictique/src/lib/fragments/ActionMenu/ActionMenu.svelte
@@ -54,7 +54,8 @@
-
-
-
-
-
-