Merge branch 'manawiki:main' into main

Dockerfile

@@ -1,7 +1,7 @@
 # syntax = docker/dockerfile:1
 
 # Adjust NODE_VERSION as desired
-ARG NODE_VERSION=22.6.0
+ARG NODE_VERSION=22.11.0
 FROM node:${NODE_VERSION}-alpine as base
 
 LABEL fly_launch_runtime="Mana"
@@ -48,7 +48,6 @@ RUN yarn install --frozen-lockfile --production=true
 # Final stage for app image
 FROM base as runtime
 
-RUN corepack enable
 WORKDIR /app
 
 # Install supervisor in the base image

app/components/icons.d.ts

@@ -1,4 +1,5 @@
 export type IconName =
+  | "eye"
   | "telescope"
   | "hash"
   | "corner-down-right"

app/db/collections/images/access.ts → app/db/collections/images/images.access.ts

@@ -28,3 +28,9 @@ export const canDeleteImages: Access = async ({ req: { user } }) => {
    // Reject everyone else
    return false;
 };
+
+export const canCreateImage: Access = async ({ req: { user }, data }) => {
+   const isSelf = user?.id === data?.createdBy;
+   const isStaff = user?.roles?.includes("staff");
+   return isStaff || isSelf;
+};

app/db/collections/images/config.ts → app/db/collections/images/images.config.ts

@@ -2,12 +2,8 @@ import type { CollectionConfig } from "payload/types";
 
 import type { User } from "payload/generated-types";
 
-import { canDeleteImages } from "./access";
-import {
-   isStaff,
-   isStaffFieldLevel,
-   isStaffOrSelf,
-} from "../users/users.access";
+import { canDeleteImages, canCreateImage } from "./images.access";
+import { isStaff, isStaffFieldLevel } from "../users/users.access";
 
 export const imagesSlug = "images";
 export const Images: CollectionConfig = {
@@ -16,7 +12,7 @@ export const Images: CollectionConfig = {
       read: (): boolean => true, // Everyone can read Images
       update: isStaff,
       delete: canDeleteImages,
-      create: isStaffOrSelf,
+      create: canCreateImage,
    },
    fields: [
       {

app/db/collections/index.ts

@@ -4,7 +4,7 @@ import { ContentEmbeds } from "./content-embeds/config";
 import { CustomPages } from "./custom-pages/custom-pages-config";
 import { Entries } from "./entries/entries-config";
 import { HomeContents } from "./home-contents/config";
-import { Images } from "./images/config";
+import { Images } from "./images/images.config";
 import { PostContents } from "./post-contents/post-contents-config";
 import { PostTags } from "./post-tags/post-tags-config";
 import { Posts } from "./posts/posts-config";

app/db/collections/users/users.access.ts

@@ -13,14 +13,6 @@ export const isStaff: Access<User, User> = ({ req: { user } }) => {
    return Boolean(user?.roles?.includes("staff"));
 };
 
-// This work because the document id here is the user being accessed
-export const isSelf: Access<User, User> = ({ req: { user }, id }) => {
-   return user?.id === id;
-};
-
-export const isStaffOrSelf: Access<User, User> = (props) =>
-   isStaff(props) || isSelf(props);
-
 export const isStaffFieldLevel: FieldAccess<User, User, User> = ({
    req: { user },
 }) => {
@@ -38,3 +30,10 @@ export const isSelfFieldLevel: FieldAccess<User, unknown, User> = ({
 export const isStaffOrSelfFieldLevel: FieldAccess<User, unknown, User> = (
    props,
 ) => isStaffFieldLevel(props) || isSelfFieldLevel(props);
+
+export const canUpdateUser: Access = async ({ req: { user }, id }) => {
+   const isStaff = user?.roles?.includes("staff");
+   const isSelf = user?.id === id;
+
+   return isStaff || isSelf;
+};

app/db/collections/users/users.config.ts

@@ -3,12 +3,12 @@ import type { CollectionConfig } from "payload/types";
 import {
    isStaff,
    isStaffFieldLevel,
-   isStaffOrSelf,
    isStaffOrSelfFieldLevel,
 } from "./users.access";
 
 export const serverEnv = process.env.NODE_ENV;
 export const usersSlug = "users";
+import { canUpdateUser } from "./users.access";
 
 export const Users: CollectionConfig = {
    slug: usersSlug,
@@ -92,8 +92,8 @@ export const Users: CollectionConfig = {
    access: {
       read: () => true,
       create: () => true,
-      delete: isStaffOrSelf,
-      update: isStaffOrSelf,
+      delete: isStaff,
+      update: canUpdateUser,
       // @ts-expect-error - this is a payload type bug
       admin: isStaff,
    },

app/db/custom/CustomUsers.ts

@@ -3,7 +3,6 @@ import type { CollectionConfig } from "payload/types";
 import {
    isStaff,
    isStaffFieldLevel,
-   isStaffOrSelf,
    isStaffOrSelfFieldLevel,
 } from "../collections/users/users.access";
 
@@ -16,7 +15,7 @@ export const Users: CollectionConfig = {
       read: isStaff,
       create: isStaff,
       delete: isStaff,
-      update: isStaffOrSelf,
+      update: isStaff,
    },
    fields: [
       {

app/db/payload.custom.config.ts

@@ -60,6 +60,7 @@ export default buildConfig({
          ogImage: "/og-image.png",
          titleSuffix: "Mana",
       },
+      css: path.resolve(__dirname, "../_custom/admin-panel-styles.css"),
    },
    plugins: [
       selectPlugin(),

app/routes/_editor+/blocks+/htmlblock.tsx

@@ -62,7 +62,7 @@ export function BlockHTMLBlock({
          ) : (
             <div className="bg-2 border border-color-sub p-3 rounded-lg shadow-sm shadow-1 text-sm relative">
                <TextareaAutosize
-                  className="w-full resize-none font-mono text-1 focus:ring-0 overflow-hidden text-sm border-0 bg-transparent p-0"
+                  className="w-full resize-none font-mono text-1 focus:ring-0 overflow-hidden text-sm border-0 bg-transparent p-0 max-h-96 overflow-y-auto"
                   defaultValue={HTMLBlockValue}
                   onChange={(event) => updateLabelValue(event.target.value)}
                   placeholder="Start typing..."

app/routes/_editor+/blocks+/toggleblock.tsx

@@ -1,14 +1,18 @@
 import type { ReactNode } from "react";
+import { useState } from "react";
 
-import { Disclosure } from "@headlessui/react";
+import { Disclosure, Switch } from "@headlessui/react";
 import clsx from "clsx";
-import { useSlate } from "slate-react";
+import type { BaseEditor } from "slate";
+import { Transforms } from "slate";
+import { ReactEditor, useSlate } from "slate-react";
 
 import { Icon } from "~/components/Icon";
 
 // eslint-disable-next-line import/no-cycle
 import { NestedEditor } from "../core/dnd";
-import type { ToggleBlockElement } from "../core/types";
+
+import type { ToggleBlockElement, CustomElement } from "../core/types";
 
 type Props = {
    element: ToggleBlockElement;
@@ -19,9 +23,28 @@ type Props = {
 export function BlockToggleBlock({ element, children, readOnly }: Props) {
    //Otherwise render as regular a tag for external links
    const editor = useSlate();
+   const [isOpen, setIsOpen] = useState(element.isOpen);
+
+   interface Editors extends BaseEditor, ReactEditor {}
+
+   function handleUpdateToggleIsOpen(
+      event: any,
+      editor: Editors,
+      element: ToggleBlockElement,
+   ) {
+      const path = ReactEditor.findPath(editor, element);
+      setIsOpen(event);
+      return Transforms.setNodes<CustomElement>(
+         editor,
+         { isOpen: event },
+         {
+            at: path,
+         },
+      );
+   }
 
    return (
-      <Disclosure>
+      <Disclosure defaultOpen={isOpen}>
          {({ open }) => (
             <>
                {readOnly ? (
@@ -46,31 +69,53 @@ export function BlockToggleBlock({ element, children, readOnly }: Props) {
                      </div>
                   </Disclosure.Button>
                ) : (
-                  <div
-                     className={clsx(
-                        open ? "rounded-b-none" : "mb-2.5 shadow-sm",
-                        "shadow-1 border-color-sub bg-2-sub flex w-full items-center gap-2 overflow-hidden rounded-lg border  px-2 py-3",
-                     )}
-                  >
-                     <Disclosure.Button>
-                        <div
-                           contentEditable={false}
-                           className="flex h-7 w-7 flex-none items-center justify-center rounded-full border bg-white shadow-sm shadow-zinc-200  dark:border-zinc-600/30 dark:bg-dark450 dark:shadow-zinc-800"
-                        >
-                           <Icon
-                              name="chevron-right"
-                              className={clsx(
-                                 open ? "rotate-90" : "",
-                                 "transform pl-0.5 transition duration-300 ease-in-out",
-                              )}
-                              size={16}
-                           />
+                  <>
+                     <div
+                        className={clsx(
+                           open ? "rounded-b-none" : "mb-2.5 shadow-sm",
+                           "shadow-1 border-color-sub bg-2-sub flex w-full items-center gap-2 overflow-hidden rounded-lg border px-2 py-3 relative",
+                        )}
+                     >
+                        <Disclosure.Button>
+                           <div
+                              contentEditable={false}
+                              className="flex h-7 w-7 flex-none items-center justify-center rounded-full border bg-white shadow-sm shadow-zinc-200  dark:border-zinc-600/30 dark:bg-dark450 dark:shadow-zinc-800"
+                           >
+                              <Icon
+                                 name="chevron-right"
+                                 className={clsx(
+                                    open ? "rotate-90" : "",
+                                    "transform pl-0.5 transition duration-300 ease-in-out",
+                                 )}
+                                 size={16}
+                              />
+
+                              <Switch
+                                 checked={isOpen}
+                                 onChange={(e) =>
+                                    handleUpdateToggleIsOpen(e, editor, element)
+                                 }
+                                 className="dark:border-zinc-600/60 z-30 group-hover:flex bg-white dark:bg-dark450 flex-none absolute top-1 right-3 h-5 w-[36px] items-center rounded-full border"
+                              >
+                                 <div
+                                    className={clsx(
+                                       isOpen
+                                          ? "translate-x-[8px] dark:bg-zinc-300 bg-zinc-400 -translate-y-[2px]"
+                                          : "-translate-x-[8px] bg-zinc-300 dark:bg-zinc-500 -translate-y-[2px]",
+                                       "inline-flex h-3 w-3 transform items-center justify-center rounded-full transition",
+                                    )}
+                                 />
+                                 <div className="text-[7pt] -mt-1.5">
+                                    Default {isOpen ? "Open" : "Closed"}
+                                 </div>
+                              </Switch>
+                           </div>
+                        </Disclosure.Button>
+                        <div className="flex-grow border-0 bg-transparent text-[15px] font-bold focus:ring-0">
+                           {children}
                         </div>
-                     </Disclosure.Button>
-                     <div className="flex-grow border-0 bg-transparent text-[15px] font-bold focus:ring-0">
-                        {children}
                      </div>
-                  </div>
+                  </>
                )}
                <Disclosure.Panel
                   contentEditable={false}

app/routes/_editor+/editor.tsx

@@ -26,6 +26,7 @@ export function ManaEditor({
    entryId,
    collectionEntity,
    collectionSlug,
+   onChange,
 }: {
    fetcher?: FetcherWithComponents<unknown>;
    defaultValue: unknown[];
@@ -35,6 +36,7 @@ export function ManaEditor({
    entryId?: string | undefined | null;
    collectionEntity?: string;
    collectionSlug?: keyof Config["collections"];
+   onChange?: (value: Descendant[]) => void;
 }) {
    const editor = useEditor();
 
@@ -45,7 +47,7 @@ export function ManaEditor({
    const debouncedValue = useDebouncedValue(value, 1000);
 
    useEffect(() => {
-      if (!isMount) {
+      if (!isMount && !onChange) {
          fetcher?.submit(
             //@ts-ignore
             {
@@ -65,7 +67,7 @@ export function ManaEditor({
 
    return (
       <Slate
-         onChange={setValue}
+         onChange={onChange ?? setValue}
          editor={editor}
          initialValue={(value as Descendant[]) ?? initialValue()}
       >

app/routes/_site+/c_+/_components/List.tsx

@@ -49,6 +49,7 @@ export function List({
    defaultViewType,
    gridView,
    defaultSort,
+   beforeListComponent,
 }: {
    children?: ReactNode;
    columns: AccessorKeyColumnDefBase<any>[];
@@ -57,6 +58,7 @@ export function List({
    gridView?: AccessorKeyColumnDef<any>;
    columnViewability?: VisibilityState;
    defaultSort?: SortingState;
+   beforeListComponent?: ReactNode;
 }) {
    //@ts-ignore
    const { list } = useLoaderData();
@@ -94,7 +96,8 @@ export function List({
             className="mt-6 mb-4 mx-auto flex items-center justify-center"
             selectorId="listDesktopLeaderATF"
          />
-         <div className="mx-auto max-w-[728px] space-y-1 max-tablet:px-3 py-4 laptop:pb-14">
+         {beforeListComponent}
+         <div className="mx-auto max-w-[728px] max-tablet:px-3 py-4 laptop:pb-14">
             {!collection?.customDatabase && <AddEntry />}
             {children ? (
                children

app/routes/_site+/c_+/_components/ListTable.tsx

@@ -43,6 +43,7 @@ export function ListTable({
    pageSize = 60,
    globalFilterFn,
    stickyFooter = false,
+   hideViewMode = false,
 }: {
    data: any;
    columns: AccessorKeyColumnDefBase<any>[] | any;
@@ -59,6 +60,7 @@ export function ListTable({
    pager?: boolean;
    globalFilterFn?: FilterFn<any>;
    stickyFooter?: boolean;
+   hideViewMode?: boolean;
 }) {
    const FilterContext = useContext(TableFilterContext);
 
@@ -117,6 +119,7 @@ export function ListTable({
          {FilterContext?.globalColumnFilters &&
          typeof FilterContext?.setGlobalColumnFilters == "function" ? null : (
             <ListTop
+               hideViewMode={hideViewMode}
                searchPlaceholder={searchPlaceholder}
                collection={collection}
                columnFilters={columnFilters}