final design (#184)

* feat: redesign

* feat: update other columns to new design

* chore: small fixes

* fix: better manage external webview

* feat: redesign note

* feat: update ui

* chore: update

* chore: update

* chore: polish ui

* chore: update auth ui

* feat: finalize note design

* chore: small fixes

* feat: add window management in rust

* chore: format

* feat: update ui for event screen

* feat: update event screen

* feat: final

packages/utils/index.ts

@@ -7,6 +7,7 @@ export * from "./src/nip94";
 export * from "./src/notification";
 export * from "./src/cn";
 export * from "./src/image";
+export * from "./src/parser";
 
 // Hooks
 export * from "./src/hooks/useNetworkStatus";

packages/utils/package.json

@@ -8,21 +8,21 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@tanstack/react-query": "^5.31.0",
+		"@tanstack/react-query": "^5.32.0",
 		"bitcoin-units": "^1.0.0",
-		"clsx": "^2.1.0",
-		"dayjs": "^1.11.10",
-		"nostr-tools": "^2.5.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
+		"clsx": "^2.1.1",
+		"dayjs": "^1.11.11",
+		"nostr-tools": "^2.5.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
 		"slate": "^0.102.0",
 		"slate-react": "^0.102.0"
 	},
 	"devDependencies": {
 		"@lume/tsconfig": "workspace:^",
 		"@lume/types": "workspace:^",
-		"@types/react": "^18.2.79",
-		"@types/react-dom": "^18.2.25",
+		"@types/react": "^18.3.1",
+		"@types/react-dom": "^18.3.0",
 		"tailwind-merge": "^2.3.0",
 		"typescript": "^5.4.5"
 	}

packages/utils/src/cn.ts

@@ -1,4 +1,4 @@
-import { ClassValue, clsx } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

packages/utils/src/editor.ts

@@ -1,8 +1,8 @@
+import type { Contact } from "@lume/types";
+import type { ReactNode } from "react";
 import ReactDOM from "react-dom";
-import { ReactNode } from "react";
-import { BaseEditor, Transforms } from "slate";
+import { type BaseEditor, Transforms } from "slate";
 import { ReactEditor } from "slate-react";
-import { Contact } from "@lume/types";
 
 export const Portal = ({ children }: { children?: ReactNode }) => {
 	return typeof document === "object"

packages/utils/src/formater.ts

@@ -1,9 +1,8 @@
+import { BitcoinUnit } from "bitcoin-units";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import updateLocale from "dayjs/plugin/updateLocale";
-import { nip19 } from "nostr-tools";
 import { AUDIOS, IMAGES, VIDEOS } from "./constants";
-import { BitcoinUnit } from "bitcoin-units";
 
 dayjs.extend(relativeTime);
 dayjs.extend(updateLocale);
@@ -61,10 +60,7 @@ export function displayNsec(key: string, len: number) {
 }
 
 export function displayNpub(pubkey: string, len: number) {
-	const npub = pubkey.startsWith("npub1")
-		? pubkey
-		: (nip19.npubEncode(pubkey) as string);
-	if (npub.length <= len) return npub;
+	if (pubkey.length <= len) return pubkey;
 
 	const separator = " ... ";
 
@@ -74,9 +70,9 @@ export function displayNpub(pubkey: string, len: number) {
 	const backChars = Math.floor(charsToShow / 2);
 
 	return (
-		npub.substr(0, frontChars) +
+		pubkey.substr(0, frontChars) +
 		separator +
-		npub.substr(npub.length - backChars)
+		pubkey.substr(pubkey.length - backChars)
 	);
 }
 

packages/utils/src/hooks/useOpenGraph.ts

@@ -1,4 +1,4 @@
-import { type Opengraph } from "@lume/types";
+import type { Opengraph } from "@lume/types";
 import { useQuery } from "@tanstack/react-query";
 import { invoke } from "@tauri-apps/api/core";
 
@@ -13,7 +13,7 @@ export function useOpenGraph(url: string) {
 				throw new Error("fetch preview failed");
 			}
 		},
-		staleTime: Infinity,
+		staleTime: Number.POSITIVE_INFINITY,
 		refetchOnWindowFocus: false,
 		refetchOnMount: false,
 		refetchOnReconnect: false,

packages/utils/src/nip01.ts

@@ -1,11 +1,11 @@
 import { nip19 } from "nostr-tools";
-import { EventPointer, ProfilePointer } from "nostr-tools/lib/types/nip19";
+import type { EventPointer, ProfilePointer } from "nostr-tools/lib/types/nip19";
 
 // Borrow from NDK
 // https://github.com/nostr-dev-kit/ndk/blob/master/ndk/src/events/content-tagger.ts
 export async function generateContentTags(content: string) {
-	let promises: Promise<void>[] = [];
-	let tags: string[][] = [];
+	const promises: Promise<void>[] = [];
+	const tags: string[][] = [];
 
 	const tagRegex = /(@|nostr:)(npub|nprofile|note|nevent|naddr)[a-zA-Z0-9]+/g;
 	const hashtagRegex = /#(\w+)/g;

packages/utils/src/parser.ts

@@ -0,0 +1,35 @@
+import { IMAGES, VIDEOS } from "./constants";
+
+export function parser(content: string) {
+	// Get clean content
+	const urls = content.match(/(https?:\/\/\S+)/gi);
+
+	// Extract images and videos from content
+	const images: string[] = [];
+	const videos: string[] = [];
+	let text: string = content;
+
+	if (urls) {
+		for (const url of urls) {
+			const ext = new URL(url).pathname.split(".")[1];
+
+			if (IMAGES.includes(ext)) {
+				text = text.replace(url, "");
+				images.push(url);
+			}
+
+			if (VIDEOS.includes(ext)) {
+				text = text.replace(url, "");
+				videos.push(url);
+			}
+		}
+	}
+
+	const trimContent = text.trim();
+
+	return {
+		content: trimContent,
+		images,
+		videos,
+	};
+}