railsui 3.1.0

data/lib/generators/railsui/install/templates/themes/hound/views/rui/pages/message.html.erb

@@ -0,0 +1,212 @@
+<% content_for :header do %>
+  <%= render "rui/shared/admin/nav" do %>
+    <div class="flex justify-center py-4">
+      <nav aria-label="breadcrumb" class="font-medium flex text-slate-100 dark:text-slate-200 text-sm">
+        <ol class="flex items-center space-x-3 list-none m-0 p-0">
+          <li>
+            <%= link_to "Dashboard", rui_dashboard_path, class: "hover:underline hover:text-slate-300 dark:hover:text-slate-400" %>
+          </li>
+          <li class="flex gap-3">
+            <div class="flex items-center">
+              <span class="text-slate-500 dark:text-slate-500">/</span>
+            </div>
+            <%= link_to "Messages", rui_messages_path, class: "hover:underline hover:text-slate-300 dark:hover:text-slate-400" %>
+          </li>
+          <li class="flex gap-3">
+            <div class="flex items-center">
+              <span class="text-slate-500 dark:text-slate-500">/</span>
+            </div>
+            <%= link_to "Thank your for your help!", rui_message_path, class: "text-primary-300 dark:text-primary-500 line-clamp-1", "aria-current": "page" %>
+          </li>
+        </ol>
+      </nav>
+    </div>
+  <% end %>
+<% end %>
+
+<div class="sm:mt-16 mt-8 relative container mx-auto">
+  <div class="flex justify-between absolute sm:left-1 sm:right-1 sm:top-10 top-0 left-2 right-2">
+    <%= link_to "#", class: "p-2 rounded-lg hover:bg-slate-100 hover:border-slate-300 border border-transparent flex items-center justify-center dark:hover:bg-slate-700 dark:hover:border-slate-600/50" do %>
+      <%= icon "chevron-left", class: "size-6 text-slate-600 dark:text-slate-400" %>
+    <% end %>
+
+    <%= link_to "#", class: "p-2 rounded-lg hover:bg-slate-100 hover:border-slate-300 border border-transparent flex items-center justify-center dark:hover:bg-slate-700 dark:hover:border-slate-600/50" do %>
+      <%= icon "chevron-right", class: "size-6 text-slate-600 dark:text-slate-400" %>
+    <% end %>
+  </div>
+
+  <div class="flex justify-center items-center -space-x-4">
+    <%= image_tag demo_avatar_url, class: "rounded-full  border-2 border-white dark:border-slate-900 sm:size-14 size-12", alt: "John Doe" %>
+    <%= image_tag demo_avatar_url(id: "41", variant: "men"), class: "rounded-full sm:size-14 size-12 border-2 border-white dark:border-slate-900", alt: "John Doe" %>
+  </div>
+
+  <div class="w-full text-center mt-3">
+    <%= link_to "Onboarding Improvments", rui_project_path, class: "text-primary-600 hover:text-primary-700 text-sm font-medium hover:underline dark:text-primary-400 dark:hover:text-primary-500" %>
+
+    <h1 class="sm:mt-4 mt-2 md:h1 h2 line-clamp-2">Thank You for Your Help!</h1>
+
+    <time class="text-sm text-slate-500 sm:mt-4 mt-2 block" datetime="2023-07-01T12:03">Saturday, Jul 1 at 12:03 PM</time>
+  </div>
+</div>
+
+<div class="max-w-6xl mx-auto px-4 sm:my-10 my-6 pb-16">
+  <div class="border rounded-lg shadow shadow-slate-300/30 bg-white pt-10 sm:pb-16 pb-10 sm:px-16 px-6 dark:bg-slate-800 dark:shadow-slate-950 dark:border-none">
+    <div class="sm:flex justify-between items-center flex-1">
+      <div class="flex items-center space-x-6">
+        <%= image_tag demo_avatar_url(id: "41", variant: "men"), class: "rounded-full size-16", alt: "Matthew Martinez" %>
+        <div>
+          <p class="font-semibold text-slate-800 dark:text-slate-200">Matthew Martinez</p>
+          <p class="text-sm text-slate-500 dark:text-slate-400">Notified 1 Person</p>
+          <time class="text-xs text-slate-500/60 dark:text-slate-300/50 sm:mt-4 mt-2" datetime="2023-07-01T12:03">Saturday, Jul 1 at 12:03PM</time>
+        </div>
+      </div>
+
+      <div class="flex items-center space-x-4 relative sm:mt-4 mt-4">
+        <button class="p-1 rounded focus:ring-2   focus:ring-slate-100 group dark:focus:ring-slate-600/50">
+          <%= icon "star", class: "size-6 text-slate-500 group-hover:text-amber-400 group-active:text-amber-400" %>
+        </button>
+
+        <button class="p-1 rounded focus:ring-2 focus:ring-slate-100 group dark:focus:ring-slate-600/50">
+          <%= icon "arrow-uturn-left", class: "size-6 text-slate-500 group-hover:text-blue-400 group-active:text-blue-400" %>
+        </button>
+
+        <div class="sm:relative" data-controller="railsui-dropdown">
+          <button class="flex items-center justify-center group focus:ring-4 focus:ring-primary-50 p-1 rounded-lg dark:focus:ring-slate-600/50" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+            <%= icon "ellipsis-horizontal", class: "size-6 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+          </button>
+
+          <ul data-railsui-dropdown-target="menu" class="hidden transition transform origin-top-right absolute right-0 top-10 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 md:w-[200px] w-full z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 md:text-sm text-base font-medium text-slate-600 dark:text-slate-200" 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-200"
+            data-transition-leave-from="transform opacity-100 scale-100"
+            data-transition-leave-to="transform opacity-0 scale-95">
+            <li>
+              <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+                <%= icon "link", class: "shrink-0 size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+                <span>Copy link</span>
+              <% end %>
+            </li>
+
+            <li>
+              <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+                <%= icon "arrow-small-right", class: "shrink-0 size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+                <span>Forward</span>
+              <% end %>
+            </li>
+
+            <li>
+              <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+                <%= icon "eye-slash", class: "size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+
+                <span>Mark unread</span>
+              <% end %>
+            </li>
+
+            <li>
+              <%= link_to "#", class: "py-2 px-4 hover:text-red-600 focus:text-red-600 flex items-center space-x-2 w-full group text-slate-600 dark:text-slate-300 dark:hover:text-red-400" do %>
+                <%= icon "trash", class: "shrink-0 w-6 h-5 text-slate-500 group-hover:text-red-600 dark:group-hover:text-red-400" %>
+                <span>Delete</span>
+              <% end %>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div class="sm:pl-[5.5rem] prose lg:prose-lg prose-slate sm:pt-10 pt-5 dark:prose-invert prose-a:text-primary-600 prose-a:hover:text-primary-700 prose-a:hover:underline prose-a:font-medium max-w-full sm:mb-16 mb-8 dark:prose-a:text-primary-400 dark:prose-a:hover:text-primary-500">
+      <div class="flex items-center gap-2 m-0">
+        <span>Hi</span>
+        <%= image_tag demo_avatar_url, class: "size-6 rounded-full !mb-0 !mt-0" %>
+        <span>John,</span>
+      </div>
+      <p>Find the attached file containing the mockup. We would love to hear your thoughts, suggestions, and any improvements you might recommend. Your feedback will play a significant role in refining the design and making it even better. I posted another message for the team <%= link_to "here", "#" %>.</p>
+    </div>
+
+    <div class="sm:pl-20 mt-10">
+      <%= link_to "#", class: "inline-flex items-center space-x-2 rounded-lg py-2 px-3 hover:bg-slate-50/25 hover:border-slate-200 border focus:ring-4 focus:ring-primary-50/50 group border-slate-200/80 bg-white hover:shadow-xs transition dark:border-none dark:bg-slate-700/30 dark:text-slate-500 dark:hover:bg-slate-900/50 dark:focus:ring-slate-600/20" do %>
+        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAEnklEQVR4nO2b6UtVQRiH/Ve6bdAGBVFCy4eKdvrWLcu0xTSsKNojMCrTylYiooygKAPDFk2I9n2hIiwrixYrSzMzzawc9RfDfPF4zr3da/ec986c9wfz4S4c4XnOvO+cmWtCAofD4XA4HA6nC0EwAK3G1G65RokmBxr0uQRymEGfSyAHGYxstB3bZqYEarCIcIiaz2ZK0EmAMFGCbgKEaRJ0FCBMkqCrAGGKBJ0FCBMk6C5A6C7BBAFCZwmmCBC6SjBJgNBRgmkChG4STBQgdJJgqgChiwSTBQgdJJguQMS7BD8IEPEswS8CRAgJ1Px9JUA4SKDmr40AuDSo+bMA6lDfgeAZQA8BXILoQYBoUFcgLkHUob4DwTOAHgK4BHkEYeEI4FoRUP8FaPkDVD4H9q9iAZ7AXzQSaKiDY45tIZPgnx5w4ThC5nczkDaYBbgGf1p3oLkJYZO/jgW4JiAj0Q785B7razlDuAS5JGDZWLuA3Yutr2+cZgGu3YFpg+0Cjm+1vr56kgW41wN6AL9+WoE/usIlyNNV0JNbVuCdhRQ4HBl6MPwjoHA3wiYvgwW4KmDlxPAClo5hAa7PgvcVzvCbfwDTe7IA1wUczXEWIBsyQf33Vw8IBoDU/kBTg10A7wV5KOHUPruA3Lk8AzwTsG2+XcCze2q/iEuQBwKuFDr3gf2rWYDr8JN6Ao3fnAU0fQcyh3kuwV9NeFMywub5fc+Xo/4ScP2UFfj3WudtahbgAvzUAerkq2M2zADKblrfa29XW9U8A2Is4MBaK+jqSrXySR9qPyuWotZM4RIUUwFvy62QT2y39oZWYf38Rz2wapL1GrI/ZA4H1k8DtqYBOxeqZ4jVk4GkXtwDEAr+hiQrXAlbHlN2/M7eZar8dIxcMRXkATfPAB9e2SV1njWXTkR9uO+PJvzgghXW7RLn7507hP9ObZUqaywgoCAsGQW0t1khZQXVZ7JsbJwJFB8EPrxEzBLFAb/5M+B6kRXOx1eqbsszYFnnuxJZiuQJ261i4G4pUPnCXrpYQABYOhpoa+0i5Fag4Wvoz0UL8OmN6g2NnURKsSwgoJpnNJFL0/NH1IadfG5I7hP+F3Wh8viazwWkDwFK8iO7+989Awp3ASsmhL7e5lTgdVlk8OVhfxTPEGYJyEgESg8Df36Fh/StGjh7AFg+LrrrZ6cAFwuAumr7NeXfvH8eWDE+qmuaISC5D1C0F2j5HR780ztAXnpsNtxm9VM9Rh72y4czudPahevoLyA7RdXuf63NJahYzrYYDX0FzOqrlpKRJGc2OWizBMgmK5tnJJH/ERMHoM0RMGcgUPU6IvaQ+/3zBpFDNkuA/Bm5U40XLfb3d2SSAzZLQEo/+9q+uhKoeW+HL5eLcQDYLAFyuRdJKh4CM3qTwzVPgPydf31NePhvy1WfiAO45gmQY/sCtVHmlLulwNz4brr6C5Aja6p6qv3ZqH7Z/OiyeiCLA6D+EGDQSKAONQCwAHoI4BlADwJEg7oCcQmiDvUdCJ4B9BDAJYgeBIgGdQXiEkQd6jsQPAPoIYBLED0IEA3qCsThcDgcDoeToGX+ArpFl2v/8LnNAAAAAElFTkSuQmCC" alt="PDF" class="w-9">
+        <div>
+          <p class="font-medium text-sm dark:text-slate-400">mockup.pdf</p>
+          <p class="text-sm text-slate-500">1.2 MB</p>
+        </div>
+        <div class="pl-10">
+          <%= icon "arrow-down-tray", class: "size-6 text-slate-300 group-focus:text-slate-400 group-hover:text-slate-400 dark:group-hover:text-slate-400 dark:text-slate-500 dark:group-focus:text-slate-400" %>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="border-t mt-10 sm:py-16 py-10 sm:-mx-16 sm:px-16 -mx-6 px-6 dark:border-slate-700">
+      <div class="relative" data-controller="railsui-dropdown">
+        <button class="flex items-center justify-center group focus:ring-4 focus:ring-primary-50 p-1 rounded-lg absolute top-0 right-0 dark:focus:ring-slate-600/50" data-action="click->railsui-dropdown#toggle click@window->railsui-dropdown#hide">
+          <%= icon "ellipsis-horizontal", class: "size-6 text-slate-500 group-hover:text-primary-600" %>
+        </button>
+        <ul data-railsui-dropdown-target="menu" class="hidden transition transform origin-top-right absolute right-0 top-10 bg-white rounded-lg shadow-xl shadow-slate-900/10 border border-slate-200 md:w-[200px] w-full z-50 py-2 dark:bg-slate-700 dark:shadow-slate-900/50 dark:border-slate-500/60 md:text-sm text-base font-medium text-slate-600 dark:text-slate-200"
+          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-200"
+          data-transition-leave-from="transform opacity-100 scale-100"
+          data-transition-leave-to="transform opacity-0 scale-95">
+          <li>
+            <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+              <%= icon "pencil-square", class: "shrink-0 size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+              <span>Edit</span>
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to "#", class: "px-4 py-[.4rem] hover:text-primary-600 dark:hover:text-primary-300 group flex items-center justify-start gap-3" do %>
+              <%= icon "link", class: "shrink-0 size-5 text-slate-500 group-hover:text-primary-600 dark:group-hover:text-primary-400" %>
+              <span>Copy link</span>
+            <% end %>
+          </li>
+
+          <li>
+            <%= link_to "#", class: "py-2 px-4 hover:text-red-600 focus:text-red-600 flex items-center space-x-2 w-full group text-slate-600 dark:text-slate-300 dark:hover:text-red-400" do %>
+              <%= icon "trash", class: "shrink-0 w-6 h-5 text-slate-500 group-hover:text-red-600 dark:group-hover:text-red-400" %>
+
+              <span>Delete</span>
+            <% end %>
+          </li>
+        </ul>
+      </div>
+
+      <div class="sm:flex items-start">
+        <div class="sm:-mt-4 sm:block hidden shrink-0">
+          <time class="text-sm text-slate-500 sm:mt-4 mt-2 block" datetime="2023-07-02T12:03">Jul 2</time>
+        </div>
+        <div class="sm:pl-12 flex items-start space-x-6">
+          <%= image_tag demo_avatar_url(id: "22", variant: "men"), class: "rounded-full sm:w-14 w-102 sm:h-14 h-12" %>
+          <div class="prose prose-slate dark:prose-invert prose-a:text-primary-600 prose-a:hover:text-primary-700 prose-a:hover:underline prose-a:font-medium max-w-full">
+            <div class="flex items-center space-x-2 m-0">
+              <span>Hey</span>
+              <%= image_tag demo_avatar_url(id: "41", variant: "men"), alt: "Avatar", class: "size-6 rounded-full !mb-0 !mt-0" %>
+              <span>Matthew,</span>
+            </div>
+            <p>Thanks for sharing the mockup! I've downloaded the file and will take a look right away. I appreciate the opportunity to provide feedback and contribute to refining the design. I'll carefully review it and jot down any thoughts, suggestions, or improvements that come to mind. Expect my feedback shortly.</p>
+
+            <p>By the way, I noticed your message to the team; I'll head over there and share my input as well. Let's collaborate to make this design shine!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- New comment -->
+    <div class="border-t mt-10 sm:py-16 py-10 sm:-mx-16 sm:px-16 -mx-6 px-6 dark:border-slate-700">
+      <div class="sm:flex items-start">
+        <div class="sm:-mt-4 sm:block hidden shrink-0">
+          <time class="text-sm text-slate-500 sm:mt-4 mt-2 block" datetime="2023-07-02T12:03">Jul 2</time>
+        </div>
+
+        <div class="sm:pl-12 flex-1 sm:flex items-start sm:space-x-6 sm:pr-16">
+          <%= image_tag demo_avatar_url(id: "22", variant: "men"), class: "rounded-full sm:w-14 w-8 sm:h-14 h-8 sm:mb-0 mb-3" %>
+
+          <!-- ActionText -->
+          <div class="sm:flex-1 w-full">
+            <textarea class="lg:border-transparent lg:border lg:shadow-none lg:focus:form-input form-input lg:focus:border w-full resize-none min-h-[110px] peer" placeholder="Type a reply"></textarea>
+            <input type="submit" class="sm:peer-focus:block sm:hidden sm:peer-active:block sm:peer-visited:block btn btn-primary mt-3 block transiton duration-200"  value="Reply"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/pages/messages.html.erb

@@ -0,0 +1,200 @@
+<% content_for :header do %>
+  <%= render "rui/shared/admin/nav", { header_title: "Messages" } do %>
+    <%= render "rui/shared/admin/create_dropdown" %>
+  <% end %>
+<% end %>
+
+<div class="bg-white border-b dark:bg-slate-800/50 dark:border-b dark:border-slate-700 px-4">
+  <div class="container mx-auto sm:flex flex-wrap justify-between items-center">
+    <nav role="messages nav">
+      <ul
+        class="flex items-center sm:justify-start justify-between sm:space-x-1 py-2 text-slate-600 sm:overflow-auto overflow-y-hidden scroll-smooth snap-start scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-gray-100/50 scrollbar-thumb-rounded">
+        <li class="flex justify-center items-center sm:block">
+          <%= link_to "#", class: "py-2 px-4 bg-slate-50 dark:bg-slate-900 rounded-lg transition ease-in-out duration-300 text-primary-600 dark:text-primary-400 font-medium flex items-center gap-2 dark:hover:bg-slate-900/80" do %>
+            <%= icon "inbox-arrow-down", class:"sm:size-5 size-8 text-primary-600 dark:text-primary-400 stroke-current" %>
+
+            <span class="sm:block hidden">Inbox</span>
+            <span class="rounded bg-primary-600 dark:bg-primary-500 text-white px-1 py-px text-xs font-semibold">3</span>
+          <% end %>
+        </li>
+        <li class="flex justify-center items-center sm:block">
+          <%= link_to "#", class: "py-2 px-4 rounded-lg transition ease-in-out duration-300 hover:bg-slate-50 hover:text-primary-600 dark:hover:text-primary-400 font-medium flex items-center gap-2 group dark:text-slate-300 dark:hover:bg-slate-900" do %>
+            <%= icon "check", class:"sm:size-5 size-8  text-slate-600 group-hover:text-primary-600 dark:group-hover:text-primary-400 dark:text-slate-400" %>
+            <span class="sm:block hidden">Sent</span>
+          <% end %>
+        </li>
+        <li class="flex justify-center items-center sm:block">
+
+          <%= link_to "#", class: "py-2 px-4 rounded-lg transition ease-in-out duration-300 hover:bg-slate-50 hover:text-primary-600 font-medium flex items-center gap-2 group dark:hover:text-primary-400 dark:text-slate-300 dark:hover:bg-slate-900" do %>
+            <%= icon "document", class:"sm:size-5 size-8 text-slate-600 group-hover:text-primary-600 dark:text-slate-400 dark:group-hover:text-primary-400" %>
+            <span class="sm:block hidden">Drafts</span>
+          <% end %>
+        </li>
+        <li class="flex justify-center items-center sm:block">
+
+          <%= link_to "#", class: "py-2 px-4 rounded-lg transition ease-in-out duration-300 hover:bg-slate-50 hover:text-primary-600 font-medium flex items-center gap-2 group dark:hover:text-primary-400 dark:text-slate-300 dark:hover:bg-slate-900" do %>
+            <%= icon "star", class:"sm:size-5 size-8 text-slate-600 stroke-current group-hover:text-primary-600 dark:text-slate-400 dark:group-hover:text-primary-400" %>
+            <span class="sm:block hidden">Starred</span>
+          <% end %>
+        </li>
+        <li class="flex justify-center items-center sm:block">
+          <%= link_to "#", class: "py-2 px-4 rounded-lg transition ease-in-out duration-300 hover:bg-slate-50 hover:text-primary-600 font-medium flex items-center gap-2 group dark:text-slate-300 dark:hover:bg-slate-900 dark:hover:text-primary-400" do %>
+            <%= icon "user-group", class:"sm:size-5 size-8 text-slate-600 group-hover:text-primary-600 dark:text-slate-400 dark:group-hover:text-primary-400" %>
+            <span class="sm:block hidden">Shared</span>
+          <% end %>
+        </li>
+      </ul>
+    </nav>
+
+    <hr class="lg:hidden block my-2 dark:border-slate-700" />
+
+    <div class="relative lg:w-auto w-full lg:mt-0 md:mt-0 mt-4 sm:mt-0 lg:mb-0 mb-4">
+      <%= icon "magnifying-glass", class: "size-5 text-slate-500/90 stroke-current absolute left-3 top-3" %>
+      <input type="search" placeholder="Search" class="form-input lg:w-[250px] pl-10 focus:shadow-inner">
+    </div>
+  </div>
+</div>
+
+<div class="container mx-auto">
+  <div class="flex items-center mb-6 mt-10">
+    <div class="h-px w-1/2 bg-gradient-to-l from-slate-200 dark:from-slate-600"></div>
+    <h2 class="text-base text-slate-600 font-semibold px-4 whitespace-nowrap dark:text-slate-300">Previously seen</h2>
+    <div class="h-px w-1/2 bg-gradient-to-r from-slate-200 dark:from-slate-600"></div>
+  </div>
+</div>
+
+<div class="max-w-6xl mx-auto px-4">
+  <div class="dark:border-none border rounded-lg shadow shadow-slate-300/30 dark:shadow-none">
+    <ul class="divide-y dark:divide-slate-700">
+
+      <li class="relative first-of-type:rounded-b-none first-of-type:rounded-t-lg last-of-type:rounded-t-none last-of-type:rounded-b-lg hover:bg-slate-50/50 dark:hover:bg-slate-700/80 bg-white  dark:bg-slate-800">
+        <time class="absolute top-2 right-2 text-[11px] text-slate-400"><%= Date.today.strftime("%b %d, %Y") %></time>
+        <%= conditional_link_to(:rui_message_path, class: "flex items-start sm:items-center flex-wrap gap-3 w-full p-6") do %>
+
+          <div class="size-[9px] rounded-full bg-blue-600 sm:mt-0 mt-7"></div>
+
+          <%= image_tag demo_avatar_url(id: "10", variant: "men"), alt: "Christopher Robinson", class: "size-14 rounded-full object-fill object-center shrink-0" %>
+
+          <div class="flex-1">
+            <h3 class="leading-snug font-semibold text-base text-slate-800 tracking-tight dark:text-slate-300 mb-1">Exciting News: A new opportunity</h3>
+            <p class="text-slate-500 text-sm line-clamp-2 dark:text-slate-400"><span class="font-medium">Christopher Robin</span> &mdash; I hope this email finds you well. We are excited to share with you the latest opportunity we have created. Attached to this email, you will find the file containing the outline. We value your opinion and expertise and would greatly ap...</p>
+          </div>
+        <% end %>
+      </li>
+
+      <li class="relative first-of-type:rounded-b-none first-of-type:rounded-t-lg last-of-type:rounded-t-none last-of-type:rounded-b-lg hover:bg-slate-50/50 dark:hover:bg-slate-700/80 bg-white  dark:bg-slate-800">
+        <time class="absolute top-2 right-2 text-[11px] text-slate-400"><%= Date.today.strftime("%b %d, %Y") %></time>
+        <%= conditional_link_to(:rui_message_path, class: "flex items-start sm:items-center flex-wrap gap-3 w-full p-6") do %>
+
+          <div class="size-[9px] rounded-full bg-blue-600 sm:mt-0 mt-7"></div>
+
+          <%= image_tag demo_avatar_url(id: "22", variant: "women"), alt: "Emily Sands", class: "size-14 rounded-full object-fill object-center shrink-0" %>
+
+          <div class="flex-1">
+            <h3 class="leading-snug font-semibold text-base text-slate-800 tracking-tight dark:text-slate-300 mb-1">Request for Additional Resources</h3>
+            <p class="text-slate-500 text-sm line-clamp-2 dark:text-slate-400"><span class="font-medium">Emily Sands</span> &mdash; Hello John, I hope this email finds you well. I wanted to discuss the current workload of our team and the need for additional resources. Can we schedule a meeting to address this issue? Best regards, Emily</p>
+          </div>
+        <% end %>
+      </li>
+
+      <li class="relative first-of-type:rounded-b-none first-of-type:rounded-t-lg last-of-type:rounded-t-none last-of-type:rounded-b-lg hover:bg-slate-50/50 dark:hover:bg-slate-700/80 bg-white  dark:bg-slate-800">
+        <time class="absolute top-2 right-2 text-[11px] text-slate-400"><%= Date.today.strftime("%b %d, %Y") %></time>
+        <%= conditional_link_to(:rui_message_path, class: "flex items-start sm:items-center flex-wrap gap-3 w-full p-6") do %>
+          <div class="size-[9px] rounded-full bg-blue-600 sm:mt-0 mt-7"></div>
+          <%= image_tag demo_avatar_url(id: "42", variant: "men"), alt: "Mathew Martinez", class: "size-14 rounded-full object-fill object-center shrink-0" %>
+          <div class="flex-1">
+            <h3 class="leading-snug font-semibold text-base text-slate-800 tracking-tight dark:text-slate-300 mb-1">Thank You for Your Help!</h3>
+            <p class="text-slate-500 text-sm line-clamp-2 dark:text-slate-400">
+              <span class="font-medium">Mathew Martinez</span> &mdash; I hope this email finds you well. I wanted to provide you with an update on the progress of Rails UI, which we've been working on diligently for the past few weeks. Firstly, I'm pleased to inform you that our development team has successfully completed the initial phase of the project. We have successfully implemented the core functionalities and conducted thorough testing to ensure the stability and reliability of the software.
+            </p>
+          </div>
+        <% end %>
+      </li>
+    </ul>
+  </div>
+</div>
+
+<div class="container mx-auto">
+  <div class="flex items-center mb-6 mt-10">
+    <div class="h-px w-1/2 bg-gradient-to-l from-slate-200 dark:from-slate-600"></div>
+    <h2 class="text-base text-slate-600 font-semibold px-4 whitespace-nowrap dark:text-slate-300">Previously seen</h2>
+    <div class="h-px w-1/2 bg-gradient-to-r from-slate-200 dark:from-slate-600"></div>
+  </div>
+</div>
+
+<div class="max-w-6xl mx-auto px-4 mb-10">
+  <div class="border rounded-lg shadow shadow-slate-300/30 dark:border-none dark:shadow-none">
+    <ul class="divide-y dark:divide-slate-700">
+      <li class="relative first-of-type:rounded-b-none first-of-type:rounded-t-lg last-of-type:rounded-t-none last-of-type:rounded-b-lg hover:bg-slate-50/50 dark:hover:bg-slate-700/80 bg-white  dark:bg-slate-800">
+        <time class="absolute top-2 right-2 text-[11px] text-slate-400"><%= Date.today.strftime("%b %d, %Y") %></time>
+        <%= conditional_link_to(:rui_message_path, class: "flex items-start sm:items-center flex-wrap gap-3 w-full p-6") do %>
+
+          <%= image_tag demo_avatar_url(id: "10", variant: "men"), alt: "James Garner", class: "size-14 rounded-full object-fill object-center shrink-0" %>
+
+          <div class="flex-1">
+            <h3 class="leading-snug font-semibold text-base text-slate-800 tracking-tight dark:text-slate-300 mb-1">Congratulations on the Successful Launch</h3>
+            <p class="text-slate-500 text-sm line-clamp-2 dark:text-slate-400"><span class="font-medium">James Garner</span> &mdash; Dear John, I'm thrilled to share the news that our latest product launch was a great success. We've received positive feedback and achieved impressive sales figures. Thank you for your guidance and support throughout the process. Best regards, James.</p>
+          </div>
+        <% end %>
+      </li>
+
+      <li class="relative first-of-type:rounded-b-none first-of-type:rounded-t-lg last-of-type:rounded-t-none last-of-type:rounded-b-lg hover:bg-slate-50/50 dark:hover:bg-slate-700/80 bg-white  dark:bg-slate-800">
+        <time class="absolute top-2 right-2 text-[11px] text-slate-400"><%= Date.today.strftime("%b %d, %Y") %></time>
+        <%= conditional_link_to(:rui_message_path, class: "flex items-start sm:items-center flex-wrap gap-3 w-full p-6") do %>
+
+          <%= image_tag demo_avatar_url(id: "45", variant: "women"), alt: "Jane Anderson", class: "size-14 rounded-full object-fill object-center shrink-0" %>
+
+          <div class="flex-1">
+            <h3 class="leading-snug font-semibold text-base text-slate-800 tracking-tight dark:text-slate-300 mb-1">Urgent IT Support Required</h3>
+            <p class="text-slate-500 text-sm line-clamp-2 dark:text-slate-400"><span class="font-medium">Jane Anderson</span> &mdash;
+              Dear John, I'm experiencing technical issues with my computer and urgently need assistance to resolve the problem. Please prioritize this request as it is affecting my productivity.</p>
+          </div>
+        <% end %>
+      </li>
+
+      <li class="relative first-of-type:rounded-b-none first-of-type:rounded-t-lg last-of-type:rounded-t-none last-of-type:rounded-b-lg hover:bg-slate-50/50 dark:hover:bg-slate-700/80 bg-white  dark:bg-slate-800">
+        <time class="absolute top-2 right-2 text-[11px] text-slate-400"><%= Date.today.strftime("%b %d, %Y") %></time>
+        <%= conditional_link_to(:rui_message_path, class: "flex items-start sm:items-center flex-wrap gap-3 w-full p-6") do %>
+
+          <%= image_tag demo_avatar_url(id: "42", variant: "women"), alt: "April Marks", class: "size-14 rounded-full object-fill object-center shrink-0" %>
+
+          <div class="flex-1">
+            <h3 class="leading-snug font-semibold text-base text-slate-800 tracking-tight dark:text-slate-300 mb-1">Thank you for your help!</h3>
+            <p class="text-slate-500 text-sm line-clamp-2 dark:text-slate-400"><span class="font-medium">April Marks</span> &mdash; I hope this email finds you well. I wanted to provide you with an update on the progress of Rails UI, which we've been working on diligently for the past few weeks. Firstly, I'm pleased to inform you that our development team has successfully completed the initial phase of the project. We have successfully implemented the core functionalities and conducted thorough testing to ensure the stability and reliability of the software.</p>
+          </div>
+        <% end %>
+      </li>
+
+      <li class="relative first-of-type:rounded-b-none first-of-type:rounded-t-lg last-of-type:rounded-t-none last-of-type:rounded-b-lg hover:bg-slate-50/50 dark:hover:bg-slate-700/80 bg-white dark:bg-slate-800">
+        <time class="absolute top-2 right-2 text-[11px] text-slate-400"><%= Date.today.strftime("%b %d, %Y") %></time>
+        <%= conditional_link_to(:rui_message_path, class: "flex items-start sm:items-center flex-wrap gap-3 w-full p-6") do %>
+
+          <%= image_tag demo_avatar_url(id: "42", variant: "men"), alt: "Michael Lechvin", class: "size-14 rounded-full object-fill object-center shrink-0" %>
+
+          <div class="flex-1">
+            <h3 class="leading-snug font-semibold text-base text-slate-800 tracking-tight dark:text-slate-300 mb-1">Thank you for your help!</h3>
+            <p class="text-slate-500 text-sm line-clamp-2 dark:text-slate-400"><span class="font-medium">Michael Lechvin</span> &mdash; Dear John, I wanted to express my heartfelt appreciation for your exceptional work on the recent client project. Your dedication, attention to detail, and problem-solving skills were instrumental in its success. Thank you and well done!</p>
+          </div>
+        <% end %>
+      </li>
+    </ul>
+
+  </div>
+</div>
+
+<div class="flex items-center justify-center pb-16 gap-3">
+  <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+  <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"
+    class="text-slate-300 stroke-current size-6">
+    <g fill="none" fill-rule="evenodd">
+      <g transform="translate(1 1)" stroke-width="2">
+        <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s"
+            repeatCount="indefinite" />
+        </path>
+      </g>
+    </g>
+  </svg>
+  <p class="text-sm text-slate-400 font-medium">Loading...</p>
+</div>

data/lib/generators/railsui/install/templates/themes/hound/views/rui/pages/notifications.html.erb

@@ -0,0 +1,101 @@
+<% content_for :body_classes, "text-slate-800 dark:bg-slate-900 dark:text-slate-100 bg-white" %>
+
+<% content_for :header do %>
+  <%= render "rui/shared/admin/nav", { header_title: "Notifications" } %>
+<% end %>
+<%= render "rui/shared/admin/settings_nav" %>
+
+<div class="container mx-auto pb-24 px-4 my-16">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="md:h2 h3 mb-2">Notifications</h1>
+    <div class="prose-lg prose-slate dark:prose-invert mb-16">
+      <p>Adjust how the app notifies you of new events, changes, and communications.</p>
+    </div>
+
+    <%= form_tag "#" do %>
+      <div class="grid grid-cols-1 sm:grid-cols-12 sm:gap-16 gap-6">
+        <div class="sm:col-span-5">
+          <h3 class="h5 mb-2">Email Notifications</h3>
+          <div class="prose prose-slate dark:prose-invert mb-6">
+            <p>What should we email you about?</p>
+          </div>
+
+        </div>
+        <div class="sm:col-span-7 sm:pt-8">
+          <div class="space-y-8">
+            <div class="flex flex-wrap items-center">
+              <%= check_box_tag "emailNotification1", "", true, class: "form-input-switch", id: "emailNotification1" %>
+              <%= label_tag "emailNotification1", "New messages", class: "ml-2 font-medium tracking-tight" %>
+              <div class="pl-15 text-sm text-slate-600 dark:text-slate-400">
+                <p>Receive an email when someone messages you.</p>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap items-center">
+              <%= check_box_tag "emailNotification2", "", false, class: "form-input-switch", id: "emailNotification2" %>
+              <%= label_tag "emailNotification2", "Account updates", class: "ml-2 font-medium tracking-tight" %>
+              <div class="pl-15 text-sm text-slate-600 dark:text-slate-400">
+                <p>Receive an email when your account gets updated.</p>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap items-center">
+              <%= check_box_tag "emailNotification3", "", true, class: "form-input-switch", id: "emailNotification3" %>
+              <%= label_tag "emailNotification3", "Upcoming events", class: "ml-2 font-medium tracking-tight" %>
+              <div class="pl-15 text-sm text-slate-600 dark:text-slate-400">
+                <p>Receive an email when upcoming events are scheduled to occur.</p>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap items-center">
+              <%= check_box_tag "emailNotification4", "", true, class: "form-input-switch", id: "emailNotification4" %>
+              <%= label_tag "emailNotification4", "New mentions", class: "ml-2 font-medium tracking-tight" %>
+              <div class="pl-15 text-sm text-slate-600 dark:text-slate-400">
+                <p>Receive an email when someone mentions you.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-12 sm:gap-16 mt-10 pt-10 border-t border-slate-300/80 gap-6 dark:border-slate-700">
+        <div class="sm:col-span-5">
+          <h3 class="h5 mb-2">Push Notifications</h3>
+          <div class="prose prose-slate dark:prose-invert mb-6">
+            <p>Send push notifications to your device.</p>
+          </div>
+        </div>
+
+        <div class="sm:col-span-7">
+          <div class="space-y-8">
+            <div class="flex flex-wrap items-center">
+              <%= check_box_tag "pushNotification1", "", true, class: "form-input-switch", id: "pushNotification1" %>
+              <%= label_tag "pushNotification1", "New messages", class: "ml-2 font-medium tracking-tight" %>
+              <div class="pl-15 text-sm text-slate-600 dark:text-slate-400">
+                <p>Receive a device notification when someone mentions you.</p>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap items-center">
+              <%= check_box_tag "pushNotification2", "", true, class: "form-input-switch", id: "pushNotification2" %>
+              <%= label_tag "pushNotification2", "Upcoming events", class: "ml-2 font-medium tracking-tight" %>
+              <div class="pl-15 text-sm text-slate-600 dark:text-slate-400">
+                <p>Receive a device notification when upcoming events you belong to are scheduled to occur.</p>
+              </div>
+            </div>
+
+            <div class="flex flex-wrap items-center">
+              <%= check_box_tag "pushNotification3", "", true, class: "form-input-switch", id: "pushNotification3" %>
+              <%= label_tag "pushNotification3", "New mentions", class: "ml-2 font-medium tracking-tight" %>
+              <div class="pl-15 text-sm text-slate-600 dark:text-slate-400">
+                <p>Receive a device notification when someone mentions you.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button type="submit" class="btn btn-primary mt-6">Save Settings</button>
+    <% end %>
+  </div>
+</div>