improve spacing

package.json

@@ -21,7 +21,7 @@
     "@evilmartians/harmony": "^1.1.0",
     "@getalby/sdk": "^2.5.0",
     "@nostr-dev-kit/ndk": "^2.0.5",
-    "@nostr-dev-kit/ndk-cache-dexie": "^2.0.3",
+    "@nostr-dev-kit/ndk-cache-dexie": "^2.0.5",
     "@nostr-fetch/adapter-ndk": "^0.13.1",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-avatar": "^1.0.4",
@@ -32,9 +32,9 @@
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@tanstack/query-sync-storage-persister": "^5.4.3",
+    "@tanstack/query-sync-storage-persister": "^5.8.1",
-    "@tanstack/react-query": "^5.7.0",
+    "@tanstack/react-query": "^5.8.1",
-    "@tanstack/react-query-persist-client": "^5.7.0",
+    "@tanstack/react-query-persist-client": "^5.8.1",
     "@tauri-apps/api": "2.0.0-alpha.11",
     "@tauri-apps/cli": "2.0.0-alpha.17",
     "@tauri-apps/plugin-clipboard-manager": "2.0.0-alpha.3",
@@ -67,7 +67,7 @@
     "idb-keyval": "^6.2.1",
     "immer": "^10.0.3",
     "light-bolt11-decoder": "^3.0.0",
-    "lru-cache": "^10.0.1",
+    "lru-cache": "^10.0.2",
     "markdown-to-jsx": "^7.3.2",
     "media-chrome": "^1.5.2",
     "minidenticons": "^4.2.0",
@@ -76,32 +76,32 @@
     "qrcode.react": "^3.1.0",
     "re-resizable": "^6.9.11",
     "react": "^18.2.0",
-    "react-currency-input-field": "^3.6.11",
+    "react-currency-input-field": "^3.6.12",
     "react-dom": "^18.2.0",
-    "react-hook-form": "^7.48.1",
+    "react-hook-form": "^7.48.2",
     "react-hotkeys-hook": "^4.4.1",
     "react-medium-image-zoom": "^5.1.8",
     "react-router-dom": "^6.18.0",
     "react-string-replace": "^1.1.1",
-    "reactflow": "^11.9.4",
+    "reactflow": "^11.10.1",
-    "sonner": "^1.1.0",
+    "sonner": "^1.2.0",
     "tailwind-scrollbar": "^3.0.5",
     "tauri-controls": "^0.2.0",
     "tippy.js": "^6.3.7",
-    "tiptap-markdown": "^0.8.3",
+    "tiptap-markdown": "^0.8.4",
-    "virtua": "^0.16.1",
+    "virtua": "^0.16.2",
     "zustand": "^4.4.6"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.10",
-    "@trivago/prettier-plugin-sort-imports": "^4.2.1",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/html-to-text": "^9.0.3",
+    "@types/html-to-text": "^9.0.4",
-    "@types/node": "^20.8.10",
+    "@types/node": "^20.9.0",
-    "@types/react": "^18.2.34",
+    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.14",
+    "@types/react-dom": "^18.2.15",
-    "@types/youtube-player": "^5.5.9",
+    "@types/youtube-player": "^5.5.10",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react-swc": "^3.4.1",
     "autoprefixer": "^10.4.16",
     "clsx": "^2.0.0",
@@ -117,7 +117,7 @@
     "lint-staged": "^15.0.2",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
-    "prettier-plugin-tailwindcss": "^0.5.6",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "prop-types": "^15.8.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.5",

src/app/home/index.tsx

@@ -36,17 +36,17 @@ export function HomeScreen() {
       const dbWidgets = await db.getWidgets();
       const defaultWidgets = [
         {
-          id: '99999',
+          id: '9998',
-          title: 'Newsfeed',
-          content: '',
-          kind: WIDGET_KIND.newsfeed,
-        },
-        {
-          id: '99998',
           title: 'Notification',
           content: '',
           kind: WIDGET_KIND.notification,
         },
+        {
+          id: '9999',
+          title: 'Newsfeed',
+          content: '',
+          kind: WIDGET_KIND.newsfeed,
+        },
       ];
 
       return [...defaultWidgets, ...dbWidgets];

src/shared/navigation.tsx

@@ -2,14 +2,7 @@ import { Link, NavLink } from 'react-router-dom';
 import { twMerge } from 'tailwind-merge';
 
 import { ActiveAccount } from '@shared/accounts/active';
-import {
+import { ChatsIcon, ComposeIcon, HomeIcon, NwcIcon, RelayIcon } from '@shared/icons';
-  ChatsIcon,
-  ComposeIcon,
-  ExploreIcon,
-  HomeIcon,
-  NwcIcon,
-  RelayIcon,
-} from '@shared/icons';
 
 import { compactNumber } from '@utils/number';
 
@@ -87,29 +80,6 @@ export function Navigation() {
             </>
           )}
         </NavLink>
-        <NavLink
-          to="/explore"
-          preventScrollReset={true}
-          className="inline-flex flex-col items-center justify-center"
-        >
-          {({ isActive }) => (
-            <>
-              <div
-                className={twMerge(
-                  'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
-                  isActive
-                    ? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
-                    : 'text-black/50 dark:text-neutral-400'
-                )}
-              >
-                <ExploreIcon className="h-6 w-6" />
-              </div>
-              <div className="text-sm font-medium text-black dark:text-white">
-                Explore
-              </div>
-            </>
-          )}
-        </NavLink>
       </div>
       <div className="flex shrink-0 flex-col gap-3 p-1">
         <Link

src/shared/notes/kinds/text.tsx

@@ -15,7 +15,7 @@ export function TextKind({ content, textmode }: { content: string; textmode?: bo
 
   return (
     <div className={'min-w-0 px-3'}>
-      <div className="break-p select-text whitespace-pre-line leading-normal text-neutral-900 dark:text-neutral-100">
+      <div className="break-p select-text leading-normal text-neutral-900 dark:text-neutral-100">
         {parsedContent}
       </div>
     </div>

src/shared/notes/preview/image.tsx

@@ -18,7 +18,7 @@ export function ImagePreview({ url }: { url: string }) {
 
   return (
     <Zoom key={url} zoomMargin={50} IconUnzoom={() => <CancelIcon className="h-4 w-4" />}>
-      <div className="group relative mt-2">
+      <div className="group relative my-2">
         <img
           src={url}
           alt={url}

src/shared/notes/preview/link.tsx

@@ -43,7 +43,7 @@ export function LinkPreview({ url }: { url: string }) {
       to={url}
       target="_blank"
       rel="noreferrer"
-      className="flex w-full flex-col rounded-lg bg-neutral-100 dark:bg-neutral-900"
+      className="my-2 flex w-full flex-col rounded-lg bg-neutral-100 dark:bg-neutral-900"
     >
       {isImage(data.image) ? (
         <img

src/shared/notes/preview/video.tsx

@@ -12,7 +12,7 @@ export function VideoPreview({ url }: { url: string }) {
   return (
     <MediaController
       key={url}
-      className="mt-2 aspect-video w-full overflow-hidden rounded-lg"
+      className="my-2 aspect-video w-full overflow-hidden rounded-lg"
     >
       <video slot="media" src={url} preload="metadata" muted />
       <MediaLoadingIndicator slot="centered-chrome"></MediaLoadingIndicator>

src/shared/titleBar.tsx

@@ -51,7 +51,7 @@ export function TitleBar({
         )}
       </div>
       <div className="col-span-1 flex justify-end">
-        {id !== '9999' ? (
+        {id !== '9999' && id !== '9998' ? (
           <button
             type="button"
             onClick={() => removeWidget.mutate(id)}

src/shared/widgets/other/widgetList.tsx

@@ -1,4 +1,4 @@
-import { ArticleIcon, BellIcon, MediaIcon, PlusIcon } from '@shared/icons';
+import { ArticleIcon, MediaIcon, PlusIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
 import { AddGroupFeeds, AddHashtagFeeds, WidgetWrapper } from '@shared/widgets';
 
@@ -117,38 +117,6 @@ export function WidgetList({ widget }: { widget: Widget }) {
               </div>
             </div>
           </div>
-          <div className="rounded-xl bg-neutral-100 p-3 dark:bg-neutral-900">
-            <h3 className="mb-2.5 text-sm font-semibold uppercase text-neutral-700 dark:text-neutral-300">
-              Other
-            </h3>
-            <div className="flex flex-col gap-3">
-              <div className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-white px-3 hover:shadow-md hover:shadow-neutral-200/50 dark:hover:shadow-neutral-800/50">
-                <div className="inline-flex items-center gap-2.5">
-                  <div className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-md bg-neutral-100">
-                    <BellIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Notification</p>
-                </div>
-                <button
-                  type="button"
-                  onClick={() =>
-                    replaceWidget.mutate({
-                      currentId: widget.id,
-                      widget: {
-                        kind: WIDGET_KIND.notification,
-                        title: 'Notification',
-                        content: '',
-                      },
-                    })
-                  }
-                  className="inline-flex h-6 items-center gap-1 rounded-md bg-neutral-100 pl-1.5 pr-2.5 text-sm font-medium hover:bg-blue-500 hover:text-white dark:bg-neutral-900"
-                >
-                  <PlusIcon className="h-3 w-3" />
-                  Add
-                </button>
-              </div>
-            </div>
-          </div>
         </div>
       </div>
     </WidgetWrapper>

src/utils/hooks/useRichContent.tsx

@@ -49,8 +49,8 @@ export function useRichContent(content: string, textmode: boolean = false) {
   let videos: string[] = [];
   let events: string[] = [];
 
-  const text = content;
+  const text = content.replace(/\n\s*\n/g, '\n');
-  const words = text.split(/(\s+)/);
+  const words = text.split(/( |\n)/);
 
   if (!textmode) {
     images = words.filter((word) => IMAGES.some((el) => word.endsWith(el)));
@@ -151,6 +151,10 @@ export function useRichContent(content: string, textmode: boolean = false) {
       );
     });
 
+    parsedContent = reactStringReplace(parsedContent, '\n', (match, i) => {
+      return <div key={'n-' + i} className="h-2" />;
+    });
+
     if (typeof parsedContent[0] === 'string') {
       parsedContent[0] = parsedContent[0].trimStart();
     }