Welcome screen (#1353)

* Refactor Locale class and add LocaleProvider test

* Make setLocale parameter nullable in Locale class

Changed the setLocale parameter in the Locale class to be nullable and updated its usage to safely invoke it. This allows for more flexible instantiation when a setLocale function is not required.

* Add compose ui test to the deps

* Update locale change method in test

Replaces the call to locale.setLocale with locale.set in LocaleKtTest to match the updated API for changing the locale.

* Add PDE window utilities for Compose and Swing

Introduces PDESwingWindow and PDEComposeWindow classes to simplify creating themed and localized windows in Compose and Swing applications. Includes macOS-specific handling for full window content and localization support for window titles.

* Refactor beta welcome window handling

Replaces custom JFrame setup in WelcomeToBeta with PDESwingWindow and PDEComposeWindow, centralizing window logic and close handling. Adds onClose callback to PDESwingWindow for improved lifecycle management. Also ensures beta welcome preference is reset on forced update check.

* Remove ContributionManager and ContributionPane UI files (#1276)

Deleted ContributionManager.kt and ContributionPane.kt from the contrib/ui directory. This removes the Compose-based contributions manager and its detail pane prototypes which got merged unnecessarily

* Refactor Locale class and add LocaleProvider test (#1283)

* Refactor Locale class and add LocaleProvider test

* Make setLocale parameter nullable in Locale class

Changed the setLocale parameter in the Locale class to be nullable and updated its usage to safely invoke it. This allows for more flexible instantiation when a setLocale function is not required.

* Add compose ui test to the deps

* Update locale change method in test

Replaces the call to locale.setLocale with locale.set in LocaleKtTest to match the updated API for changing the locale.

* Theming (#1298)

* Add Material3-based Processing theme and typography

Introduces Colors.kt with custom color schemes for light and dark themes using Material3. Refactors Theme.kt to use Material3 theming, adds a PDETheme composable, and provides a desktop preview app for theme components. Updates Typography.kt to use Space Grotesk font family and defines new typography styles for Material3.

* Refactor to use Material3 and update theme usage

Replaces Material2 components with Material3 in WelcomeToBeta, removes custom PDEButton in favor of Material3 Button, and updates theme usage to PDETheme. Also simplifies background modifier in PDETheme and removes unused Kotlin Multiplatform plugin from build.gradle.kts.

* Add Space Grotesk font files and license

Includes SpaceGrotesk font variants (Bold, Light, Medium, Regular, SemiBold) and the associated SIL Open Font License. This enables usage of the Space Grotesk typeface in the project.

* Update markdown renderer to m3 and adjust UI

Switched markdown renderer imports from m2 to m3 and updated the dependency version to 0.37.0. Adjusted WelcomeToBeta window size, layout, and logo dimensions for improved appearance. Ensured Box in Theme.kt fills available space for better layout consistency.

* Switch from ProcessingTheme to PDETheme in window UI

Replaces the use of ProcessingTheme with PDETheme in the PDEWindowContent composable

* Refactor preferences to Jetpack Compose UI

Replaces the legacy PreferencesFrame with a new Jetpack Compose-based preferences UI. Adds reactive preferences management using a custom ReactiveProperties class, and introduces modular preference groups (General, Interface, Other) with composable controls. Updates Base.java to launch the new preferences window, and refactors theme and window code for Compose integration.

* Remove obsolete TODO for onClose callback

* Clean up handlePrefs method by removing comments

Removed commented-out code for preferences frame initialization.

* Composable Preferences rewrite (#1277)

* Remove ContributionManager and ContributionPane UI files

Deleted ContributionManager.kt and ContributionPane.kt from the contrib/ui directory. This removes the Compose-based contributions manager and its detail pane prototypes which got merged unnecessarily

* Enhance Preferences reactivity and test coverage

Refactored ReactiveProperties to use snapshotStateMap for Compose reactivity. Improved PreferencesProvider and watchFile composables with better file watching, override support via system properties, and added documentation. Updated PreferencesKtTest to use temporary files and verify file-to-UI reactivity.

* Small bugfix for removed function

* Add compose ui test to the deps

* Welcome screen implementation (#1307)

* Remove ContributionManager and ContributionPane UI files

Deleted ContributionManager.kt and ContributionPane.kt from the contrib/ui directory. This removes the Compose-based contributions manager and its detail pane prototypes which got merged unnecessarily

* Enhance Preferences reactivity and test coverage

Refactored ReactiveProperties to use snapshotStateMap for Compose reactivity. Improved PreferencesProvider and watchFile composables with better file watching, override support via system properties, and added documentation. Updated PreferencesKtTest to use temporary files and verify file-to-UI reactivity.

* Small bugfix for removed function

* Add compose ui test to the deps

* Refactor theme system to Material 3 color schemes

Replaces legacy color definitions with Material 3 color schemes and introduces extended color support for warnings. Dialogs in Messages.kt are now implemented using Compose Material 3 components for a modern UI. Removes deprecated color sets and updates PDETheme to use new color schemes, improving consistency and maintainability.

* Add PDEWelcome Composable UI screen

Introduces a new PDEWelcome.kt file with a Composable UI for the Processing welcome screen. Includes layout with buttons for language selection, new sketch, examples, and sketchbook, as well as a placeholder for right-side content and a main entry point for launching the window.

* Initial layout

* Revamp welcome screen UI and add social icons

Refactors the PDEWelcome screen to improve layout, update button icons, and add support for Discord, GitHub, and Instagram SVG icons. The welcome screen now receives a Base instance for proper action handling, and new methods replace deprecated ones in Base.java. Updates related menu actions to pass the Base instance as needed.

* Add example previews to welcome screen

Replaces placeholder text on the right side of the PDEWelcome screen with a LazyColumn displaying example sketches. Each example attempts to show a preview image if available, or a placeholder icon otherwise. Introduces an Example data class and related image loading logic.

* Add hover-activated play button to example previews

Introduced a hover effect on example preview images in the welcome screen, displaying a play button that opens the example when clicked. Refactored title key usage for consistency.

* Localize welcome screen UI strings

Replaced hardcoded strings in the PDEWelcome screen with localized values using the LocalLocale context. Added new keys for the welcome screen to the English and Dutch language property files to support internationalization.

* Add language selector and UI improvements to welcome screen

Introduces a language selection dropdown to the PDE welcome screen using a shared composable from preferences. Refactors the layout for better spacing, updates example cards with animated overlays, and replaces the show-on-startup button with a checkbox. Also adds a new translation key for the open example button.

* Refactor example listing and randomize welcome sketches

Moved example folder listing logic in Contributions.ExamplesList to a companion object function for reuse. Updated PDEWelcome to display a randomized selection of sketches from all available examples, replacing the previous static list.

* Refactor example handling to use Sketch objects

Replaces Example objects with Sketch objects for managing example sketches in the welcome screen. Updates all relevant usages to reference Sketch properties, simplifying the code and improving clarity.

* Add vertical scrollbar to welcome screen examples

Introduces a VerticalScrollbar to the examples list in the PDEWelcome screen for improved navigation. Also adjusts spacing and arrangement in several UI components for better layout consistency, and updates the welcome screen title in the language properties.

* Add rounded corners to buttons in PDEWelcome

Introduced a RoundedCornerShape with 12.dp radius and applied it to various buttons in the PDEWelcome screen for improved UI consistency and aesthetics.

* Refactor PDEWelcome UI and add Sketch card composable

Refactored the PDEWelcome screen for improved structure and readability, including extracting the example preview into a reusable Sketch.card composable. Updated icon usage for RTL support, adjusted layout and padding, and improved the examples list initialization. Also, customized scrollbar style in PDETheme for a more consistent UI appearance.

* Add unique window handling to prevent duplicates

Introduces a 'unique' parameter to PDESwingWindow and PDEComposeWindow, allowing windows to be identified by a KClass and preventing multiple instances of the same window. If a window with the same unique identifier exists, it is brought to the front and the new one is disposed. This helps avoid duplicate welcome or other singleton windows.

* Refactor dialog handling and improve AlertDialog UI

Refactored the showDialog function to accept a modifier and updated all AlertDialog usages to use RectangleShape and the modifier parameter. Improved dialog sizing and positioning by dynamically adjusting the window size based on content, and set additional window properties for better integration on macOS.

* Set application window icon using Toolkit.setIcon

Added calls to Toolkit.setIcon(window) in Start.kt and Window.kt to ensure the application window icon is set consistent

* Simplify imports and update scrollbar colors in Theme.kt

Consolidated import statements for Compose libraries using wildcard imports to reduce verbosity. Updated scrollbar hover and unhover colors to use the default outlineVariant color without alpha modification.

* Removing the Preferences work to keep the PR clean

* Update background color in PDEWelcome UI

Changed the background color from surfaceContainerLow to surfaceContainerLowest in the PDEWelcome composable for improved visual consistency with the MaterialTheme.

* Tweak welcome actions naming and order

- Rename `Empty Sketch` to `New Sketch`
- Rename `Sketchbook` to `My Sketches`
- Move `Open Examples` below `My Sketches`

* Rather than setting the decorations app wide, just modify the editor screen

---------

Co-authored-by: Raphaël de Courville <groupes.raphael@gmail.com>

* Replace ProcessingTheme with PDETheme in WelcomeSurvey

* Add Material Theme Builder file headers

Added autogenerated file headers to Color.kt and Theme.kt indicating they were generated by the Material Theme Builder tool and should not be edited directly. Also reordered imports in Theme.kt for consistency.

* Fix preferences file override and update test property

Corrects the logic for selecting the preferences file in PreferencesProvider to use the override if present. Updates the test to set the correct system property for the settings folder.

* Added survey button to the new welcome screen

---------

Co-authored-by: Raphaël de Courville <groupes.raphael@gmail.com>

Author: Stefterv

app/src/processing/app/ui/WebFrame.java app/ant/processing/app/ui/WebFrame.javaapp/src/processing/app/ui/WebFrame.java renamed to app/ant/processing/app/ui/WebFrame.java

@@ -1,6 +1,7 @@
 import org.gradle.internal.jvm.Jvm
 import org.gradle.internal.os.OperatingSystem
 import org.gradle.nativeplatform.platform.internal.DefaultNativePlatform
+import org.jetbrains.compose.ExperimentalComposeLibrary
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
 import org.jetbrains.compose.desktop.application.tasks.AbstractJPackageTask
 import org.jetbrains.compose.internal.de.undercouch.gradle.tasks.download.Download
@@ -16,6 +17,7 @@ plugins{
 
     alias(libs.plugins.compose.compiler)
     alias(libs.plugins.jetbrainsCompose)
+
     alias(libs.plugins.serialization)
     alias(libs.plugins.download)
 }
@@ -59,7 +61,7 @@ compose.desktop {
         ).map { "-D${it.first}=${it.second}" }.toTypedArray())
 
         nativeDistributions{
-            modules("jdk.jdi", "java.compiler", "jdk.accessibility", "java.management.rmi", "java.scripting", "jdk.httpserver")
+            modules("jdk.jdi", "java.compiler", "jdk.accessibility", "jdk.zipfs", "java.management.rmi", "java.scripting", "jdk.httpserver")
             targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
             packageName = "Processing"
 
@@ -107,25 +109,29 @@ dependencies {
 
     implementation(compose.runtime)
     implementation(compose.foundation)
-    implementation(compose.material)
     implementation(compose.ui)
     implementation(compose.components.resources)
     implementation(compose.components.uiToolingPreview)
+    implementation(compose.materialIconsExtended)
 
     implementation(compose.desktop.currentOs)
+    implementation(libs.material3)
 
     implementation(libs.compottie)
     implementation(libs.kaml)
     implementation(libs.markdown)
     implementation(libs.markdownJVM)
 
+    implementation(libs.clikt)
+    implementation(libs.kotlinxSerializationJson)
+
+    @OptIn(ExperimentalComposeLibrary::class)
+    testImplementation(compose.uiTest)
     testImplementation(kotlin("test"))
     testImplementation(libs.mockitoKotlin)
     testImplementation(libs.junitJupiter)
     testImplementation(libs.junitJupiterParams)
-
-    implementation(libs.clikt)
-    implementation(libs.kotlinxSerializationJson)
+    
 }
 
 tasks.test {

app/src/processing/app/ui/Welcome.java app/ant/processing/app/ui/Welcome.javaapp/src/processing/app/ui/Welcome.java renamed to app/ant/processing/app/ui/Welcome.java

@@ -643,6 +643,23 @@ welcome.survey.description=Processing is free, open-source, and shaped by its co
 color_chooser = Color Selector
 color_chooser.select = Select
 
+
+# ---------------------------------------
+# Welcome Screen
+welcome.processing.logo = Processing Logo
+welcome.processing.title = Welcome to Processing
+welcome.actions.sketch.new = New Sketch
+welcome.actions.examples = Open Examples
+welcome.actions.sketchbook = My Sketches
+welcome.actions.show_startup = Show this window at startup
+welcome.resources.title = Resources
+welcome.resources.get_started = Get Started
+welcome.resources.tutorials = Tutorials
+welcome.resources.documentation = Reference
+welcome.community.title = Join our community
+welcome.community.forum = Forum
+welcome.sketch.open = Open
+
 # ---------------------------------------
 # Movie Maker
 

app/build.gradle.kts

@@ -327,6 +327,22 @@ beta.title = Dankuwel voor het testen van deze Processing Beta!
 beta.message = Deze preview release laat ons feedback verzamelen en problemen oplossen. **Sommige functies werken mogelijk niet zoals verwacht.** Als u problemen ondervindt, [post dan op het forum](https://discourse.processing.org) of [open een GitHub issue](https://github.com/processing/processing4/issues).
 beta.button = Ok
 
+
+# ---------------------------------------
+# Welcome Screen
+welcome.processing.logo = Processing Logo
+welcome.processing.title = Welkom bij Processing!
+welcome.actions.sketch.new = Nieuwe Schets
+welcome.actions.examples = Open Voorbeelden
+welcome.actions.show_startup = Laat dit scherm zien bij opstarten
+welcome.resources.title = Resources
+welcome.resources.video = Video Cursus
+welcome.resources.get_started = Om te beginnen
+welcome.resources.tutorials = Tutorials
+welcome.resources.documentation = Handleiding
+welcome.community.title = Neem deel aan de Community
+welcome.community.forum = Forum
+
 # ---------------------------------------
 # Color Chooser
 color_chooser = Kies een kleur...

app/src/main/resources/icons/Discord.svg

@@ -328,13 +328,7 @@ static private void handleWelcomeScreen(Base base) {
     // Needs to be shown after the first editor window opens, so that it
     // shows up on top, and doesn't prevent an editor window from opening.
     if (Preferences.getBoolean("welcome.four.show")) {
-      try {
-        new Welcome(base);
-      } catch (IOException e) {
-        Messages.showTrace("Unwelcoming",
-          "Please report this error to\n" +
-            "https://github.com/processing/processing4/issues", e, false);
-      }
+        PDEWelcomeKt.showWelcomeScreen(base);
     }
   }
 
@@ -598,7 +592,7 @@ public JMenu initDefaultFileMenu() {
     defaultFileMenu.add(item);
 
     item = Toolkit.newJMenuItemShift(Language.text("menu.file.examples"), 'O');
-    item.addActionListener(e -> thinkDifferentExamples());
+    item.addActionListener(e -> showExamplesFrame());
     defaultFileMenu.add(item);
 
     return defaultFileMenu;
@@ -1874,7 +1868,7 @@ public void handleRestart() {
 //  }
 
 
-  public void thinkDifferentExamples() {
+  public void showExamplesFrame() {
     nextMode.showExamplesFrame();
   }
 
@@ -2180,10 +2174,10 @@ static private Mode findSketchMode(File folder, List<Mode> modeList) {
    * Show the Preferences window.
    */
   public void handlePrefs() {
-    if (preferencesFrame == null) {
-      preferencesFrame = new PreferencesFrame(this);
-    }
-    preferencesFrame.showFrame();
+      if (preferencesFrame == null) {
+          preferencesFrame = new PreferencesFrame(this);
+      }
+      preferencesFrame.showFrame();
   }
 
 

app/src/main/resources/icons/GitHub.svg

@@ -18,13 +18,27 @@
 */
 package processing.app
 
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+import androidx.compose.ui.window.rememberWindowState
+import com.formdev.flatlaf.FlatLightLaf
 import processing.app.ui.Toolkit
+import processing.app.ui.theme.PDETheme
 import java.awt.EventQueue
 import java.awt.Frame
 import java.io.PrintWriter
 import java.io.StringWriter
 import javax.swing.JFrame
 import javax.swing.JOptionPane
+import javax.swing.UIManager
+
 
 class Messages {
     companion object {
@@ -270,6 +284,37 @@ class Messages {
         }
     }
 }
+fun main(){
+    val types = mapOf(
+        "message" to { Messages.showMessage("Test Title", "This is a test message.") },
+        "warning" to { Messages.showWarning("Test Warning", "This is a test warning.", Exception("dfdsfjk")) },
+        "trace" to { Messages.showTrace("Test Trace", "This is a test trace.", Exception("Test Exception"), false) },
+        "tiered_warning" to { Messages.showWarningTiered("Test Tiered Warning", "Primary message", "Secondary message", null) },
+        "yes_no" to { Messages.showYesNoQuestion(null, "Test Yes/No", "Do you want to continue?", "Choose yes or no.") },
+        "custom_question" to { Messages.showCustomQuestion(null, "Test Custom Question", "Choose an option:", "Select one of the options below.", 1, "Option 1", "Option 2", "Option 3") },
+        "error" to { Messages.showError("Test Error", "This is a test error.", null) },
+    )
+    Platform.init()
+    UIManager.setLookAndFeel(FlatLightLaf())
+    application {
+        val state = rememberWindowState(
+            size = DpSize(500.dp, 300.dp)
+        )
+        Window(state = state, onCloseRequest = ::exitApplication, title = "Test Messages") {
+            PDETheme {
+                Column {
+                    for ((type, action) in types) {
+                        Button(onClick = { action() }, modifier = Modifier.padding(8.dp)) {
+                            Text("Show $type dialog")
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+
+}
 
 // Helper functions to give the base classes a color
 fun String.formatClassName() = this