Organization branding in the desktop editor (API + UI)

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

@@ -293,12 +293,33 @@ pub async fn desktop_video_progress(
     Ok(())
 }
 
+#[derive(Serialize, Deserialize, Type, Debug, Clone, Default)]
+#[serde(rename_all = "camelCase")]
+pub struct OrganizationBrandColors {
+    pub primary: Option<String>,
+    pub secondary: Option<String>,
+    pub accent: Option<String>,
+    pub background: Option<String>,
+}
+
+fn default_organization_role() -> String {
+    "member".to_string()
+}
+
 #[derive(Serialize, Deserialize, Type, Debug, Clone)]
 #[serde(rename_all = "camelCase")]
 pub struct Organization {
     pub id: String,
     pub name: String,
     pub owner_id: String,
+    #[serde(default = "default_organization_role")]
+    pub role: String,
+    #[serde(default)]
+    pub can_edit_brand: bool,
+    #[serde(default)]
+    pub icon_url: Option<String>,
+    #[serde(default)]
+    pub brand_colors: OrganizationBrandColors,
 }
 
 pub async fn signal_recording_complete(

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

@@ -18,6 +18,8 @@ pub struct AuthStore {
     pub plan: Option<Plan>,
     #[serde(default)]
     pub organizations: Vec<Organization>,
+    #[serde(default)]
+    pub organizations_updated_at: Option<i32>,
 }
 
 #[derive(Serialize, Deserialize, Type, Debug)]
@@ -101,6 +103,7 @@ impl AuthStore {
         auth.organizations = api::fetch_organizations(app)
             .await
             .map_err(|e| e.to_string())?;
+        auth.organizations_updated_at = Some(chrono::Utc::now().timestamp() as i32);
 
         Self::set(app, Some(auth))?;
 

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

@@ -3139,6 +3139,7 @@ async fn check_upgraded_and_update(app: AppHandle) -> Result<bool, String> {
             last_checked: chrono::Utc::now().timestamp() as i32,
         }),
         organizations: auth.organizations,
+        organizations_updated_at: auth.organizations_updated_at,
     };
     println!("Updating auth store with new pro status");
     AuthStore::set(&app, Some(updated_auth)).map_err(|e| e.to_string())?;

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

@@ -0,0 +1,77 @@
+import { DropdownMenu as KDropdownMenu } from "@kobalte/core/dropdown-menu";
+import { cx } from "cva";
+import { For, Show } from "solid-js";
+import type { OrganizationBrandColorSwatch } from "~/utils/organization-branding";
+import IconCapChevronDown from "~icons/cap/chevron-down";
+import { getColorPreviewBorderColor } from "./color-utils";
+import { DropdownItem, PopperContent, topLeftAnimateClasses } from "./ui";
+
+export function BrandColorsDropdown(props: {
+	swatches: OrganizationBrandColorSwatch[];
+	onSelect: (color: string) => void;
+	disabled?: boolean;
+	class?: string;
+}) {
+	return (
+		<Show when={props.swatches.length > 0}>
+			<KDropdownMenu gutter={6} placement="bottom-start">
+				<KDropdownMenu.Trigger
+					disabled={props.disabled}
+					class={cx(
+						"flex h-8 w-full items-center gap-2 rounded-lg border border-gray-3 bg-gray-2 px-2 text-sm text-gray-12 transition-colors hover:border-gray-4 hover:bg-gray-3 disabled:pointer-events-none disabled:opacity-50",
+						props.class,
+					)}
+				>
+					<span class="min-w-0 flex-1 truncate text-left">Brand colours</span>
+					<span class="flex shrink-0 -space-x-1">
+						<For each={props.swatches.slice(0, 4)}>
+							{(swatch) => (
+								<span
+									class="size-4 rounded-full border border-gray-1"
+									style={{
+										"background-color": swatch.color,
+										"box-shadow": `inset 0 0 0 1px ${getColorPreviewBorderColor(
+											swatch.color,
+										)}`,
+									}}
+								/>
+							)}
+						</For>
+					</span>
+					<IconCapChevronDown class="size-4 shrink-0 text-gray-10" />
+				</KDropdownMenu.Trigger>
+				<KDropdownMenu.Portal>
+					<PopperContent<typeof KDropdownMenu.Content>
+						as={KDropdownMenu.Content}
+						class={cx("w-56", topLeftAnimateClasses)}
+					>
+						<div class="p-1.5">
+							<For each={props.swatches}>
+								{(swatch) => (
+									<DropdownItem
+										class="h-9 gap-2"
+										onSelect={() => props.onSelect(swatch.color)}
+									>
+										<span
+											class="size-5 shrink-0 rounded-md"
+											style={{
+												"background-color": swatch.color,
+												"box-shadow": `inset 0 0 0 1px ${getColorPreviewBorderColor(
+													swatch.color,
+												)}`,
+											}}
+										/>
+										<span class="min-w-0 flex-1 truncate">{swatch.label}</span>
+										<span class="text-xs text-gray-10 tabular-nums">
+											{swatch.color}
+										</span>
+									</DropdownItem>
+								)}
+							</For>
+						</div>
+					</PopperContent>
+				</KDropdownMenu.Portal>
+			</KDropdownMenu>
+		</Show>
+	);
+}

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

@@ -16,6 +16,7 @@ import toast from "solid-toast";
 import { Toggle } from "~/components/Toggle";
 import Tooltip from "~/components/Tooltip";
 import { defaultCaptionSettings } from "~/store/captions";
+import type { OrganizationBrandColorSwatch } from "~/utils/organization-branding";
 import type { CaptionSettings } from "~/utils/tauri";
 import { commands, events } from "~/utils/tauri";
 import IconCapChevronDown from "~icons/cap/chevron-down";
@@ -132,7 +133,9 @@ const LANGUAGE_OPTIONS: LanguageOption[] = [
 	{ code: "ta", label: "Tamil" },
 ];
 
-export function CaptionsTab() {
+export function CaptionsTab(props: {
+	brandColorSwatches: OrganizationBrandColorSwatch[];
+}) {
 	const { project, setProject, editorInstance, editorState, setEditorState } =
 		useEditorContext();
 
@@ -763,6 +766,7 @@ export function CaptionsTab() {
 									<span class="text-gray-11 text-sm">Text Color</span>
 									<HexColorInput
 										value={getSetting("color")}
+										brandColorSwatches={props.brandColorSwatches}
 										onChange={(value) => updateCaptionSetting("color", value)}
 									/>
 								</div>
@@ -775,6 +779,7 @@ export function CaptionsTab() {
 									<span class="text-gray-11 text-sm">Background Color</span>
 									<HexColorInput
 										value={getSetting("backgroundColor")}
+										brandColorSwatches={props.brandColorSwatches}
 										onChange={(value) =>
 											updateCaptionSetting("backgroundColor", value)
 										}
@@ -856,6 +861,7 @@ export function CaptionsTab() {
 									<span class="text-gray-11 text-sm">Highlight Color</span>
 									<HexColorInput
 										value={getSetting("highlightColor")}
+										brandColorSwatches={props.brandColorSwatches}
 										onChange={(value) =>
 											updateCaptionSetting("highlightColor", value)
 										}