feat: add empty state and polish trending column

lumehq · Apr 13, 2024 · a14aeae · a14aeae
1 parent 35cf0ab
commit a14aeae
Show file tree

Hide file tree

Showing 19 changed files with 504 additions and 455 deletions.
diff --git a/apps/desktop2/src/components/repost.tsx b/apps/desktop2/src/components/repost.tsx
@@ -13,7 +13,7 @@ export function RepostNote({
  event: Event;
  className?: string;
 }) {
- const { ark } = useRouteContext({ strict: false });
+ const { ark, settings } = useRouteContext({ strict: false });
  const { t } = useTranslation();
  const {
  isLoading,
@@ -104,7 +104,7 @@ export function RepostNote({
  <div className="-ml-1 inline-flex items-center gap-4">
  <Note.Reply />
  <Note.Repost />
- <Note.Zap />
+ {settings.zap ? <Note.Zap /> : null}
  </div>
  <Note.Menu />
  </div>

diff --git a/apps/desktop2/src/components/suggest.tsx b/apps/desktop2/src/components/suggest.tsx
diff --git a/apps/desktop2/src/components/text.tsx b/apps/desktop2/src/components/text.tsx
@@ -1,6 +1,7 @@
 import { Event } from "@lume/types";
 import { Note } from "@lume/ui";
 import { cn } from "@lume/utils";
+import { useRouteContext } from "@tanstack/react-router";
 
 export function TextNote({
  event,
@@ -9,6 +10,8 @@ export function TextNote({
  event: Event;
  className?: string;
 }) {
+ const { settings } = useRouteContext({ strict: false });
+
  return (
  <Note.Provider event={event}>
  <Note.Root
@@ -27,7 +30,7 @@ export function TextNote({
  <div className="-ml-1 inline-flex items-center gap-4">
  <Note.Reply />
  <Note.Repost />
- <Note.Zap />
+ {settings.zap ? <Note.Zap /> : null}
  </div>
  <Note.Menu />
  </div>

diff --git a/apps/desktop2/src/routes/antenas.tsx b/apps/desktop2/src/routes/antenas.tsx
@@ -1,12 +1,10 @@
 import { RepostNote } from "@/components/repost";
-import { Suggest } from "@/components/suggest";
 import { TextNote } from "@/components/text";
-import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { LoaderIcon, ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { ColumnRouteSearch, Event, Kind } from "@lume/types";
 import { Column } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { createFileRoute } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
+import { Link, createFileRoute } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/antenas")({
@@ -23,7 +21,6 @@ export const Route = createFileRoute("/antenas")({
 export function Screen() {
  const { label, name, account } = Route.useSearch();
  const { ark } = Route.useRouteContext();
- const { t } = useTranslation();
  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
  useInfiniteQuery({
  queryKey: [name, account],
@@ -59,16 +56,7 @@ export function Screen() {
  <LoaderIcon className="size-5 animate-spin" />
  </div>
  ) : !data.length ? (
- <div className="flex flex-col gap-3">
- <div className="flex items-center gap-2 rounded-xl bg-neutral-50 p-5 dark:bg-neutral-950">
- <InfoIcon className="size-6" />
- <div>
- <p className="leading-tight">{t("emptyFeedTitle")}</p>
- <p className="leading-tight">{t("emptyFeedSubtitle")}</p>
- </div>
- </div>
- <Suggest />
- </div>
+ <Empty />
  ) : (
  <Virtualizer overscan={3}>
  {data.map((item) => renderItem(item))}
@@ -97,3 +85,35 @@ export function Screen() {
  </Column.Root>
  );
 }
+
+function Empty() {
+ return (
+ <div className="flex flex-col py-10 gap-10">
+ <div className="text-center flex flex-col items-center justify-center">
+ <div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
+ <div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
+ </div>
+ <p className="text-lg font-medium">Your newsfeed is empty</p>
+ <p className="leading-tight text-neutral-700 dark:text-neutral-300">
+ Here are few suggestions to get started.
+ </p>
+ </div>
+ <div className="flex flex-col px-3 gap-2">
+ <Link
+ to="/trending/notes"
+ className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+ >
+ <ArrowRightIcon className="size-5" />
+ Show trending notes
+ </Link>
+ <Link
+ to="/trending/users"
+ className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+ >
+ <ArrowRightIcon className="size-5" />
+ Discover trending users
+ </Link>
+ </div>
+ </div>
+ );
+}
diff --git a/apps/desktop2/src/routes/auth/new/backup.tsx b/apps/desktop2/src/routes/auth/new/backup.tsx
@@ -7,13 +7,18 @@ import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import * as Checkbox from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@lume/icons";
+import { AppRouteSearch } from "@lume/types";
 
 export const Route = createFileRoute("/auth/new/backup")({
+ validateSearch: (search: Record<string, string>): AppRouteSearch => {
+ return {
+ account: search.account,
+ };
+ },
  component: Screen,
 });
 
 function Screen() {
- // @ts-ignore, magic!!!
  const { account } = Route.useSearch();
  const { t } = useTranslation();
 
@@ -32,7 +37,7 @@ function Screen() {
  } else {
  return navigate({
  to: "/auth/settings",
- search: { account, new: true },
+ search: { account },
  });
  }
  }

diff --git a/apps/desktop2/src/routes/auth/settings.tsx b/apps/desktop2/src/routes/auth/settings.tsx
@@ -42,28 +42,28 @@ function Screen() {
  await requestPermission();
  setNewSettings((prev) => ({
  ...prev,
- notification: !settings.notification,
+ notification: !newSettings.notification,
  }));
  };
 
  const toggleAutoUpdate = () => {
  setNewSettings((prev) => ({
  ...prev,
- autoUpdate: !settings.autoUpdate,
+ autoUpdate: !newSettings.autoUpdate,
  }));
  };
 
  const toggleEnhancedPrivacy = () => {
  setNewSettings((prev) => ({
  ...prev,
- enhancedPrivacy: !settings.enhancedPrivacy,
+ enhancedPrivacy: !newSettings.enhancedPrivacy,
  }));
  };
 
  const toggleZap = () => {
  setNewSettings((prev) => ({
  ...prev,
- zap: !settings.zap,
+ zap: !newSettings.zap,
  }));
  };
 

diff --git a/apps/desktop2/src/routes/foryou.tsx b/apps/desktop2/src/routes/foryou.tsx
@@ -1,12 +1,10 @@
 import { RepostNote } from "@/components/repost";
-import { Suggest } from "@/components/suggest";
 import { TextNote } from "@/components/text";
-import { LoaderIcon, ArrowRightCircleIcon, InfoIcon } from "@lume/icons";
+import { LoaderIcon, ArrowRightCircleIcon, ArrowRightIcon } from "@lume/icons";
 import { ColumnRouteSearch, Event, Kind } from "@lume/types";
 import { Column } from "@lume/ui";
 import { useInfiniteQuery } from "@tanstack/react-query";
-import { createFileRoute, redirect } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
+import { Link, createFileRoute, redirect } from "@tanstack/react-router";
 import { Virtualizer } from "virtua";
 
 export const Route = createFileRoute("/foryou")({
@@ -41,7 +39,6 @@ export const Route = createFileRoute("/foryou")({
 export function Screen() {
  const { label, name, account } = Route.useSearch();
  const { ark, interests } = Route.useRouteContext();
- const { t } = useTranslation();
  const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } =
  useInfiniteQuery({
  queryKey: [name, account],
@@ -84,20 +81,7 @@ export function Screen() {
  </button>
  </div>
  ) : !data.length ? (
- <div className="flex flex-col gap-3 p-3">
- <div className="flex items-center gap-2 rounded-xl bg-neutral-100 p-5 dark:bg-neutral-900">
- <InfoIcon className="size-6" />
- <div>
- <p className="font-medium leading-tight">
- {t("global.emptyFeedTitle")}
- </p>
- <p className="leading-tight text-neutral-700 dark:text-neutral-300">
- {t("global.emptyFeedSubtitle")}
- </p>
- </div>
- </div>
- <Suggest />
- </div>
+ <Empty />
  ) : (
  <Virtualizer overscan={3}>
  {data.map((item) => renderItem(item))}
@@ -127,3 +111,35 @@ export function Screen() {
  </Column.Root>
  );
 }
+
+function Empty() {
+ return (
+ <div className="flex flex-col py-10 gap-10">
+ <div className="text-center flex flex-col items-center justify-center">
+ <div className="size-24 bg-blue-100 flex flex-col items-center justify-end overflow-hidden dark:bg-blue-900 rounded-full mb-8">
+ <div className="w-12 h-16 bg-gradient-to-b from-blue-500 dark:from-blue-200 to-blue-50 dark:to-blue-900 rounded-t-lg" />
+ </div>
+ <p className="text-lg font-medium">Your newsfeed is empty</p>
+ <p className="leading-tight text-neutral-700 dark:text-neutral-300">
+ Here are few suggestions to get started.
+ </p>
+ </div>
+ <div className="flex flex-col px-3 gap-2">
+ <Link
+ to="/trending/notes"
+ className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+ >
+ <ArrowRightIcon className="size-5" />
+ Show trending notes
+ </Link>
+ <Link
+ to="/trending/users"
+ className="h-11 w-full flex items-center hover:bg-neutral-200 text-sm font-medium dark:hover:bg-neutral-800 gap-2 bg-neutral-100 rounded-lg dark:bg-neutral-900 px-3"
+ >
+ <ArrowRightIcon className="size-5" />
+ Discover trending users
+ </Link>
+ </div>
+ </div>
+ );
+}