Skip to content

Commit b238a22

Browse files
zcesurzcesur
committed
improve claim page
1 parent a31a8af commit b238a22

File tree

1 file changed

+122
-94
lines changed

1 file changed

+122
-94
lines changed

‎lib/algora_web/live/claim_live.ex‎

Lines changed: 122 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,14 @@ defmodule AlgoraWeb.ClaimLive do
1818
])
1919

2020
{:ok, prize_pool} = claim.target.bounties |> Enum.map(& &1.amount) |> Money.sum()
21-
token = Github.TokenPool.get_token()
22-
{:ok, source_body_html} = Github.render_markdown(token, claim.source.description)
21+
22+
source_body_html =
23+
with token when is_binary(token) <- Github.TokenPool.get_token(),
24+
{:ok, source_body_html} <- Github.render_markdown(token, claim.source.description) do
25+
source_body_html
26+
else
27+
_ -> claim.source.description
28+
end
2329

2430
{:ok,
2531
socket
@@ -40,113 +46,135 @@ defmodule AlgoraWeb.ClaimLive do
4046
<div class="space-y-8">
4147
<%!-- Header with target issue and prize pool --%>
4248
<.header class="mb-8">
43-
<div class="space-y-2">
44-
<.link href={@target.url} class="text-xl font-semibold hover:underline" target="_blank">
45-
{@target.title}
46-
</.link>
47-
<div class="text-sm text-muted-foreground">
48-
{@source.repository.user.provider_login}/{@source.repository.name}#{@source.number}
49+
<div class="flex items-center gap-4">
50+
<.avatar class="h-16 w-16 rounded-full">
51+
<.avatar_image src={@source.repository.user.avatar_url} />
52+
<.avatar_fallback>
53+
{String.first(@source.repository.user.provider_login)}
54+
</.avatar_fallback>
55+
</.avatar>
56+
<div class="space-y-2">
57+
<.link href={@target.url} class="text-xl font-semibold hover:underline" target="_blank">
58+
{@target.title}
59+
</.link>
60+
<div class="text-sm text-muted-foreground">
61+
{@source.repository.user.provider_login}/{@source.repository.name}#{@source.number}
62+
</div>
4963
</div>
5064
</div>
51-
<:subtitle>
65+
<:actions>
5266
<div class="mt-4 text-2xl font-bold text-success font-display">
5367
{Money.to_string!(@prize_pool)}
5468
</div>
55-
</:subtitle>
56-
<:actions>
57-
<.button variant="outline">
58-
<.icon name="tabler-clock" class="mr-2 h-4 w-4" />
59-
{@claim.status |> to_string() |> String.capitalize()}
60-
</.button>
6169
</:actions>
6270
</.header>
6371
64-
<%!-- Claimant and Sponsors Cards --%>
65-
<div class="grid gap-8 md:grid-cols-2">
66-
<%!-- Claimer Info --%>
67-
<.card>
68-
<.card_header>
69-
<.card_title>
70-
<div class="flex items-center gap-2">
71-
<.icon name="tabler-user" class="h-5 w-5 text-muted-foreground" /> Claimed By
72+
<%!-- New grid layout with different column widths --%>
73+
<div class="grid gap-8 md:grid-cols-[2fr_1fr]">
74+
<%!-- Combined Claim Details Card --%>
75+
<div class="space-y-8">
76+
<%!-- Claimer Info --%>
77+
<.card>
78+
<.card_header>
79+
<div class="flex items-center gap-4">
80+
<.avatar>
81+
<.avatar_image src={@user.avatar_url} />
82+
<.avatar_fallback>{String.first(@user.name)}</.avatar_fallback>
83+
</.avatar>
84+
<div>
85+
<p class="font-medium">{@user.name}</p>
86+
<p class="text-sm text-muted-foreground">@{@user.handle}</p>
87+
</div>
7288
</div>
73-
</.card_title>
74-
</.card_header>
75-
<.card_content>
76-
<div class="flex items-center gap-4">
77-
<.avatar>
78-
<.avatar_image src={@user.avatar_url} />
79-
<.avatar_fallback>
80-
{String.first(@user.name)}
81-
</.avatar_fallback>
82-
</.avatar>
83-
<div>
84-
<p class="font-medium">{@user.name}</p>
85-
<p class="text-sm text-muted-foreground">@{@user.handle}</p>
89+
</.card_header>
90+
<.card_content>
91+
<div class="space-y-6">
92+
<%!-- Pull Request Details --%>
93+
<div class="space-y-4">
94+
<.link
95+
href={@source.url}
96+
class="text-lg font-semibold hover:underline"
97+
target="_blank"
98+
>
99+
{@source.title}
100+
</.link>
101+
<div class="text-sm text-muted-foreground">
102+
{@source.repository.user.provider_login}/{@source.repository.name}#{@source.number}
103+
</div>
104+
<div class="mt-4 prose dark:prose-invert">
105+
{Phoenix.HTML.raw(@source_body_html)}
106+
</div>
107+
</div>
86108
</div>
87-
</div>
88-
</.card_content>
89-
</.card>
109+
</.card_content>
110+
</.card>
111+
</div>
90112
91-
<%!-- Bounty Sponsors Card --%>
92-
<.card>
93-
<.card_header>
94-
<.card_title>
95-
<div class="flex items-center gap-2">
96-
<.icon name="tabler-users" class="h-5 w-5 text-muted-foreground" /> Sponsors
113+
<%!-- Right Column: Claim Metadata + Sponsors --%>
114+
<div class="space-y-8">
115+
<%!-- Claim Metadata Card --%>
116+
<.card>
117+
<.card_header>
118+
<.card_title>
119+
<div class="flex items-center gap-2">
120+
<.icon name="tabler-info-circle" class="h-5 w-5 text-muted-foreground" />
121+
Claim Info
122+
</div>
123+
</.card_title>
124+
</.card_header>
125+
<.card_content>
126+
<div class="space-y-2">
127+
<div class="flex justify-between text-sm">
128+
<span class="text-muted-foreground">Status</span>
129+
<span>{@claim.status |> to_string() |> String.capitalize()}</span>
130+
</div>
131+
<div class="flex justify-between text-sm">
132+
<span class="text-muted-foreground">Submitted</span>
133+
<span>{Calendar.strftime(@claim.inserted_at, "%B %d, %Y")}</span>
134+
</div>
135+
<div class="flex justify-between text-sm">
136+
<span class="text-muted-foreground">Last Updated</span>
137+
<span>{Calendar.strftime(@claim.updated_at, "%B %d, %Y")}</span>
138+
</div>
97139
</div>
98-
</.card_title>
99-
</.card_header>
100-
<.card_content>
101-
<div class="divide-y divide-border">
102-
<%= for bounty <- @bounties do %>
103-
<div class="flex items-center justify-between py-4">
104-
<div class="flex items-center gap-4">
105-
<.avatar>
106-
<.avatar_image src={bounty.owner.avatar_url} />
107-
<.avatar_fallback>
108-
{String.first(bounty.owner.name)}
109-
</.avatar_fallback>
110-
</.avatar>
111-
<div>
112-
<p class="font-medium">{bounty.owner.name}</p>
113-
<p class="text-sm text-muted-foreground">@{bounty.owner.handle}</p>
140+
</.card_content>
141+
</.card>
142+
143+
<%!-- Sponsors Card --%>
144+
<.card>
145+
<.card_header>
146+
<.card_title>
147+
<div class="flex items-center gap-2">
148+
<.icon name="tabler-users" class="h-5 w-5 text-muted-foreground" /> Sponsors
149+
</div>
150+
</.card_title>
151+
</.card_header>
152+
<.card_content>
153+
<div class="divide-y divide-border">
154+
<%= for bounty <- Enum.sort_by(@bounties, &{&1.amount, &1.inserted_at}, :desc) do %>
155+
<div class="flex items-center justify-between py-4">
156+
<div class="flex items-center gap-4">
157+
<.avatar>
158+
<.avatar_image src={bounty.owner.avatar_url} />
159+
<.avatar_fallback>
160+
{String.first(bounty.owner.name)}
161+
</.avatar_fallback>
162+
</.avatar>
163+
<div>
164+
<p class="font-medium">{bounty.owner.name}</p>
165+
<p class="text-sm text-muted-foreground">@{bounty.owner.handle}</p>
166+
</div>
114167
</div>
168+
<.badge variant="success" class="font-display">
169+
{Money.to_string!(bounty.amount)}
170+
</.badge>
115171
</div>
116-
<.badge variant="secondary">
117-
{Money.to_string!(bounty.amount)}
118-
</.badge>
119-
</div>
120-
<% end %>
121-
</div>
122-
</.card_content>
123-
</.card>
172+
<% end %>
173+
</div>
174+
</.card_content>
175+
</.card>
176+
</div>
124177
</div>
125-
126-
<%!-- Pull Request Details --%>
127-
<.card>
128-
<.card_header>
129-
<.card_title>
130-
<div class="flex items-center gap-2">
131-
<.icon name="tabler-git-pull-request" class="h-5 w-5 text-muted-foreground" />
132-
Pull Request
133-
</div>
134-
</.card_title>
135-
</.card_header>
136-
<.card_content>
137-
<div class="space-y-4">
138-
<.link href={@source.url} class="text-lg font-semibold hover:underline" target="_blank">
139-
{@source.title}
140-
</.link>
141-
<div class="text-sm text-muted-foreground">
142-
{@source.repository.user.provider_login}/{@source.repository.name}#{@source.number}
143-
</div>
144-
<div class="mt-4 prose dark:prose-invert">
145-
{Phoenix.HTML.raw(@source_body_html)}
146-
</div>
147-
</div>
148-
</.card_content>
149-
</.card>
150178
</div>
151179
</div>
152180
"""

0 commit comments

Comments
 (0)