Merge branch 'dev' into boards

# Conflicts:
#	.gitignore
#	package.json
#	pnpm-lock.yaml
#	prisma/migrations/16_boards/migration.sql
#	prisma/schema.prisma
#	src/app/(main)/MobileNav.tsx
#	src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx
#	src/app/(main)/websites/[websiteId]/settings/WebsiteShareForm.tsx
#	src/components/common/SideMenu.tsx
#	src/lib/types.ts

src/app/(main)/pixels/PixelsDataTable.tsx

@@ -2,13 +2,13 @@ import { DataGrid } from '@/components/common/DataGrid';
 import { useNavigation, usePixelsQuery } from '@/components/hooks';
 import { PixelsTable } from './PixelsTable';
 
-export function PixelsDataTable() {
+export function PixelsDataTable({ showActions = false }: { showActions?: boolean }) {
   const { teamId } = useNavigation();
   const query = usePixelsQuery({ teamId });
 
   return (
     <DataGrid query={query} allowSearch={true} autoFocus={false} allowPaging={true}>
-      {({ data }) => <PixelsTable data={data} />}
+      {({ data }) => <PixelsTable data={data} showActions={showActions} />}
     </DataGrid>
   );
 }

src/app/(main)/pixels/PixelsPage.tsx

@@ -3,22 +3,31 @@ import { Column } from '@umami/react-zen';
 import { PageBody } from '@/components/common/PageBody';
 import { PageHeader } from '@/components/common/PageHeader';
 import { Panel } from '@/components/common/Panel';
-import { useMessages, useNavigation } from '@/components/hooks';
+import { useLoginQuery, useMessages, useNavigation, useTeamMembersQuery } from '@/components/hooks';
+import { ROLES } from '@/lib/constants';
 import { PixelAddButton } from './PixelAddButton';
 import { PixelsDataTable } from './PixelsDataTable';
 
 export function PixelsPage() {
+  const { user } = useLoginQuery();
   const { formatMessage, labels } = useMessages();
   const { teamId } = useNavigation();
+  const { data } = useTeamMembersQuery(teamId);
+
+  const showActions =
+    (teamId &&
+      data?.data.filter(team => team.userId === user.id && team.role !== ROLES.teamViewOnly)
+        .length > 0) ||
+    (!teamId && user.role !== ROLES.viewOnly);
 
   return (
     <PageBody>
       <Column gap="6" margin="2">
         <PageHeader title={formatMessage(labels.pixels)}>
-          <PixelAddButton teamId={teamId} />
+          {showActions && <PixelAddButton teamId={teamId} />}
         </PageHeader>
         <Panel>
-          <PixelsDataTable />
+          <PixelsDataTable showActions={showActions} />
         </Panel>
       </Column>
     </PageBody>

src/app/(main)/pixels/PixelsTable.tsx

@@ -6,7 +6,11 @@ import { useMessages, useNavigation, useSlug } from '@/components/hooks';
 import { PixelDeleteButton } from './PixelDeleteButton';
 import { PixelEditButton } from './PixelEditButton';
 
-export function PixelsTable(props: DataTableProps) {
+export interface PixelsTableProps extends DataTableProps {
+  showActions?: boolean;
+}
+
+export function PixelsTable({ showActions, ...props }: PixelsTableProps) {
   const { formatMessage, labels } = useMessages();
   const { renderUrl } = useNavigation();
   const { getSlugUrl } = useSlug('pixel');
@@ -31,18 +35,20 @@ export function PixelsTable(props: DataTableProps) {
       <DataColumn id="created" label={formatMessage(labels.created)}>
         {(row: any) => <DateDistance date={new Date(row.createdAt)} />}
       </DataColumn>
-      <DataColumn id="action" align="end" width="100px">
-        {(row: any) => {
-          const { id, name } = row;
+      {showActions && (
+        <DataColumn id="action" align="end" width="100px">
+          {(row: any) => {
+            const { id, name } = row;
 
-          return (
-            <Row>
-              <PixelEditButton pixelId={id} />
-              <PixelDeleteButton pixelId={id} name={name} />
-            </Row>
-          );
-        }}
-      </DataColumn>
+            return (
+              <Row>
+                <PixelEditButton pixelId={id} />
+                <PixelDeleteButton pixelId={id} name={name} />
+              </Row>
+            );
+          }}
+        </DataColumn>
+      )}
     </DataTable>
   );
 }