polish

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 ? (

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>

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">

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>
   );
 }

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]) => (

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) ? (