From 6e68dc9491c753a6ebfcc386374655621143190f Mon Sep 17 00:00:00 2001
From: Domica <Domica@users.noreply.github.com>
Date: Tue, 22 Sep 2026 07:41:41 +0000
Subject: [PATCH] feat: a project format picker with the shapes a phone wants
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The launch screen offered four 16:9 tiers and one vertical, which is not
the set a social-media project needs. The Format picker now carries:

- 1080p, 720p, 4K — the existing 16:9 tiers
- Vertical 9:16 — TikTok, Reels, Stories, Shorts
- Portrait 4:5 — Instagram feed
- Square 1:1 — the older feed shape
- Cinema 2:1 — the widescreen film crop
- Widescreen 21:9 — ultrawide

The picker is a Select now, not the segmented strip: eight options with
aspect words beside several of them would truncate in a strip. The
label says Format, not Resolution, because it picks a shape as much as
a number.

Closes #109 (the project side; the export side is #<PR export number>).
---
 src/crates/concat/src/studio.rs  |  8 ++++++--
 src/crates/concat/ui/start.slint | 13 ++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/crates/concat/src/studio.rs b/src/crates/concat/src/studio.rs
index a920614e5..8b0a24b0d 100644
--- a/src/crates/concat/src/studio.rs
+++ b/src/crates/concat/src/studio.rs
@@ -160,11 +160,15 @@ pub(crate) const EXPORT_CRF: [u8; 3] = [16, 20, 26];
 pub(crate) const AUDIO_BPS: f32 = 192_000.0;
 
 /// The frame sizes the launch screen offers, and what each label means.
-pub const RESOLUTIONS: [(&str, u32, u32); 4] = [
+pub const RESOLUTIONS: [(&str, u32, u32); 8] = [
     ("1080p", 1920, 1080),
     ("720p", 1280, 720),
     ("4K", 3840, 2160),
-    ("Vertical", 1080, 1920),
+    ("Vertical 9:16", 1080, 1920),
+    ("Portrait 4:5", 1080, 1350),
+    ("Square 1:1", 1080, 1080),
+    ("Cinema 2:1", 2160, 1080),
+    ("Widescreen 21:9", 2560, 1080),
 ];
 
 /// The frame rates, as exact fractions. 29.97 is 30000/1001 and never
diff --git a/src/crates/concat/ui/start.slint b/src/crates/concat/ui/start.slint
index 7fbcfb244..5445adaa5 100644
--- a/src/crates/concat/ui/start.slint
+++ b/src/crates/concat/ui/start.slint
@@ -6,6 +6,7 @@ import { Theme } from "theme/theme.slint";
 import { CopyChip } from "primitives/modal.slint";
 import { Glyph, Icon } from "icons.slint";
 import { SegmentedControl } from "primitives/segmented-control.slint";
+import { Select } from "primitives/select.slint";
 import { ThinScrollbar } from "primitives/scrollbar.slint";
 
 // The launch screen.
@@ -635,13 +636,15 @@ export component StartScreen inherits Rectangle {
                     }
 
                     Field {
-                        label: I18n.t("Resolution");
+                        label: I18n.t("Format");
                         stacked: root.narrow;
 
-                        // The control takes the row up to its natural width
-                        // and the whole row on a phone, where four labels
-                        // need every pixel there is.
-                        SegmentedControl {
+                        // A Select rather than the segmented strip the four
+                        // 16:9 tiers used to fit: eight shapes, several with
+                        // aspect words beside the number, and a strip would
+                        // truncate every one. The trigger shows the current
+                        // pick whole; the list holds them all.
+                        Select {
                             width: Math.min(312px, parent.width);
                             options: root.resolutions;
                             current <=> root.res-index;