[pull] main from frappe:main

frontend/components.d.ts

@@ -14,7 +14,6 @@ declare module 'vue' {
     AppSidebar: (typeof import('./src/components/AppSidebar.vue'))['default']
     ArchivedTeams: (typeof import('./src/components/Settings/ArchivedTeams.vue'))['default']
     AssignUser: (typeof import('./src/components/AssignUser.vue'))['default']
-    Bookmarks: (typeof import('./src/components/Settings/Bookmarks.vue'))['default']
     ChevronTriangle: (typeof import('./src/components/icons/ChevronTriangle.vue'))['default']
     ColorPicker: (typeof import('./src/components/ColorPicker.vue'))['default']
     CommandPalette: (typeof import('./src/components/CommandPalette/CommandPalette.vue'))['default']

frontend/src/components/Activity.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex items-center text-base">
+  <div class="relative flex items-center text-p-base">
     <div
       class="mr-3 grid h-7 w-7 shrink-0 place-items-center rounded-full bg-surface-gray-2 text-ink-gray-9"
     >
@@ -12,7 +12,10 @@
     </div>
     <p>
       <UserInfo :email="activity.user" v-slot="{ user }">
-        <UserProfileLink class="font-medium text-ink-gray-8 hover:text-ink-gray-5" :user="user.name">
+        <UserProfileLink
+          class="font-medium text-ink-gray-8 hover:text-ink-gray-5"
+          :user="user.name"
+        >
           {{ user.full_name }}
         </UserProfileLink>
       </UserInfo>

frontend/src/components/Comment.vue

@@ -8,7 +8,7 @@
   >
     <UserInfo :email="comment.owner" v-slot="{ user }">
       <div
-        class="flex items-center text-base text-ink-gray-9 sticky top-0 pt-16 pb-4 bg-surface-white z-[1]"
+        class="flex items-center text-base text-ink-gray-9 sticky top-0 pt-14 pb-2 bg-surface-white z-[1]"
       >
         <UserProfileLink class="mr-3" :user="user.name">
           <UserAvatar size="lg" :user="user.name" />

frontend/src/components/CommentsArea.vue

@@ -19,7 +19,7 @@
         </div>
       </div>
     </div>
-    <div class="px-1" :style="{ paddingBottom: `${addCommentHeight + 80}px` }">
+    <div :style="{ paddingBottom: `${addCommentHeight + 80}px` }">
       <template v-for="item in timelineItems" :key="item.doctype + item.name">
         <div
           v-if="newMessagesFrom && newMessagesFrom == item.name"
@@ -62,7 +62,7 @@
 
     <div
       v-if="!readOnlyMode && !disableNewComment"
-      class="fixed bottom-12 mb-px mt-2 w-full max-w-3xl bg-surface-white py-4 pr-12 sm:bottom-0 standalone:bottom-16"
+      class="fixed z-[2] bottom-12 left-0 sm:left-auto px-4 sm:px-0 mb-px mt-2 w-full sm:max-w-3xl bg-surface-white py-3 sm:bottom-[-1px] standalone:bottom-16"
       ref="addComment"
     >
       <button
@@ -80,7 +80,7 @@
         @keydown.meta.enter.capture.stop="submitComment"
       >
         <div class="mb-4 flex items-center">
-          <UserAvatar :user="$user().name" size="sm" />
+          <UserAvatar :user="$user().name" size="md" />
           <span class="ml-2 text-base font-medium text-ink-gray-9">
             {{ $user().full_name }}
           </span>
@@ -105,7 +105,7 @@
             onClick: discardComment,
           }"
           :editable="showCommentBox"
-          placeholder="Add a comment"
+          placeholder="Add a comment..."
         />
         <PollEditor
           v-show="newCommentType == 'Poll'"

frontend/src/components/DiscussionView.vue

@@ -2,9 +2,9 @@
   <div class="relative flex h-full flex-col" v-if="postId && discussion">
     <div class="mx-auto w-full max-w-3xl">
       <div class="pb-16">
-        <div class="pb-4 pt-16 flex w-full items-center sticky top-0 z-[1] bg-surface-white">
+        <div class="pb-2 pt-14 flex w-full items-center sticky top-0 z-[1] bg-surface-white">
           <UserProfileLink class="mr-3" :user="discussion.owner">
-            <UserAvatar :user="discussion.owner" />
+            <UserAvatar size="lg" :user="discussion.owner" />
           </UserProfileLink>
           <div class="flex flex-col md:block">
             <UserProfileLink
@@ -36,39 +36,9 @@
             />
           </div>
         </div>
-        <div class="pb-4">
+        <div :class="{ 'pb-4 mt-1': !editingPost }">
           <div class="flex items-start justify-between space-x-1">
-            <div v-if="editingTitle" class="w-full">
-              <div class="mb-2">
-                <input
-                  v-if="editingTitle"
-                  type="text"
-                  class="w-full rounded border-0 bg-surface-gray-2 text-ink-gray-9 px-2 py-1 text-xl font-semibold focus:ring-0"
-                  ref="title"
-                  v-model="discussion.title"
-                  placeholder="Title"
-                  @keydown.enter="
-                    () => {
-                      $resources.discussion.setValue
-                        .submit({ title: discussion.title })
-                        .then(() => this.updateUrlSlug())
-                      editingTitle = false
-                    }
-                  "
-                  @keydown.esc="
-                    () => {
-                      $resources.discussion.reload()
-                      editingTitle = false
-                    }
-                  "
-                  v-focus
-                />
-                <p class="mt-1 text-sm text-ink-gray-5">
-                  Edit title and press enter. Press escape to cancel.
-                </p>
-              </div>
-            </div>
-            <h1 v-else class="flex items-center text-2xl font-semibold">
+            <h1 v-if="!editingPost" class="flex items-center text-2xl font-semibold">
               <Tooltip v-if="discussion.closed_at" text="This discussion is closed">
                 <LucideLock class="mr-2 h-4 w-4 text-ink-gray-7" :stroke-width="2" />
               </Tooltip>
@@ -77,7 +47,7 @@
               </span>
             </h1>
           </div>
-          <div class="mt-2 flex items-center text-base" v-show="!editingTitle">
+          <div class="mt-2 flex items-center text-base" v-show="!editingPost">
             <DiscussionBreadcrumbs :discussion="discussion" />
             <span class="px-1.5 text-ink-gray-8">&middot;</span>
             <span class="text-ink-gray-5">
@@ -91,29 +61,43 @@
         </div>
         <div
           :class="{
-            'rounded-lg border p-4 focus-within:border-outline-gray-3': editingContent,
+            'rounded-lg border p-4 focus-within:border-outline-gray-3': editingPost,
           }"
         >
+          <div v-if="editingPost" class="w-full">
+            <div class="mb-2">
+              <input
+                v-if="editingPost"
+                type="text"
+                class="w-full rounded border-0 text-ink-gray-9 px-0 py-0.5 text-2xl font-semibold focus:ring-0"
+                ref="title"
+                v-model="discussion.title"
+                placeholder="Title"
+                v-focus
+              />
+            </div>
+          </div>
           <CommentEditor
             :value="discussion.content"
             @change="discussion.content = $event"
             :submitButtonProps="{
               variant: 'solid',
               onClick: () => {
                 $resources.discussion.setValue.submit({
+                  title: discussion.title,
                   content: discussion.content,
                 })
-                editingContent = false
+                editingPost = false
               },
               loading: $resources.discussion.setValue.loading,
             }"
             :discardButtonProps="{
               onClick: () => {
-                editingContent = false
+                editingPost = false
                 $resources.discussion.reload()
               },
             }"
-            :editable="editingContent"
+            :editable="editingPost"
           />
         </div>
         <div class="mt-3">
@@ -228,6 +212,8 @@ export default {
           reopenDiscussion: 'reopen_discussion',
           pinDiscussion: 'pin_discussion',
           unpinDiscussion: 'unpin_discussion',
+          addBookmark: 'add_bookmark',
+          removeBookmark: 'remove_bookmark',
           moveToProject: {
             method: 'move_to_project',
             validate(params) {
@@ -268,43 +254,19 @@ export default {
         },
       }
     },
-    bookmark() {
-      return {
-        type: 'resource',
-        url: 'gameplan.api.check_bookmark',
-        params: {
-          discussionId: this.postId,
-        },
-        auto: true,
-        onSuccess(data) {
-          this.bookmarkStatus = data
-        },
-      }
-    },
   },
   data() {
     return {
-      editingContent: false,
-      editingTitle: false,
+      editingPost: false,
       discussionMoveDialog: {
         show: false,
         project: null,
       },
       showRevisionsDialog: false,
       showNavbar: false,
-      bookmarkStatus: false,
     }
   },
   methods: {
-    bookMarkDiscussion() {
-      let data = {
-        discussion: this.discussion.name,
-        remove_bookmark: this.bookmarkStatus,
-      }
-      call('gameplan.api.bookmark_discussion', { data }).then((res) => {
-        this.$resources.bookmark.submit()
-      })
-    },
     copyLink() {
       let location = window.location
       let url = `${location.origin}${location.pathname}`
@@ -356,17 +318,10 @@ export default {
     actions() {
       return [
         {
-          label: 'Edit Title',
-          icon: 'edit',
-          onClick: () => {
-            this.editingTitle = true
-          },
-        },
-        {
-          label: 'Edit Post',
+          label: 'Edit',
           icon: 'edit',
           onClick: () => {
-            this.editingContent = true
+            this.editingPost = true
           },
         },
         {
@@ -461,9 +416,20 @@ export default {
           },
         },
         {
-          label: `${this.bookmarkStatus ? 'Remove Bookmark' : 'Add Bookmark'}`,
+          label: 'Bookmark',
           icon: 'bookmark',
-          onClick: this.bookMarkDiscussion,
+          onClick: () => {
+            this.$resources.discussion.addBookmark.submit()
+          },
+          condition: () => !this.discussion.is_bookmarked,
+        },
+        {
+          label: 'Remove Bookmark',
+          icon: 'bookmark',
+          onClick: () => {
+            this.$resources.discussion.removeBookmark.submit()
+          },
+          condition: () => this.discussion.is_bookmarked,
         },
         {
           label: 'Move to...',
@@ -472,6 +438,29 @@ export default {
             this.discussionMoveDialog.show = true
           },
         },
+        {
+          label: 'Delete',
+          icon: 'trash',
+          onClick: () => {
+            $dialog({
+              title: 'Delete',
+              message: 'Are you sure you want to delete this post? This is irreversible!',
+              actions: [
+                {
+                  label: 'Delete',
+                  variant: 'solid',
+                  theme: 'red',
+                  onClick: ({ close }) => {
+                    return this.$resources.discussion.delete.submit().then(() => {
+                      this.$router.replace({ name: 'Project' })
+                      close()
+                    })
+                  },
+                },
+              ],
+            })
+          },
+        },
       ]
     },
   },

frontend/src/pages/Discussions.vue

@@ -258,13 +258,7 @@ export default {
   },
   computed: {
     filters() {
-      const filters = {
-        ...(this.feedType && { feed_type: this.feedType }),
-        ...(activeProjects.value.length && {
-          project: activeProjects.value.map((discussion) => Number(discussion.name)),
-        }),
-      }
-      return filters
+      return this.feedType ? { feed_type: this.feedType } : null
     },
     projectOptions() {
       return activeTeams.value.map((team) => ({

frontend/src/pages/PersonProfileBookmarks.vue

@@ -1,12 +1,9 @@
 <template>
   <div class="pb-16">
     <DiscussionList
-      v-if="bookmarks.length"
       ref="discussionList"
       routeName="ProjectDiscussion"
-      :listOptions="{ filters }"
-      :key="JSON.stringify(filters)"
-      @click="handleDiscussionClick"
+      :listOptions="{ filters: { user_bookmarks: true } }"
     />
   </div>
 </template>
@@ -15,30 +12,6 @@ import DiscussionList from '@/components/DiscussionList.vue'
 
 export default {
   name: 'PersonProfileBookmarks',
-  data() {
-    return {
-      bookmarks: [],
-    }
-  },
-  resources: {
-    bookmark() {
-      return {
-        type: 'resource',
-        url: 'gameplan.api.get_bookmarks',
-        auto: true,
-        onSuccess(data) {
-          if (data) {
-            this.bookmarks = data.map((record) => Number(record.discussion))
-          }
-        },
-      }
-    },
-  },
-  computed: {
-    filters() {
-      return this.bookmarks && this.bookmarks.length ? { name: this.bookmarks } : {}
-    },
-  },
   methods: {
     handleDiscussionClick() {
       this.$emit('close-dialog')