@underpostnet/underpost 2.96.1 → 2.97.1

package/src/client/components/core/PanelForm.js

@@ -6,7 +6,7 @@ import { NotificationManager } from './NotificationManager.js';
 import { DocumentService } from '../../services/document/document.service.js';
 import { FileService } from '../../services/file/file.service.js';
 import { getSrcFromFileData } from './Input.js';
-import { imageShimmer, renderCssAttr } from './Css.js';
+import { imageShimmer, renderCssAttr, darkTheme, ThemeEvents, subThemeManager, lightenHex, darkenHex } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
 import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath, getQueryParams } from './Router.js';
@@ -27,11 +27,17 @@ const PanelForm = {
       route: 'home',
       htmlFormHeader: async () => '',
       firsUpdateEvent: async () => {},
+      share: {
+        copyLink: false,
+      },
+      showCreatorProfile: false,
     },
   ) {
     const { idPanel, defaultUrlImage, Elements } = options;
 
-    let prefixTags = [idPanel, 'public'];
+    // Authenticated users don't need 'public' tag - they see all their own posts
+    // Only include 'public' for unauthenticated users (handled by backend)
+    let prefixTags = [idPanel];
     this.Data[idPanel] = {
       originData: [],
       data: [],
@@ -48,7 +54,7 @@ const PanelForm = {
         id: 'panel-title',
         model: 'title',
         inputType: 'text',
-        rules: [{ type: 'isEmpty' }],
+        rules: [],
         panel: { type: 'title' },
       },
       {
@@ -80,7 +86,7 @@ const PanelForm = {
         //     value: html``,
         //   },
         // },
-        rules: [{ type: 'isEmpty' }],
+        rules: [],
       },
       {
         id: 'panel-mdFileId',
@@ -108,6 +114,8 @@ const PanelForm = {
         titleIcon,
         route: options.route,
         formContainerClass: 'session-in-log-in',
+        share: options.share,
+        showCreatorProfile: options.showCreatorProfile,
         onClick: async function ({ payload }) {
           if (options.route) {
             setQueryPath({ path: options.route, queryPath: payload._id });
@@ -169,9 +177,113 @@ const PanelForm = {
                 html: status,
                 status,
               });
-              if (getQueryParams().cid === data.id) {
-                setQueryPath({ path: options.route, queryPath: '' });
-                if (PanelForm.Data[idPanel].updatePanel) await PanelForm.Data[idPanel].updatePanel();
+
+              // Handle cid query param update (supports comma-separated list)
+              if (status === 'success') {
+                const currentCid = getQueryParams().cid;
+
+                if (currentCid) {
+                  // Parse cid as comma-separated list
+                  const cidList = currentCid
+                    .split(',')
+                    .map((id) => id.trim())
+                    .filter((id) => id);
+
+                  // Remove the deleted panel's id from the list
+                  const updatedCidList = cidList.filter((id) => id !== data.id);
+
+                  if (updatedCidList.length !== cidList.length) {
+                    // Wait for DOM cleanup before updating query
+
+                    if (updatedCidList.length === 0) {
+                      // No cids remain, clear query and reload panels with limit
+                      logger.warn('All cids removed, clearing query');
+                      setQueryPath({ path: options.route, queryPath: '' });
+
+                      if (options.parentIdModal) Modal.Data[options.parentIdModal].query = window.location.search;
+                      if (PanelForm.Data[idPanel].updatePanel) await PanelForm.Data[idPanel].updatePanel();
+                    } else {
+                      // Update query params with remaining cids only (without ?cid= prefix)
+                      const cidValue = updatedCidList.join(',');
+                      setQueryPath({ path: options.route, queryPath: cidValue });
+                      const actualQuery = window.location.search;
+                      if (options.parentIdModal) Modal.Data[options.parentIdModal].query = actualQuery;
+                    }
+                  }
+
+                  // Return early to skip smart deletion logic when cid is present
+                  return { status };
+                }
+              }
+
+              // Smart deletion: remove from arrays and intelligently load more if needed
+              if (status === 'success') {
+                const panelData = PanelForm.Data[idPanel];
+
+                // Remove the deleted item from all data arrays
+                const indexInOrigin = panelData.originData.findIndex((d) => d._id === data._id);
+                const indexInData = panelData.data.findIndex((d) => d._id === data._id);
+                const indexInFiles = panelData.filesData.findIndex((d) => d._id === data._id);
+
+                if (indexInOrigin > -1) panelData.originData.splice(indexInOrigin, 1);
+                if (indexInData > -1) panelData.data.splice(indexInData, 1);
+                if (indexInFiles > -1) panelData.filesData.splice(indexInFiles, 1);
+
+                // Adjust skip count since we removed an item
+                if (panelData.skip > 0) panelData.skip--;
+
+                // If panels are below limit and there might be more, load them
+                if (panelData.data.length < panelData.limit && panelData.hasMore && !panelData.loading) {
+                  const oldDataCount = panelData.data.length;
+                  const needed = panelData.limit - panelData.data.length; // Calculate exact number needed
+                  const originalLimit = panelData.limit;
+
+                  // Temporarily set limit to only fetch what's needed (1-to-1 replacement)
+                  panelData.limit = needed;
+                  await getPanelData(true); // Load only the needed items
+                  panelData.limit = originalLimit; // Restore original limit
+
+                  const newItems = panelData.data.slice(oldDataCount);
+
+                  if (oldDataCount === 0) {
+                    // List was empty, render all panels
+                    if (panelData.data.length > 0) {
+                      const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+                      htmls(
+                        containerSelector,
+                        html`
+                          <div class="in">${await panelRender({ data: panelData.data })}</div>
+                          <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+                        `,
+                      );
+
+                      // Show spinner if there's potentially more data
+                      const lastOriginItem = panelData.originData[panelData.originData.length - 1];
+                      if (
+                        !panelData.lasIdAvailable ||
+                        !lastOriginItem ||
+                        panelData.lasIdAvailable !== lastOriginItem._id
+                      )
+                        LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
+                    } else {
+                      // No more data available, show empty state
+                      const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+                      htmls(
+                        containerSelector,
+                        html`
+                          <div class="in">${await panelRender({ data: [] })}</div>
+                          <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+                        `,
+                      );
+                    }
+                  } else {
+                    // List had some panels, append new ones
+                    if (newItems.length > 0) {
+                      for (const item of newItems)
+                        append(`.${idPanel}-render`, await Panel.Tokens[idPanel].renderPanel(item));
+                    }
+                  }
+                }
               }
 
               return { status };
@@ -179,30 +291,61 @@ const PanelForm = {
             return { status: 'error' };
           },
           initAdd: async function () {
-            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            setTimeout(() => {
+              s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            }, 50);
           },
           initEdit: async function ({ data }) {
-            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            // Clear file input when entering edit mode
+            const fileFormData = formData.find((f) => f.inputType === 'file');
+            if (fileFormData && s(`.${fileFormData.id}`)) {
+              s(`.${fileFormData.id}`).value = '';
+              s(`.${fileFormData.id}`).inputFiles = null;
+              htmls(
+                `.file-name-render-${fileFormData.id}`,
+                `<div class="abs center"><i style="font-size: 25px" class="fa-solid fa-cloud"></i></div>`,
+              );
+            }
+            setTimeout(() => {
+              s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+            }, 50);
           },
           noResultFound: async function () {
             LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
           },
           add: async function ({ data, editId }) {
+            // Validate that either mdFileId has content OR fileId has files
+            const hasMdContent = data.mdFileId && data.mdFileId.trim().length > 0;
+            const hasFiles = data.fileId && data.fileId.length > 0;
+
+            if (!data.title || (!hasMdContent && !hasFiles)) {
+              NotificationManager.Push({
+                html: Translate.Render('require-title-and-content-or-file'),
+                status: 'error',
+              });
+              return { data: [], status: 'error', message: 'Must provide either content or attach a file' };
+            }
+
             let mdFileId;
             const mdFileName = `${getCapVariableName(data.title)}.md`;
             const location = `${prefixTags.join('/')}`;
             const blob = new Blob([data.mdFileId], { type: 'text/markdown' });
             const md = new File([blob], mdFileName, { type: 'text/markdown' });
-            const tags = uniqueArray(
-              data.tags
-                .replaceAll('/', ',')
-                .replaceAll('-', ',')
-                .replaceAll(' ', ',')
-                .split(',')
-                .map((t) => t.trim())
-                .filter((t) => t)
-                .concat(prefixTags),
-            );
+            // Parse and normalize tags
+            // Note: 'public' tag is automatically extracted by the backend and converted to isPublic field
+            // It will be filtered from the tags array to keep visibility control separate from content tags
+            const tags = data.tags
+              ? uniqueArray(
+                  data.tags
+                    .replaceAll('/', ',')
+                    .replaceAll('-', ',')
+                    .replaceAll(' ', ',')
+                    .split(',')
+                    .map((t) => t.trim())
+                    .filter((t) => t)
+                    .concat(prefixTags),
+                )
+              : prefixTags;
             let originObj, originFileObj, indexOriginObj;
             if (editId) {
               indexOriginObj = PanelForm.Data[idPanel].originData.findIndex((d) => d._id === editId);
@@ -261,6 +404,7 @@ const PanelForm = {
                   }
                 }
               })();
+              // Backend will automatically extract 'public' from tags and set isPublic field
               const body = {
                 location,
                 tags,
@@ -284,6 +428,9 @@ const PanelForm = {
                 _id: documentData._id,
                 id: documentData._id,
                 createdAt: documentData.createdAt,
+                // Use server response data - backend has already processed tags and isPublic
+                isPublic: documentData.isPublic || false,
+                tags: (documentData.tags || []).filter((t) => !prefixTags.includes(t)),
               };
 
               if (documentStatus === 'error') status = 'error';
@@ -341,10 +488,16 @@ const PanelForm = {
       const panelData = PanelForm.Data[idPanel];
       logger.warn('getPanelData called, isLoadMore:', isLoadMore);
       try {
-        if (panelData.loading || !panelData.hasMore) {
-          logger.warn('getPanelData early return - loading:', panelData.loading, 'hasMore:', panelData.hasMore);
-          return;
+        const cidQuery = getQueryParams().cid;
+
+        // When cid query exists, bypass pagination and loading checks
+        if (!cidQuery) {
+          if (panelData.loading || !panelData.hasMore) {
+            logger.warn('getPanelData early return - loading:', panelData.loading, 'hasMore:', panelData.hasMore);
+            return;
+          }
         }
+
         panelData.loading = true;
 
         if (!isLoadMore) {
@@ -353,13 +506,20 @@ const PanelForm = {
           panelData.hasMore = true;
         }
 
+        // When cid query exists, don't apply skip/limit pagination
+        const params = {
+          tags: prefixTags.join(','),
+          ...(cidQuery && { cid: cidQuery }),
+        };
+
+        // Only apply pagination when there's no cid query
+        if (!cidQuery) {
+          params.skip = panelData.skip;
+          params.limit = panelData.limit;
+        }
+
         const result = await DocumentService.get({
-          params: {
-            tags: prefixTags.join(','),
-            ...(getQueryParams().cid && { cid: getQueryParams().cid }),
-            skip: panelData.skip,
-            limit: panelData.limit,
-          },
+          params,
           id: 'public/',
         });
 
@@ -411,12 +571,24 @@ const PanelForm = {
                 id: documentObject._id,
                 title: documentObject.title,
                 createdAt: documentObject.createdAt,
+                // Backend filters 'public' tag automatically - it's converted to isPublic field
                 tags: documentObject.tags.filter((t) => !prefixTags.includes(t)),
                 mdFileId: marked.parse(mdFileId),
                 userId: documentObject.userId._id,
+                userInfo:
+                  documentObject.userId && typeof documentObject.userId === 'object'
+                    ? {
+                        username: documentObject.userId.username,
+                        email: documentObject.userId.email,
+                        _id: documentObject.userId._id,
+                        profileImageId: documentObject.userId.profileImageId,
+                      }
+                    : null,
                 fileId,
                 tools: Elements.Data.user.main.model.user._id === documentObject.userId._id,
                 _id: documentObject._id,
+                totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
+                isPublic: documentObject.isPublic || false,
               });
             } catch (fileError) {
               logger.error('Error fetching files for document:', documentObject._id, fileError);
@@ -425,9 +597,17 @@ const PanelForm = {
             }
           }
 
-          panelData.skip += result.data.data.length;
-          panelData.hasMore = result.data.data.length === panelData.limit;
-          if (result.data.data.length === 0 || result.data.data.pop()._id === panelData.lasIdAvailable) {
+          // Only update pagination when not using cid query
+          if (!cidQuery) {
+            panelData.skip += result.data.data.length;
+            panelData.hasMore = result.data.data.length === panelData.limit;
+          } else {
+            // When cid query is used, disable infinite scroll
+            panelData.hasMore = false;
+          }
+
+          const lastItem = result.data.data[result.data.data.length - 1];
+          if (result.data.data.length === 0 || (lastItem && lastItem._id === panelData.lasIdAvailable)) {
             LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
             panelData.hasMore = false;
           }
@@ -538,7 +718,8 @@ const PanelForm = {
             loading: false,
           };
 
-          if (cid) this.Data[idPanel].skip = 0;
+          // Always reset skip to 0 when reloading (whether cid exists or not)
+          this.Data[idPanel].skip = 0;
 
           const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
           htmls(containerSelector, await renderSrrPanelData());
@@ -553,22 +734,26 @@ const PanelForm = {
             `,
           );
 
+          const lastOriginItem = this.Data[idPanel].originData[this.Data[idPanel].originData.length - 1];
           if (
             !this.Data[idPanel].lasIdAvailable ||
-            this.Data[idPanel].lasIdAvailable !==
-              this.Data[idPanel].originData[this.Data[idPanel].originData.length - 1]._id
+            !lastOriginItem ||
+            this.Data[idPanel].lasIdAvailable !== lastOriginItem._id
           )
             LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
 
           const scrollContainerSelector = `.modal-${options.route}`;
 
+          // Always remove old scroll event before setting new one
+          if (this.Data[idPanel].removeScrollEvent) {
+            this.Data[idPanel].removeScrollEvent();
+          }
+
           if (cid) {
             LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
             return;
           }
-          if (this.Data[idPanel].removeScrollEvent) {
-            this.Data[idPanel].removeScrollEvent();
-          }
+
           const { removeEvent } = Scroll.setEvent(scrollContainerSelector, async (payload) => {
             const panelData = PanelForm.Data[idPanel];
             if (!panelData) return;