kaze 1.3.1 → 2.0.0

data/stubs/hotwire/app/components/sidebar_menu_button_component.rb

@@ -0,0 +1,25 @@
+# A row in the sidebar: icon plus label, where the label hides when the rail is
+# collapsed. The Inertia stacks get this from shadcn's sidebar; here the class
+# strings are carried by hand, as with the other hotwire components.
+class SidebarMenuButtonComponent < ViewComponent::Base
+  BASE = 'flex h-8 w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ' \
+         'outline-none transition-[width,height,padding] hover:bg-sidebar-accent ' \
+         'hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring ' \
+         'disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0'
+
+  ACTIVE = 'bg-sidebar-accent font-medium text-sidebar-accent-foreground'
+
+  erb_template <<~ERB
+    <a href="<%= @href %>" class="<%= @classes %>"<%= @external_attributes %>>
+      <%= render(IconComponent.new(@icon)) if @icon %>
+      <span x-show="sidebarOpen || sidebarOpenMobile" class="truncate"><%= content %></span>
+    </a>
+  ERB
+
+  def initialize(href:, icon: nil, active: false, external: false, **attributes)
+    @href = href
+    @icon = icon
+    @classes = [ BASE, (ACTIVE if active), attributes[:class] ].compact.join(' ')
+    @external_attributes = (' target="_blank" rel="noopener noreferrer"'.html_safe if external)
+  end
+end

data/stubs/hotwire/app/components/text_input_component.rb

@@ -5,7 +5,7 @@ class TextInputComponent < ViewComponent::Base
 
   def initialize(attributes = {})
     @disabled = attributes[:disabled] || false
-    attributes[:class] = "border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-xs#{" #{attributes[:class]}" if attributes[:class]}"
+    attributes[:class] = "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive#{" #{attributes[:class]}" if attributes[:class]}"
     @attributes = attributes.without(:disabled).map { |key, attribute| "#{key}=\"#{attribute}\"" }
   end
 end

data/stubs/hotwire/app/components/user_avatar_component.rb

@@ -0,0 +1,27 @@
+# The initials circle beside a user's name. The Inertia stacks build this from
+# shadcn's avatar and a useInitials hook; here it is one component.
+class UserAvatarComponent < ViewComponent::Base
+  erb_template <<~ERB
+    <span class="<%= @classes %>"><%= @initials %></span>
+  ERB
+
+  def initialize(name, classes: nil)
+    @initials = initials(name)
+    @classes = [
+      'flex size-8 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs',
+      'font-medium text-black dark:bg-neutral-700 dark:text-white',
+      classes
+    ].compact.join(' ')
+  end
+
+  private
+    def initials(name)
+      parts = name.to_s.strip.split(/\s+/).reject(&:empty?)
+
+      case parts.length
+      when 0 then ''
+      when 1 then parts.first[0].upcase
+      else "#{parts.first[0]}#{parts.last[0]}".upcase
+      end
+    end
+end

data/stubs/hotwire/app/controllers/application_controller.rb

@@ -1,4 +1,5 @@
 class ApplicationController < ActionController::Base
   include SetCurrentAuth
   include Authenticate
+  include SidebarState
 end

data/stubs/hotwire/app/controllers/concerns/sidebar_state.rb

@@ -0,0 +1,14 @@
+module SidebarState
+  extend ActiveSupport::Concern
+
+  included do
+    helper_method :sidebar_open?
+  end
+
+  private
+    # The sidebar writes this cookie as it is toggled. Reading it here keeps the
+    # first paint in step with the last choice instead of flashing open.
+    def sidebar_open?
+      cookies[:sidebar_state].nil? || cookies[:sidebar_state] == 'true'
+    end
+end

data/stubs/hotwire/app/controllers/settings/appearance_controller.rb

@@ -0,0 +1,7 @@
+class Settings::AppearanceController < ApplicationController
+  skip_ensure_email_is_verified
+
+  def edit
+    render 'settings/appearance/edit'
+  end
+end

data/stubs/hotwire/app/controllers/settings/password_controller.rb

@@ -0,0 +1,19 @@
+class Settings::PasswordController < ApplicationController
+  skip_ensure_email_is_verified
+
+  def edit
+    @update_password_form = UpdatePasswordForm.new
+
+    render 'settings/password/edit'
+  end
+
+  def update
+    @update_password_form = UpdatePasswordForm.new(params.permit(:current_password, :password, :password_confirmation))
+
+    return render partial: 'settings/password/update_password_form', status: :unprocessable_entity if @update_password_form.invalid?
+
+    Current.auth.user.update(password: @update_password_form.password)
+
+    redirect_back_or_to password_edit_path, flash: { status: 'password-updated' }
+  end
+end

data/stubs/hotwire/app/controllers/{profile_controller.rb → settings/profile_controller.rb}

@@ -1,18 +1,17 @@
-class ProfileController < ApplicationController
+class Settings::ProfileController < ApplicationController
   skip_ensure_email_is_verified
 
   def edit
     @update_profile_information_form = UpdateProfileInformationForm.new(name: Current.auth.user.name, email: Current.auth.user.email)
-    @update_password_form = UpdatePasswordForm.new
     @delete_user_form = DeleteUserForm.new
 
-    render 'profile/edit'
+    render 'settings/profile/edit'
   end
 
   def update
     @update_profile_information_form = UpdateProfileInformationForm.new(params.permit(:name, :email))
 
-    return render partial: 'profile/partials/update_profile_information_form', status: :unprocessable_entity if @update_profile_information_form.invalid?
+    return render partial: 'settings/profile/update_profile_information_form', status: :unprocessable_entity if @update_profile_information_form.invalid?
 
     @update_profile_information_form.update
 

data/stubs/hotwire/app/views/auth/login.html.erb

@@ -16,7 +16,7 @@
   <!-- Remember Me -->
   <div class="block mt-4">
     <label for="remember_me" class="inline-flex items-center">
-      <input id="remember_me" type="checkbox" class="rounded-sm dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-xs focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
+      <input id="remember_me" type="checkbox" class="size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none accent-primary focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50" name="remember">
       <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">Remember me</span>
     </label>
   </div>

data/stubs/hotwire/app/views/dashboard/index.html.erb

@@ -1,14 +1,9 @@
-<% content_for(:header) do %>
-  <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
-    Dashboard
-  </h2>
+<% content_for(:title, 'Dashboard') %>
+<% content_for(:breadcrumbs) do %>
+  <%= render(BreadcrumbsComponent.new([ { title: 'Dashboard', href: dashboard_path } ])) %>
 <% end %>
-<div class="py-12">
-  <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xs sm:rounded-lg">
-      <div class="p-6 text-gray-900 dark:text-gray-100">
-        You're logged in!
-      </div>
-    </div>
+<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
+  <div class="relative min-h-[60vh] flex-1 overflow-hidden rounded-xl border border-sidebar-border/70 p-6 dark:border-sidebar-border">
+    You're logged in!
   </div>
 </div>

data/stubs/hotwire/app/views/layouts/_appearance.html.erb

@@ -0,0 +1,18 @@
+<%# Applies the stored appearance before first paint, so the page never flashes
+    the wrong theme. Also exposed as window.applyAppearance so the preference
+    control can re-apply it after a change. %>
+<%= javascript_tag nonce: true do %>
+  window.applyAppearance = function () {
+    var preference = localStorage.getItem('appearance') || 'system'
+    var dark = preference === 'dark' ||
+      (preference === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+    document.documentElement.classList.toggle('dark', dark)
+  }
+
+  window.applyAppearance()
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    window.applyAppearance()
+  })
+<% end %>

data/stubs/hotwire/app/views/layouts/_settings.html.erb

@@ -0,0 +1,26 @@
+<%# The settings shell: a heading, the sub-nav down the side, and the page's own
+    sections in the content column. %>
+<div class="px-4 py-6">
+  <%= render(HeadingComponent.new(title: 'Settings', description: 'Manage your profile and account settings')) %>
+  <div class="flex flex-col lg:flex-row lg:space-x-12">
+    <aside class="w-full max-w-xl lg:w-48">
+      <nav class="flex flex-col space-y-1 space-x-0" aria-label="Settings">
+        <% [
+             { title: 'Profile', href: profile_edit_path },
+             { title: 'Password', href: password_edit_path },
+             { title: 'Appearance', href: appearance_edit_path }
+           ].each do |item| %>
+          <a href="<%= item[:href] %>" class="inline-flex h-8 w-full items-center justify-start gap-2 rounded-md px-3 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground <%= 'bg-muted' if current_page?(item[:href]) %>">
+            <%= item[:title] %>
+          </a>
+        <% end %>
+      </nav>
+    </aside>
+    <div class="my-6 h-px w-full bg-border lg:hidden"></div>
+    <div class="flex-1 md:max-w-2xl">
+      <section class="max-w-xl space-y-12">
+        <%= yield %>
+      </section>
+    </div>
+  </div>
+</div>

data/stubs/hotwire/app/views/layouts/_sidebar.html.erb

@@ -0,0 +1,56 @@
+<%# Drawer backdrop. Only ever visible below md, where the sidebar overlays the
+    page rather than sitting beside it. %>
+<div x-show="sidebarOpenMobile"
+  x-transition:enter="transition-opacity ease-linear duration-200"
+  x-transition:enter-start="opacity-0"
+  x-transition:leave="transition-opacity ease-linear duration-200"
+  x-transition:leave-end="opacity-0"
+  x-on:click="sidebarOpenMobile = false"
+  class="fixed inset-0 z-40 bg-black/50 md:hidden"
+  style="display: none;"></div>
+<%# Holds the rail's width in the flow so the page content is never covered.
+    The sidebar itself is fixed, so without this it would overlap. %>
+<div class="hidden shrink-0 transition-[width] duration-200 ease-linear md:block"
+  :class="sidebarOpen ? 'w-64' : 'w-16'"></div>
+<%# One sidebar for both breakpoints: a drawer that slides in below md, a rail
+    that collapses to icons at md and up. %>
+<div class="fixed inset-y-0 left-0 z-50 flex w-72 flex-col gap-2 bg-sidebar p-2 text-sidebar-foreground transition-all duration-200 ease-linear md:z-10 md:translate-x-0"
+  :class="[sidebarOpenMobile ? 'translate-x-0' : '-translate-x-full', sidebarOpen ? 'md:w-64' : 'md:w-16']">
+  <div class="flex flex-col gap-2">
+    <a href="<%= dashboard_path %>" class="flex h-12 items-center gap-2 overflow-hidden rounded-md p-2 text-left hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
+      <div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+        <%= render(ApplicationLogoComponent.new({ class: "size-5 fill-current text-white dark:text-black" })) %>
+      </div>
+      <div x-show="sidebarOpen || sidebarOpenMobile" class="ml-1 grid flex-1 text-left text-sm">
+        <span class="mb-0.5 truncate leading-tight font-semibold">Rails</span>
+      </div>
+    </a>
+  </div>
+  <div class="flex min-h-0 flex-1 flex-col gap-2 overflow-auto">
+    <div class="relative flex w-full min-w-0 flex-col p-2">
+      <div x-show="sidebarOpen || sidebarOpenMobile" class="px-2 py-1 text-xs font-medium text-sidebar-foreground/70">Platform</div>
+      <ul class="flex w-full min-w-0 flex-col gap-1">
+        <li>
+          <%= render(SidebarMenuButtonComponent.new(href: dashboard_path, icon: "layout-grid", active: current_page?(dashboard_path))) do %>
+            Dashboard
+          <% end %>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <div class="flex flex-col gap-2">
+    <ul class="flex w-full min-w-0 flex-col gap-1">
+      <li>
+        <%= render(SidebarMenuButtonComponent.new(href: "https://github.com/cuonggt/kaze", icon: "folder-git-2", external: true, class: "text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100")) do %>
+          Repository
+        <% end %>
+      </li>
+      <li>
+        <%= render(SidebarMenuButtonComponent.new(href: "https://github.com/cuonggt/kaze#readme", icon: "book-open", external: true, class: "text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100")) do %>
+          Documentation
+        <% end %>
+      </li>
+    </ul>
+    <%= render "layouts/sidebar_user" %>
+  </div>
+</div>

data/stubs/hotwire/app/views/layouts/_sidebar_header.html.erb

@@ -0,0 +1,11 @@
+<%# The bar above the page content: the rail trigger, then the page's own
+    breadcrumbs. %>
+<header class="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/50 px-6 transition-[width,height] ease-linear md:px-4">
+  <div class="flex items-center gap-2">
+    <button x-on:click="toggle()" class="-ml-1 inline-flex size-7 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground" aria-label="Toggle sidebar">
+      <span x-show="sidebarOpen"><%= render(IconComponent.new('panel-left-close')) %></span>
+      <span x-show="! sidebarOpen" style="display: none;"><%= render(IconComponent.new('panel-left-open')) %></span>
+    </button>
+    <%= yield :breadcrumbs %>
+  </div>
+</header>

data/stubs/hotwire/app/views/layouts/_sidebar_user.html.erb

@@ -0,0 +1,34 @@
+<%# The user row at the foot of the sidebar. %>
+<%= render DropdownComponent.new(align: 'left', side: 'top', width: 'w-[15rem]') do |component| %>
+  <% component.with_trigger do %>
+    <button class="flex h-12 w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
+      <%= render(UserAvatarComponent.new(Current.auth.user.name)) %>
+      <span x-show="sidebarOpen || sidebarOpenMobile" class="grid flex-1 text-left text-sm leading-tight">
+        <span class="truncate font-medium"><%= Current.auth.user.name %></span>
+      </span>
+      <%= render(IconComponent.new('chevrons-up-down', classes: 'ml-auto size-4 shrink-0')) %>
+    </button>
+  <% end %>
+  <div class="px-1 py-1.5">
+    <div class="flex items-center gap-2 text-left text-sm">
+      <%= render(UserAvatarComponent.new(Current.auth.user.name)) %>
+      <div class="grid flex-1 leading-tight">
+        <span class="truncate font-medium"><%= Current.auth.user.name %></span>
+        <span class="truncate text-xs text-muted-foreground"><%= Current.auth.user.email %></span>
+      </div>
+    </div>
+  </div>
+  <div class="-mx-1 my-1 h-px bg-border"></div>
+  <%= render(DropdownLinkComponent.new({ href: profile_edit_path })) do %>
+    <%= render(IconComponent.new('settings')) %>
+    Settings
+  <% end %>
+  <div class="-mx-1 my-1 h-px bg-border"></div>
+  <form method="POST" action="<%= logout_path %>">
+    <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+    <%= render(DropdownLinkComponent.new({ href: logout_path, onclick: "event.preventDefault();this.closest('form').submit()" })) do %>
+      <%= render(IconComponent.new('log-out')) %>
+      Log Out
+    <% end %>
+  </form>
+<% end %>

data/stubs/hotwire/app/views/layouts/application.html.erb

@@ -3,30 +3,40 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
-    <title><%= content_for(:title) || "Rails" %></title>
+    <title><%= content_for?(:title) ? "#{content_for(:title)} - Rails" : "Rails" %></title>
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= render "layouts/appearance" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
     <%= yield :head %>
   </head>
   <body class="font-sans antialiased">
-    <div class="min-h-screen bg-gray-100">
-      <%= render "layouts/navigation" %>
-      <!-- Page Heading -->
-      <% if content_for?(:header) %>
-        <header class="bg-white dark:bg-gray-800 shadow-sm">
-          <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-            <%= yield :header %>
-          </div>
-        </header>
-      <% end %>
-      <!-- Page Content -->
-      <main>
-        <%= yield %>
-      </main>
+    <%# `sidebarOpen` is the rail's state at md and up, `sidebarOpenMobile` the drawer's below
+        it. One trigger drives whichever applies, and the rail's state is kept in
+        a cookie so the next page renders the way this one was left. %>
+    <div
+      x-data="{
+        sidebarOpen: <%= sidebar_open? %>,
+        sidebarOpenMobile: false,
+        toggle() {
+          if (window.matchMedia('(max-width: 767px)').matches) {
+            this.sidebarOpenMobile = ! this.sidebarOpenMobile
+            return
+          }
+          this.sidebarOpen = ! this.sidebarOpen
+          document.cookie = 'sidebar_state=' + this.sidebarOpen + '; path=/; max-age=604800; samesite=lax'
+        }
+      }"
+      class="flex min-h-svh w-full bg-sidebar"
+    >
+      <%= render "layouts/sidebar" %>
+      <div class="relative flex min-h-svh flex-1 flex-col overflow-hidden bg-background md:m-2 md:ml-0 md:rounded-xl md:shadow-sm">
+        <%= render "layouts/sidebar_header" %>
+        <main class="min-w-0 flex-1"><%= yield %></main>
+      </div>
     </div>
   </body>
 </html>

data/stubs/hotwire/app/views/layouts/guest.html.erb

@@ -8,6 +8,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= render "layouts/appearance" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
   </head>

data/stubs/hotwire/app/views/settings/appearance/_update_appearance_form.html.erb

@@ -0,0 +1,28 @@
+<%# Alpine holds the preference; the buttons themselves are rendered here so the
+    icons come through the same component the rest of the layout uses. %>
+<div
+  x-data="{
+    preference: localStorage.getItem('appearance') || 'system',
+    select(value) {
+      this.preference = value
+      localStorage.setItem('appearance', value)
+      window.applyAppearance()
+    }
+  }"
+  class="inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800"
+>
+  <% [ [ 'light', 'Light', 'sun' ], [ 'dark', 'Dark', 'moon' ], [ 'system', 'System', 'monitor' ] ].each do |value, label, icon| %>
+    <button
+      type="button"
+      @click="select('<%= value %>')"
+      :aria-pressed="preference === '<%= value %>'"
+      class="flex items-center rounded-md px-3.5 py-1.5 transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50"
+      :class="preference === '<%= value %>'
+        ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
+        : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60'"
+    >
+      <%= render(IconComponent.new(icon, classes: '-ml-1 h-4 w-4')) %>
+      <span class="ml-1.5 text-sm"><%= label %></span>
+    </button>
+  <% end %>
+</div>

data/stubs/hotwire/app/views/settings/appearance/edit.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:title, 'Appearance settings') %>
+<% content_for(:breadcrumbs) do %>
+  <%= render(BreadcrumbsComponent.new([ { title: 'Appearance settings', href: appearance_edit_path } ])) %>
+<% end %>
+<%= render layout: 'layouts/settings' do %>
+  <div class="space-y-6">
+    <%= render(HeadingComponent.new(title: 'Appearance settings', description: 'Update the appearance settings for your account', variant: 'small')) %>
+    <%= render 'settings/appearance/update_appearance_form' %>
+  </div>
+<% end %>

data/stubs/hotwire/app/views/{profile/partials → settings/password}/_update_password_form.html.erb

@@ -1,14 +1,6 @@
 <%= turbo_frame_tag 'update_password_form' do %>
   <section>
-    <header>
-      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-        Update Password
-      </h2>
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Ensure your account is using a long, random password to stay secure.
-      </p>
-    </header>
-    <%= form_with model: @update_password_form, url: password_update_path, method: "put", class: "mt-6 space-y-6" do |update_password_form| %>
+      <%= form_with model: @update_password_form, url: password_update_path, method: "put", class: "mt-6 space-y-6" do |update_password_form| %>
       <!-- Current Password -->
       <div>
         <%= render(InputLabelComponent.new({ for: "update_password_current_password", value: "Current Password" })) %>
@@ -37,7 +29,7 @@
             x-show="show"
             x-transition
             x-init="setTimeout(() => show = false, 2000)"
-            class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+            class="text-sm text-muted-foreground">Saved.</p>
         <% end %>
       </div>
     <% end %>

data/stubs/hotwire/app/views/settings/password/edit.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:title, 'Password settings') %>
+<% content_for(:breadcrumbs) do %>
+  <%= render(BreadcrumbsComponent.new([ { title: 'Password settings', href: password_edit_path } ])) %>
+<% end %>
+<%= render layout: 'layouts/settings' do %>
+  <div class="space-y-6">
+    <%= render(HeadingComponent.new(title: 'Update password', description: 'Ensure your account is using a long, random password to stay secure', variant: 'small')) %>
+    <%= render 'settings/password/update_password_form' %>
+  </div>
+<% end %>

data/stubs/hotwire/app/views/{profile/partials → settings/profile}/_confirm_user_deletion_modal.html.erb

@@ -1,10 +1,10 @@
 <div id="confirm_user_deletion_modal">
   <%= render(ModalComponent.new({ name: "confirm-user-deletion", show: @delete_user_form.error_messages.has_key?(:password), focusable: true })) do %>
     <%= form_with model: @delete_user_form, url: profile_destroy_path, method: "delete", class: "p-6" do %>
-      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
+      <h2 class="text-lg font-medium text-foreground">
         Are you sure you want to delete your account?
       </h2>
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+      <p class="mt-1 text-sm text-muted-foreground">
         Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.
       </p>
       <div class="mt-6">

data/stubs/hotwire/app/views/settings/profile/_delete_user_form.html.erb

@@ -0,0 +1,6 @@
+<section class="space-y-6">
+  <%= render(DangerButtonComponent.new({"x-data": "", "x-on:click.prevent": "$dispatch('open-modal', 'confirm-user-deletion')"})) do %>
+    Delete Account
+  <% end %>
+</section>
+<%= render 'settings/profile/confirm_user_deletion_modal' %>

data/stubs/hotwire/app/views/{profile/partials → settings/profile}/_update_profile_information_form.html.erb

@@ -1,14 +1,6 @@
 <%= turbo_frame_tag 'update_profile_information_form' do %>
   <section>
-    <header>
-      <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">
-        Profile Information
-      </h2>
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Update your account's profile information and email address.
-      </p>
-    </header>
-    <form id="send-verification" method="post" action="<%= verification_send_path %>">
+      <form id="send-verification" method="post" action="<%= verification_send_path %>">
       <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
     </form>
     <%= form_with model: @update_profile_information_form, url: profile_update_path, method: "patch", class: "mt-6 space-y-6" do %>
@@ -25,9 +17,9 @@
         <%= render(InputErrorComponent.new({ class: "mt-2", message: @update_profile_information_form.error_messages[:email] })) %>
         <% if User.include?(MustVerifyEmail) && !Current.auth.user.has_verified_email? %>
           <div>
-            <p class="text-sm mt-2 text-gray-800 dark:text-gray-200">
+            <p class="mt-2 text-sm text-foreground">
               Your email address is unverified.
-              <button form="send-verification" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
+              <button form="send-verification" class="rounded-md text-sm text-muted-foreground underline outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50">
                 Click here to re-send the verification email.
               </button>
             </p>
@@ -49,7 +41,7 @@
             x-show="show"
             x-transition
             x-init="setTimeout(() => show = false, 2000)"
-            class="text-sm text-gray-600 dark:text-gray-400">Saved.</p>
+            class="text-sm text-muted-foreground">Saved.</p>
         <% end %>
       </div>
     <% end %>

data/stubs/hotwire/app/views/{profile → settings/profile}/destroy.turbo_stream.erb

@@ -1,3 +1,3 @@
 <%= turbo_stream.replace 'confirm_user_deletion_modal' do %>
-  <%= render 'profile/partials/confirm_user_deletion_modal' %>
+  <%= render 'settings/profile/confirm_user_deletion_modal' %>
 <% end %>

data/stubs/hotwire/app/views/settings/profile/edit.html.erb

@@ -0,0 +1,14 @@
+<% content_for(:title, 'Profile settings') %>
+<% content_for(:breadcrumbs) do %>
+  <%= render(BreadcrumbsComponent.new([ { title: 'Profile settings', href: profile_edit_path } ])) %>
+<% end %>
+<%= render layout: 'layouts/settings' do %>
+  <div class="space-y-6">
+    <%= render(HeadingComponent.new(title: 'Profile information', description: 'Update your name and email address', variant: 'small')) %>
+    <%= render 'settings/profile/update_profile_information_form' %>
+  </div>
+  <div class="space-y-6">
+    <%= render(HeadingComponent.new(title: 'Delete account', description: 'Delete your account and all of its resources', variant: 'small')) %>
+    <%= render 'settings/profile/delete_user_form' %>
+  </div>
+<% end %>

data/stubs/hotwire/app/views/welcome/index.html.erb

@@ -8,6 +8,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": Rails.env.production? ? "reload" : "" %>
+    <%= render "layouts/appearance" %>
     <%= javascript_importmap_tags %>
     <%= turbo_refreshes_with method: :morph, scroll: :preserve %>
   </head>

data/stubs/inertia-common/app/controllers/concerns/handle_inertia_requests.rb

@@ -3,7 +3,10 @@ module HandleInertiaRequests
 
   included do
     inertia_share do
-      { auth: { user: Current.auth.get_user } }
+      {
+        auth: { user: Current.auth.get_user },
+        sidebar_open: cookies[:sidebar_state].nil? || cookies[:sidebar_state] == "true"
+      }
     end
   end
 end

data/stubs/inertia-common/app/controllers/settings/appearance_controller.rb

@@ -0,0 +1,7 @@
+class Settings::AppearanceController < ApplicationController
+  skip_ensure_email_is_verified
+
+  def edit
+    render inertia: 'Settings/Appearance'
+  end
+end

data/stubs/inertia-common/app/controllers/settings/password_controller.rb

@@ -0,0 +1,17 @@
+class Settings::PasswordController < ApplicationController
+  skip_ensure_email_is_verified
+
+  def edit
+    render inertia: 'Settings/Password'
+  end
+
+  def update
+    form = UpdatePasswordForm.new(params.permit(:current_password, :password, :password_confirmation))
+
+    return redirect_to password_edit_path, inertia: { errors: form.error_messages } if form.invalid?
+
+    Current.auth.user.update(password: form.password)
+
+    redirect_back_or_to password_edit_path
+  end
+end

data/stubs/inertia-common/app/controllers/{profile_controller.rb → settings/profile_controller.rb}

@@ -1,8 +1,8 @@
-class ProfileController < ApplicationController
+class Settings::ProfileController < ApplicationController
   skip_ensure_email_is_verified
 
   def edit
-    render inertia: 'Profile/Edit', props: {
+    render inertia: 'Settings/Profile', props: {
       mustVerifyEmail: User.include?(MustVerifyEmail),
       status: flash[:status]
     }

data/stubs/inertia-common/test/integration/appearance_test.rb

@@ -0,0 +1,11 @@
+require 'test_helper'
+
+class AppearanceTest < ActionDispatch::IntegrationTest
+  test 'appearance page is displayed' do
+    user = FactoryBot.create(:user)
+
+    acting_as(user).get appearance_edit_path
+
+    assert_response :success
+  end
+end