♻️ Minor refactoring (#1683)

apps/web/src/app/[locale]/(space)/components/sidebar/app-sidebar.tsx

@@ -24,7 +24,6 @@ import { LogoLink } from "@/app/components/logo-link";
 import { Trans } from "@/components/trans";
 import { getUser } from "@/data/get-user";
 import { FeedbackToggle } from "@/features/feedback/components/feedback-toggle";
-import { getTranslation } from "@/i18n/server";
 
 import { UpgradeButton } from "../upgrade-button";
 import { NavItem } from "./nav-item";
@@ -34,7 +33,6 @@ export async function AppSidebar({
   ...props
 }: React.ComponentProps<typeof Sidebar>) {
   const user = await getUser();
-  const { t } = await getTranslation();
   return (
     <Sidebar variant="inset" {...props}>
       <SidebarHeader>
@@ -54,7 +52,9 @@ export async function AppSidebar({
                   </Link>
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Create</TooltipContent>
+              <TooltipContent>
+                <Trans i18nKey="create" />
+              </TooltipContent>
             </Tooltip>
           </div>
         </div>
@@ -62,35 +62,18 @@ export async function AppSidebar({
       <SidebarContent>
         <SidebarGroup>
           <SidebarMenu>
-            {/* <NavItem href="/spaces">
-              <span className="inline-flex size-4 items-center justify-center rounded bg-violet-400 text-xs text-white">
-                P
-              </span>
-              <span className="flex-1">Personal</span>
-            </NavItem> */}
             <NavItem href="/">
               <HomeIcon className="size-4" />
-              {t("home")}
+              <Trans i18nKey="home" />
             </NavItem>
             <NavItem href="/polls">
               <BarChart2Icon className="size-4" />
-              {t("polls")}
+              <Trans i18nKey="polls" />
             </NavItem>
             <NavItem href="/events">
               <CalendarIcon className="size-4" />
-              {t("events")}
+              <Trans i18nKey="events" />
             </NavItem>
-            {/* <NavItem href="/teams">
-              <UsersIcon className="size-4" />
-              {t("teams", { defaultValue: "Teams" })}
-            </NavItem>
-            <NavItem href="/settings">
-              <SettingsIcon className="size-4" />
-              {t("settings", { defaultValue: "Settings" })}
-            </NavItem> */}
-            {/* <NavItem href="/links" icon={LinkIcon} label="Links" /> */}
-            {/* <NavItem href="/availability" icon={ClockIcon} label="Availability" /> */}
-            {/* <NavItem href="/integrations" icon={PuzzleIcon} label="Integrations" /> */}
           </SidebarMenu>
         </SidebarGroup>
       </SidebarContent>

apps/web/src/app/[locale]/(space)/settings/layout.tsx

@@ -7,18 +7,16 @@ import {
   PageHeader,
   PageTitle,
 } from "@/app/components/page-layout";
-import { getTranslation } from "@/i18n/server";
+import { Trans } from "@/components/trans";
 
 import { SignOutButton } from "./components/sign-out-button";
 import { SettingsLayout } from "./settings-menu";
 
 export default async function ProfileLayout({
   children,
-  params,
-}: React.PropsWithChildren<{
-  params: { locale: string };
-}>) {
-  const { t } = await getTranslation(params.locale);
+}: {
+  children?: React.ReactNode;
+}) {
   return (
     <PageContainer>
       <PageHeader>
@@ -26,9 +24,7 @@ export default async function ProfileLayout({
           <div className="flex-1">
             <PageTitle>
               <SettingsPageIcon />
-              {t("settings", {
-                defaultValue: "Settings",
-              })}
+              <Trans i18nKey="settings" />
             </PageTitle>
           </div>
           <div className="flex items-center gap-2">

apps/web/src/app/[locale]/(space)/settings/profile/profile-picture.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { usePostHog } from "@rallly/posthog/client";
 import { Button } from "@rallly/ui/button";
 import { useToast } from "@rallly/ui/hooks/use-toast";

apps/web/src/app/[locale]/new/page.tsx

@@ -1,18 +1,16 @@
 import { Button } from "@rallly/ui/button";
 import Link from "next/link";
-import { Trans } from "react-i18next/TransWithoutContext";
 
-import type { Params } from "@/app/[locale]/types";
 import { PollPageIcon } from "@/app/components/page-icons";
 import { CreatePoll } from "@/components/create-poll";
+import { Trans } from "@/components/trans";
 import { UserDropdown } from "@/components/user-dropdown";
 import { getTranslation } from "@/i18n/server";
 import { getLoggedIn } from "@/next-auth";
 
 import { BackButton } from "./back-button";
 
-export default async function Page({ params }: { params: Params }) {
-  const { t } = await getTranslation(params.locale);
+export default async function Page() {
   const isLoggedIn = await getLoggedIn();
 
   return (
@@ -27,7 +25,7 @@ export default async function Page({ params }: { params: Params }) {
               <PollPageIcon size="sm" />
               <div className="flex items-baseline gap-x-8">
                 <h1 className="font-semibold">
-                  <Trans t={t} i18nKey="poll" defaults="Poll" />
+                  <Trans i18nKey="poll" defaults="Poll" />
                 </h1>
               </div>
             </div>
@@ -41,7 +39,7 @@ export default async function Page({ params }: { params: Params }) {
                   <Link
                     href={`/login?redirectTo=${encodeURIComponent("/new")}`}
                   >
-                    <Trans i18nKey="login" />
+                    <Trans i18nKey="login" defaults="Login" />
                   </Link>
                 </Button>
                 <Button variant="primary" asChild>

apps/web/src/components/poll/language-selector.tsx

@@ -8,7 +8,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@rallly/ui/select";
-import { GlobeIcon } from "lucide-react";
+import { LanguagesIcon } from "lucide-react";
 
 export const LanguageSelect: React.FunctionComponent<{
   className?: string;
@@ -20,7 +20,7 @@ export const LanguageSelect: React.FunctionComponent<{
       <SelectTrigger asChild className={className}>
         <Button>
           <Icon>
-            <GlobeIcon />
+            <LanguagesIcon />
           </Icon>
           <SelectValue />
         </Button>

apps/web/src/components/time-zone-picker/time-zone-select.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { SelectProps } from "@radix-ui/react-select";
+import { cn } from "@rallly/ui";
 import { Badge } from "@rallly/ui/badge";
 import { Button } from "@rallly/ui/button";
 import {
@@ -15,7 +16,7 @@ import {
 import { useDialog } from "@rallly/ui/dialog";
 import { Icon } from "@rallly/ui/icon";
 import dayjs from "dayjs";
-import { CheckIcon, ChevronsUpDownIcon, GlobeIcon } from "lucide-react";
+import { CheckIcon, GlobeIcon } from "lucide-react";
 import React from "react";
 
 import { Trans } from "@/components/trans";
@@ -71,38 +72,37 @@ export const TimeZoneCommand = ({ onSelect, value }: TimeZoneCommandProps) => {
   );
 };
 
-export const TimeZoneSelect = React.forwardRef<HTMLButtonElement, SelectProps>(
-  ({ value, onValueChange, disabled }, ref) => {
-    const dialog = useDialog();
-    return (
-      <>
-        <CommandDialog {...dialog.dialogProps}>
-          <TimeZoneCommand
-            value={value}
-            onSelect={(newValue) => {
-              onValueChange?.(newValue);
-              dialog.dismiss();
-            }}
-          />
-        </CommandDialog>
-        <Button
-          ref={ref}
-          disabled={disabled}
-          onClick={() => {
-            dialog.trigger();
+export const TimeZoneSelect = React.forwardRef<
+  HTMLButtonElement,
+  SelectProps & { className?: string }
+>(({ value, onValueChange, className, disabled }, ref) => {
+  const dialog = useDialog();
+  return (
+    <>
+      <CommandDialog {...dialog.dialogProps}>
+        <TimeZoneCommand
+          value={value}
+          onSelect={(newValue) => {
+            onValueChange?.(newValue);
+            dialog.dismiss();
           }}
-        >
-          <Icon>
-            <GlobeIcon />
-          </Icon>
-          {value}
-          <Icon>
-            <ChevronsUpDownIcon />
-          </Icon>
-        </Button>
-      </>
-    );
-  },
-);
+        />
+      </CommandDialog>
+      <Button
+        ref={ref}
+        disabled={disabled}
+        className={cn("justify-start text-left", className)}
+        onClick={() => {
+          dialog.trigger();
+        }}
+      >
+        <Icon>
+          <GlobeIcon />
+        </Icon>
+        <span className="flex-1">{value}</span>
+      </Button>
+    </>
+  );
+});
 
 TimeZoneSelect.displayName = "TimeZoneSelect";

packages/languages/src/index.ts

@@ -5,3 +5,5 @@ export const supportedLngs = Object.keys(languages);
 export const defaultLocale = "en";
 
 export default languages;
+
+export { languages };