update

frontend/src/api.ts

@@ -55,6 +55,8 @@ export async function createProject(payload: {
   intro_seconds: number;
   outro_seconds: number;
   reencode_enabled?: boolean;
+  encoding_passes?: number;
+  target_os?: string;
   ffmpeg_pass1_template?: string | null;
   ffmpeg_pass2_template?: string | null;
 }): Promise<Project> {
@@ -70,6 +72,8 @@ export async function updateProject(payload: {
   intro_seconds?: number;
   outro_seconds?: number;
   reencode_enabled?: boolean;
+  encoding_passes?: number;
+  target_os?: string;
   ffmpeg_pass1_template?: string | null;
   ffmpeg_pass2_template?: string | null;
 }): Promise<Project> {
@@ -174,7 +178,7 @@ export async function listSegmentEdits(videoId: string): Promise<{ segments: Seg
 
 export async function replaceSegmentEdits(
   videoId: string,
-  segments: { segment_key: string; start_seconds: number; end_seconds: number }[]
+  segments: { segment_key: string; start_seconds: number; end_seconds: number; color?: string | null }[]
 ): Promise<{ segments: SegmentEdit[] }> {
   return request(`/api/videos/${videoId}/segment-edits`, {
     method: "PUT",

frontend/src/theme.ts

@@ -1,5 +1,17 @@
 import { createTheme } from "@mui/material/styles";
 
+declare module "@mui/material/Button" {
+  interface ButtonPropsVariantOverrides {
+    tonal: true;
+  }
+}
+
+declare module "@mui/material/Chip" {
+  interface ChipPropsVariantOverrides {
+    tonal: true;
+  }
+}
+
 export type ColorMode = "light" | "dark";
 
 export function buildTheme(mode: ColorMode) {
@@ -30,7 +42,7 @@ export function buildTheme(mode: ColorMode) {
       },
     },
     shape: {
-      borderRadius: 16, // Softer, more fluid shapes
+      borderRadius: 12, // More balanced Material Design 3 curve
     },
     typography: {
       fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
@@ -49,6 +61,18 @@ export function buildTheme(mode: ColorMode) {
     },
     components: {
       MuiButton: {
+        variants: [
+          {
+            props: { variant: "tonal" },
+            style: {
+              backgroundColor: mode === "dark" ? "#4A4458" : "#E8DEF8",
+              color: mode === "dark" ? "#E8DEF8" : "#1D192B",
+              "&:hover": {
+                backgroundColor: mode === "dark" ? "#625B71" : "#D0BCFF",
+              },
+            },
+          },
+        ] as any,
         styleOverrides: {
           root: {
             borderRadius: 100, // Full pill shape typical of M3 Expressive
@@ -69,7 +93,7 @@ export function buildTheme(mode: ColorMode) {
       MuiCard: {
         styleOverrides: {
           root: {
-            borderRadius: 24, // Playful, edge-hugging containers
+            borderRadius: 16, // Refined container rounding
             boxShadow: "none", // Flatter hierarchy using surface tones
             backgroundColor: mode === "dark" ? "#2B2930" : "#F3EDF7",
             backgroundImage: "none",
@@ -92,7 +116,7 @@ export function buildTheme(mode: ColorMode) {
       MuiPaper: {
         styleOverrides: {
           rounded: {
-            borderRadius: 24,
+            borderRadius: 16,
           },
         },
       },
@@ -100,12 +124,21 @@ export function buildTheme(mode: ColorMode) {
         styleOverrides: {
           root: {
             "& .MuiOutlinedInput-root": {
-              borderRadius: 12, // Softer input fields
+              borderRadius: 8, // More compact input fields
             },
           },
         },
       },
       MuiChip: {
+        variants: [
+          {
+            props: { variant: "tonal" },
+            style: {
+              backgroundColor: mode === "dark" ? "#4A4458" : "#E8DEF8",
+              color: mode === "dark" ? "#E8DEF8" : "#1D192B",
+            },
+          },
+        ] as any,
         styleOverrides: {
           root: {
             borderRadius: 8,

frontend/src/types.ts

@@ -5,6 +5,8 @@ export type Project = {
   intro_seconds: number;
   outro_seconds: number;
   reencode_enabled: boolean;
+  encoding_passes: number;
+  target_os: "windows" | "linux";
   ffmpeg_pass1_template: string | null;
   ffmpeg_pass2_template: string | null;
   created_at: string;
@@ -17,6 +19,7 @@ export type Video = {
   filename: string;
   file_path: string;
   duration_seconds: number;
+  is_exported: boolean;
   created_at: string;
 };
 
@@ -43,5 +46,6 @@ export type SegmentEdit = {
   segment_key: string;
   start_seconds: number;
   end_seconds: number;
+  color: string | null;
   modified_at: string;
 };