Packages
Multi-surface application runtime for Elixir. One TEA module renders to terminal, browser (LiveView), SSH, and MCP (agents). 30+ widgets, flexbox + CSS grid, AI agent runtime, distributed swarm with CRDTs, time-travel debugging, session recording, sandboxed REPL, and agentic commerce.
Current section
Files
Jump to
Current section
Files
lib/raxol_web/live/settings_live/index.html.heex
<div class="max-w-7xl mx-auto px-4 py-8">
<h1 class="text-2xl font-bold mb-8">Account Settings</h1>
<%= if @flash["info"] do %>
<.flash kind="info" title="Success!">
<%= @flash["info"] %>
</.flash>
<% end %>
<%= if @flash["error"] do %>
<.flash kind="error" title="Error!">
<%= @flash["error"] %>
</.flash>
<% end %>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Left Column -->
<div class="space-y-8">
<!-- Profile Settings -->
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-semibold mb-4">Profile Information</h2>
<form phx-submit="update_profile" phx-change="validate" class="space-y-4">
<.form_group
name="user[email]"
label="Email"
type="email"
value={@current_user.email}
required
/>
<.form_group
name="user[name]"
label="Name"
value={@current_user.name}
required
/>
<.button type="submit" class="w-full">
Update Profile
</.button>
</form>
</div>
<!-- Password Settings -->
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-semibold mb-4">Change Password</h2>
<form phx-submit="update_password" class="space-y-4">
<.form_group
name="current_password"
label="Current Password"
type="password"
required
/>
<.form_group
name="user[password]"
label="New Password"
type="password"
required
/>
<.form_group
name="user[password_confirmation]"
label="Confirm New Password"
type="password"
required
/>
<.button type="submit" class="w-full">
Update Password
</.button>
</form>
</div>
<!-- Theme Settings -->
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-semibold mb-4">Theme Settings</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Dark Mode</span>
<button phx-click="toggle_theme" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 bg-gray-200">
<span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
<span class="opacity-100 duration-200 ease-in absolute inset-0 flex h-full w-full items-center justify-center transition-opacity">
<svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
<!-- Right Column -->
<div class="space-y-8">
<!-- Terminal Preferences -->
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-semibold mb-4">Terminal Preferences</h2>
<form phx-submit="update_preferences" class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<.form_group
name="font_size"
label="Font Size"
type="number"
value={@preferences["terminal"]["font_size"]}
min="8"
max="32"
/>
<.form_group
name="font_family"
label="Font Family"
value={@preferences["terminal"]["font_family"]}
/>
</div>
<div class="grid grid-cols-2 gap-4">
<.form_group
name="line_height"
label="Line Height"
type="number"
value={@preferences["terminal"]["line_height"]}
step="0.1"
min="1"
max="2"
/>
<.form_group
name="scrollback_size"
label="Scrollback Size"
type="number"
value={@preferences["terminal"]["scrollback_size"]}
min="1000"
max="100000"
/>
</div>
<div class="grid grid-cols-2 gap-4">
<.form_group
name="cursor_style"
label="Cursor Style"
value={@preferences["terminal"]["cursor_style"]}
/>
</div>
<.button type="submit" class="w-full">
Update Terminal Preferences
</.button>
</form>
</div>
<!-- Editor Preferences -->
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-semibold mb-4">Editor Preferences</h2>
<form phx-submit="update_preferences" class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<.form_group
name="tab_size"
label="Tab Size"
type="number"
value={@preferences["editor"]["tab_size"]}
min="2"
max="8"
/>
</div>
<div class="space-y-2">
<div class="flex items-center">
<input
type="checkbox"
name="insert_spaces"
value="true"
checked={@preferences["editor"]["insert_spaces"]}
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
/>
<label class="ml-2 block text-sm text-gray-900">
Insert Spaces Instead of Tabs
</label>
</div>
<div class="flex items-center">
<input
type="checkbox"
name="word_wrap"
value="true"
checked={@preferences["editor"]["word_wrap"]}
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
/>
<label class="ml-2 block text-sm text-gray-900">
Enable Word Wrap
</label>
</div>
<div class="flex items-center">
<input
type="checkbox"
name="line_numbers"
value="true"
checked={@preferences["editor"]["line_numbers"]}
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
/>
<label class="ml-2 block text-sm text-gray-900">
Show Line Numbers
</label>
</div>
</div>
<.button type="submit" class="w-full">
Update Editor Preferences
</.button>
</form>
</div>
<!-- Update Settings -->
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-semibold mb-4">Update Settings</h2>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span class="text-sm text-gray-600">Auto-check for Updates</span>
<button
phx-click="update_auto_check"
phx-value-enabled={!@update_settings["auto_check"]}
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 bg-gray-200"
>
<span class={[
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
@update_settings["auto_check"] && "translate-x-5"
]}>
<span class={[
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
@update_settings["auto_check"] && "opacity-0 duration-100 ease-out",
!@update_settings["auto_check"] && "opacity-100 duration-200 ease-in"
]}>
<svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12">
<path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<span class={[
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity",
@update_settings["auto_check"] && "opacity-100 duration-200 ease-in",
!@update_settings["auto_check"] && "opacity-0 duration-100 ease-out"
]}>
<svg class="h-3 w-3 text-primary-600" fill="currentColor" viewBox="0 0 12 12">
<path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
<!-- Cloud Settings -->
<div class="bg-white shadow rounded-lg p-6">
<h2 class="text-lg font-semibold mb-4">Cloud Settings</h2>
<form phx-submit="update_cloud_config" class="space-y-4">
<div class="space-y-2">
<div class="flex items-center">
<input
type="checkbox"
name="auto_sync"
value="true"
checked={@cloud_config["auto_sync"]}
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
/>
<label class="ml-2 block text-sm text-gray-900">
Enable Auto-sync
</label>
</div>
<.form_group
name="sync_interval"
label="Sync Interval (minutes)"
type="number"
value={@cloud_config["sync_interval"]}
min="1"
max="1440"
/>
<div class="flex items-center">
<input
type="checkbox"
name="notifications"
value="true"
checked={@cloud_config["notifications"]}
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
/>
<label class="ml-2 block text-sm text-gray-900">
Enable Notifications
</label>
</div>
<div class="flex items-center">
<input
type="checkbox"
name="error_reporting"
value="true"
checked={@cloud_config["error_reporting"]}
class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
/>
<label class="ml-2 block text-sm text-gray-900">
Enable Error Reporting
</label>
</div>
</div>
<.button type="submit" class="w-full">
Update Cloud Settings
</.button>
</form>
</div>
</div>
</div>
</div>