first commit

resources/client/user-lists/pages/create-user-list-page.tsx

@@ -0,0 +1,53 @@
+import React, {Fragment} from 'react';
+import {useForm} from 'react-hook-form';
+import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout';
+import {Trans} from '@common/i18n/trans';
+import {StaticPageTitle} from '@common/seo/static-page-title';
+import {useCreateList} from '@app/user-lists/requests/use-create-list';
+import {CrupdateUserListForm} from '@app/user-lists/pages/crupdate-user-list-form';
+import {TITLE_MODEL} from '@app/titles/models/title';
+import {EMPTY_PAGINATION_RESPONSE} from '@common/http/backend-response/pagination-response';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {Link} from 'react-router-dom';
+import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+
+export function CreateUserListPage() {
+  const form = useForm<CreateChannelPayload>({
+    defaultValues: {
+      type: 'list',
+      public: true,
+      config: {
+        contentType: 'manual',
+        contentModel: TITLE_MODEL,
+        layout: 'grid',
+        contentOrder: 'channelables.order:asc',
+      },
+      content: EMPTY_PAGINATION_RESPONSE.pagination,
+    },
+  });
+  const createList = useCreateList(form);
+
+  return (
+    <Fragment>
+      <StaticPageTitle>
+        <Trans message="New list" />
+      </StaticPageTitle>
+      <CrupdateResourceLayout
+        backButton={
+          <IconButton elementType={Link} relative="path" to="../">
+            <ArrowBackIcon />
+          </IconButton>
+        }
+        form={form}
+        onSubmit={values => {
+          createList.mutate(values);
+        }}
+        title={<Trans message="New list" />}
+        isLoading={createList.isPending}
+      >
+        <CrupdateUserListForm />
+      </CrupdateResourceLayout>
+    </Fragment>
+  );
+}

resources/client/user-lists/pages/crupdate-user-list-form.tsx

@@ -0,0 +1,95 @@
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import {Trans} from '@common/i18n/trans';
+import {ContentModelField} from '@common/admin/channels/channel-editor/controls/content-model-field';
+import {
+  channelContentConfig,
+  Layout,
+} from '@app/admin/channels/channel-content-config';
+import {NEWS_ARTICLE_MODEL} from '@app/titles/models/news-article';
+import {CHANNEL_MODEL} from '@common/channels/channel';
+import {MOVIE_MODEL, SERIES_MODEL} from '@app/titles/models/title';
+import {ContentOrderField} from '@common/admin/channels/channel-editor/controls/content-order-field';
+import {FormSelect, Option} from '@common/ui/forms/select/select';
+import {ChannelContentEditor} from '@common/admin/channels/channel-editor/channel-content-editor';
+import React from 'react';
+import {
+  ChannelContentSearchField,
+  ChannelContentSearchFieldProps,
+} from '@common/admin/channels/channel-editor/channel-content-search-field';
+import {ChannelContentItemImage} from '@app/admin/channels/channel-content-item-image';
+import {IllustratedMessage} from '@common/ui/images/illustrated-message';
+import {SvgImage} from '@common/ui/images/svg-image/svg-image';
+import playlist from '@common/admin/channels/playlist.svg';
+import {FormSwitch} from '@common/ui/forms/toggle/switch';
+
+export function CrupdateUserListForm() {
+  return (
+    <div>
+      <FormTextField
+        name="name"
+        label={<Trans message="Name" />}
+        required
+        autoFocus
+        className="mb-24"
+      />
+      <FormTextField
+        name="description"
+        label={<Trans message="Description" />}
+        inputElementType="textarea"
+        rows={2}
+        className="mb-24"
+      />
+      <ContentModelField
+        config={channelContentConfig}
+        className="mb-24"
+        exclude={[NEWS_ARTICLE_MODEL, CHANNEL_MODEL, MOVIE_MODEL, SERIES_MODEL]}
+      />
+      <ContentOrderField config={channelContentConfig} />
+      <FormSelect
+        className="flex-auto w-full"
+        selectionMode="single"
+        name="config.layout"
+        label={<Trans message="Layout" />}
+      >
+        <Option value={Layout.grid}>
+          <Trans {...channelContentConfig.layoutMethods[Layout.grid].label} />
+        </Option>
+        <Option value={Layout.list}>
+          <Trans {...channelContentConfig.layoutMethods[Layout.list].label} />
+        </Option>
+        <Option value={Layout.landscapeGrid}>
+          <Trans
+            {...channelContentConfig.layoutMethods[Layout.landscapeGrid].label}
+          />
+        </Option>
+      </FormSelect>
+      <FormSwitch name="public" className="mt-24">
+        <Trans message="Public" />
+      </FormSwitch>
+      <ChannelContentEditor
+        title={<Trans message="List content" />}
+        searchField={<SearchField />}
+        noResultsMessage={<NoResultsMessage />}
+      />
+    </div>
+  );
+}
+
+function SearchField(props: ChannelContentSearchFieldProps) {
+  return (
+    <ChannelContentSearchField
+      {...props}
+      imgRenderer={item => <ChannelContentItemImage item={item} />}
+    />
+  );
+}
+
+function NoResultsMessage() {
+  return (
+    <IllustratedMessage
+      title={<Trans message="List is empty" />}
+      description={<Trans message="No content is attached to this list yet." />}
+      image={<SvgImage src={playlist} />}
+    />
+  );
+}

resources/client/user-lists/pages/edit-user-list-page.tsx

@@ -0,0 +1,63 @@
+import React, {Fragment, ReactNode} from 'react';
+import {PageStatus} from '@common/http/page-status';
+import {useForm} from 'react-hook-form';
+import {CrupdateResourceLayout} from '@common/admin/crupdate-resource-layout';
+import {Trans} from '@common/i18n/trans';
+import {StaticPageTitle} from '@common/seo/static-page-title';
+import {useUpdateList} from '@app/user-lists/requests/use-update-list';
+import {CrupdateUserListForm} from '@app/user-lists/pages/crupdate-user-list-form';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
+import {Link} from 'react-router-dom';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+import {useChannel} from '@common/channels/requests/use-channel';
+import {Channel} from '@common/channels/channel';
+
+export function EditUserListPage() {
+  const query = useChannel(undefined, 'editUserListPage');
+
+  return query.data ? (
+    <Fragment>
+      <StaticPageTitle>
+        <Trans message="Edit list" />
+      </StaticPageTitle>
+      <PageContent list={query.data.channel}>
+        <CrupdateUserListForm />
+      </PageContent>
+    </Fragment>
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute m-auto inset-0" />
+  );
+}
+
+interface PageContentProps {
+  list: Channel;
+  children: ReactNode;
+}
+function PageContent({list, children}: PageContentProps) {
+  const form = useForm<CreateChannelPayload>({
+    // @ts-ignore
+    defaultValues: {
+      ...list,
+    },
+  });
+  const updateList = useUpdateList(form);
+
+  return (
+    <CrupdateResourceLayout
+      backButton={
+        <IconButton elementType={Link} relative="path" to="../../">
+          <ArrowBackIcon />
+        </IconButton>
+      }
+      form={form}
+      onSubmit={values => {
+        updateList.mutate(values);
+      }}
+      title={<Trans message="Edit “:name“ List" values={{name: list.name}} />}
+      isLoading={updateList.isPending}
+    >
+      {children}
+    </CrupdateResourceLayout>
+  );
+}

resources/client/user-lists/pages/user-lists-index-page/user-list-index-item.tsx

@@ -0,0 +1,140 @@
+import {Channel} from '@common/channels/channel';
+import {Title} from '@app/titles/models/title';
+import {Person} from '@app/titles/models/person';
+import {useDeleteList} from '@app/user-lists/requests/use-delete-list';
+import {useDialogContext} from '@common/ui/overlays/dialog/dialog-context';
+import {ConfirmationDialog} from '@common/ui/overlays/dialog/confirmation-dialog';
+import {Trans} from '@common/i18n/trans';
+import React, {Fragment} from 'react';
+import {getUserListLink, UserListLink} from '@app/user-lists/user-list-link';
+import {Button} from '@common/ui/buttons/button';
+import {Link} from 'react-router-dom';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {UserListByline} from '@app/user-lists/user-list-byline';
+import {UserListDetails} from '@app/user-lists/user-list-details';
+import clsx from 'clsx';
+import {TitlePoster} from '@app/titles/title-poster/title-poster';
+import {PersonPoster} from '@app/people/person-poster/person-poster';
+import {User} from '@common/auth/user';
+import {useAuth} from '@common/auth/use-auth';
+
+interface UserListIndexItemProps {
+  list: Channel;
+  user: User;
+  showVisibility?: boolean;
+}
+export function UserListIndexItem({
+  list,
+  user,
+  showVisibility = true,
+}: UserListIndexItemProps) {
+  const {user: authUser} = useAuth();
+  const canEdit = authUser && authUser.id === user.id;
+  return (
+    <div className="flex items-center gap-24 border-b py-24">
+      {
+        <ItemsPreview
+          className="max-md:hidden"
+          list={list as Channel<Title | Person>}
+        />
+      }
+      <section className="flex-auto">
+        <div className="flex items-center gap-8">
+          <UserListLink
+            list={list}
+            className="mr-auto block text-lg font-semibold capitalize"
+          />
+          {!list.config.preventDeletion && !list.internal && canEdit && (
+            <Fragment>
+              <Button
+                elementType={Link}
+                to={`${getUserListLink(list)}/edit`}
+                variant="outline"
+                size="2xs"
+                color="primary"
+              >
+                <Trans message="Edit" />
+              </Button>
+              <DialogTrigger type="modal">
+                <Button
+                  color="danger"
+                  variant="outline"
+                  radius="rounded"
+                  size="2xs"
+                >
+                  <Trans message="Delete" />
+                </Button>
+                <DeleteListDialog list={list} />
+              </DialogTrigger>
+            </Fragment>
+          )}
+        </div>
+        {list.description && (
+          <p className="mt-8 whitespace-nowrap text-sm text-muted">
+            {list.description}
+          </p>
+        )}
+        <div className="mt-12 text-sm">
+          <div className="items-center justify-between gap-24 md:flex">
+            {user && <UserListByline user={user} />}
+            <UserListDetails
+              list={list}
+              showVisibility={showVisibility}
+              className="max-md:mt-12"
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+interface ItemPreviewProps {
+  list: Channel<Title | Person>;
+  className?: string;
+}
+function ItemsPreview({list, className}: ItemPreviewProps) {
+  if (!list.items?.length) return null;
+  return (
+    <div
+      className={clsx('flex items-center overflow-hidden rounded', className)}
+    >
+      {list.items?.map((item, index) => (
+        <div
+          key={item.id}
+          style={{zIndex: 100 - index}}
+          className={clsx(
+            'relative overflow-hidden rounded shadow-[2px_0_7px_#000]',
+            index !== 0 && '-ml-30',
+          )}
+        >
+          {item.model_type === 'title' ? (
+            <TitlePoster title={item} size="w-70" srcSize="sm" />
+          ) : (
+            <PersonPoster person={item} size="w-70" srcSize="sm" />
+          )}
+          <div className="pointer-events-none absolute inset-0 shadow-[inset_0_0_0_1px_rgba(221,238,255,.35)]" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+interface DeleteButtonProps {
+  list: Channel;
+}
+function DeleteListDialog({list}: DeleteButtonProps) {
+  const deleteList = useDeleteList();
+  const {close} = useDialogContext();
+
+  return (
+    <ConfirmationDialog
+      isDanger
+      title={<Trans message="Delete list" />}
+      body={<Trans message="Are you sure you want to delete this list?" />}
+      confirm={<Trans message="Delete" />}
+      isLoading={deleteList.isPending}
+      onConfirm={() => deleteList.mutate({listId: list.id}, {onSuccess: close})}
+    />
+  );
+}

resources/client/user-lists/pages/user-lists-index-page/user-lists-index-page.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {PageStatus} from '@common/http/page-status';
+import {SitePageLayout} from '@app/site-page-layout';
+import {Trans} from '@common/i18n/trans';
+import {SiteSectionHeading} from '@app/titles/site-section-heading';
+import {Link} from 'react-router-dom';
+import {Button} from '@common/ui/buttons/button';
+import {Channel} from '@common/channels/channel';
+import {UserListIndexItem} from '@app/user-lists/pages/user-lists-index-page/user-list-index-item';
+import {useProfileLists} from '@app/profile/requests/use-profile-lists';
+import {StaticPageTitle} from '@common/seo/static-page-title';
+import {useAuth} from '@common/auth/use-auth';
+import {UseInfiniteDataResult} from '@common/ui/infinite-scroll/use-infinite-data';
+import {InfiniteScrollSentinel} from '@common/ui/infinite-scroll/infinite-scroll-sentinel';
+import {IllustratedMessage} from '@common/ui/images/illustrated-message';
+import {SvgImage} from '@common/ui/images/svg-image/svg-image';
+import todoImage from '@app/admin/lists/todo.svg';
+
+export function UserListsIndexPage() {
+  const query = useProfileLists();
+
+  const content = query.data ? (
+    <PageContent query={query} />
+  ) : (
+    <PageStatus query={query} loaderClassName="absolute inset-0 m-auto" />
+  );
+
+  return (
+    <SitePageLayout>
+      <StaticPageTitle>
+        <Trans message="Your lists" />
+      </StaticPageTitle>
+      <div className="container mx-auto mt-48 px-24">
+        <header>
+          <SiteSectionHeading
+            headingType="h1"
+            margin="mb-34"
+            actions={
+              <Button
+                variant="flat"
+                color="primary"
+                elementType={Link}
+                to="new"
+              >
+                <Trans message="New list" />
+              </Button>
+            }
+          >
+            <Trans message="My lists" />
+          </SiteSectionHeading>
+        </header>
+        {content}
+      </div>
+    </SitePageLayout>
+  );
+}
+
+interface PageContentProps {
+  query: UseInfiniteDataResult<Channel>;
+}
+function PageContent({query}: PageContentProps) {
+  const {user} = useAuth();
+
+  if (query.noResults) {
+    return (
+      <IllustratedMessage
+        className="mt-80"
+        image={<SvgImage src={todoImage} />}
+        title={<Trans message="You have not created any lists yet." />}
+      />
+    );
+  }
+
+  return (
+    <div>
+      {query.items.map(list => (
+        <UserListIndexItem list={list} key={list.id} user={user!} />
+      ))}
+      <InfiniteScrollSentinel query={query} />
+    </div>
+  );
+}

resources/client/user-lists/requests/use-add-to-watchlist.ts

@@ -0,0 +1,34 @@
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useMutation} from '@tanstack/react-query';
+import {toast} from '@common/ui/toast/toast';
+import {message} from '@common/i18n/message';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+import {Title} from '@app/titles/models/title';
+import {useCurrentUserWatchlist} from '@app/user-lists/requests/use-current-user-watchlist';
+
+interface Response extends BackendResponse {}
+
+export function useAddToWatchlist() {
+  const {data} = useCurrentUserWatchlist();
+  return useMutation({
+    mutationFn: (payload: Title) =>
+      addToWatchlist(data!.watchlist!.id, payload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['channel', 'watchlist'],
+      });
+      toast(message('Added to your watchlist'));
+    },
+    onError: r => showHttpErrorToast(r),
+  });
+}
+
+function addToWatchlist(listId: number, payload: Title): Promise<Response> {
+  return apiClient
+    .post(`channel/${listId}/add`, {
+      itemId: payload.id,
+      itemType: payload.model_type,
+    })
+    .then(r => r.data);
+}

resources/client/user-lists/requests/use-all-user-lists.ts

@@ -0,0 +1,31 @@
+import {useQuery} from '@tanstack/react-query';
+import {apiClient} from '@common/http/query-client';
+import {useAuth} from '@common/auth/use-auth';
+import {PaginatedBackendResponse} from '@common/http/backend-response/pagination-response';
+import {Channel} from '@common/channels/channel';
+import {DatatableDataQueryKey} from '@common/datatable/requests/paginated-resources';
+
+export interface FetchAllUserListsResponse
+  extends PaginatedBackendResponse<Channel> {}
+
+export function useAllUserLists() {
+  const {user} = useAuth();
+  const params = {
+    userId: user?.id,
+    type: 'list',
+    perPage: 100,
+    loadItemsCount: true,
+    loadFirstItems: true,
+  };
+  return useQuery({
+    queryKey: DatatableDataQueryKey('channel', params),
+    queryFn: () => fetchLists(params),
+    enabled: !!user,
+  });
+}
+
+function fetchLists(params: Record<string, any>) {
+  return apiClient
+    .get<FetchAllUserListsResponse>(`channel`, {params})
+    .then(response => response.data);
+}

resources/client/user-lists/requests/use-create-list.ts

@@ -0,0 +1,39 @@
+import {useMutation} from '@tanstack/react-query';
+import {UseFormReturn} from 'react-hook-form';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {toast} from '@common/ui/toast/toast';
+import {useTrans} from '@common/i18n/use-trans';
+import {onFormQueryError} from '@common/errors/on-form-query-error';
+import {message} from '@common/i18n/message';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {Channel} from '@common/channels/channel';
+import {DatatableDataQueryKey} from '@common/datatable/requests/paginated-resources';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+
+interface Response extends BackendResponse {
+  channel: Channel;
+}
+
+export function useCreateList(form: UseFormReturn<CreateChannelPayload>) {
+  const {trans} = useTrans();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (payload: CreateChannelPayload) => createList(payload),
+    onSuccess: async response => {
+      await queryClient.invalidateQueries({
+        queryKey: DatatableDataQueryKey('channel'),
+      });
+      toast(trans(message('List created')));
+      navigate(`../${response.channel.id}/edit`, {
+        replace: true,
+        relative: 'path',
+      });
+    },
+    onError: err => onFormQueryError(err, form),
+  });
+}
+
+function createList(payload: CreateChannelPayload) {
+  return apiClient.post<Response>('channel', payload).then(r => r.data);
+}

resources/client/user-lists/requests/use-current-user-watchlist.ts

@@ -0,0 +1,39 @@
+import {useQuery} from '@tanstack/react-query';
+import {apiClient} from '@common/http/query-client';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useAuth} from '@common/auth/use-auth';
+import {Title} from '@app/titles/models/title';
+import {Episode} from '@app/titles/models/episode';
+
+interface Response extends BackendResponse {
+  watchlist: {
+    id: number;
+    items: {
+      title: Record<number, boolean>;
+      episode: Record<number, boolean>;
+    };
+  };
+}
+
+export function useCurrentUserWatchlist() {
+  const {user} = useAuth();
+  return useQuery({
+    queryKey: ['channel', 'watchlist', 'compact'],
+    queryFn: () => fetchWatchlist(),
+    enabled: !!user,
+  });
+}
+
+export function useIsItemWatchlisted(item: Title | Episode) {
+  const query = useCurrentUserWatchlist();
+  return {
+    isLoading: query.isLoading && query.fetchStatus !== 'idle',
+    isWatchlisted: !!query.data?.watchlist?.items[item.model_type]?.[item.id],
+  };
+}
+
+function fetchWatchlist() {
+  return apiClient
+    .get<Response>(`users/me/watchlist`)
+    .then(response => response.data);
+}

resources/client/user-lists/requests/use-delete-list.ts

@@ -0,0 +1,31 @@
+import {useMutation} from '@tanstack/react-query';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {toast} from '@common/ui/toast/toast';
+import {useTrans} from '@common/i18n/use-trans';
+import {message} from '@common/i18n/message';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+
+interface Response extends BackendResponse {}
+
+interface Payload {
+  listId: number | string;
+}
+
+export function useDeleteList() {
+  const {trans} = useTrans();
+  return useMutation({
+    mutationFn: (payload: Payload) => deleteList(payload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({queryKey: ['channel']});
+      toast(trans(message('List deleted')));
+    },
+    onError: err => showHttpErrorToast(err),
+  });
+}
+
+function deleteList(payload: Payload) {
+  return apiClient
+    .delete<Response>(`channel/${payload.listId}`)
+    .then(r => r.data);
+}

resources/client/user-lists/requests/use-remove-from-watchlist.ts

@@ -0,0 +1,37 @@
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useMutation} from '@tanstack/react-query';
+import {toast} from '@common/ui/toast/toast';
+import {message} from '@common/i18n/message';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {showHttpErrorToast} from '@common/utils/http/show-http-error-toast';
+import {Title} from '@app/titles/models/title';
+import {useCurrentUserWatchlist} from '@app/user-lists/requests/use-current-user-watchlist';
+
+interface Response extends BackendResponse {}
+
+export function useRemoveFromWatchlist() {
+  const {data} = useCurrentUserWatchlist();
+  return useMutation({
+    mutationFn: (payload: Title) =>
+      removeFromWatchlist(data!.watchlist.id, payload),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['channel', 'watchlist'],
+      });
+      toast(message('Removed from your watchlist'));
+    },
+    onError: r => showHttpErrorToast(r),
+  });
+}
+
+function removeFromWatchlist(
+  listId: number,
+  payload: Title,
+): Promise<Response> {
+  return apiClient
+    .post(`channel/${listId}/remove`, {
+      itemId: payload.id,
+      itemType: payload.model_type,
+    })
+    .then(r => r.data);
+}

resources/client/user-lists/requests/use-update-list.ts

@@ -0,0 +1,44 @@
+import {useMutation} from '@tanstack/react-query';
+import {UseFormReturn} from 'react-hook-form';
+import {apiClient, queryClient} from '@common/http/query-client';
+import {toast} from '@common/ui/toast/toast';
+import {useTrans} from '@common/i18n/use-trans';
+import {onFormQueryError} from '@common/errors/on-form-query-error';
+import {message} from '@common/i18n/message';
+import {useNavigate} from '@common/utils/hooks/use-navigate';
+import {BackendResponse} from '@common/http/backend-response/backend-response';
+import {useParams} from 'react-router-dom';
+import {DatatableDataQueryKey} from '@common/datatable/requests/paginated-resources';
+import {Channel} from '@common/channels/channel';
+import {CreateChannelPayload} from '@common/admin/channels/requests/use-create-channel';
+
+interface Response extends BackendResponse {
+  list: Channel;
+}
+
+export function useUpdateList(form: UseFormReturn<CreateChannelPayload>) {
+  const {trans} = useTrans();
+  const {slugOrId} = useParams();
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: (payload: CreateChannelPayload) =>
+      createList(payload, slugOrId!),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: DatatableDataQueryKey('channel'),
+      });
+      toast(trans(message('List updated')));
+      navigate(`../../`, {
+        replace: true,
+        relative: 'path',
+      });
+    },
+    onError: err => onFormQueryError(err, form),
+  });
+}
+
+function createList(payload: CreateChannelPayload, listId: string) {
+  return apiClient
+    .put<Response>(`channel/${listId}`, payload)
+    .then(r => r.data);
+}

resources/client/user-lists/user-list-byline.tsx

@@ -0,0 +1,33 @@
+import {User} from '@common/auth/user';
+import React, {useContext} from 'react';
+import {SiteConfigContext} from '@common/core/settings/site-config-context';
+import {UserAvatar} from '@common/ui/images/user-avatar';
+import {Trans} from '@common/i18n/trans';
+import {Link} from 'react-router-dom';
+
+interface Props {
+  user: User;
+}
+export function UserListByline({user}: Props) {
+  const {auth} = useContext(SiteConfigContext);
+  return (
+    <div className="flex-shrink-0 flex items-center gap-8 mr-24">
+      <UserAvatar user={user} circle size="sm" />
+      <div>
+        <Trans
+          message="List by <a>:name</a>"
+          values={{
+            a: () => (
+              <Link
+                to={auth.getUserProfileLink!(user)}
+                className="font-bold hover:underline"
+              >
+                {user.display_name}
+              </Link>
+            ),
+          }}
+        />
+      </div>
+    </div>
+  );
+}

resources/client/user-lists/user-list-details.tsx

@@ -0,0 +1,88 @@
+import {Trans} from '@common/i18n/trans';
+import {FormattedRelativeTime} from '@common/i18n/formatted-relative-time';
+import {LockIcon} from '@common/icons/material/Lock';
+import React, {Fragment} from 'react';
+import {LockOpenIcon} from '@common/icons/material/LockOpen';
+import clsx from 'clsx';
+import {Channel} from '@common/channels/channel';
+import {Button} from '@common/ui/buttons/button';
+import {ShareIcon} from '@common/icons/material/Share';
+import {ShareMenuTrigger} from '@app/sharing/share-menu-trigger';
+import {getUserListLink} from '@app/user-lists/user-list-link';
+
+interface Props {
+  list: Channel;
+  className?: string;
+  showShareButton?: boolean;
+  showVisibility?: boolean;
+}
+export function UserListDetails({
+  list,
+  className,
+  showShareButton,
+  showVisibility = true,
+}: Props) {
+  return (
+    <div
+      className={clsx(
+        'flex flex-shrink-0 items-center gap-4 whitespace-nowrap text-muted',
+        className,
+      )}
+    >
+      {showShareButton && (
+        <Fragment>
+          <ShareButton list={list} />
+          <Divider marginLeft="ml-2" />
+        </Fragment>
+      )}
+      {list.items_count ? (
+        <Fragment>
+          <Trans message=":count items" values={{count: list.items_count}} />
+          <Divider />
+        </Fragment>
+      ) : null}
+      <span>
+        <Trans
+          message="Updated :date"
+          values={{
+            date: <FormattedRelativeTime date={list.updated_at} />,
+          }}
+        />
+      </span>
+      {showVisibility && (
+        <Fragment>
+          <Divider />
+          {list.public ? <LockOpenIcon size="sm" /> : <LockIcon size="sm" />}
+          <div>
+            {list.public ? (
+              <Trans message="Public" />
+            ) : (
+              <Trans message="Private" />
+            )}
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+}
+
+interface ShareButtonProps {
+  list: Channel;
+}
+function ShareButton({list}: ShareButtonProps) {
+  const link = getUserListLink(list, {absolute: true});
+  return (
+    <ShareMenuTrigger link={link}>
+      <Button startIcon={<ShareIcon />} sizeClassName="px-10 py-6">
+        <Trans message="Share" />
+      </Button>
+    </ShareMenuTrigger>
+  );
+}
+
+interface DividerProps {
+  marginLeft?: string;
+}
+function Divider({marginLeft = 'ml-12'}: DividerProps) {
+  return <div className={clsx('mr-10 h-20 w-1 bg-divider', marginLeft)} />;
+}

resources/client/user-lists/user-list-link.tsx

@@ -0,0 +1,48 @@
+import React, {useMemo} from 'react';
+import {
+  BaseMediaLink,
+  BaseMediaLinkProps,
+  getBaseMediaLink,
+} from '@app/base-media-link';
+import {Channel} from '@common/channels/channel';
+import {Trans} from '@common/i18n/trans';
+
+interface Props extends Omit<BaseMediaLinkProps, 'link'> {
+  list: Channel;
+}
+export function UserListLink({list, children, ...linkProps}: Props) {
+  const link = useMemo(() => {
+    return getUserListLink(list);
+  }, [list]);
+
+  let content;
+
+  if (children) {
+    content = children;
+  } else if (list.internal && list.name === 'watchlist') {
+    return <Trans message="Watchlist" />;
+  } else {
+    content = list.name;
+  }
+
+  return (
+    <BaseMediaLink {...linkProps} link={link}>
+      {content}
+    </BaseMediaLink>
+  );
+}
+
+interface Options {
+  absolute?: boolean;
+  season?: number | string;
+  episode?: number | string;
+}
+
+export function getUserListLink(
+  list: Channel,
+  {absolute}: Options = {}
+): string {
+  return getBaseMediaLink(`/lists/${list.id}`, {
+    absolute,
+  });
+}

resources/client/user-lists/watchlist-button.tsx

@@ -0,0 +1,51 @@
+import {Button, ButtonProps} from '@common/ui/buttons/button';
+import {AddIcon} from '@common/icons/material/Add';
+import {Trans} from '@common/i18n/trans';
+import {Title} from '@app/titles/models/title';
+import {CheckIcon} from '@common/icons/material/Check';
+import {useAddToWatchlist} from '@app/user-lists/requests/use-add-to-watchlist';
+import {useRemoveFromWatchlist} from '@app/user-lists/requests/use-remove-from-watchlist';
+import {useIsItemWatchlisted} from '@app/user-lists/requests/use-current-user-watchlist';
+import {useAuthClickCapture} from '@app/use-auth-click-capture';
+
+interface Props {
+  variant?: ButtonProps['variant'];
+  color?: ButtonProps['color'];
+  item: Title;
+}
+export function WatchlistButton({
+  item,
+  variant = 'flat',
+  color = 'primary',
+}: Props) {
+  const {isLoading, isWatchlisted} = useIsItemWatchlisted(item);
+  const addToWatchlist = useAddToWatchlist();
+  const removeFromWatchlist = useRemoveFromWatchlist();
+  const authHandler = useAuthClickCapture();
+
+  return (
+    <Button
+      variant={variant}
+      color={color}
+      startIcon={isWatchlisted ? <CheckIcon /> : <AddIcon />}
+      className="mt-14 min-h-40 w-full"
+      disabled={
+        addToWatchlist.isPending || removeFromWatchlist.isPending || isLoading
+      }
+      onClickCapture={authHandler}
+      onClick={() => {
+        if (isWatchlisted) {
+          removeFromWatchlist.mutate(item);
+        } else {
+          addToWatchlist.mutate(item);
+        }
+      }}
+    >
+      {isWatchlisted ? (
+        <Trans message="In watchlist" />
+      ) : (
+        <Trans message="Add to watchlist" />
+      )}
+    </Button>
+  );
+}