polish

2023-11-12 15:43:14 +07:00
parent a3632571ff
commit 0a5076f06c
27 changed files with 91 additions and 471 deletions
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,4 +1,5 @@
 import { message } from '@tauri-apps/plugin-dialog';
+import { fetch } from '@tauri-apps/plugin-http';
 import { RouterProvider, createBrowserRouter, defer, redirect } from 'react-router-dom';
 import { ReactFlowProvider } from 'reactflow';

--- a/src/app/auth/components/features/favoriteHashtag.tsx
+++ b/src/app/auth/components/features/favoriteHashtag.tsx
@@ -11,10 +11,10 @@ export function FavoriteHashtag() {
    <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
      <div className="flex items-start justify-between">
        <div>
-          <h5 className="font-semibold">Favorite hashtag</h5>
+          <h5 className="font-semibold">Favorite topic</h5>
          <p className="text-sm">
-            By adding favorite hashtag, Lume will display all contents related to this
-            hashtag as a column
+            By adding favorite topic, Lume will display all contents related to this topic
+            for you
          </p>
        </div>
        {hashtag ? (
--- a/src/app/auth/onboarding/hashtag.tsx
+++ b/src/app/auth/onboarding/hashtag.tsx
@@ -4,33 +4,31 @@ import { useNavigate } from 'react-router-dom';

 import { ArrowLeftIcon, CheckCircleIcon, LoaderIcon } from '@shared/icons';

-import { HASHTAGS } from '@stores/constants';
+import { TOPICS, WIDGET_KIND } from '@stores/constants';
 import { useOnboarding } from '@stores/onboarding';

+import { useWidget } from '@utils/hooks/useWidget';
+
 export function OnboardHashtagScreen() {
  const [loading, setLoading] = useState(false);
-  const [tags, setTags] = useState(new Set<string>());
+  const [topic, setTopic] = useState(null);

  const navigate = useNavigate();
  const setHashtag = useOnboarding((state) => state.toggleHashtag);

-  const toggleTag = (tag: string) => {
-    if (tags.has(tag)) {
-      setTags((prev) => {
-        prev.delete(tag);
-        return new Set(prev);
-      });
-    } else {
-      if (tags.size >= 3) return;
-      setTags((prev) => new Set(prev.add(tag)));
-    }
-  };
+  const { addWidget } = useWidget();

  const submit = async () => {
    try {
      setLoading(true);
-
      setHashtag();
+
+      addWidget.mutate({
+        kind: WIDGET_KIND.topic,
+        title: topic.title,
+        content: JSON.stringify(topic.content),
+      });
+
      navigate(-1);
    } catch (e) {
      setLoading(false);
@@ -53,19 +51,19 @@ export function OnboardHashtagScreen() {
      </div>
      <div className="mx-auto flex w-full max-w-md flex-col gap-10 px-3">
        <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          Choose {tags.size}/3 your favorite hashtag
+          Choose your favorite topic
        </h1>
        <div className="flex flex-col gap-4">
-          <div className="flex h-[420px] w-full flex-col overflow-y-auto rounded-xl bg-neutral-100 dark:bg-neutral-900">
-            {HASHTAGS.map((item: { hashtag: string }) => (
+          <div className="flex w-full flex-col gap-3">
+            {TOPICS.map((item) => (
              <button
-                key={item.hashtag}
+                key={item.title}
                type="button"
-                onClick={() => toggleTag(item.hashtag)}
-                className="inline-flex items-center justify-between px-4 py-2 hover:bg-neutral-300 dark:hover:bg-neutral-700"
+                onClick={() => setTopic(item)}
+                className="inline-flex h-14 items-center justify-between rounded-xl bg-neutral-100 px-4 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
              >
-                <p className="text-neutral-900 dark:text-neutral-100">{item.hashtag}</p>
-                {tags.has(item.hashtag) && (
+                <p className="font-medium">{item.title}</p>
+                {topic && topic.title === item.title && (
                  <div>
                    <CheckCircleIcon className="h-5 w-5 text-teal-500" />
                  </div>
@@ -76,7 +74,7 @@ export function OnboardHashtagScreen() {
          <button
            type="button"
            onClick={submit}
-            disabled={loading || tags.size === 0}
+            disabled={loading || !topic}
            className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
          >
            {loading ? (
@@ -85,7 +83,7 @@ export function OnboardHashtagScreen() {
                <span>Adding...</span>
              </>
            ) : (
-              <span>Add {tags.size} tags & Continue</span>
+              <span>Add & Continue</span>
            )}
          </button>
        </div>
--- a/src/app/auth/onboarding/list.tsx
+++ b/src/app/auth/onboarding/list.tsx
@@ -31,7 +31,7 @@ export function OnboardingListScreen() {
    <div className="relative flex h-full w-full items-center justify-center">
      <div className="mx-auto flex w-full max-w-md flex-col gap-10">
        <div className="text-center">
-          <h1 className="text-2xl text-neutral-900 dark:text-neutral-100">
+          <h1 className="text-2xl font-light text-neutral-900 dark:text-neutral-100">
            You&apos;re almost ready to use Lume.
          </h1>
          <h2 className="text-xl font-semibold text-neutral-900 dark:text-neutral-100">
--- a/src/app/relays/components/relayEventList.tsx
+++ b/src/app/relays/components/relayEventList.tsx
@@ -11,7 +11,7 @@ import { MemoizedRepost, MemoizedTextNote, UnknownNote } from '@shared/notes';
 export function RelayEventList({ relayUrl }: { relayUrl: string }) {
  const { fetcher } = useNDK();
  const { status, data } = useQuery({
-    queryKey: ['relay-event'],
+    queryKey: ['relay-events', relayUrl],
    queryFn: async () => {
      const url = 'wss://' + relayUrl;
      const events = await fetcher.fetchLatestEvents(
@@ -42,7 +42,7 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {

  return (
    <div className="h-full">
-      <div className="mx-auto w-full max-w-[500px]">
+      <VList className="mx-auto w-full max-w-[500px] scrollbar-none">
        {status === 'pending' ? (
          <div className="flex h-full w-full items-center justify-center">
            <div className="inline-flex flex-col items-center justify-center gap-2">
@@ -51,13 +51,9 @@ export function RelayEventList({ relayUrl }: { relayUrl: string }) {
            </div>
          </div>
        ) : (
-          <VList className="h-full scrollbar-none">
-            <div className="h-10" />
-            {data.map((item) => renderItem(item))}
-            <div className="h-16" />
-          </VList>
+          data.map((item) => renderItem(item))
        )}
-      </div>
+      </VList>
    </div>
  );
 }
--- a/src/app/relays/components/relayList.tsx
+++ b/src/app/relays/components/relayList.tsx
@@ -56,7 +56,7 @@ export function RelayList() {
        <VList className="h-full">
          <div className="inline-flex h-16 w-full items-center border-b border-neutral-100 px-3 dark:border-neutral-900">
            <h3 className="font-semibold text-neutral-950 dark:text-neutral-50">
-              All relays used by your follows
+              All relays
            </h3>
          </div>
          {[...data].map(([key, value]) => (
--- a/src/app/relays/components/userRelay.tsx
+++ b/src/app/relays/components/userRelay.tsx
@@ -36,7 +36,7 @@ export function UserRelay() {
          {data.map((item) => (
            <div
              key={item}
-              className="group flex h-10 items-center justify-between rounded-lg bg-neutral-200 pl-3 pr-1.5 dark:bg-neutral-800"
+              className="group flex h-10 items-center justify-between rounded-lg bg-neutral-100 pl-3 pr-1.5 dark:bg-neutral-900"
            >
              <div className="inline-flex items-center gap-2.5">
                {relayUrls.includes(item) ? (
--- a/src/libs/ndk/instance.ts
+++ b/src/libs/ndk/instance.ts
@@ -4,6 +4,7 @@ import { message } from '@tauri-apps/plugin-dialog';
 import { fetch } from '@tauri-apps/plugin-http';
 import { NostrFetcher } from 'nostr-fetch';
 import { useEffect, useMemo, useState } from 'react';
+import { toast } from 'sonner';

 import NDKCacheAdapterTauri from '@libs/ndk/cache';
 import { useStorage } from '@libs/storage/provider';
@@ -36,11 +37,11 @@ export const NDKInstance = () => {
          });

          if (!res.ok) {
-            console.info(`${relay} is not working, skipping...`);
+            toast.warning(`${relay} is not working, skipping...`);
            onlineRelays.delete(relay);
          }
        } catch {
-          console.warn(`${relay} is not working, skipping...`);
+          toast.warning(`${relay} is not working, skipping...`);
          onlineRelays.delete(relay);
        }
      }
--- a/src/shared/notes/preview/image.tsx
+++ b/src/shared/notes/preview/image.tsx
@@ -40,7 +40,7 @@ export function ImagePreview({ url }: { url: string }) {
        decoding="async"
        style={{ contentVisibility: 'auto' }}
        onError={fallback}
-        className="h-auto w-full rounded-lg border border-neutral-300/50 object-cover dark:border-neutral-700/50"
+        className="h-auto w-full rounded-lg border border-neutral-200/50 object-cover dark:border-neutral-800/50"
      />
      <button
        type="button"
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -150,7 +150,7 @@ export const User = memo(function User({
            alt={pubkey}
            loading="lazy"
            decoding="async"
-            className="h-14 w-14 rounded-lg"
+            className="h-14 w-14 rounded-lg object-cover"
          />
          <Avatar.Fallback delayMs={300}>
            <img
@@ -475,8 +475,8 @@ export const User = memo(function User({

  if (status === 'pending') {
    return (
-      <div className="flex items-start gap-3">
-        <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
+      <div className="flex items-center gap-3 px-3">
+        <div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
        <div className="h-6 flex-1">
          <div className="h-4 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
        </div>
--- a/src/shared/widgets/article.tsx
+++ b/src/shared/widgets/article.tsx
@@ -21,7 +21,7 @@ export function ArticleWidget({ widget }: { widget: Widget }) {
  const { ndk, relayUrls, fetcher } = useNDK();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: ['widget-article'],
+      queryKey: ['article', widget.id],
      initialPageParam: 0,
      queryFn: async ({
        signal,
--- a/src/shared/widgets/file.tsx
+++ b/src/shared/widgets/file.tsx
@@ -21,7 +21,7 @@ export function FileWidget({ widget }: { widget: Widget }) {
  const { ndk, relayUrls, fetcher } = useNDK();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: ['widget-media'],
+      queryKey: ['media', widget.id],
      initialPageParam: 0,
      queryFn: async ({
        signal,
--- a/src/shared/widgets/group.tsx
+++ b/src/shared/widgets/group.tsx
@@ -23,7 +23,7 @@ export function GroupWidget({ widget }: { widget: Widget }) {
  const { relayUrls, ndk, fetcher } = useNDK();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: [`widget-${widget.id}`],
+      queryKey: ['groupfeeds', widget.id],
      initialPageParam: 0,
      queryFn: async ({
        signal,
--- a/src/shared/widgets/hashtag.tsx
+++ b/src/shared/widgets/hashtag.tsx
@@ -18,7 +18,7 @@ export function HashtagWidget({ widget }: { widget: Widget }) {
  const { ndk, relayUrls, fetcher } = useNDK();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: [`widget-${widget.content}`],
+      queryKey: ['hashtag', widget.id],
      initialPageParam: 0,
      queryFn: async ({
        signal,
--- a/src/shared/widgets/nostrBand/trendingAccounts.tsx
+++ b/src/shared/widgets/nostrBand/trendingAccounts.tsx
@@ -17,7 +17,7 @@ interface Response {

 export function TrendingAccountsWidget({ widget }: { widget: Widget }) {
  const { status, data } = useQuery({
-    queryKey: ['trending-profiles-widget'],
+    queryKey: ['trending-users'],
    queryFn: async () => {
      const res = await fetch('https://api.nostr.band/v0/trending/profiles');
      if (!res.ok) {
--- a/src/shared/widgets/nostrBand/trendingNotes.tsx
+++ b/src/shared/widgets/nostrBand/trendingNotes.tsx
@@ -15,7 +15,7 @@ interface Response {

 export function TrendingNotesWidget({ widget }: { widget: Widget }) {
  const { status, data } = useQuery({
-    queryKey: ['widget-' + widget.id],
+    queryKey: ['trending-posts'],
    queryFn: async () => {
      const res = await fetch('https://api.nostr.band/v0/trending/notes');
      if (!res.ok) {
--- a/src/shared/widgets/notification.tsx
+++ b/src/shared/widgets/notification.tsx
@@ -148,9 +148,9 @@ export function NotificationWidget() {
            </div>
          </div>
        ) : allEvents.length < 1 ? (
-          <div className="flex h-full w-full flex-col items-center justify-center">
-            <p className="mb-1 text-4xl">🎉</p>
-            <p className="text-center font-medium text-neutral-600 dark:text-neutral-400">
+          <div className="flex h-[400px] w-full flex-col items-center justify-center">
+            <p className="mb-2 text-4xl">🎉</p>
+            <p className="text-center font-medium text-neutral-900 dark:text-neutral-100">
              Hmm! Nothing new yet.
            </p>
          </div>
--- a/src/shared/widgets/other/toggleWidgetList.tsx
+++ b/src/shared/widgets/other/toggleWidgetList.tsx
@@ -16,10 +16,9 @@ export function ToggleWidgetList() {
          onClick={() =>
            addWidget.mutate({ kind: WIDGET_KIND.list, title: '', content: '' })
          }
-          className="inline-flex h-9 items-center gap-2 rounded-full bg-neutral-100 px-3 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
+          className="inline-flex h-14 w-14 items-center justify-center rounded-full bg-neutral-100 text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
        >
-          <PlusIcon className="h-4 w-4 text-neutral-900 dark:text-zinc-100" />
-          <p className="text-sm font-semibold leading-none">Add widget</p>
+          <PlusIcon className="h-5 w-5" />
        </button>
      </div>
    </WidgetWrapper>
--- a/src/shared/widgets/tmp/feeds.tsx
+++ b/src/shared/widgets/tmp/feeds.tsx
@@ -1,96 +0,0 @@
-import { useState } from 'react';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowRightCircleIcon, CancelIcon, CheckCircleIcon } from '@shared/icons';
-import { User } from '@shared/user';
-import { WidgetWrapper } from '@shared/widgets';
-
-import { WIDGET_KIND } from '@stores/constants';
-
-import { useWidget } from '@utils/hooks/useWidget';
-import { Widget } from '@utils/types';
-
-export function XfeedsWidget({ params }: { params: Widget }) {
-  const { db } = useStorage();
-  const { addWidget, removeWidget } = useWidget();
-
-  const [title, setTitle] = useState<string>('');
-  const [groups, setGroups] = useState<Array<string>>([]);
-
-  // toggle follow state
-  const toggleGroup = (pubkey: string) => {
-    const arr = groups.includes(pubkey)
-      ? groups.filter((i) => i !== pubkey)
-      : [...groups, pubkey];
-    setGroups(arr);
-  };
-
-  const submit = async () => {
-    addWidget.mutate({
-      kind: WIDGET_KIND.group,
-      title: title || 'Group',
-      content: JSON.stringify(groups),
-    });
-    // remove temp widget
-    removeWidget.mutate(params.id);
-  };
-
-  return (
-    <WidgetWrapper>
-      <div className="flex h-11 shrink-0 items-center justify-between px-3">
-        <div className="w-6 shrink-0" />
-        <h3 className="text-center font-semibold text-neutral-900 dark:text-neutral-100">
-          Adding group feeds
-        </h3>
-        <button
-          type="button"
-          onClick={() => removeWidget.mutate(params.id)}
-          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-900 backdrop-blur-xl hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
-        >
-          <CancelIcon className="h-3 w-3" />
-        </button>
-      </div>
-      <div className="flex flex-1 flex-col justify-between">
-        <div className="flex min-h-0 flex-1 flex-col gap-2 px-3 pb-3">
-          <input
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            placeholder="Group name"
-            className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-300"
-          />
-          <div className="flex-grow-1 flex flex-1 shrink basis-0 flex-col overflow-y-auto rounded-xl bg-neutral-50 dark:bg-neutral-950">
-            <div className="flex h-10 shrink-0 items-center border-b border-neutral-100 px-4 text-sm font-semibold dark:border-neutral-900">
-              Add users {title ? 'to ' + title : ''}
-            </div>
-            {db.account.circles.map((item: string) => (
-              <button
-                key={item}
-                type="button"
-                onClick={() => toggleGroup(item)}
-                className="inline-flex transform items-center justify-between px-4 py-2 hover:bg-neutral-100 dark:hover:bg-neutral-900"
-              >
-                <User pubkey={item} variant="simple" />
-                {groups.includes(item) ? (
-                  <CheckCircleIcon className="h-5 w-5 text-teal-500" />
-                ) : null}
-              </button>
-            ))}
-          </div>
-        </div>
-        <div className="flex h-14 shrink-0 gap-2 border-t border-neutral-100 px-3 pt-2.5 dark:border-neutral-900">
-          <button
-            type="submit"
-            disabled={groups.length < 1}
-            onClick={submit}
-            className="inline-flex h-9 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
-          >
-            <span className="w-5" />
-            <span>Add {groups.length} user to group feed</span>
-            <ArrowRightCircleIcon className="h-5 w-5" />
-          </button>
-        </div>
-      </div>
-    </WidgetWrapper>
-  );
-}
--- a/src/shared/widgets/tmp/hashtag.tsx
+++ b/src/shared/widgets/tmp/hashtag.tsx
@@ -1,110 +0,0 @@
-import { Resolver, useForm } from 'react-hook-form';
-
-import { ArrowRightCircleIcon, CancelIcon } from '@shared/icons';
-import { WidgetWrapper } from '@shared/widgets';
-
-import { HASHTAGS, WIDGET_KIND } from '@stores/constants';
-
-import { useWidget } from '@utils/hooks/useWidget';
-import { Widget } from '@utils/types';
-
-type FormValues = {
-  hashtag: string;
-};
-
-const resolver: Resolver<FormValues> = async (values) => {
-  return {
-    values: values.hashtag ? values : {},
-    errors: !values.hashtag
-      ? {
-          hashtag: {
-            type: 'required',
-            message: 'This is required.',
-          },
-        }
-      : {},
-  };
-};
-
-export function XhashtagWidget({ params }: { params: Widget }) {
-  const { addWidget, removeWidget } = useWidget();
-  const {
-    register,
-    setValue,
-    setError,
-    handleSubmit,
-    formState: { errors, isDirty, isValid },
-  } = useForm<FormValues>({ resolver });
-
-  const onSubmit = async (data: FormValues) => {
-    try {
-      addWidget.mutate({
-        kind: WIDGET_KIND.hashtag,
-        title: data.hashtag,
-        content: data.hashtag.replace('#', ''),
-      });
-      // remove temp widget
-      removeWidget.mutate(params.id);
-    } catch (e) {
-      setError('hashtag', {
-        type: 'custom',
-        message: e,
-      });
-    }
-  };
-
-  return (
-    <WidgetWrapper>
-      <div className="flex h-11 shrink-0 items-center justify-between px-3">
-        <div className="w-6 shrink-0" />
-        <h3 className="text-center font-semibold text-neutral-900 dark:text-neutral-100">
-          Adding hashtag feeds
-        </h3>
-        <button
-          type="button"
-          onClick={() => removeWidget.mutate(params.id)}
-          className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-900 backdrop-blur-xl hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
-        >
-          <CancelIcon className="h-3 w-3" />
-        </button>
-      </div>
-      <div className="flex flex-1 flex-col px-3">
-        <form onSubmit={handleSubmit(onSubmit)} className="mb-0 flex flex-col gap-2">
-          <div className="flex flex-col gap-1">
-            <input
-              {...register('hashtag', { required: true, minLength: 1 })}
-              placeholder="Enter a hashtag"
-              className="relative h-11 w-full rounded-lg bg-neutral-100 px-3 py-1 text-neutral-900 !outline-none placeholder:text-neutral-500 dark:bg-neutral-900 dark:text-neutral-100 dark:placeholder:text-neutral-300"
-            />
-            <span className="text-sm text-red-400">
-              {errors.hashtag && <p>{errors.hashtag.message}</p>}
-            </span>
-          </div>
-          <div className="flex flex-wrap items-center justify-start gap-2">
-            {HASHTAGS.map((item) => (
-              <button
-                key={item.hashtag}
-                type="button"
-                onClick={() => setValue('hashtag', item.hashtag)}
-                className="inline-flex h-6 w-min items-center justify-center rounded-md bg-neutral-100 px-2 text-sm hover:bg-neutral-200 dark:bg-neutral-900 dark:hover:bg-neutral-800"
-              >
-                {item.hashtag}
-              </button>
-            ))}
-          </div>
-          <div className="mt-2 flex flex-col items-center justify-center gap-2">
-            <button
-              type="submit"
-              disabled={!isDirty || !isValid}
-              className="inline-flex h-9 w-full items-center justify-between gap-2 rounded-lg bg-blue-500 px-6 font-medium text-white hover:bg-blue-600 focus:outline-none disabled:opacity-50"
-            >
-              <span className="w-5" />
-              <span>Add</span>
-              <ArrowRightCircleIcon className="h-5 w-5" />
-            </button>
-          </div>
-        </form>
-      </div>
-    </WidgetWrapper>
-  );
-}
--- a/src/shared/widgets/topic.tsx
+++ b/src/shared/widgets/topic.tsx
@@ -24,7 +24,7 @@ export function TopicWidget({ widget }: { widget: Widget }) {
  const { relayUrls, ndk, fetcher } = useNDK();
  const { status, data, hasNextPage, isFetchingNextPage, fetchNextPage } =
    useInfiniteQuery({
-      queryKey: ['widget-' + widget.id],
+      queryKey: ['topic', widget.id],
      initialPageParam: 0,
      queryFn: async ({
        signal,
--- a/src/shared/widgets/user.tsx
+++ b/src/shared/widgets/user.tsx
@@ -21,7 +21,7 @@ import { Widget } from '@utils/types';
 export function UserWidget({ widget }: { widget: Widget }) {
  const { ndk } = useNDK();
  const { status, data } = useQuery({
-    queryKey: ['widget-' + widget.id],
+    queryKey: ['user-posts', widget.id],
    queryFn: async () => {
      const rootIds = new Set();
      const dedupQueue = new Set();
--- a/src/stores/constants.ts
+++ b/src/stores/constants.ts
@@ -102,6 +102,9 @@ export const TOPICS = [
      '#thewitcher',
      '#rogally',
      '#rog',
+      '#indiegames',
+      '#indiedev',
+      '#gamedev',
    ],
  },
  {
@@ -136,6 +139,7 @@ export const TOPICS = [
      '#amass',
      '#bluray',
      '#Blu_Ray',
+      '#taylor',
    ],
  },
  {
@@ -262,22 +266,23 @@ export const TOPICS = [
      '#animestr',
      '#anime',
      '#manga',
-      '#ntr',
      '#otaku',
      '#animeart',
      '#animegirl',
      '#cosplay',
-      '#kawaii',
      '#weeb',
      '#onepiece',
      '#demonslayer',
      '#animeworld',
      '#aot',
-      '#hentai',
      '#fanart',
-      '#loli',
      '#vocaloid',
      '#vtuber',
+      '#fate',
+      '#hololive',
+      '#hololivemeet',
+      '#pixiv',
+      '#waifu',
    ],
  },
  {
@@ -292,6 +297,7 @@ export const TOPICS = [
      '#sexy',
      '#loli',
      '#hentai',
+      '#ntr',
    ],
  },
 ];
--- a/src/stores/resources.ts
+++ b/src/stores/resources.ts
@@ -1,88 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import { Resources } from '@utils/types';
-
-const DEFAULT_RESOURCES: Array<Resources> = [
-  {
-    title: 'The Basics (provide by nostr.com)',
-    data: [
-      {
-        id: 'naddr1qqxnzd3exsurgwfnxgcnjve5qgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa283wgxe0',
-        title: 'What is Nostr?',
-        image: '',
-      },
-      {
-        id: 'naddr1qqxnzd3exsurgwf48qcnvdfcqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28cnv0yt',
-        title: 'Understanding keys',
-        image: '',
-      },
-      {
-        id: 'naddr1qqxnzd3exsurgwfcxgcrzwfjqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28uccw5e',
-        title: "What's a client?",
-        image: '',
-      },
-      {
-        id: 'naddr1qqxnzd3exsurgwfexqersdp5qgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28jvlesq',
-        title: 'What are relays?',
-        image: '',
-      },
-      {
-        id: 'naddr1qqxnzd3exsur2vpjxserjveeqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28rqy7mx',
-        title: 'What is an event?',
-        image: '',
-      },
-      {
-        id: 'naddr1qqxnzd3exsur2vp5xsmnywpnqgsym7p8qvs805ny3z3vausedzzwnwk27cfe67r69nrxpqe8w0urmegrqsqqqa28hxwx4e',
-        title: 'How to help Nostr?',
-        image: '',
-      },
-    ],
-  },
-  {
-    title: 'Lume Tutorials',
-    data: [],
-  },
-];
-
-interface ResourceState {
-  resources: Array<Resources>;
-  seens: Set<string>;
-  openResource: (id: string) => void;
-}
-
-export const useResources = create<ResourceState>()(
-  persist(
-    (set) => ({
-      resources: DEFAULT_RESOURCES,
-      seens: new Set(),
-      openResource: (id: string) => {
-        set((state) => ({ seens: new Set(state.seens).add(id) }));
-      },
-    }),
-    {
-      name: 'resources',
-      storage: {
-        getItem: (name) => {
-          const str = localStorage.getItem(name);
-          return {
-            state: {
-              ...JSON.parse(str).state,
-              seens: new Set(JSON.parse(str).state.seens),
-            },
-          };
-        },
-        setItem: (name, newValue) => {
-          const str = JSON.stringify({
-            state: {
-              ...newValue.state,
-              seens: Array.from(newValue.state.seens),
-            },
-          });
-          localStorage.setItem(name, str);
-        },
-        removeItem: (name) => localStorage.removeItem(name),
-      },
-    }
-  )
-);
--- a/src/utils/hooks/useRichContent.tsx
+++ b/src/utils/hooks/useRichContent.tsx
@@ -49,7 +49,7 @@ export function useRichContent(content: string, textmode: boolean = false) {
  let videos: string[] = [];
  let events: string[] = [];

-  const text = content.replace(/\n\s*\n/g, '\n');
+  const text = content.replace(/\n+/g, '\n');
  const words = text.split(/( |\n)/);

  if (!textmode) {