Add users

lib/nulla_web/controllers/user_html/edit.html.heex

@@ -0,0 +1,8 @@
+<.header>
+  Edit User {@user.id}
+  <:subtitle>Use this form to manage user records in your database.</:subtitle>
+</.header>
+
+<.user_form changeset={@changeset} action={~p"/users/#{@user}"} />
+
+<.back navigate={~p"/users"}>Back to users</.back>

lib/nulla_web/controllers/user_html/index.html.heex

@@ -0,0 +1,23 @@
+<.header>
+  Listing Users
+  <:actions>
+    <.link href={~p"/users/new"}>
+      <.button>New User</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<.table id="users" rows={@users} row_click={&JS.navigate(~p"/users/#{&1}")}>
+  <:col :let={user} label="Username">{user.username}</:col>
+  <:action :let={user}>
+    <div class="sr-only">
+      <.link navigate={~p"/users/#{user}"}>Show</.link>
+    </div>
+    <.link navigate={~p"/users/#{user}/edit"}>Edit</.link>
+  </:action>
+  <:action :let={user}>
+    <.link href={~p"/users/#{user}"} method="delete" data-confirm="Are you sure?">
+      Delete
+    </.link>
+  </:action>
+</.table>

lib/nulla_web/controllers/user_html/new.html.heex

@@ -0,0 +1,8 @@
+<.header>
+  New User
+  <:subtitle>Use this form to manage user records in your database.</:subtitle>
+</.header>
+
+<.user_form changeset={@changeset} action={~p"/users"} />
+
+<.back navigate={~p"/users"}>Back to users</.back>

lib/nulla_web/controllers/user_html/show.html.heex

@@ -14,50 +14,56 @@
       <img src={~p"/images/avatar.jpg"} class="absolute left-4 bottom-0 translate-y-1/2 rounded-full border-4 border-white w-[8.33vw] h-[8.33vw] min-w-[80px] min-h-[80px] max-w-[160px] max-h-[160px]"/>
     </div>
     <div class="mt-[4.5vw] px-4 flex flex-col">
-      <span class="text-xl font-bold">Mirai Kumiko</span>
-      <span class="text-gray-500">@miraikumiko@nulla.social</span>
+      <span class="text-xl font-bold">{@user.realname}</span>
+      <span class="text-gray-500">@{@user.username}@{@domain}</span>
       <div class="text-sm pt-2">
-        <p>Cryptopunk in the past.</p>
-        <p>Silent girl now and admin of this instance.</p>
-        <br>
-        <p>Grew up on hacker culture, philosophy, good old movies and anime. That's why I love cyberpunk — modern philosophy and technolization in one bottle. I also use Linux on a first-name basis and can program.</p>
-        <br>
-        <p>Can play shooters, chess and other games where strategy and psychological analysis of opponents are important.</p>
-        <br>
-        <p>Bunnies and rabbits are superior!</p>
+        <p>{@user.bio}</p>
       </div>
-      <dl class="mt-2 space-y-1 text-sm text-gray-700">
-        <div class="flex items-center gap-2">
-          <dt><.icon name="hero-map-pin" class="mt-0.5 h-5 w-5 flex-none" /></dt>
-          <dd>Catalonia, Spain</dd>
-        </div>
-        <div class="flex items-center gap-2">
-          <dt><.icon name="hero-cake" class="mt-0.5 h-5 w-5 flex-none" /></dt>
-          <dd>2005/02/25 (20 years old)</dd>
-        </div>
-        <div class="flex items-center gap-2">
-          <dt><.icon name="hero-calendar" class="mt-0.5 h-5 w-5 flex-none" /></dt>
-          <dd>03/20/2025 (2mo ago)</dd>
-        </div>
-      </dl>
-      <dl class="pt-5">
-        <div class="flex items-center gap-5">
-          <dt>Website</dt>
-          <dd>
-            <a href="https://miraikumiko.com" class="text-[#1D9BF0]">miraikumiko.com</a>
-          </dd>
-        </div>
+      <dl class="mt-2 text-sm text-gray-700 grid grid-cols-[auto,1fr] gap-x-2 gap-y-1 items-center">
+        <%= if @user.location do %>
+          <dt class="flex items-center gap-2">
+            <.icon name="hero-map-pin" class="mt-0.5 h-5 w-5 flex-none" />
+          </dt>
+          <dd><%= @user.location %></dd>
+        <% end %>
+      
+        <%= if @user.birthday do %>
+          <dt class="flex items-center gap-2">
+            <.icon name="hero-cake" class="mt-0.5 h-5 w-5 flex-none" />
+          </dt>
+          <dd><%= format_birthdate(@user.birthday) %></dd>
+        <% end %>
+      
+        <dt class="flex items-center gap-2">
+          <.icon name="hero-calendar" class="mt-0.5 h-5 w-5 flex-none" />
+        </dt>
+        <dd><%= format_registration_date(@user.inserted_at) %></dd>
       </dl>
+      <%= if @user.fields do %>
+        <dl class="mt-5 grid grid-cols-[max-content,1fr] gap-x-5 gap-y-2 items-center">
+          <%= for {key, value} <- @user.fields do %>
+            <dt><%= key %></dt>
+            <dd>
+              <%= if Regex.match?(~r{://}, value) do %>
+                <a href={value} class="text-[#1D9BF0]"><%= Regex.replace(~r{^\w+://}, value, "") %></a>
+              <% else %>
+                <%= value %>
+              <% end %>
+            </dd>
+          <% end %>
+        </dl>
+      <% end %>
       <div class="flex mt-5 gap-3">
-        <a href="/@miraikumiko">1.7K <span class="text-gray-700">Posts</span></a>
-        <a href="/@miraikumiko/following">33 <span class="text-gray-700">Following</span></a>
-        <a href="/@miraikumiko/followers">31 <span class="text-gray-700">Followers</span></a>
+        <a href={~p"/@#{@user.username}"}>1.7K Posts</a>
+        <a href={~p"/@#{@user.username}/following"}>33 Following</a>
+        <a href={~p"/@#{@user.username}/followers"}>31 Followers</a>
       </div>
     </div>
     <div class="flex justify-between px-20 py-2 mt-5 border border-gray-300">
-      <div>Posts</div>
-      <div>Posts and replies</div>
-      <div>Media</div>
+      <a href={~p"/@#{@user.username}/featured"}>Featured</a>
+      <a href={~p"/@#{@user.username}"}>Posts</a>
+      <a href={~p"/@#{@user.username}/with_replies"}>Posts and replies</a>
+      <a href={~p"/@#{@user.username}/media"}>Media</a>
     </div>
   </div>
   <div class="flex flex-col items-center mt-5 gap-5">

lib/nulla_web/controllers/user_html/show.html.heex.bak

@@ -0,0 +1,15 @@
+<.header>
+  User {@user.id}
+  <:subtitle>This is a user record from your database.</:subtitle>
+  <:actions>
+    <.link href={~p"/users/#{@user}/edit"}>
+      <.button>Edit user</.button>
+    </.link>
+  </:actions>
+</.header>
+
+<.list>
+  <:item title="Username">{@user.username}</:item>
+</.list>
+
+<.back navigate={~p"/users"}>Back to users</.back>

lib/nulla_web/controllers/user_html/user_form.html.heex

@@ -0,0 +1,9 @@
+<.simple_form :let={f} for={@changeset} action={@action}>
+  <.error :if={@changeset.action}>
+    Oops, something went wrong! Please check the errors below.
+  </.error>
+  <.input field={f[:username]} type="text" label="Username" />
+  <:actions>
+    <.button>Save User</.button>
+  </:actions>
+</.simple_form>