Merge pull request #159 from cytechmobile/feat/78-support-general-comments

Author: maninak

CHANGELOG.md

@@ -1,5 +1,58 @@
 # Radicle VS Code Extension Change Log
 
+## _(WIP, yet unreleased version)_
+
+### 🚀 Enhancements
+
+- **patch-detail:** add a new "Comment" button next to the revision selector
+  - clicking the button shows a new patch-comment form in the top of the Activity section
+    - the form consists of
+      - a text-field where the user can type their comment
+      - the target revision under which the comment is to be created
+      - form control buttons
+    - if in single-column mode due to narrow viewport the active tab automatically switches to the Activity section
+    - form state is preserved (as described in [v0.5.0#enhancements](#v050-july-22nd-2024)) individually for each revision
+  - clicking the form's "Comment" button or the keyboard shortcut `Ctrl/Cmd + Enter` submits the form
+    - attempts to create a new comment on radicle under the selected revision
+    - informs the user of the action's result (created and announced / created only locally / failed) and offers follow-up actions as needed
+    - upon the comment's successful creation, it is shown directly in place of the patch-comment form as a new event at the top of the Activity section with the time-ago indicator showing "now" and a short "pulse-outline" animation around it
+- **patch-detail:** in the patch-edit form
+  - show placeholder text when either text-field is empty
+  - change button label "Save" to "Update"
+- **patch-detail:** in both patch-comment and patch-edit forms
+  - add a new button with a coffee icon between "Update"/"Comment" and "Discard"
+    - clicking it "pauses" editing, hiding the form but preserving the current changes for later (a.k.a. aforementioned form state preservation)
+    - also triggerable with keyboard shortcut `Escape`
+    - also acts as a safe "spacer" between the two aforementioned buttons protecting against misclicks that would otherwise come with a big penalty
+  - add a new button to toggle a markdown preview of the current changes before submitting
+    - also triggerable with keyboard shortcut `Alt + P`
+    - after toggling to markdown preview and back to editing the undo/redo history (Ctrl/Cmd + Z and Ctrl/Cmd + Shift + Z) is still available. Even if the form contains multiple controls (e.g. two text-areas) then the undo/redo history spanning _all of them in the order they were changed_ is still retained
+  - polish text-field sizing dynamics:
+    - use 1 line of text as starting height when empty for the patch title field and 4 lines for the patch description
+    - respectively limit the max vertical lines for the former and the latter
+    - fields offer 65 characters of horizontal space (when there's enough viewport width, whatever fits otherwise), which also happens to be the Markdown renderer's wrapping limit (with exceptions). This can double as a subtle hint that we may be typing too much. Longer lines of text widen the fields to fit the content as long as there's enough viewport space, at which point they'll wrap into a new line, line-breaking at at appropriate point.
+    - previously typing or focusing any of the form's fields would always scroll the viewport to align the form at its bottom. Now this happens only if the form doesn't already fit on the viewport, leaving the scroll position wherever it was already set by the user and resulting in a less constricting experience
+    - although fields remain manually user-resizeable (pursposefully only across height) by mouse-dragging the bottom-right handle of each field _and_ dynamically resizeable as content grows (with contextual restrictions) and shrinks, if the user indeed defines a preferred height using the former method, then it is respected by the latter
+  - the aforementioned coupled with the pre-existing feature of optimally auto-aligning the form as it resizes should seamlessly provide a smooth authoring experience
+  - adjust the hover text of all form buttons to advertise their respective keyboard shortcut (if any)
+  - **patch-detail:** preselect the merged revision, if any, in the revision selector instead of always the latest
+  - **patch-detail:** don't mention the revision and its identifier in events in the Activity section if there's only one revision
+  - **patch-detail:** align the UX for every revision identifier shown in the patch-major-events section (top of the view) with the behaviour of those in the Activity section, i.e. showing the revision description on hover, and when clicked scrolling to the Revision section wherin more info about it is shown
+  - **patch-detail:** don't mention the related commit in the patch-major-events section (~~"Last updated by W with revision X at commit Y Z time ago"~~). This information is still available in the Revision section.
+  - **patch-detail:** keep the labels of the main buttons (top-right of the view) as a single line of text, even if the viewport is narrow enough to compress them
+  - **patch-detail:** add themed styling to `<summary>` elements when tabbed into
+
+### 🩹 Fixes
+
+- **patch-detail:** don't disappear the Activity and Revision sections sometimes, e.g. when a new revision is detected
+- **patch-detail:** make "Refresh" button work again, fetching latest patch data
+- **patch-detail:** don't show big gap between patch title and next section if the patch description is empty
+
+### 🏡 Chores
+
+- **ts:** enforce stricter type-checking for webview apps
+- **deps:** upgrade webview app dependencies, including latest Vue v3.5
+
 ## **v0.5.1** (September 10th, 2024)
 
 ### 🩹 Fixes
@@ -45,7 +98,7 @@
     - responds to viewport size changes applying sizing limits on top of the aforementioned content-relative resizing
     - is set with (generous) max char count limits to limit abuse
     - pressing the Enter key enters a new line but pressing Ctrl/Cmd+Enter behaves as if the "Save" button was clicked
-  - the value of each text-area is auto-saved in memory as a draft while typing, as well as the "is editing" status of the form, and those will be attempted to be restored:
+  - the value of each text-area is preserved as an in-extension draft while typing, as well as the "is editing" status of the form, and those will be attempted to be restored:
     - if the editor panel is hidden (another panel is selected placing it in the background) and then re-viewed (same session)
     - if VS Code is terminated or crashes (across sessions)
     - if the form submission fails

src/helpers/command.ts

@@ -105,9 +105,9 @@ export function registerAllCommands(): void {
   registerVsCodeCmd('radicle.refreshAllPatches', () => {
     usePatchStore().resetAllPatches()
   })
-  registerVsCodeCmd('radicle.refreshOnePatch', (patch: Patch | undefined) => {
-    assert(patch)
-    usePatchStore().refetchPatch(patch?.id)
+  registerVsCodeCmd('radicle.refreshOnePatch', (patchId: Patch['id'] | undefined) => {
+    assert(patchId)
+    usePatchStore().refetchPatch(patchId)
   })
   registerVsCodeCmd('radicle.checkoutPatch', checkOutPatch)
   registerVsCodeCmd('radicle.checkoutDefaultBranch', checkOutDefaultBranch)

src/helpers/webview.ts

@@ -313,6 +313,14 @@ function handleMessageFromWebviewPatchDetail(
         }
       }
       break
+    case 'createPatchComment':
+      mutatePatch(message.payload.patch.id, message.payload.patch.title, (timeout?: number) =>
+        execPatchMutation(
+          ['comment', message.payload.revisionId, '--message', message.payload.comment],
+          timeout,
+        ),
+      )
+      break
     default:
       assertUnreachable(message)
   }

src/utils/webview-messaging.ts

@@ -4,6 +4,7 @@ import type {
   Patch,
   PatchDetailWebviewInjectedState,
   PatchStatus,
+  Revision,
 } from '../types'
 import { getVscodeRef } from '../webviews/src/utils/getVscodeRef'
 
@@ -28,6 +29,10 @@ type MessageToExtension =
       { patchId: Patch['id']; newTitle: string; newDescr: string; oldTitle: string }
     >
   | Message<'updatePatchStatus', { patch: Patch; newStatus: Exclude<PatchStatus, 'merged'> }>
+  | Message<
+      'createPatchComment',
+      { patch: Patch; revisionId: Revision['id']; comment: string }
+    >
 
 /**
  * Sends a message, usually from the host window, to the provided webview.

src/webviews/package.json

@@ -17,35 +17,35 @@
   },
   "dependencies": {
     "@vscode/webview-ui-toolkit": "^1.4.0",
-    "@vueuse/core": "^10.9.0",
-    "highlight.js": "^11.9.0",
-    "javascript-time-ago": "^2.5.9",
-    "pinia": "^2.1.7",
-    "vue": "^3.4.20",
+    "@vueuse/core": "^10.11.1",
+    "highlight.js": "^11.10.0",
+    "javascript-time-ago": "^2.5.11",
+    "pinia": "^2.2.6",
+    "vue": "^3.5.12",
     "vue3-markdown-it": "^1.0.10"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "^1.7.2",
-    "@tsconfig/node18": "^18.2.2",
+    "@rushstack/eslint-patch": "^1.10.4",
+    "@tsconfig/node18": "^18.2.4",
     "@types/javascript-time-ago": "^2.0.8",
-    "@types/jsdom": "^21.1.6",
-    "@types/node": "^20.11.21",
-    "@vitejs/plugin-vue": "^5.0.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.17.6",
+    "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.4.4",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.4.0",
-    "autoprefixer": "^10.4.17",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.22.0",
-    "jsdom": "^24.0.0",
-    "npm-run-all2": "^6.1.1",
-    "postcss": "^8.4.35",
-    "prettier": "^3.2.5",
-    "tailwindcss": "^3.4.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.1",
+    "eslint-plugin-vue": "^9.30.0",
+    "jsdom": "^24.1.3",
+    "npm-run-all2": "^6.2.6",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.2.2",
-    "vite": "^5.2.10",
-    "vitest": "^1.3.1",
+    "vite": "^5.4.10",
+    "vitest": "^1.6.0",
     "vue-tsc": "^1.8.27"
   }
 }