small design fix

src/components/core/timeline/index.tsx

@@ -4,7 +4,7 @@ import { ClapTimeline, useTimeline, SegmentResolver } from "@aitube/timeline"
 import { cn } from "@/lib/utils"
 import { useMonitor } from "@/controllers/monitor/useMonitor"
 import { useResolver } from "@/controllers/resolver/useResolver"
-
+import { useUI } from "@/controllers/ui"
 
 export function Timeline() {
   const isReady = useTimeline(s => s.isReady)
@@ -29,6 +29,10 @@ export function Timeline() {
     setJumpAt(jumpAt)
     setIsPlaying(checkIfPlaying)
     setTogglePlayback(togglePlayback)
+
+    // not sure if that's the best place, but once the timeline is loaded
+    // we need to apply theme to it
+    useUI.getState().applyThemeToComponents()
     startLoop()
   }, [isReady])
   

src/components/editor/ScriptEditor/index.tsx

@@ -114,11 +114,11 @@ export function ScriptEditor() {
        ],
        colors: {
          'editor.background': theme.editorBgColor || theme.defaultBgColor || '#000000', // Editor background color (given)
-         'editorCursor.foreground': '#f5f5f4', // Cursor color
+         'editorCursor.foreground': theme.editorCursorColor || theme.defaultPrimaryColor || "", // Cursor color
          'editor.lineHighlightBackground': '#44403c', // Highlighted line color
          'editorLineNumber.foreground': '#78716c', // Line Numbers color
          'editor.selectionBackground': '#44403c', // Selection color
-         'editor.foreground': '#d6d3d1', // Main text color
+         'editor.foreground': theme.editorTextColor || theme.defaultTextColor || "", // Main text color
          'editorIndentGuide.background': '#78716c', // Indent guides color
          'editorIndentGuide.activeBackground': '#a8a29e', // Active indent guides color
          'editorWhitespace.foreground': '#a8a29e', // Whitespace symbols color

src/controllers/ui/theme.ts

@@ -1,5 +1,17 @@
 
-// note: this should also change the look of the timeline
+/**
+ * TODO:
+ * 
+ * - more colors for Monaco editor
+ * 
+ * - change shadcn/ui colors
+ * 
+ * - timeline CSS filter is a quick hack to get a hue,
+ *   instead (or in addition to it) we could pass color parameters
+ * 
+ * - handle light and dark themes
+ * 
+ */
 export type UITheme = {
   id: string
   label: string
@@ -10,7 +22,8 @@ export type UITheme = {
   defaultPrimaryColor?: string
   logoColor?: string
   editorBgColor?: string
-  editorFgColor?: string
+  editorCursorColor?: string
+  editorTextColor?: string
 
   // background color of the video preview monitor
   monitorBgColor?: string
@@ -18,6 +31,8 @@ export type UITheme = {
   // text of the elapsed/total duration counter in the video preview monitor
   monitorSecondaryTextColor?: string
   monitorPrimaryTextColor?: string
+
+  timelineFilter: string
 }
 
 // a grey and yellow theme, inspired by the entertainment world
@@ -31,26 +46,48 @@ export const backstage: UITheme = {
   defaultPrimaryColor: "#FACC15",
   logoColor: "#FACC15",
   editorBgColor: "#292524", // bg-stone-900
-  editorFgColor: "#d6d3d1", // bg-stone-300
+  editorCursorColor: '#f5f5f4',
+  editorTextColor: "#d6d3d1",
   monitorBgColor: "#1c1917", // bg-stone-900
   monitorSecondaryTextColor: "#D6D3D1",
   monitorPrimaryTextColor: "#FACC15",
+  timelineFilter: "",
 }
 
 export const mythril: UITheme = {
   id: "mythril",
   label: "Mythril",
   author: "Clapper",
-  description: "Sleek",
+  description: "You shall not pass",
   defaultBgColor: "#092a26",
   defaultTextColor: "#b3c0c0",
   defaultPrimaryColor: "#2DD4BF",
   logoColor: "#2DD4BF",
   editorBgColor: "#092a26",
-  editorFgColor: "#4ADE80",
+  editorCursorColor: '#2DD4BF',
+  editorTextColor: "#b3c0c0",
   monitorBgColor: "#0d3f39",
   monitorSecondaryTextColor: "#D6D3D1",
   monitorPrimaryTextColor: "#2DD4BF",
+  timelineFilter: "hue-rotate(93deg) saturate(0.2)",
+}
+
+export const midnight: UITheme = {
+  id: "midnight",
+  label: "Midnight",
+  author: "Clapper",
+  description: "",
+  defaultBgColor: "#101e2d",
+  defaultTextColor: "#b8bdc3",
+  defaultPrimaryColor: "#5B9DF1",
+  logoColor: "#5B9DF1",
+  editorBgColor: "#101e2d",
+  editorCursorColor: '#5B9DF1',
+  editorTextColor: "#b8bdc3",
+  monitorBgColor: "#152639",
+  monitorSecondaryTextColor: "#b8bdc3",
+  monitorPrimaryTextColor: "#5B9DF1",
+  timelineFilter: "hue-rotate(147deg) saturate(0.3) brightness(0.95) contrast(1.05)"
 }
 
 export const lavender: UITheme = {
@@ -63,15 +100,17 @@ export const lavender: UITheme = {
   defaultPrimaryColor: "#A78BFA",
   logoColor: "#A78BFA",
   editorBgColor: "#211b32",
-  editorFgColor: "#dbd0fd",
+  editorCursorColor: '#A78BFA',
+  editorTextColor: "#dbd0fd",
   monitorBgColor: "#32294b",
   monitorSecondaryTextColor: "#D6D3D1",
   monitorPrimaryTextColor: "#A78BFA",
+  timelineFilter: "hue-rotate(221deg) saturate(0.3) brightness(0.9) sepia(0.15) contrast(1)"
 }
-// Aka Flixed
-export const kibble: UITheme = {
-  id: "kibble",
-  label: "Kibble",
+
+export const flix: UITheme = {
+  id: "flix",
+  label: "Flix",
   author: "Clapper",
   description: "A new DVD rent-by-mail business",
   defaultBgColor: "#000000",
@@ -79,10 +118,12 @@ export const kibble: UITheme = {
   defaultPrimaryColor: "#D22F27",
   logoColor: "#D22F27",
   editorBgColor: "#000000",
-  editorFgColor: "#D22F27",
+  editorCursorColor: '#D22F27',
+  editorTextColor: "#ffeeee",
   monitorBgColor: "#000000",
   monitorSecondaryTextColor: "#D6D3D1",
   monitorPrimaryTextColor: "#D22F27",
+  timelineFilter: "hue-rotate(47deg) saturate(0.2) brightness(0.85) contrast(1.15)"
 }
 
 export const sendhugs: UITheme = {
@@ -95,15 +136,17 @@ export const sendhugs: UITheme = {
   defaultPrimaryColor: "#312702",
   logoColor: "#312702",
   editorBgColor: "#181301",
-  editorFgColor: "#F8D44E",
+  editorCursorColor: '#F8D44E',
+  editorTextColor: "#F8D44E",
   monitorBgColor: "#312702",
   monitorSecondaryTextColor: "#D6D3D1",
   monitorPrimaryTextColor: "#312702",
+    timelineFilter: ""
 }
 
-export const circus: UITheme = {
-  id: "circus",
-  label: "Circus",
+export const lore: UITheme = {
+  id: "lore",
+  label: "Lore",
   author: "Clapper",
   description: "",
   defaultBgColor: "#151520",
@@ -111,15 +154,17 @@ export const circus: UITheme = {
   defaultPrimaryColor: "#DE4A80",
   logoColor: "#DE4A80",
   editorBgColor: "#151520",
-  editorFgColor: "#E3747B",
+  editorCursorColor: '#DE4A80',
+  editorTextColor: "#E3747B",
   monitorBgColor: "#151520",
   monitorSecondaryTextColor: "#D6D3D1",
   monitorPrimaryTextColor: "#DE4A80",
+  timelineFilter: "hue-rotate(303deg) saturate(0.3) brightness(0.9) contrast(1.1)"
 }
 
-export const cappuccino: UITheme = {
-  id: "cappuccino",
-  label: "Cappuccino",
+export const mocha: UITheme = {
+  id: "mocha",
+  label: "Mocha",
   author: "Clapper",
   description: "",
   defaultBgColor: "#412f1f",
@@ -127,20 +172,22 @@ export const cappuccino: UITheme = {
   defaultPrimaryColor: "#D4AA6E",
   logoColor: "#D4AA6E",
   editorBgColor: "#271c12",
-  editorFgColor: "#CDA983",
+  editorCursorColor: '#D4AA6E',
+  editorTextColor: "#CDA983",
   monitorBgColor: "#342619",
   monitorSecondaryTextColor: "#c1af9e",
   monitorPrimaryTextColor: "#D4AA6E",
+  timelineFilter: "hue-rotate(353deg) saturate(1.2) brightness(0.85) contrast(1.09) sepia(0.5)"
 }
 export const themes = {
   backstage,
+  midnight,
   lavender,
-  // midnight // blue like theme
-  mythril, // teal-like theme
-  kibble,
+  mythril,
+  flix,
   // sendhugs,
-  circus,
-  cappuccino
+  lore,
+  mocha
 }
 
 export type UIThemeName = keyof typeof themes

src/controllers/ui/types.ts

@@ -19,6 +19,7 @@ export type UIState = {
 export type UIControls = {
   setHasBetaAccess: (hasBetaAccess: boolean) => void
   setThemeName: (themeName: UIThemeName) => void
+  applyThemeToComponents: () => void
   getTheme: () => UITheme
   setShowApiKeys: (showApiKeys: boolean) => void
   setShowSettings: (showSettings: SettingsCategory) => void

src/controllers/ui/useUI.ts

@@ -18,7 +18,17 @@ export const useUI = create<UIStore>()(
       },
       setThemeName: (themeName: UIThemeName) => {
         set({ themeName })
-        useEditor.getState().monaco?.editor?.setTheme?.(themeName)
+        get().applyThemeToComponents()
+      },
+      applyThemeToComponents: () => {
+        const theme = get().getTheme()
+
+        // update the editor's theme
+        useEditor.getState().monaco?.editor?.setTheme?.(theme.id)
+
+        // update the timeline's theme
+        const style = document.getElementById("clap-timeline")?.style
+        if (style) { style.filter = theme.timelineFilter }
       },
       getTheme: () => {
         return themes[get().themeName] || themes.backstage

src/lib/core/constants.ts

@@ -4,7 +4,7 @@
 export const HARD_LIMIT_NB_MAX_ASSETS_TO_GENERATE_IN_PARALLEL = 32
 
 export const APP_NAME = "Clapper.app"
-export const APP_REVISION = "r20240624-0210"
+export const APP_REVISION = "r20240624-1059"
 
 export const APP_DOMAIN = "Clapper.app"
 export const APP_LINK = "https://clapper.app"