new onboarding process

src/shared/avatarUploader.tsx

@@ -1,5 +1,6 @@
 import { createBlobFromFile } from "@utils/createBlobFromFile";
 
+import { LoaderIcon } from "./icons";
 import { open } from "@tauri-apps/api/dialog";
 import { Body, fetch } from "@tauri-apps/api/http";
 import { useState } from "react";
@@ -54,30 +55,10 @@ export function AvatarUploader({ valueState }: { valueState: any }) {
 		<button
 			onClick={() => openFileDialog()}
 			type="button"
-			className="inline-flex h-6 items-center justify-center rounded bg-zinc-900 px-3 text-base font-medium text-zinc-100 ring-1 ring-zinc-800 hover:bg-zinc-700"
+			className="inline-flex h-7 items-center justify-center rounded bg-zinc-900 px-3 text-sm font-medium text-zinc-200 hover:bg-zinc-800"
 		>
 			{loading ? (
-				<svg
-					className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
-					xmlns="http://www.w3.org/2000/svg"
-					fill="none"
-					viewBox="0 0 24 24"
-				>
-					<title id="loading">Loading</title>
-					<circle
-						className="opacity-25"
-						cx="12"
-						cy="12"
-						r="10"
-						stroke="currentColor"
-						strokeWidth="4"
-					/>
-					<path
-						className="opacity-75"
-						fill="currentColor"
-						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-					/>
-				</svg>
+				<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
 			) : (
 				<span className="leading-none">Upload</span>
 			)}

src/shared/button.tsx

@@ -24,7 +24,7 @@ export function Button({
 			break;
 		case "large":
 			preClass =
-				"h-11 w-full bg-fuchsia-500 rounded-md text-sm font-medium text-zinc-100 hover:bg-fuchsia-600";
+				"h-11 w-full bg-fuchsia-500 rounded-md font-medium text-zinc-100 hover:bg-fuchsia-600";
 			break;
 		default:
 			break;

src/shared/composer/modal.tsx

@@ -11,8 +11,8 @@ import {
 import { useActiveAccount } from "@stores/accounts";
 import { useComposer } from "@stores/composer";
 import { COMPOSE_SHORTCUT } from "@stores/shortcuts";
-import { isRegistered, register } from "@tauri-apps/api/globalShortcut";
-import { Fragment, useEffect } from "react";
+import { Fragment } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 
 export function Composer() {
 	const account = useActiveAccount((state: any) => state.account);
@@ -25,18 +25,7 @@ export function Composer() {
 		toggle(false);
 	};
 
-	const registerShortcut = async () => {
-		const isShortcutRegistered = await isRegistered(COMPOSE_SHORTCUT);
-		if (!isShortcutRegistered) {
-			await register(COMPOSE_SHORTCUT, () => {
-				toggle(true);
-			});
-		}
-	};
-
-	useEffect(() => {
-		registerShortcut();
-	}, []);
+	useHotkeys(COMPOSE_SHORTCUT, () => toggle(true));
 
 	return (
 		<>

src/shared/icons/arrowRightCircle.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export function ArrowRightCircleIcon(
+	props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="24"
+			height="24"
+			fill="none"
+			viewBox="0 0 24 24"
+			{...props}
+		>
+			<path
+				stroke="currentColor"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				strokeWidth="1.5"
+				d="M7.75 12h8M13 8.75l2.896 2.896a.5.5 0 010 .708L13 15.25M21.25 12a9.25 9.25 0 11-18.5 0 9.25 9.25 0 0118.5 0z"
+			/>
+		</svg>
+	);
+}

src/shared/notes/contents/kind1.tsx

@@ -10,7 +10,7 @@ export function Kind1({
 	return (
 		<>
 			<div
-				className={`select-text break-words text-base text-zinc-100 ${
+				className={`select-text whitespace-pre-line	break-words text-base text-zinc-100 ${
 					truncate ? "line-clamp-3" : ""
 				}`}
 			>