feat: add editor multiline mode and many edge case fixes

.changeset/fixed_an_android_issue_where_recording_a_voice_message_with_headphones_could_leave_audio_stuck_in_low_quality_mode_until_the_app_was_restarted.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+# Fixed an Android issue where recording a voice message with headphones could leave audio stuck in low-quality mode until the app was restarted.

.changeset/fixed_voice_message_scrubbingseeking_on_firefox_by_switching_the_recorder_from_webm_no_seek_index_to_oggopus.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+# Fixed voice message scrubbing/seeking on Firefox by switching the recorder from WebM (no seek index) to Ogg/Opus.

.changeset/improve_multiline_composer_and_voice_recording.md

@@ -0,0 +1,13 @@
+---
+default: minor
+---
+
+# Improve multiline composer and voice recording
+
+- Add a multiline composer layout for longer drafts.
+- Keep the voice recorder between composer actions in multiline mode.
+- Show the recorder inside the composer on mobile while recording.
+- Prevent the composer from expanding when recording starts.
+- Make the recorder footer and waveform fit better across screen sizes.
+- Let interrupted mobile recording gestures still stop correctly.
+- Stabilize wrap detection around edge cases like narrow widths and trailing spaces.

knope.toml

@@ -64,6 +64,6 @@ repo = "Sable"
 [release_notes]
 # The <!-- commit:$commit_hash --> marker is used by prepare-release.yml
 change_templates = [
-    # "### $summary <!-- commit:$commit_hash -->\n\n$details",
+    "### $summary <!-- commit:$commit_hash -->\n\n$details",
     "* $summary <!-- commit:$commit_hash -->",
 ]

package.json

@@ -22,6 +22,7 @@
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
     "knip": "knip",
+    "tunnel": "cloudflared tunnel --url http://localhost:8080",
     "knope": "knope",
     "document-change": "knope document-change",
     "postinstall": "node scripts/install-knope.js"
@@ -34,9 +35,9 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@fontsource-variable/nunito": "5.2.7",
-    "@sentry/react": "^10.43.0",
     "@fontsource/space-mono": "5.2.9",
     "@phosphor-icons/react": "^2.1.10",
+    "@sentry/react": "^10.43.0",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-query-devtools": "^5.91.3",
     "@tanstack/react-virtual": "^3.13.19",
@@ -96,12 +97,12 @@
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.26.0",
-    "@sableclient/sable-call-embedded": "v1.1.4",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@eslint/compat": "2.0.2",
     "@eslint/js": "9.39.3",
     "@rollup/plugin-inject": "^5.0.5",
     "@rollup/plugin-wasm": "^6.2.2",
+    "@sableclient/sable-call-embedded": "v1.1.4",
     "@sentry/vite-plugin": "^5.1.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
@@ -120,6 +121,7 @@
     "@vitest/coverage-v8": "^4.1.0",
     "@vitest/ui": "^4.1.0",
     "buffer": "^6.0.3",
+    "cloudflared": "^0.7.1",
     "eslint": "9.39.3",
     "eslint-config-airbnb-extended": "3.0.1",
     "eslint-config-prettier": "10.1.8",

src/app/components/editor/Editor.css.ts

@@ -13,21 +13,60 @@ export const Editor = style([
   },
 ]);
 
+export const EditorRow = style({
+  display: 'grid',
+  gridTemplateColumns: 'auto 1fr auto',
+  alignItems: 'center',
+});
+
+export const EditorRowMultiline = style({
+  gridTemplateColumns: 'auto 1fr',
+  gridTemplateAreas: `
+    "before textarea"
+    "before after"
+  `,
+  alignItems: 'start',
+});
+
+export const EditorRowMultilineWithResponsiveAfter = style({
+  gridTemplateColumns: 'auto 1fr auto',
+  gridTemplateAreas: `
+    "before textarea textarea"
+    "before responsive-after after"
+  `,
+});
+
 export const EditorOptions = style([
   DefaultReset,
   {
     padding: config.space.S200,
   },
 ]);
 
-export const EditorTextareaScroll = style({});
+export const EditorOptionsMultiline = style({
+  gridArea: 'before',
+  alignSelf: 'end',
+});
+
+export const EditorOptionsAfterMultiline = style({
+  gridArea: 'after',
+  justifySelf: 'end',
+});
+
+export const EditorTextareaScroll = style({
+  minWidth: 0,
+});
+
+export const EditorTextareaScrollMultiline = style({
+  gridArea: 'textarea',
+});
 
 export const EditorTextarea = style([
   DefaultReset,
   {
     flexGrow: 1,
-    height: '100%',
-    padding: `${toRem(13)} ${toRem(1)}`,
+    height: 'auto',
+    padding: `${toRem(13)} 0 0`,
     selectors: {
       [`${EditorTextareaScroll}:first-child &`]: {
         paddingLeft: toRem(13),
@@ -42,6 +81,15 @@ export const EditorTextarea = style([
   },
 ]);
 
+export const EditorResponsiveAfterMultiline = style([
+  EditorOptions,
+  {
+    gridArea: 'responsive-after',
+    minWidth: 0,
+    alignSelf: 'stretch',
+  },
+]);
+
 export const EditorPlaceholderContainer = style([
   DefaultReset,
   {
@@ -57,6 +105,11 @@ export const EditorPlaceholderTextVisual = style([
     display: 'block',
     paddingTop: toRem(13),
     paddingLeft: toRem(1),
+    selectors: {
+      [`${EditorTextareaScroll}:first-child &`]: {
+        paddingLeft: toRem(13),
+      },
+    },
   },
 ]);