fix(#103): add recipe options to remove bleed margin and enable dark mode

app/Models/Plugin.php

@@ -38,6 +38,8 @@ class Plugin extends Model
         'markup_language' => 'string',
         'configuration' => 'json',
         'configuration_template' => 'json',
+        'no_bleed' => 'boolean',
+        'dark_mode' => 'boolean',
     ];
 
     protected static function boot()
@@ -407,8 +409,8 @@ class Plugin extends Model
                             'plugin_settings' => [
                                 'instance_name' => $this->name,
                                 'strategy' => $this->data_strategy,
-                                'dark_mode' => 'no',
+                                'dark_mode' => $this->dark_mode ? 'yes' : 'no',
-                                'no_screen_padding' => 'no',
+                                'no_screen_padding' => $this->no_bleed ? 'yes' : 'no',
                                 'polling_headers' => $this->polling_header,
                                 'polling_url' => $this->polling_url,
                                 'custom_fields_values' => [
@@ -432,6 +434,8 @@ class Plugin extends Model
                     return view('trmnl-layouts.single', [
                         'colorDepth' => $device?->colorDepth(),
                         'deviceVariant' => $device?->deviceVariant() ?? 'og',
+                        'noBleed' => $this->no_bleed,
+                        'darkMode' => $this->dark_mode,
                         'scaleLevel' => $device?->scaleLevel(),
                         'slot' => $renderedContent,
                     ])->render();
@@ -441,6 +445,7 @@ class Plugin extends Model
                     'mashupLayout' => $this->getPreviewMashupLayoutForSize($size),
                     'colorDepth' => $device?->colorDepth(),
                     'deviceVariant' => $device?->deviceVariant() ?? 'og',
+                    'darkMode' => $this->dark_mode,
                     'scaleLevel' => $device?->scaleLevel(),
                     'slot' => $renderedContent,
                 ])->render();
@@ -455,6 +460,8 @@ class Plugin extends Model
                 return view('trmnl-layouts.single', [
                     'colorDepth' => $device?->colorDepth(),
                     'deviceVariant' => $device?->deviceVariant() ?? 'og',
+                    'noBleed' => $this->no_bleed,
+                    'darkMode' => $this->dark_mode,
                     'scaleLevel' => $device?->scaleLevel(),
                     'slot' => view($this->render_markup_view, [
                         'size' => $size,

database/migrations/2025_10_30_144500_add_no_bleed_and_dark_mode_to_plugins_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::table('plugins', function (Blueprint $table): void {
+            if (! Schema::hasColumn('plugins', 'no_bleed')) {
+                $table->boolean('no_bleed')->default(false)->after('configuration_template');
+            }
+            if (! Schema::hasColumn('plugins', 'dark_mode')) {
+                $table->boolean('dark_mode')->default(false)->after('no_bleed');
+            }
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('plugins', function (Blueprint $table): void {
+            if (Schema::hasColumn('plugins', 'dark_mode')) {
+                $table->dropColumn('dark_mode');
+            }
+            if (Schema::hasColumn('plugins', 'no_bleed')) {
+                $table->dropColumn('no_bleed');
+            }
+        });
+    }
+};

resources/views/livewire/plugins/recipe.blade.php

@@ -15,6 +15,8 @@ new class extends Component {
     public string|null $markup_language;
 
     public string $name;
+    public bool $no_bleed = false;
+    public bool $dark_mode = false;
     public int $data_stale_minutes;
     public string $data_strategy;
     public string|null $polling_url;
@@ -66,6 +68,10 @@ new class extends Component {
             $this->markup_language = $this->plugin->markup_language ?? 'blade';
         }
 
+        // Initialize screen settings from the model
+        $this->no_bleed = (bool) ($this->plugin->no_bleed ?? false);
+        $this->dark_mode = (bool) ($this->plugin->dark_mode ?? false);
+
         $this->fillformFields();
         $this->data_payload_updated_at = $this->plugin->data_payload_updated_at;
     }
@@ -109,6 +115,8 @@ new class extends Component {
         'device_weekdays' => 'array',
         'device_active_from' => 'array',
         'device_active_until' => 'array',
+        'no_bleed' => 'boolean',
+        'dark_mode' => 'boolean',
     ];
 
     public function editSettings()
@@ -1024,6 +1032,22 @@ HTML;
                         <flux:text class="mb-2">Enter static JSON data in the Data Payload field.</flux:text>
                     @endif
 
+                    <div class="mb-4">
+                        <flux:label>Screen Settings</flux:label>
+                        <div class="mt-2 space-y-2">
+                            <flux:checkbox
+                                wire:model="no_bleed"
+                                label="Remove bleed margin?"
+                                description="If selected, padding around your markup will be removed."
+                            />
+                            <flux:checkbox
+                                wire:model="dark_mode"
+                                label="Enable Dark Mode?"
+                                description="Inverts black/white pixels for the entire screen. Add class 'image' to img tags as needed."
+                            />
+                        </div>
+                    </div>
+
                     <div class="flex">
                         <flux:spacer/>
                         <flux:button type="submit" variant="primary" class="w-full">Save</flux:button>

resources/views/trmnl-layouts/single.blade.php

@@ -14,7 +14,7 @@
         {!! $slot !!}
     </x-trmnl::screen>
 @else
-    <x-trmnl::screen colorDepth="{{$colorDepth}}">
+    <x-trmnl::screen colorDepth="{{$colorDepth}}" no-bleed="{{$noBleed}}" dark-mode="{{$darkMode}}">
         {!! $slot !!}
     </x-trmnl::screen>
 @endif