railsui 3.1.5 → 3.2.0

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/common/_social_auth_buttons.html.erb

@@ -0,0 +1,22 @@
+<!-- Social Auth Buttons -->
+<div class="space-y-3">
+  <%= button_to "#", class: "w-full gap-3 btn btn-white btn-lg" do %>
+    <%= icon "google", custom_path: "/railsui/icons/social/google.svg", class: "size-4 fill-current" %>
+    Continue with Google
+  <% end %>
+
+  <%= button_to "#", class: "w-full gap-3 btn btn-white btn-lg" do %>
+    <%= icon "github", custom_path: "/railsui/icons/social/github.svg", class: "size-4 fill-current" %>
+    Continue with GitHub
+  <% end %>
+</div>
+
+<!-- Divider -->
+<div class="relative">
+  <div class="absolute inset-0 flex items-center">
+    <div class="w-full border-t border-neutral-300 dark:border-neutral-600"></div>
+  </div>
+  <div class="relative flex justify-center text-sm">
+    <span class="px-2 bg-white text-neutral-500 dark:bg-neutral-900 dark:text-neutral-400">Or continue with email</span>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/help/_categories.html.erb

@@ -0,0 +1,82 @@
+<div class="py-10">
+  <div class="py-6">
+    <h2 class="h4">Browse Help Topics</h2>
+    <div class="prose prose-neutral dark:prose-invert">
+      <p>Find detailed guides and tutorials</p>
+    </div>
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+    <%= link_to "#", class: "card-muted" do %>
+      <div class="flex items-start gap-3">
+        <div class="size-8 bg-blue-100 rounded-lg flex items-center justify-center shrink-0">
+          <%= icon "book-open", class: "size-4 text-blue-600" %>
+        </div>
+        <div>
+          <h3 class="h6">Getting Started Guide</h3>
+          <p class="text-sm text-neutral-500 mt-1">Learn the basics of using Corgie AI effectively</p>
+        </div>
+      </div>
+    <% end %>
+
+    <%= link_to "#", class: "card-muted" do %>
+      <div class="flex items-start gap-3">
+        <div class="size-8 bg-green-100 rounded-lg flex items-center justify-center shrink-0">
+          <%= icon "cog-6-tooth", class: "size-4 text-green-600" %>
+        </div>
+        <div>
+          <h3 class="h6">Account Settings</h3>
+          <p class="text-sm text-neutral-500 mt-1">Manage your profile, preferences, and security</p>
+        </div>
+      </div>
+    <% end %>
+
+    <%= link_to "#", class: "card-muted" do %>
+      <div class="flex items-start gap-3">
+        <div class="size-8 bg-purple-100 rounded-lg flex items-center justify-center shrink-0">
+          <%= icon "credit-card", class:"size-4 text-purple-600" %>
+        </div>
+        <div>
+          <h3 class="h6">Billing & Subscriptions</h3>
+          <p class="text-sm text-neutral-500 mt-1">Payment methods, plans, and billing history</p>
+        </div>
+      </div>
+    <% end %>
+
+    <%= link_to "#", class: "card-muted" do %>
+      <div class="flex items-start gap-3">
+        <div class="size-8 bg-red-100 rounded-lg flex items-center justify-center shrink-0">
+          <%= icon "shield-check", class:"size-4 text-red-600" %>
+        </div>
+        <div>
+          <h3 class="h6">Privacy & Security</h3>
+          <p class="text-sm text-neutral-500 mt-1">Data protection, privacy settings, and security</p>
+        </div>
+      </div>
+    <% end %>
+
+    <%= link_to "#", class: "card-muted" do %>
+      <div class="flex items-start gap-3">
+        <div class="size-8 bg-yellow-100 rounded-lg flex items-center justify-center shrink-0">
+          <%= icon "code-bracket-square", class:"size-4 text-yellow-600" %>
+        </div>
+        <div>
+          <h3 class="h6">API Integration</h3>
+          <p class="text-sm text-neutral-500 mt-1">Developer resources and API documentation</p>
+        </div>
+      </div>
+    <% end %>
+
+    <%= link_to "#", class: "card-muted" do %>
+      <div class="flex items-start gap-3">
+        <div class="size-8 bg-indigo-100 rounded-lg flex items-center justify-center shrink-0">
+          <%= icon "question-mark-circle", class:"size-4 text-indigo-600" %>
+        </div>
+        <div>
+          <h3 class="h6">Troubleshooting</h3>
+          <p class="text-sm text-neutral-500 mt-1">Common issues and solutions</p>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/help/_faq.html.erb

@@ -0,0 +1,45 @@
+<div class="py-10">
+  <div class="py-6">
+    <h2 class="h3">Frequently Asked Questions</h2>
+    <div class="prose prose-neutral dark:prose-invert">
+      <p>Common questions and answers</p>
+    </div>
+  </div>
+  <div class="divide-y divide-neutral-300/70 dark:divide-neutral-700/80">
+    <div class="py-4 prose prose-neutral prose-headings:font-medium max-w-full dark:prose-invert">
+      <h4>How do I get started with Corgie AI?</h4>
+      <p>Simply type your question or request in the chat interface. Corgie AI can help with a wide range of tasks
+        including answering questions, writing assistance, code review, and creative brainstorming.</p>
+    </div>
+
+    <div class="py-4 prose prose-neutral prose-headings:font-medium max-w-full dark:prose-invert">
+      <h4>What are the usage limits for different plans?</h4>
+      <p>Free users get 20 messages per day, Pro users get 1,000 messages per month plus 5,000 API calls, and Enterprise
+        users have unlimited usage with priority support.</p>
+    </div>
+
+    <div class="py-4 prose prose-neutral prose-headings:font-medium max-w-full dark:prose-invert">
+      <h4>Is my data secure and private?</h4>
+      <p>Yes, we take data security seriously. All conversations are encrypted in transit and at rest. We don't share
+        your data with third parties, and you can delete your conversations at any time.</p>
+    </div>
+
+    <div class="py-4 prose prose-neutral prose-headings:font-medium max-w-full dark:prose-invert">
+      <h4>Can I use Corgie AI for business purposes?</h4>
+      <p>Absolutely! Corgie AI is perfect for business use cases including content creation, customer support, research,
+        and technical documentation. Consider upgrading to Pro or Enterprise for higher usage limits.</p>
+    </div>
+
+    <div class="py-4 prose prose-neutral prose-headings:font-medium max-w-full dark:prose-invert">
+      <h4>How do I cancel my subscription?</h4>
+      <p>You can cancel your subscription anytime from the Billing page. Your subscription will remain active until the
+        end of your current billing period.</p>
+    </div>
+  </div>
+
+  <%= link_to "#", class: "font-medium text-neutral-700 flex items-center gap-2 group dark:text-neutral-100" do %>
+    View all
+    <%= icon "arrow-right", class: "size-3 stroke-current group-hover:translate-x-1 transition-transform
+    group-hover:transition-transform duration-200" %>
+  <% end %>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/help/_quick_actions.html.erb

@@ -0,0 +1,46 @@
+<!-- Quick Actions -->
+<div class="py-10">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <div class="card">
+      <%= render "rui/shared/common/feature_card",
+        icon_name: "chat-bubble-left-right",
+        icon_class: "size-5 text-neutral-600",
+        icon_container_class: "size-12 bg-neutral-100",
+        title: "Getting Started",
+        title_class: "h6 font-medium my-1",
+        description: "Learn the basics of using Corgie AI",
+        button_text: "Read Guide",
+        button_class: "btn btn-primary",
+        button_url: "#"
+      %>
+    </div>
+
+    <div class="card">
+      <%= render "rui/shared/common/feature_card",
+        icon_name:"code-bracket",
+        icon_class: "size-5 text-green-600",
+        icon_container_class: "size-12 bg-green-100",
+        title: "API Documentation",
+        title_class: "h6 font-medium my-1",
+        description: "Integrate Corgie AI into your apps",
+        button_text: "View Docs",
+        button_class: "btn btn-primary",
+        button_url: "#"
+      %>
+    </div>
+
+    <div class="card">
+      <%= render "rui/shared/common/feature_card",
+        icon_name:"envelope",
+        icon_class: "size-5 text-orange-600",
+        icon_container_class: "size-12 bg-orange-100",
+        title: "Contact Support",
+        title_class: "h6 font-medium my-1",
+        description: "Get help from our team",
+        button_text: "Contact Us",
+        button_class: "btn btn-primary",
+        button_url: "#"
+      %>
+    </div>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/marketing/_career.html.erb

@@ -0,0 +1,9 @@
+<%# locals: (title:, location:, role_type:, href: "#") %>
+
+<div class="flex items-center justify-between py-4 border-b border-neutral-200 dark:border-neutral-700">
+  <div>
+    <h3 class="font-semibold text-neutral-900 dark:text-white"><%= title %></h3>
+    <p class="text-sm text-neutral-600 dark:text-neutral-400"><%= location %> &bull; <%= role_type %></p>
+  </div>
+  <%= link_to "Apply Now", href, class: "btn btn-primary btn-sm", target: :_blank %>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/marketing/_nav.html.erb

@@ -0,0 +1,57 @@
+<nav class="w-full px-6 py-6" data-controller="railsui-toggle">
+  <div class="flex items-center justify-between mx-auto max-w-7xl">
+    <%= link_to root_path, class: "flex items-center gap-2" do %>
+      <%= icon "logo.svg", custom_path: "/railsui/logo.svg", class: "size-6 shrink-0 fill-current dark:fill-neutral-100" %>
+      <span class="text-xl font-semibold text-neutral-900 dark:text-white"><%= Railsui.config.application_name || "Corgie" %></span>
+    <% end %>
+
+    <!-- Desktop Navigation -->
+    <div class="items-center hidden gap-4 md:flex">
+      <%= nav_link_to "Features", rui_features_path, class: "btn btn-link", active_class: "btn btn-muted" %>
+      <%= nav_link_to "Pricing", rui_pricing_path, class: "btn btn-link", active_class: "btn btn-muted" %>
+      <%= nav_link_to "Blog", rui_blog_path, class: "btn btn-link", active_class: "btn-muted" %>
+      <%= nav_link_to "About", rui_about_path, class: "btn btn-link", active_class: "btn btn-muted" %>
+      <%= nav_link_to "Sign in", rui_signin_path, class: "btn btn-link", active_class: "btn btn-muted" %>
+
+      <%= link_to "Try Corgie", rui_chat_new_path, class: "btn btn-dark" %>
+    </div>
+
+    <!-- Mobile Menu Toggle -->
+    <button class="flex flex-col items-center justify-center md:hidden size-8 group"
+      data-action="click->railsui-toggle#toggle" aria-label="Toggle menu" aria-expanded="false">
+      <span
+        class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 group-aria-expanded:rotate-45 group-aria-expanded:translate-y-1.5"></span>
+      <span
+        class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:opacity-0"></span>
+      <span
+        class="w-5 h-0.5 bg-neutral-800 dark:bg-neutral-200 transition-all duration-300 mt-1 group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-1.5"></span>
+    </button>
+  </div>
+
+  <!-- Mobile Navigation -->
+  <div class="hidden md:hidden relative z-20" data-railsui-toggle-target="toggleable" aria-hidden="true">
+    <% base_mobile_classes = "block px-3 py-2 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-700 rounded-lg transition-colors" %>
+    <% active_mobile_classes = "#{base_mobile_classes} bg-neutral-100 dark:bg-neutral-700" %>
+
+    <div
+      class="px-6 py-4 mt-4 bg-white border border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700 rounded-xl">
+      <div class="space-y-2">
+
+        <%= nav_link_to "Features", rui_features_path, class: base_mobile_classes, active_class: active_mobile_classes %>
+
+        <%= nav_link_to "Pricing", rui_pricing_path, class: base_mobile_classes, active_class: active_mobile_classes %>
+
+        <%= nav_link_to "Blog", rui_blog_path, class: base_mobile_classes, active_class: active_mobile_classes %>
+
+        <%= nav_link_to "About", rui_about_path, class: base_mobile_classes, active_class: active_mobile_classes %>
+
+        <div class="pt-2 mt-4 border-t border-neutral-200 dark:border-neutral-700">
+
+          <%= nav_link_to "Sign in", rui_signin_path, class: base_mobile_classes, active_class: active_mobile_classes %>
+
+          <%= link_to "Try Corgie", rui_chat_new_path, class: "btn btn-primary btn-lg w-full mt-2" %>
+        </div>
+      </div>
+    </div>
+  </div>
+</nav>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/marketing/_team_member_card.html.erb

@@ -0,0 +1,16 @@
+<%# locals:(name:, role:, description:, image_url:) %>
+
+<div class="card">
+  <div class="flex justify-center">
+    <%= image_tag image_url, alt: name, class: "mb-6 rounded-full size-20" %>
+  </div>
+  <div class="text-center">
+    <h3 class="mb-2 h5"><%= name %></h3>
+    <p class="mb-4 text-neutral-600 dark:text-neutral-400"><%= role %></p>
+    <div class="prose-sm prose prose-neutral dark:prose-invert">
+      <p>
+        <%= description %>
+      </p>
+    </div>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/_modal.html.erb

@@ -0,0 +1,84 @@
+<div aria-labelledby="settings" aria-modal="true" data-railsui-modal-target="container"
+  data-action="keyup@window->railsui-modal#closeWithEsc"
+  class="fixed inset-0 z-50 hidden p-4 overflow-y-auto dark:bg-black/60 backdrop-blur-sm bg-black/30">
+  <div class="relative flex items-center justify-center w-full h-screen">
+    <div
+      data-railsui-modal-target="content" data-transition-enter-active="transition ease-out duration-300"
+      data-transition-enter-from="transform opacity-0 scale-95"
+      data-transition-enter-to="transform opacity-100 scale-100"
+      data-transition-leave-active="transition ease-in duration-300"
+      data-transition-leave-from="transform opacity-100 scale-100"
+      data-transition-leave-to="transform opacity-0 scale-95"
+      class="hidden rounded-2xl shadow-xl max-w-4xl w-[680px] bg-white overflow-hidden outline-1 outline-neutral-300/90 dark:bg-neutral-900/80 dark:backdrop-blur-sm dark:outline-neutral-600/80 dark:shadow-black/90">
+
+      <div
+        class="md:flex max-h-[500px] overflow-y-auto md:h-[500px]" data-controller="railsui-tabs"
+        data-railsui-tabs-active-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg bg-neutral-200/90 dark:bg-neutral-700/80 hover:bg-neutral-100 dark:hover:bg-neutral-700/80 w-full text-sm dark:backdrop-blur-sm transition-colors duration-100"
+        data-railsui-tabs-inactive-tab="p-2 whitespace-nowrap flex items-center gap-3 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-700/80 dark:backdrop-blur-sm w-full text-sm transition-colors duration-100">
+
+        <!-- Sidebar Navigation -->
+        <div
+          class="flex flex-col w-full border-r bg-neutral-50 dark:bg-neutral-800/50 border-neutral-200 dark:border-neutral-700 shrink-0 md:w-45 ">
+
+          <!-- Close Button (Desktop) -->
+          <div class="md:py-3 py-2 px-2.5 md:block flex justify-end">
+            <button
+              data-action="click->railsui-modal#close"
+              class="flex items-center justify-center rounded-full size-8 hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+              aria-label="Close">
+              <%= icon "x-mark", class: "md:size-5 size-7 stroke-current" %>
+            </button>
+          </div>
+
+          <!-- Navigation Tabs -->
+          <nav
+            class="flex items-center px-2 pb-2 overflow-x-auto md:block md:py-0 md:space-y-1 md:flex-1 snap-x snap-mandatory shadow-transparent">
+            <%= render "rui/shared/settings/nav_item", label: "General", nav_icon: "cog-6-tooth" %>
+            <%= render "rui/shared/settings/nav_item", label: "Billing", nav_icon: "credit-card" %>
+            <%= render "rui/shared/settings/nav_item", label: "Notifications", nav_icon: "bell" %>
+            <%= render "rui/shared/settings/nav_item", label: "Personalization", nav_icon: "user-circle" %>
+            <%= render "rui/shared/settings/nav_item", label: "Data controls", nav_icon: "circle-stack" %>
+            <%= render "rui/shared/settings/nav_item", label: "Security", nav_icon: "lock-closed" %>
+          </nav>
+        </div>
+
+        <!-- Content Area -->
+        <div class="flex flex-col flex-1 md:overflow-hidden">
+          <!-- Tab Content -->
+          <div class="overflow-y-auto md:flex-1">
+
+            <!-- General Tab -->
+            <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+              <%= render "rui/shared/settings/panels/general" %>
+            </div>
+
+            <!-- Billing Tab -->
+            <div data-railsui-tabs-target="panel" class="p-4 md:p-6">
+              <%= render "rui/shared/settings/panels/billing" %>
+            </div>
+
+            <!-- Notifications Tab -->
+            <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+              <%= render "rui/shared/settings/panels/notifications" %>
+            </div>
+
+            <!-- Personalization Tab -->
+            <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+              <%= render "rui/shared/settings/panels/personalization" %>
+            </div>
+
+            <!-- Data Controls Tab -->
+            <div data-railsui-tabs-target="panel" class="hidden p-4 md:p-6">
+              <%= render "rui/shared/settings/panels/data_controls" %>
+            </div>
+
+            <!-- Security Tab -->
+            <div data-railsui-tabs-target="panel" class="hidden px-4 py-6">
+              <%= render "rui/shared/settings/panels/security" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/_nav_item.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (label: "Label", nav_icon: "cog-6-tooth") %>
+
+<button type="button"
+  data-railsui-tabs-target="tab" data-action="click->railsui-tabs#change"
+  class="flex items-center w-full gap-3 p-2 text-sm transition-colors duration-100 rounded-lg whitespace-nowrap hover:bg-neutral-100 dark:hover:bg-neutral-700/80 dark:backdrop-blur-sm">
+
+  <div class="flex items-center justify-center size-5">
+    <%= icon nav_icon, class: "size-5 stroke-current" %>
+  </div>
+
+  <span class="truncate">
+    <%= label %>
+  </span>
+</button>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/panels/_billing.html.erb

@@ -0,0 +1,120 @@
+<section class="relative text-sm md:min-h-[380px]">
+  <%= render "rui/shared/settings/panels/title", title: "Billing" %>
+
+  <!-- Current Plan -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Current Plan</label>
+        <p class="form-help">Pro Plan - $20/month</p>
+      </div>
+      <div class="flex items-center gap-3">
+        <span class="rounded bg-green-100 text-green-800 font-medium px-1.5 py-0.5 text-xs dark:text-green-300 dark:bg-green-500/20 inline-flex items-center gap-1">
+          Active
+        </span>
+        <button class="btn btn-primary">
+          Change Plan
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Usage This Month -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Usage This Month</label>
+        <p class="form-help">2,450 / 10,000 messages used</p>
+      </div>
+      <div class="w-32">
+        <div class="w-full h-2 rounded-full bg-neutral-200 dark:bg-neutral-700">
+          <div class="h-2 bg-blue-600 rounded-full" style="width: 24.5%"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Next Billing Date -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <label class="w-1/3 form-label">Next Billing Date</label>
+      <span class="text-neutral-600 dark:text-neutral-400">March 15, 2024</span>
+    </div>
+  </div>
+
+  <!-- Payment Method -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Payment Method</label>
+        <p class="form-help">•••• •••• •••• 4242 (Visa)</p>
+      </div>
+      <button class="btn btn-ghost">
+        Update
+      </button>
+    </div>
+  </div>
+
+  <!-- Billing Address -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Billing Address</label>
+        <p class="form-help">123 Main St, San Francisco, CA 94105</p>
+      </div>
+      <button class="btn btn-ghost">
+        Edit
+      </button>
+    </div>
+  </div>
+
+  <!-- Auto-renewal -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Auto-renewal</label>
+        <p class="form-help">Automatically renew your subscription</p>
+      </div>
+      <input type="checkbox" id="auto-renewal" class="form-input-switch" checked>
+      <label for="auto-renewal"></label>
+    </div>
+  </div>
+
+  <!-- Billing Notifications -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Billing Notifications</label>
+        <p class="form-help">Receive email notifications for billing events</p>
+      </div>
+      <input type="checkbox" id="billing-notifications" class="form-input-switch" checked>
+      <label for="billing-notifications"></label>
+    </div>
+  </div>
+
+  <!-- Invoice History -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Invoice History</label>
+        <p class="form-help">View and download past invoices</p>
+      </div>
+      <button class="flex items-center gap-2 rounded-md btn btn-ghost">
+        View History
+      </button>
+    </div>
+  </div>
+
+  <!-- Cancel Subscription -->
+  <div class="py-3">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="text-red-600 form-label dark:text-red-400">Cancel Subscription</label>
+        <p class="form-help">Cancel your subscription and downgrade</p>
+      </div>
+      <button class="btn btn-danger">
+        Cancel
+      </button>
+    </div>
+  </div>
+</section>

data/lib/generators/railsui/install/templates/themes/corgie/views/rui/shared/settings/panels/_data_controls.html.erb

@@ -0,0 +1,69 @@
+<section class="relative text-sm md:min-h-[380px]">
+  <%= render "rui/shared/settings/panels/title", title: "Data Controls" %>
+
+  <!-- Data Export -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Export Data</label>
+        <p class="form-help">Download all your data in JSON format</p>
+      </div>
+      <button class="flex items-center gap-2 rounded-md btn btn-ghost">
+        Export
+      </button>
+    </div>
+  </div>
+
+  <!-- Data Retention -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <label for="data-retention" class="w-1/2 form-label md:w-1/3">Data Retention</label>
+      <select id="data-retention" class="w-32 pr-8 text-center truncate form-select form-select-minimal text-sm">
+        <option value="30">30 days</option>
+        <option value="90">90 days</option>
+        <option value="180">6 months</option>
+        <option value="365">1 year</option>
+        <option value="forever">Forever</option>
+      </select>
+    </div>
+    <p class="form-help">How long to keep your conversation history</p>
+  </div>
+
+  <!-- Auto-delete Conversations -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Auto-remove old conversations</label>
+        <p class="form-help">Remove conversations older than retention period</p>
+      </div>
+      <input type="checkbox" id="auto-delete" class="form-input-switch">
+      <label for="auto-delete"></label>
+    </div>
+  </div>
+
+  <!-- Clear All Data -->
+  <div class="py-3 border-b border-neutral-200 dark:border-neutral-700">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="text-red-600 form-label dark:text-red-400">Clear All Data</label>
+        <p class="form-help">Permanently delete all conversations and settings</p>
+      </div>
+      <button
+        class="flex items-center gap-2 text-red-600 rounded-md btn btn-ghost dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20">
+        Clear
+      </button>
+    </div>
+  </div>
+
+  <!-- Data Sharing -->
+  <div class="py-3">
+    <div class="flex items-center justify-between gap-3">
+      <div class="flex-1">
+        <label class="form-label">Share usage data for improvements</label>
+        <p class="form-help">Help improve the service by sharing anonymous usage statistics</p>
+      </div>
+      <input type="checkbox" id="data-sharing" class="form-input-switch" checked>
+      <label for="data-sharing"></label>
+    </div>
+  </div>
+</section>