update widget list

2023-11-11 09:14:23 +07:00
parent 0710996a0d
commit 1c3119577f
11 changed files with 316 additions and 563 deletions
@@ -1,14 +1,6 @@
-import {
-  ArticleIcon,
-  BellIcon,
-  GroupFeedsIcon,
-  HashtagIcon,
-  MediaIcon,
-  PlusIcon,
-  TrendingIcon,
-} from '@shared/icons';
+import { ArticleIcon, BellIcon, MediaIcon, PlusIcon } from '@shared/icons';
 import { TitleBar } from '@shared/titleBar';
-import { WidgetWrapper } from '@shared/widgets';
+import { AddGroupFeeds, AddHashtagFeeds, WidgetWrapper } from '@shared/widgets';

 import { TOPICS, WIDGET_KIND } from '@stores/constants';

@@ -32,7 +24,7 @@ export function WidgetList({ widget }: { widget: Widget }) {
                (topic, index) => (
                  <div
                    key={index}
-                    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"
+                    className="inline-flex h-14 w-full items-center justify-between rounded-lg bg-neutral-50 px-3 ring-1 ring-transparent hover:ring-neutral-200 dark:bg-neutral-950 dark:hover:ring-neutral-800"
                  >
                    <div className="inline-flex items-center gap-2.5">
                      <div className="h-9 w-9 shrink-0 rounded-md">
@@ -71,15 +63,27 @@ export function WidgetList({ widget }: { widget: Widget }) {
              Newsfeed
            </h3>
            <div className="flex flex-col gap-3">
+              <AddGroupFeeds currentWidgetId={widget.id} />
+              <AddHashtagFeeds currentWidgetId={widget.id} />
              <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">
                    <ArticleIcon className="h-4 w-4" />
                  </div>
-                  <p className="font-medium">Article</p>
+                  <p className="font-medium">Articles</p>
                </div>
                <button
                  type="button"
+                  onClick={() =>
+                    replaceWidget.mutate({
+                      currentId: widget.id,
+                      widget: {
+                        kind: WIDGET_KIND.article,
+                        title: 'Articles',
+                        content: JSON.stringify({ global: true }),
+                      },
+                    })
+                  }
                  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" />
@@ -95,73 +99,16 @@ export function WidgetList({ widget }: { widget: Widget }) {
                </div>
                <button
                  type="button"
-                  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 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">
-                    <GroupFeedsIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Group feeds</p>
-                </div>
-                <button
-                  type="button"
-                  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 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">
-                    <HashtagIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Hashtag</p>
-                </div>
-                <button
-                  type="button"
-                  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 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">
-              Nostr Band
-            </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">
-                    <TrendingIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Trending posts</p>
-                </div>
-                <button
-                  type="button"
-                  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 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">
-                    <TrendingIcon className="h-4 w-4" />
-                  </div>
-                  <p className="font-medium">Trending users</p>
-                </div>
-                <button
-                  type="button"
+                  onClick={() =>
+                    replaceWidget.mutate({
+                      currentId: widget.id,
+                      widget: {
+                        kind: WIDGET_KIND.file,
+                        title: 'Media',
+                        content: JSON.stringify({ global: true }),
+                      },
+                    })
+                  }
                  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" />
@@ -184,6 +131,16 @@ export function WidgetList({ widget }: { widget: Widget }) {
                </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" />