♻️ Standard avatar sizes (#1375)

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

@@ -5,7 +5,7 @@ import React, { useState } from "react";
 import { z } from "zod";
 
 import { useTranslation } from "@/app/i18n/client";
-import { CurrentUserAvatar } from "@/components/current-user-avatar";
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { Trans } from "@/components/trans";
 import { useUser } from "@/components/user-provider";
 import { useAvatarsEnabled } from "@/features/avatars";
@@ -189,9 +189,14 @@ function Upload() {
 }
 
 export function ProfilePicture() {
+  const { user } = useUser();
   return (
     <div className="flex items-center gap-x-4">
-      <CurrentUserAvatar size={56} />
+      <OptimizedAvatarImage
+        src={user.image ?? undefined}
+        name={user.name}
+        size="lg"
+      />
       <Upload />
     </div>
   );

apps/web/src/app/[locale]/(admin)/sidebar.tsx

@@ -19,7 +19,7 @@ import {
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 
-import { CurrentUserAvatar } from "@/components/current-user-avatar";
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { PayWallDialog } from "@/components/pay-wall-dialog";
 import { ProBadge } from "@/components/pro-badge";
 import { Trans } from "@/components/trans";
@@ -171,7 +171,11 @@ export function Sidebar() {
               >
                 <Link href="/settings/profile">
                   <div>
-                    <CurrentUserAvatar size={40} />
+                    <OptimizedAvatarImage
+                      src={user.image ?? undefined}
+                      name={user.name}
+                      size="md"
+                    />
                   </div>
                   <span className="ml-1 grid grow">
                     <span className="font-semibold">{user.name}</span>

apps/web/src/app/[locale]/auth/login/login-page.tsx

@@ -57,7 +57,7 @@ export const LoginPage = ({ magicLink, email }: PageProps) => {
             <OptimizedAvatarImage
               src={data?.image ?? undefined}
               name={data?.name ?? ""}
-              size={56}
+              size="xl"
             />
             <div className="text-center">
               <div className="mb-1 h-6 font-medium">

apps/web/src/components/current-user-avatar.tsx

@@ -1,22 +0,0 @@
-"use client";
-
-import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
-import { useUser } from "@/components/user-provider";
-
-export const CurrentUserAvatar = ({
-  size,
-  className,
-}: {
-  size: number;
-  className?: string;
-}) => {
-  const { user } = useUser();
-  return (
-    <OptimizedAvatarImage
-      className={className}
-      src={user.image ?? undefined}
-      name={user.name}
-      size={size}
-    />
-  );
-};

apps/web/src/components/discussion/discussion.tsx

@@ -15,6 +15,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@rallly/ui/dropdown-menu";
+import { Flex } from "@rallly/ui/flex";
 import { useToast } from "@rallly/ui/hooks/use-toast";
 import { Icon } from "@rallly/ui/icon";
 import { Input } from "@rallly/ui/input";
@@ -29,11 +30,8 @@ import { useTranslation } from "next-i18next";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import {
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
-  Participant,
+import { ParticipantName } from "@/components/participant";
-  ParticipantAvatar,
-  ParticipantName,
-} from "@/components/participant";
 import { useParticipants } from "@/components/participants-provider";
 import { Trans } from "@/components/trans";
 import { usePermissions } from "@/contexts/permissions";
@@ -220,15 +218,18 @@ function DiscussionInner() {
                 <div className="" key={comment.id}>
                   <div data-testid="comment">
                     <div className="mb-1 flex items-center space-x-2">
-                      <Participant>
+                      <Flex gap="sm">
-                        <ParticipantAvatar name={comment.authorName} />
+                        <OptimizedAvatarImage
+                          name={comment.authorName}
+                          size="xs"
+                        />
                         <ParticipantName>{comment.authorName}</ParticipantName>
                         {session.ownsObject(comment) ? (
                           <Badge>
                             <Trans i18nKey="you" />
                           </Badge>
                         ) : null}
-                      </Participant>
+                      </Flex>
                       <div className="flex items-center gap-2 text-sm ">
                         <div className="text-gray-500">
                           {dayjs(comment.createdAt).fromNow()}
@@ -257,7 +258,7 @@ function DiscussionInner() {
                         )}
                       </div>
                     </div>
-                    <div className="ml-0.5 w-fit whitespace-pre-wrap pl-7 text-sm leading-relaxed">
+                    <div className="w-fit whitespace-pre-wrap pl-7 text-sm leading-relaxed">
                       <TruncatedLinkify>{comment.content}</TruncatedLinkify>
                     </div>
                   </div>

apps/web/src/components/optimized-avatar-image.tsx

@@ -4,7 +4,13 @@ import { Avatar, AvatarFallback, AvatarImage } from "@rallly/ui/avatar";
 import Image from "next/image";
 import React from "react";
 
-import { useAvatarsEnabled } from "@/features/avatars";
+const sizeToWidth = {
+  xs: 20,
+  sm: 24,
+  md: 36,
+  lg: 48,
+  xl: 56,
+};
 
 export function OptimizedAvatarImage({
   size,
@@ -12,19 +18,21 @@ export function OptimizedAvatarImage({
   src,
   name,
 }: {
-  size: number;
+  size: "xs" | "sm" | "md" | "lg" | "xl";
   src?: string;
   name: string;
   className?: string;
 }) {
-  const isAvatarsEnabled = useAvatarsEnabled();
   const [isLoaded, setLoaded] = React.useState(false);
   return (
-    <Avatar className={className} style={{ width: size, height: size }}>
+    <Avatar
+      className={className}
+      style={{ width: sizeToWidth[size], height: sizeToWidth[size] }}
+    >
       {src ? (
         src.startsWith("https") ? (
           <AvatarImage src={src} alt={name} />
-        ) : isAvatarsEnabled ? (
+        ) : (
           <Image
             src={`/api/storage/${src}`}
             width={128}
@@ -35,14 +43,17 @@ export function OptimizedAvatarImage({
               setLoaded(true);
             }}
           />
-        ) : null
+        )
       ) : null}
       {!src || !isLoaded ? (
         <AvatarFallback
           seed={name}
-          className={cn({
+          className={cn("shrink-0", {
-            "text-xs": size <= 24,
+            "text-xs": size === "xs",
-            "text-lg": size >= 48,
+            "text-sm": size === "sm",
+            "text-md": size === "md",
+            "text-lg": size === "lg",
+            "text-xl": size === "xl",
           })}
         >
           {name[0]?.toUpperCase()}

apps/web/src/components/participant-avatar-bar.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@rallly/ui";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@rallly/ui/tooltip";
 
-import { ParticipantAvatar } from "@/components/participant";
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 
 interface ParticipantAvatarBarProps {
   participants: { name: string }[];
@@ -20,7 +20,7 @@ export const ParticipantAvatarBar = ({
         <Tooltip key={index}>
           <TooltipTrigger asChild>
             <li className="z-10 inline-flex items-center justify-center rounded-full ring-2 ring-white">
-              <ParticipantAvatar name={participant.name} />
+              <OptimizedAvatarImage name={participant.name} size="xs" />
             </li>
           </TooltipTrigger>
           <TooltipContent>{participant.name}</TooltipContent>

apps/web/src/components/participant-dropdown.tsx

@@ -34,6 +34,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { useMount } from "react-use";
 import { z } from "zod";
 
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { useDeleteParticipantMutation } from "@/components/poll/mutations";
 import { Trans } from "@/components/trans";
 import { useFormValidation } from "@/utils/form-validation";
@@ -75,6 +76,10 @@ export const ParticipantDropdown = ({
         </DropdownMenuTrigger>
         <DropdownMenuContent align={align}>
           <DropdownMenuLabel>
+            <div className="flex items-center gap-x-2">
+              <div>
+                <OptimizedAvatarImage name={participant.name} size="md" />
+              </div>
               <div className="grid gap-0.5">
                 <div>{participant.name}</div>
                 {participant.email ? (
@@ -83,6 +88,7 @@ export const ParticipantDropdown = ({
                   </div>
                 ) : null}
               </div>
+            </div>
           </DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={onEdit}>

apps/web/src/components/participant.tsx

@@ -6,16 +6,31 @@ export function Participant({ children }: { children: React.ReactNode }) {
   return <div className="flex min-w-0 items-center gap-x-2">{children}</div>;
 }
 
+const sizeToWidth = {
+  xs: 20,
+  sm: 24,
+  md: 32,
+  lg: 48,
+};
+
 export const ParticipantAvatar = ({
-  size = 20,
+  size = "md",
   name,
 }: {
-  size?: number;
+  size?: "xs" | "sm" | "md" | "lg";
   name: string;
 }) => {
   return (
-    <Avatar size={size}>
+    <Avatar size={sizeToWidth[size]}>
-      <AvatarFallback className="text-xs" seed={name}>
+      <AvatarFallback
+        className={cn({
+          "text-xs": size === "xs",
+          "text-sm": size === "sm",
+          "text-md": size === "md",
+          "text-lg": size === "lg",
+        })}
+        seed={name}
+      >
         {name[0]?.toUpperCase()}
       </AvatarFallback>
     </Avatar>

apps/web/src/components/poll/desktop-poll/participant-row-form.tsx

@@ -62,7 +62,7 @@ const ParticipantRowForm = ({
         <div className="flex items-center justify-between gap-x-2.5">
           <Participant>
             {name ? (
-              <OptimizedAvatarImage name={participantName} size={20} />
+              <OptimizedAvatarImage name={participantName} size="xs" />
             ) : (
               <YouAvatar />
             )}

apps/web/src/components/poll/desktop-poll/participant-row.tsx

@@ -2,15 +2,13 @@ import type { VoteType } from "@rallly/database";
 import { cn } from "@rallly/ui";
 import { Badge } from "@rallly/ui/badge";
 import { Button } from "@rallly/ui/button";
+import { Flex } from "@rallly/ui/flex";
 import { Icon } from "@rallly/ui/icon";
 import { MoreHorizontalIcon } from "lucide-react";
 import * as React from "react";
 
-import {
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
-  Participant,
+import { ParticipantName } from "@/components/participant";
-  ParticipantAvatar,
-  ParticipantName,
-} from "@/components/participant";
 import { ParticipantDropdown } from "@/components/participant-dropdown";
 import { usePoll } from "@/components/poll-context";
 import { Trans } from "@/components/trans";
@@ -53,16 +51,18 @@ export const ParticipantRowView: React.FunctionComponent<{
         className="sticky left-0 z-10 h-12 bg-white px-4"
       >
         <div className="flex max-w-full items-center justify-between gap-x-4">
-          <Participant>
+          <div>
-            <ParticipantAvatar name={name} />
+            <Flex gap="sm">
+              <OptimizedAvatarImage size="xs" name={name} />
               <ParticipantName>{name}</ParticipantName>
               {isYou ? (
                 <Badge>
                   <Trans i18nKey="you" />
                 </Badge>
               ) : null}
-          </Participant>
+            </Flex>
-          {action}
+          </div>
+          <div>{action}</div>
         </div>
       </td>
       {votes.map((vote, i) => {

apps/web/src/components/poll/mobile-poll.tsx

@@ -1,6 +1,7 @@
 import { Badge } from "@rallly/ui/badge";
 import { Button } from "@rallly/ui/button";
 import { Card, CardFooter, CardHeader, CardTitle } from "@rallly/ui/card";
+import { Flex } from "@rallly/ui/flex";
 import { Icon } from "@rallly/ui/icon";
 import {
   Select,
@@ -101,20 +102,15 @@ const MobilePoll: React.FunctionComponent = () => {
                 </SelectItem>
                 {visibleParticipants.map((participant) => (
                   <SelectItem key={participant.id} value={participant.id}>
-                    <div className="flex items-center gap-x-2.5">
+                    <Flex gap="sm">
-                      <Participant>
+                      <OptimizedAvatarImage name={participant.name} size="xs" />
-                        <OptimizedAvatarImage
-                          name={participant.name}
-                          size={20}
-                        />
                       <ParticipantName>{participant.name}</ParticipantName>
                       {session.ownsObject(participant) && (
                         <Badge>
                           <Trans i18nKey="you" />
                         </Badge>
                       )}
-                      </Participant>
+                    </Flex>
-                    </div>
                   </SelectItem>
                 ))}
               </SelectContent>

apps/web/src/components/poll/mobile-poll/poll-option.tsx

@@ -8,7 +8,7 @@ import * as React from "react";
 import { useToggle } from "react-use";
 
 import { useTranslation } from "@/app/i18n/client";
-import { ParticipantAvatar } from "@/components/participant";
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { useParticipants } from "@/components/participants-provider";
 import { usePoll } from "@/contexts/poll";
 import { useRole } from "@/contexts/role";
@@ -51,7 +51,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
             {participantsWhoVotedYes.map(({ name }, i) => (
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
-                  <ParticipantAvatar size={20} name={name} />
+                  <OptimizedAvatarImage size="xs" name={name} />
                   <VoteIcon
                     type="yes"
                     size="sm"
@@ -64,7 +64,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
             {participantsWhoVotedIfNeedBe.map(({ name }, i) => (
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
-                  <ParticipantAvatar size={20} name={name} />
+                  <OptimizedAvatarImage size="xs" name={name} />
                   <VoteIcon
                     type="ifNeedBe"
                     size="sm"
@@ -79,7 +79,7 @@ const PollOptionVoteSummary: React.FunctionComponent<{ optionId: string }> = ({
             {participantsWhoVotedNo.map(({ name }, i) => (
               <div key={i} className="flex">
                 <div className="relative mr-2.5 flex size-5 items-center justify-center">
-                  <ParticipantAvatar size={20} name={name} />
+                  <OptimizedAvatarImage size="xs" name={name} />
                   <VoteIcon
                     type="no"
                     size="sm"

apps/web/src/components/table.tsx

@@ -1,178 +0,0 @@
-import { cn } from "@rallly/ui";
-import { Button } from "@rallly/ui/button";
-import { Flex } from "@rallly/ui/flex";
-import {
-  ColumnDef,
-  flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  OnChangeFn,
-  PaginationState,
-  SortingState,
-  useReactTable,
-} from "@tanstack/react-table";
-import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
-import React from "react";
-
-import { Trans } from "@/components/trans";
-
-export const Table = <TData extends Record<string, unknown>>(props: {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  columns: ColumnDef<TData, any>[];
-  data: TData[];
-  footer?: React.ReactNode;
-  pageCount?: number;
-  enableTableFooter?: boolean;
-  enableTableHeader?: boolean;
-  layout?: "fixed" | "auto";
-  onPaginationChange?: OnChangeFn<PaginationState>;
-  sortingState?: SortingState;
-  onSortingChange?: OnChangeFn<SortingState>;
-  paginationState: PaginationState | undefined;
-  className?: string;
-}) => {
-  const table = useReactTable<TData>({
-    data: props.data,
-    columns: props.columns,
-    pageCount: props.pageCount,
-    state: {
-      pagination: props.paginationState,
-      sorting: props.sortingState,
-    },
-    onSortingChange: props.onSortingChange,
-    getSortedRowModel: getSortedRowModel(),
-    manualPagination: true,
-    onPaginationChange: props.onPaginationChange,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-  });
-
-  return (
-    <div>
-      <div
-        className={cn(
-          props.className,
-          "scrollbar-thin  max-w-full overflow-x-auto",
-        )}
-      >
-        <table
-          className={cn(
-            "border-collapse",
-            props.layout === "auto" ? "w-full table-auto" : "table-fixed",
-          )}
-        >
-          {props.enableTableHeader ? (
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      style={{
-                        width: header.getSize(),
-                        maxWidth:
-                          props.layout === "auto"
-                            ? header.getSize()
-                            : undefined,
-                      }}
-                      className="text-muted-foreground h-9 whitespace-nowrap border-b px-2.5 text-left text-xs font-normal"
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-          ) : null}
-          <tbody>
-            {table.getRowModel().rows.map((row, i) => (
-              <tr key={row.id}>
-                {row.getVisibleCells().map((cell) => (
-                  <td
-                    style={{
-                      width: cell.column.getSize(),
-                      maxWidth:
-                        props.layout === "auto"
-                          ? cell.column.getSize()
-                          : undefined,
-                    }}
-                    key={cell.id}
-                    className={cn(
-                      "relative h-14 overflow-hidden border-gray-100 px-2.5 align-middle",
-                      {
-                        "border-b": table.getRowModel().rows.length !== i + 1,
-                      },
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </td>
-                ))}
-              </tr>
-            ))}
-          </tbody>
-          {props.enableTableFooter ? (
-            <tfoot>
-              {table.getFooterGroups().map((footerGroup) => (
-                <tr key={footerGroup.id} className="relative">
-                  {footerGroup.headers.map((header) => (
-                    <th className="border-t" key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.footer,
-                            header.getContext(),
-                          )}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </tfoot>
-          ) : null}
-        </table>
-      </div>
-      {table.getPageCount() > 1 ? (
-        <div className="flex items-center justify-between space-x-2 border-t px-4 py-3 lg:px-5">
-          <div>
-            <span className="text-muted-foreground text-sm">
-              <Trans
-                i18nKey="pageXOfY"
-                defaults="Page {currentPage} of {pageCount}"
-                values={{
-                  currentPage: table.getState().pagination.pageIndex + 1,
-                  pageCount: table.getPageCount(),
-                }}
-              />
-            </span>
-          </div>
-          <Flex>
-            <Button
-              size="sm"
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-            >
-              <ArrowLeftIcon
-                className={cn("size-4", {
-                  "text-gray-400": !table.getCanPreviousPage(),
-                })}
-              />
-            </Button>
-
-            <Button
-              size="sm"
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-            >
-              <ArrowRightIcon className="size-4 text-gray-500" />
-            </Button>
-          </Flex>
-        </div>
-      ) : null}
-    </div>
-  );
-};

apps/web/src/components/user-dropdown.tsx

@@ -26,8 +26,8 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 
-import { CurrentUserAvatar } from "@/components/current-user-avatar";
 import { LoginLink } from "@/components/login-link";
+import { OptimizedAvatarImage } from "@/components/optimized-avatar-image";
 import { RegisterLink } from "@/components/register-link";
 import { Trans } from "@/components/trans";
 import { IfCloudHosted, IfSelfHosted } from "@/contexts/environment";
@@ -57,7 +57,11 @@ export const UserDropdown = ({ className }: { className?: string }) => {
         className={cn("group min-w-0", className)}
       >
         <Button variant="ghost">
-          <CurrentUserAvatar size={24} />
+          <OptimizedAvatarImage
+            src={user.image ?? undefined}
+            name={user.name}
+            size="sm"
+          />
           <span className="truncate">{user.name}</span>
           <Icon>
             <ChevronDownIcon />

packages/ui/src/flex.tsx

@@ -39,8 +39,11 @@ const flexVariants = cva("box-border flex justify-start", {
     },
     gap: {
       none: "gap-0",
-      md: "gap-2.5",
+      xs: "gap-1",
-      lg: "gap-4",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8",
     },
   },
   defaultVariants: {
@@ -48,7 +51,7 @@ const flexVariants = cva("box-border flex justify-start", {
     align: "center",
     justify: "start",
     wrap: "noWrap",
-    gap: "md",
+    gap: "none",
   },
 });