feat: Screenshot editor overhaul - layers panel, keyboard shortcuts, and sharper rendering

.github/workflows/ci.yml

@@ -103,9 +103,8 @@ jobs:
         settings:
           - target: aarch64-apple-darwin
             runner: macos-latest
-          # Windows can't take the disk usage lol
-          # - target: x86_64-pc-windows-msvc
-          #   runner: windows-latest
+          - target: x86_64-pc-windows-msvc
+            runner: windows-latest
     runs-on: ${{ matrix.settings.runner }}
     permissions:
       contents: read

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-	"recommendations": ["tauri-apps.tauri-vscode", "rust-lang.rust-analyzer"]
+	"recommendations": ["biomejs.biome", "rust-lang.rust-analyzer"]
 }

apps/desktop/src-tauri/src/audio_meter.rs

@@ -140,6 +140,6 @@ fn samples_to_f64(samples: &MicrophoneSamples) -> impl Iterator<Item = f64> + us
             SampleFormat::F64 => f64::from_ne_bytes([
                 data[0], data[1], data[2], data[3], data[4], data[5], data[6], data[7],
             ]),
-            _ => todo!(),
+            _ => 0.0,
         })
 }

apps/desktop/src-tauri/src/camera.rs

@@ -43,9 +43,9 @@ pub enum CameraPreviewShape {
 
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize, Type)]
 pub struct CameraPreviewState {
-    size: f32,
-    shape: CameraPreviewShape,
-    mirrored: bool,
+    pub size: f32,
+    pub shape: CameraPreviewShape,
+    pub mirrored: bool,
 }
 
 impl Default for CameraPreviewState {

apps/desktop/src-tauri/src/recording.rs

@@ -3,10 +3,10 @@ use cap_fail::fail;
 use cap_project::CursorMoveEvent;
 use cap_project::cursor::SHORT_CURSOR_SHAPE_DEBOUNCE_MS;
 use cap_project::{
-    CursorClickEvent, InstantRecordingMeta, MultipleSegments, Platform, ProjectConfiguration,
-    RecordingMeta, RecordingMetaInner, SharingMeta, StudioRecordingMeta, StudioRecordingStatus,
-    TimelineConfiguration, TimelineSegment, UploadMeta, ZoomMode, ZoomSegment,
-    cursor::CursorEvents,
+    CameraShape, CursorClickEvent, InstantRecordingMeta, MultipleSegments, Platform,
+    ProjectConfiguration, RecordingMeta, RecordingMetaInner, SharingMeta, StudioRecordingMeta,
+    StudioRecordingStatus, TimelineConfiguration, TimelineSegment, UploadMeta, ZoomMode,
+    ZoomSegment, cursor::CursorEvents,
 };
 use cap_recording::feeds::camera::CameraFeedLock;
 #[cfg(target_os = "macos")]
@@ -42,6 +42,7 @@ use tauri_plugin_dialog::{DialogExt, MessageDialogBuilder};
 use tauri_specta::Event;
 use tracing::*;
 
+use crate::camera::{CameraPreviewManager, CameraPreviewShape};
 use crate::web_api::AuthedApiError;
 use crate::{
     App, CurrentRecordingChanged, MutableState, NewStudioRecordingAdded, RecordingState,
@@ -1680,6 +1681,24 @@ fn project_config_from_recording(
 
     let mut config = default_config.unwrap_or_default();
 
+    let camera_preview_manager = CameraPreviewManager::new(app);
+    if let Ok(camera_preview_state) = camera_preview_manager.get_state() {
+        match camera_preview_state.shape {
+            CameraPreviewShape::Round => {
+                config.camera.shape = CameraShape::Square;
+                config.camera.rounding = 100.0;
+            }
+            CameraPreviewShape::Square => {
+                config.camera.shape = CameraShape::Square;
+                config.camera.rounding = 25.0;
+            }
+            CameraPreviewShape::Full => {
+                config.camera.shape = CameraShape::Source;
+                config.camera.rounding = 25.0;
+            }
+        }
+    }
+
     let timeline_segments = recordings
         .segments
         .iter()

apps/desktop/src-tauri/src/screenshot_editor.rs

@@ -30,6 +30,7 @@ pub struct ScreenshotEditorInstance {
     pub ws_shutdown_token: CancellationToken,
     pub config_tx: watch::Sender<ProjectConfiguration>,
     pub path: PathBuf,
+    pub pretty_name: String,
 }
 
 impl ScreenshotEditorInstance {
@@ -264,6 +265,7 @@ impl ScreenshotEditorInstances {
                     ws_shutdown_token,
                     config_tx,
                     path: path.clone(),
+                    pretty_name: recording_meta.pretty_name.clone(),
                 });
 
                 // Spawn render loop
@@ -375,6 +377,7 @@ pub struct SerializedScreenshotEditorInstance {
     pub frames_socket_url: String,
     pub path: PathBuf,
     pub config: Option<ProjectConfiguration>,
+    pub pretty_name: String,
 }
 
 #[tauri::command]
@@ -404,6 +407,7 @@ pub async fn create_screenshot_editor_instance(
         frames_socket_url: format!("ws://localhost:{}", instance.ws_port),
         path: instance.path.clone(),
         config: Some(config),
+        pretty_name: instance.pretty_name.clone(),
     })
 }
 

apps/desktop/src-tauri/src/windows.rs

@@ -705,7 +705,7 @@ impl ShowCapWindow {
                     .maximized(false)
                     .resizable(false)
                     .fullscreen(false)
-                    .shadow(!cfg!(windows))
+                    .shadow(false)
                     .always_on_top(true)
                     .transparent(true)
                     .visible_on_all_workspaces(true)
@@ -727,6 +727,8 @@ impl ShowCapWindow {
                     crate::platform::set_window_level(window.as_ref().window(), 1000);
                 }
 
+                fake_window::spawn_fake_window_listener(app.clone(), window.clone());
+
                 window
             }
             Self::RecordingsOverlay => {

apps/desktop/src/routes/(window-chrome)/new-main/TargetMenuGrid.tsx

@@ -90,7 +90,7 @@ function ViewAllButton(props: { onClick: () => void; label: string }) {
 		<button
 			type="button"
 			onClick={props.onClick}
-			class="col-span-2 flex items-center justify-center gap-2 py-2.5 mt-1 text-xs font-medium text-gray-11 bg-gray-3 rounded-lg hover:bg-gray-4 hover:text-gray-12 transition-colors"
+			class="col-span-2 flex items-center justify-center gap-2 py-2.5 mt-1 mb-3 text-xs font-medium text-gray-11 bg-gray-3 rounded-lg hover:bg-gray-4 hover:text-gray-12 transition-colors"
 		>
 			<IconLucideExternalLink class="size-3" />
 			{props.label}

apps/desktop/src/routes/editor/Player.tsx

@@ -530,7 +530,6 @@ function PreviewCanvas() {
 										height: `${size().height}px`,
 										...gridStyle,
 									}}
-									class="rounded"
 									ref={canvasRef}
 									id="canvas"
 									width={frameWidth()}

apps/desktop/src/routes/in-progress-recording.tsx

@@ -555,7 +555,7 @@ export default function () {
 									disabled={
 										stopRecording.isPending || isInitializing() || isCountdown()
 									}
-									class="flex flex-row items-center gap-[0.25rem] rounded-lg py-[0.25rem] px-[0.5rem] text-red-300 transition-opacity disabled:opacity-60"
+									class="flex flex-row items-center gap-[0.25rem] rounded-lg py-[0.25rem] px-[0.5rem] text-red-300 transition-colors duration-100 hover:bg-red-500/[0.08] active:bg-red-500/[0.12] disabled:opacity-60 disabled:hover:bg-transparent"
 									type="button"
 									onClick={() => stopRecording.mutate()}
 									title="Stop recording"
@@ -728,7 +728,7 @@ export default function () {
 							</div>
 						</div>
 						<div
-							class="non-styled-move flex cursor-move items-center justify-center border-l border-gray-5 p-[0.25rem] hover:cursor-move"
+							class="non-styled-move flex cursor-move items-center justify-center border-l border-gray-5 p-[0.25rem] hover:cursor-move transition-colors duration-100 hover:bg-gray-12/[0.04] dark:hover:bg-white/[0.06]"
 							data-tauri-drag-region
 						>
 							<IconCapMoreVertical class="pointer-events-none text-gray-10" />
@@ -745,10 +745,12 @@ function ActionButton(props: ComponentProps<"button">) {
 		<button
 			{...props}
 			class={cx(
-				"p-[0.25rem] rounded-lg transition-all",
-				"text-gray-11",
+				"p-[0.25rem] rounded-lg transition-colors duration-100",
+				"text-gray-11 hover:text-gray-12",
+				"hover:bg-gray-12/[0.06] dark:hover:bg-white/[0.08]",
+				"active:bg-gray-12/[0.1] dark:active:bg-white/[0.12]",
 				"h-8 w-8 flex items-center justify-center",
-				"disabled:opacity-50 disabled:cursor-not-allowed",
+				"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
 				props.class,
 			)}
 			type="button"