From 4d6a12e05286e4f2affa3ad1ee6266d32cb12103 Mon Sep 17 00:00:00 2001 From: Luke Vella Date: Tue, 5 Dec 2023 15:37:32 +0700 Subject: [PATCH 01/75] Better rendering --- .../src/app/[locale]/(admin)/polls/page.tsx | 34 ++- .../app/[locale]/(admin)/polls/polls-page.tsx | 207 ++++++++---------- .../layouts/standard-layout/top-bar.tsx | 7 +- 3 files changed, 121 insertions(+), 127 deletions(-) diff --git a/apps/web/src/app/[locale]/(admin)/polls/page.tsx b/apps/web/src/app/[locale]/(admin)/polls/page.tsx index d6257a7fd4f..f67e7237c03 100644 --- a/apps/web/src/app/[locale]/(admin)/polls/page.tsx +++ b/apps/web/src/app/[locale]/(admin)/polls/page.tsx @@ -1,9 +1,39 @@ +import { Button } from "@rallly/ui/button"; +import { PlusIcon, VoteIcon } from "lucide-react"; +import Link from "next/link"; +import { Trans } from "react-i18next/TransWithoutContext"; + import { getTranslation } from "@/app/i18n"; +import { Container } from "@/components/container"; +import { + TopBar, + TopBarTitle, +} from "@/components/layouts/standard-layout/top-bar"; import { PollsPage } from "./polls-page"; -export default function Page() { - return ; +export default async function Page({ params }: { params: { locale: string } }) { + const { t } = await getTranslation(params.locale); + return ( +
+ + } icon={VoteIcon} /> +
+ +
+ +
+ + + +
+
+ ); } export async function generateMetadata({ diff --git a/apps/web/src/app/[locale]/(admin)/polls/polls-page.tsx b/apps/web/src/app/[locale]/(admin)/polls/polls-page.tsx index 435fd582a56..2abcdf72cf3 100644 --- a/apps/web/src/app/[locale]/(admin)/polls/polls-page.tsx +++ b/apps/web/src/app/[locale]/(admin)/polls/polls-page.tsx @@ -1,21 +1,10 @@ "use client"; import { Button } from "@rallly/ui/button"; import dayjs from "dayjs"; -import { - InboxIcon, - PauseCircleIcon, - PlusIcon, - RadioIcon, - VoteIcon, -} from "lucide-react"; +import { InboxIcon, PauseCircleIcon, PlusIcon, RadioIcon } from "lucide-react"; import Link from "next/link"; -import { Container } from "@/components/container"; import { DateIcon } from "@/components/date-icon"; -import { - TopBar, - TopBarTitle, -} from "@/components/layouts/standard-layout/top-bar"; import { ParticipantAvatarBar } from "@/components/participant-avatar-bar"; import { PollStatusBadge } from "@/components/poll-status"; import { Skeleton } from "@/components/skeleton"; @@ -56,119 +45,97 @@ export function PollsPage() { const { data } = trpc.polls.list.useQuery(); const { adjustTimeZone } = useDayjs(); - return ( -
- - } icon={VoteIcon} /> -
- -
- -
- - {data ? ( - data.length > 0 ? ( -
- {data.map((poll) => { - const { title, id: pollId, createdAt, status } = poll; - return ( -
-
-
-
- {poll.event ? ( - - ) : ( -
- {status === "live" ? ( - - ) : ( - - )} -
- )} -
-
-
- {poll.event - ? poll.event.duration > 0 - ? `${adjustTimeZone( - poll.event.start, - !poll.timeZone, - ).format("LL LT")} - ${adjustTimeZone( - dayjs(poll.event.start).add( - poll.event.duration, - "minutes", - ), - !poll.timeZone, - ).format("LT")}` - : adjustTimeZone( - poll.event.start, - !poll.timeZone, - ).format("LL") - : null} -
-
- - {title} - -
-
- -
- {poll.participants.length > 0 ? ( -
- -
- ) : null} -
-
-
- -
+ return data ? ( + data.length > 0 ? ( +
+ {data.map((poll) => { + const { title, id: pollId, createdAt, status } = poll; + return ( +
+
+
+
+ {poll.event ? ( + + ) : ( +
+ {status === "live" ? ( + + ) : ( + + )}
+ )} +
+
+
+ {poll.event + ? poll.event.duration > 0 + ? `${adjustTimeZone( + poll.event.start, + !poll.timeZone, + ).format("LL LT")} - ${adjustTimeZone( + dayjs(poll.event.start).add( + poll.event.duration, + "minutes", + ), + !poll.timeZone, + ).format("LT")}` + : adjustTimeZone( + poll.event.start, + !poll.timeZone, + ).format("LL") + : null} +
+
+ + {title} +
- ); - })} +
+ +
+ {poll.participants.length > 0 ? ( +
+ +
+ ) : null} +
+
+
+ +
- ) : ( - - ) - ) : ( -
- - - -
- )} - + ); + })}
+ ) : ( + + ) + ) : ( +
+ + + +
); } diff --git a/apps/web/src/components/layouts/standard-layout/top-bar.tsx b/apps/web/src/components/layouts/standard-layout/top-bar.tsx index a439362f1f2..b7432ceb004 100644 --- a/apps/web/src/components/layouts/standard-layout/top-bar.tsx +++ b/apps/web/src/components/layouts/standard-layout/top-bar.tsx @@ -1,5 +1,4 @@ import { cn } from "@rallly/ui"; -import { m } from "framer-motion"; import React from "react"; import { Container } from "@/components/container"; @@ -12,15 +11,13 @@ export const TopBar = ( }>, ) => { return ( - {props.children} - +
); }; From e69fb3fe4f9671dab78c849d943c44bd1c029f82 Mon Sep 17 00:00:00 2001 From: Luke Vella Date: Thu, 7 Dec 2023 10:17:11 +0700 Subject: [PATCH 02/75] Checkpoint with new layout --- apps/web/package.json | 1 + apps/web/public/locales/en/app.json | 10 +- apps/web/src/app/[locale]/(admin)/layout.tsx | 169 +++++++++++++++- .../src/app/[locale]/(admin)/menu-item.tsx | 42 ++++ .../[locale]/(admin)/poll/[urlId]/page.tsx | 6 +- .../src/app/[locale]/(admin)/polls/page.tsx | 32 +-- .../app/[locale]/(admin)/polls/polls-page.tsx | 189 +++++++++--------- apps/web/src/components/container.tsx | 4 +- .../src/components/layouts/poll-layout.tsx | 46 +---- .../src/components/layouts/profile-layout.tsx | 80 +++----- .../layouts/standard-layout/top-bar.tsx | 6 +- apps/web/src/components/poll-status.tsx | 10 +- apps/web/src/components/pro-badge.tsx | 16 +- apps/web/src/components/settings/settings.tsx | 4 +- apps/web/src/components/table.tsx | 64 +++--- apps/web/src/components/user-dropdown.tsx | 5 +- apps/web/src/style.css | 17 +- packages/ui/alert.tsx | 5 +- packages/ui/badge.tsx | 2 +- yarn.lock | 5 + 20 files changed, 409 insertions(+), 304 deletions(-) create mode 100644 apps/web/src/app/[locale]/(admin)/menu-item.tsx diff --git a/apps/web/package.json b/apps/web/package.json index cde55bf8343..16179216e4d 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -53,6 +53,7 @@ "iron-session": "^6.3.1", "js-cookie": "^3.0.1", "lodash": "^4.17.21", + "lucide-react": "^0.294.0", "micro": "^10.0.1", "nanoid": "^4.0.0", "next-auth": "^4.24.5", diff --git a/apps/web/public/locales/en/app.json b/apps/web/public/locales/en/app.json index c0a93c15fb2..f8e9ec824a9 100644 --- a/apps/web/public/locales/en/app.json +++ b/apps/web/public/locales/en/app.json @@ -229,5 +229,13 @@ "finalizeFeature": "Finalize", "duplicateFeature": "Duplicate", "pageMovedDescription": "Redirecting to {newUrl}", - "notRegistered": "Don't have an account? Register" + "notRegistered": "Don't have an account? Register", + "comingSoon": "Coming Soon", + "registeration": "Registrations", + "rspvs": "RSVPs", + "integrations": "Integrations", + "contacts": "Contacts", + "unlockFeatures": "Remove watermarks and unlock all Pro features.", + "pollsCount": "{count, plural, one {# poll} other {# polls}}", + "back": "Back" } diff --git a/apps/web/src/app/[locale]/(admin)/layout.tsx b/apps/web/src/app/[locale]/(admin)/layout.tsx index 5f7fa20fbc6..2dc3df54c30 100644 --- a/apps/web/src/app/[locale]/(admin)/layout.tsx +++ b/apps/web/src/app/[locale]/(admin)/layout.tsx @@ -1,8 +1,30 @@ "use client"; +import { cn } from "@rallly/ui"; +import { + BlocksIcon, + BookMarkedIcon, + CalendarIcon, + CheckCircle2Icon, + CogIcon, + CreditCardIcon, + LogInIcon, + SparklesIcon, + UserIcon, + UsersIcon, + VoteIcon, +} from "lucide-react"; +import Image from "next/image"; +import Link from "next/link"; +import { usePathname } from "next/navigation"; import { signIn, useSession } from "next-auth/react"; import React from "react"; +import { Trans } from "react-i18next/TransWithoutContext"; -import { StandardLayout } from "@/components/layouts/standard-layout"; +import { ProBadge } from "@/components/pro-badge"; +import { UserDropdown } from "@/components/user-dropdown"; +import { IfAuthenticated, IfGuest } from "@/components/user-provider"; +import { IfFreeUser, IfSubscribed } from "@/contexts/plan"; +import { IconComponent } from "@/types"; import { isSelfHosted } from "@/utils/constants"; const Auth = ({ children }: { children: React.ReactNode }) => { @@ -22,13 +44,146 @@ const Auth = ({ children }: { children: React.ReactNode }) => { return null; }; +function MenuItem({ + href, + children, + icon: Icon, + current, +}: { + href: string; + icon: IconComponent; + children: React.ReactNode; + current?: boolean; +}) { + return ( + +