Packages
phoenix_kit
1.7.21
1.7.210
1.7.209
1.7.208
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit_web/live/modules/connections/user_connections.html.heex
<PhoenixKitWeb.Components.LayoutWrapper.app_layout
flash={@flash}
phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
page_title="My Connections"
current_path={@url_path}
project_title={@project_title}
>
<div class="container flex flex-col mx-auto px-4 py-6">
<%!-- Header Section --%>
<header class="w-full relative mb-6">
<div class="text-center">
<h1 class="text-4xl font-bold text-base-content mb-3">My Connections</h1>
<p class="text-lg text-base-content">
Manage your followers, following, and connections
</p>
</div>
</header>
<%!-- Tabs Navigation --%>
<div class="flex justify-center mb-6">
<div role="tablist" class="tabs tabs-boxed">
<.link
navigate={PhoenixKit.Utils.Routes.path("/profile/connections?tab=followers")}
role="tab"
class={"tab #{if @tab == "followers", do: "tab-active"}"}
>
Followers <span class="badge badge-sm ml-2">{@followers_count}</span>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/profile/connections?tab=following")}
role="tab"
class={"tab #{if @tab == "following", do: "tab-active"}"}
>
Following <span class="badge badge-sm ml-2">{@following_count}</span>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/profile/connections?tab=connections")}
role="tab"
class={"tab #{if @tab == "connections", do: "tab-active"}"}
>
Connections <span class="badge badge-sm ml-2">{@connections_count}</span>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/profile/connections?tab=requests")}
role="tab"
class={"tab #{if @tab == "requests", do: "tab-active"}"}
>
Requests
<%= if @pending_count > 0 do %>
<span class="badge badge-warning badge-sm ml-2">{@pending_count}</span>
<% end %>
</.link>
<.link
navigate={PhoenixKit.Utils.Routes.path("/profile/connections?tab=blocked")}
role="tab"
class={"tab #{if @tab == "blocked", do: "tab-active"}"}
>
Blocked <span class="badge badge-sm ml-2">{@blocked_count}</span>
</.link>
</div>
</div>
<%!-- Tab Content --%>
<div class="max-w-4xl mx-auto w-full">
<%!-- Followers Tab --%>
<%= if @tab == "followers" do %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<.icon name="hero-user-group" class="w-5 h-5" /> Your Followers
</h2>
<%= if Enum.empty?(@items) do %>
<div class="text-center py-8 text-base-content/50">
<.icon name="hero-user-group" class="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>No followers yet</p>
</div>
<% else %>
<div class="space-y-3">
<%= for follow <- @items do %>
<div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
<div class="flex items-center gap-3">
<div class="avatar placeholder">
<div class="bg-primary text-primary-content rounded-full w-10">
<span class="text-lg">
{String.first(follow.follower.email || "?")}
</span>
</div>
</div>
<div>
<p class="font-medium">{follow.follower.email}</p>
<p class="text-sm text-base-content/50">
Followed you <.time_ago datetime={follow.inserted_at} />
</p>
</div>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<% end %>
<%!-- Following Tab --%>
<%= if @tab == "following" do %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<.icon name="hero-user-plus" class="w-5 h-5" /> People You Follow
</h2>
<%= if Enum.empty?(@items) do %>
<div class="text-center py-8 text-base-content/50">
<.icon name="hero-user-plus" class="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>You're not following anyone yet</p>
</div>
<% else %>
<div class="space-y-3">
<%= for follow <- @items do %>
<div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
<div class="flex items-center gap-3">
<div class="avatar placeholder">
<div class="bg-primary text-primary-content rounded-full w-10">
<span class="text-lg">
{String.first(follow.followed.email || "?")}
</span>
</div>
</div>
<div>
<p class="font-medium">{follow.followed.email}</p>
<p class="text-sm text-base-content/50">
Following since <.time_ago datetime={follow.inserted_at} />
</p>
</div>
</div>
<button
class="btn btn-sm btn-outline btn-error"
phx-click="unfollow"
phx-value-id={follow.followed_id}
>
Unfollow
</button>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<% end %>
<%!-- Connections Tab --%>
<%= if @tab == "connections" do %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<.icon name="hero-users" class="w-5 h-5" /> Your Connections
</h2>
<%= if Enum.empty?(@items) do %>
<div class="text-center py-8 text-base-content/50">
<.icon name="hero-users" class="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>No connections yet</p>
</div>
<% else %>
<div class="space-y-3">
<%= for connection <- @items do %>
<% other_user =
PhoenixKitWeb.Live.Modules.Connections.UserConnections.get_other_user(
connection,
@current_user.id
) %>
<div class="flex items-center justify-between p-3 bg-base-200 rounded-lg">
<div class="flex items-center gap-3">
<div class="avatar placeholder">
<div class="bg-success text-success-content rounded-full w-10">
<span class="text-lg">{String.first(other_user.email || "?")}</span>
</div>
</div>
<div>
<p class="font-medium">{other_user.email}</p>
<p class="text-sm text-base-content/50">
Connected <.time_ago datetime={connection.responded_at} />
</p>
</div>
</div>
<button
class="btn btn-sm btn-outline btn-error"
phx-click="remove_connection"
phx-value-id={other_user.id}
>
Remove
</button>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<% end %>
<%!-- Requests Tab --%>
<%= if @tab == "requests" do %>
<div class="space-y-6">
<%!-- Incoming Requests --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<.icon name="hero-inbox" class="w-5 h-5" /> Incoming Requests
</h2>
<%= if Enum.empty?(@incoming_requests) do %>
<div class="text-center py-8 text-base-content/50">
<.icon name="hero-inbox" class="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>No pending requests</p>
</div>
<% else %>
<div class="space-y-3">
<%= for request <- @incoming_requests do %>
<div class="flex items-center justify-between p-3 bg-warning/10 rounded-lg border border-warning/20">
<div class="flex items-center gap-3">
<div class="avatar placeholder">
<div class="bg-warning text-warning-content rounded-full w-10">
<span class="text-lg">
{String.first(request.requester.email || "?")}
</span>
</div>
</div>
<div>
<p class="font-medium">{request.requester.email}</p>
<p class="text-sm text-base-content/50">
Requested <.time_ago datetime={request.requested_at} />
</p>
</div>
</div>
<div class="flex gap-2">
<button
class="btn btn-sm btn-success"
phx-click="accept_request"
phx-value-id={request.id}
>
Accept
</button>
<button
class="btn btn-sm btn-outline btn-error"
phx-click="reject_request"
phx-value-id={request.id}
>
Reject
</button>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<%!-- Outgoing Requests --%>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<.icon name="hero-paper-airplane" class="w-5 h-5" /> Sent Requests
</h2>
<%= if Enum.empty?(@outgoing_requests) do %>
<div class="text-center py-8 text-base-content/50">
<.icon name="hero-paper-airplane" class="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>No pending outgoing requests</p>
</div>
<% else %>
<div class="space-y-3">
<%= for request <- @outgoing_requests do %>
<div class="flex items-center justify-between p-3 bg-info/10 rounded-lg border border-info/20">
<div class="flex items-center gap-3">
<div class="avatar placeholder">
<div class="bg-info text-info-content rounded-full w-10">
<span class="text-lg">
{String.first(request.recipient.email || "?")}
</span>
</div>
</div>
<div>
<p class="font-medium">{request.recipient.email}</p>
<p class="text-sm text-base-content/50">
Sent <.time_ago datetime={request.requested_at} />
</p>
</div>
</div>
<span class="badge badge-info">Pending</span>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
</div>
<% end %>
<%!-- Blocked Tab --%>
<%= if @tab == "blocked" do %>
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-xl mb-4">
<.icon name="hero-no-symbol" class="w-5 h-5" /> Blocked Users
</h2>
<%= if Enum.empty?(@items) do %>
<div class="text-center py-8 text-base-content/50">
<.icon name="hero-no-symbol" class="w-12 h-12 mx-auto mb-2 opacity-50" />
<p>No blocked users</p>
</div>
<% else %>
<div class="space-y-3">
<%= for block <- @items do %>
<div class="flex items-center justify-between p-3 bg-error/10 rounded-lg border border-error/20">
<div class="flex items-center gap-3">
<div class="avatar placeholder">
<div class="bg-error text-error-content rounded-full w-10">
<span class="text-lg">{String.first(block.blocked.email || "?")}</span>
</div>
</div>
<div>
<p class="font-medium">{block.blocked.email}</p>
<p class="text-sm text-base-content/50">
Blocked <.time_ago datetime={block.inserted_at} />
</p>
<%= if block.reason do %>
<p class="text-xs text-base-content/40">Reason: {block.reason}</p>
<% end %>
</div>
</div>
<button
class="btn btn-sm btn-outline"
phx-click="unblock"
phx-value-id={block.blocked_id}
>
Unblock
</button>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</div>
</PhoenixKitWeb.Components.LayoutWrapper.app_layout>