ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
atproto
move tooltip from hero to login form as superscript
- Removed tooltip from HeroSection (ATmosphere now plain text)
- Added superscript info icon next to 'ATmosphere' in login form text
- Tooltip content left-aligned for better readability
- Maintains platform-agnostic design
+164
-21
+13
-5
docs/git-history.json
+13
-5
docs/git-history.json
···
1
1
[
2
2
{
3
+
"hash": "f79a669dd6528340d453cb28e9fed2bd5232d46c",
4
+
"short_hash": "f79a669",
5
+
"author": "Ariel M. Lighty",
6
+
"date": "2025-12-24T19:38:51-05:00",
7
+
"message": "move tooltip from hero to login form as superscript\n\n- Removed tooltip from HeroSection (ATmosphere now plain text)\n- Added superscript info icon next to 'ATmosphere' in login form text\n- Tooltip content left-aligned for better readability\n- Maintains platform-agnostic design",
8
+
"files_changed": 2
9
+
},
10
+
{
3
11
"hash": "9bdca934948a284e1315961b4430bae0b6617cbe",
4
12
"short_hash": "9bdca93",
5
13
"author": "Ariel M. Lighty",
···
8
16
"files_changed": 1
9
17
},
10
18
{
11
-
"hash": "0f47c41f1a383ff99387254e56d31210a133bee7",
12
-
"short_hash": "0f47c41",
19
+
"hash": "6f618f32c42d1e2cfa13c480b2d396c82496eb6c",
20
+
"short_hash": "6f618f3",
13
21
"author": "Ariel M. Lighty",
14
-
"date": "2025-12-24T16:33:31-05:00",
15
-
"message": "extract login page components for DRY\n\nCreated reusable components:\n- ValuePropCard: icon + title + description card\n- StepCard: numbered step with color variant\n- HeroSection: logo, title, firefly animation\n- ValuePropsSection: 3 value prop cards\n- HowItWorksSection: 4 step cards",
16
-
"files_changed": 5
22
+
"date": "2025-12-24T16:38:37-05:00",
23
+
"message": "add @ symbol and profile pic to login input\n\nCreated HandleInput component:\n- Shows @ symbol by default\n- Replaces @ with profile pic when handle selected from typeahead\n- Extracts avatar from typeahead data-avatar or actor-select event\n- Clears avatar when input is cleared",
24
+
"files_changed": 2
17
25
},
18
26
{
19
27
"hash": "6cd4d622930e2a43531f2df40d930ceb5d2b4dbc",
+121
docs/graph-data.json
+121
docs/graph-data.json
···
1924
1924
"created_at": "2025-12-24T18:35:10.368162900-05:00",
1925
1925
"updated_at": "2025-12-24T18:35:10.368162900-05:00",
1926
1926
"metadata_json": "{\"branch\":\"master\",\"commit\":\"9bdca93\",\"confidence\":100}"
1927
+
},
1928
+
{
1929
+
"id": 176,
1930
+
"change_id": "85d33a42-5cbc-44b8-8e97-afd3edb1eeda",
1931
+
"node_type": "goal",
1932
+
"title": "Refactor ATmosphere tooltip: make HeroSection clickable instead of hover, add tooltip to login input, left-align text",
1933
+
"description": null,
1934
+
"status": "completed",
1935
+
"created_at": "2025-12-24T18:50:43.883772100-05:00",
1936
+
"updated_at": "2025-12-24T19:39:08.057232200-05:00",
1937
+
"metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
1938
+
},
1939
+
{
1940
+
"id": 177,
1941
+
"change_id": "dbe4421e-0496-4e3d-8548-e1c9156ce023",
1942
+
"node_type": "action",
1943
+
"title": "Reading HeroSection to understand current tooltip implementation",
1944
+
"description": null,
1945
+
"status": "pending",
1946
+
"created_at": "2025-12-24T18:50:46.648351400-05:00",
1947
+
"updated_at": "2025-12-24T18:50:46.648351400-05:00",
1948
+
"metadata_json": "{\"branch\":\"master\",\"confidence\":90}"
1949
+
},
1950
+
{
1951
+
"id": 178,
1952
+
"change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
1953
+
"node_type": "action",
1954
+
"title": "Implementing clickable tooltip for HeroSection and adding tooltip to HandleInput",
1955
+
"description": null,
1956
+
"status": "pending",
1957
+
"created_at": "2025-12-24T18:51:19.077525300-05:00",
1958
+
"updated_at": "2025-12-24T18:51:19.077525300-05:00",
1959
+
"metadata_json": "{\"branch\":\"master\",\"confidence\":85}"
1960
+
},
1961
+
{
1962
+
"id": 179,
1963
+
"change_id": "21ac5b6e-575e-46fb-8695-1a7b44fd0f68",
1964
+
"node_type": "outcome",
1965
+
"title": "Successfully refactored tooltips: HeroSection ATmosphere tooltip now clickable (trigger='click') with click-outside-to-close, added 'Your Bluesky Handle' label with left-aligned tooltip on login form, enhanced Tooltip component with trigger and align props. Build passes.",
1966
+
"description": null,
1967
+
"status": "pending",
1968
+
"created_at": "2025-12-24T18:54:08.099877300-05:00",
1969
+
"updated_at": "2025-12-24T18:54:08.099877300-05:00",
1970
+
"metadata_json": "{\"branch\":\"master\",\"confidence\":95}"
1971
+
},
1972
+
{
1973
+
"id": 180,
1974
+
"change_id": "28e2400d-a153-4c27-a75b-e6b249355649",
1975
+
"node_type": "outcome",
1976
+
"title": "Successfully moved tooltip from HeroSection to Login form. Removed tooltip from HeroSection 'ATmosphere' text. Added superscript info icon next to 'ATmosphere' in login form with left-aligned tooltip content. Platform-agnostic design maintained.",
1977
+
"description": null,
1978
+
"status": "pending",
1979
+
"created_at": "2025-12-24T19:06:33.954975-05:00",
1980
+
"updated_at": "2025-12-24T19:06:33.954975-05:00",
1981
+
"metadata_json": "{\"branch\":\"master\",\"confidence\":95}"
1982
+
},
1983
+
{
1984
+
"id": 181,
1985
+
"change_id": "acba6854-0d74-4547-91ba-391149cc5e57",
1986
+
"node_type": "action",
1987
+
"title": "Committed tooltip refactor to git",
1988
+
"description": null,
1989
+
"status": "pending",
1990
+
"created_at": "2025-12-24T19:39:04.481280600-05:00",
1991
+
"updated_at": "2025-12-24T19:39:04.481280600-05:00",
1992
+
"metadata_json": "{\"branch\":\"master\",\"commit\":\"f79a669\",\"confidence\":100}"
1927
1993
}
1928
1994
],
1929
1995
"edges": [
···
3807
3873
"weight": 1.0,
3808
3874
"rationale": "Committed to repository",
3809
3875
"created_at": "2025-12-24T18:35:12.609336500-05:00"
3876
+
},
3877
+
{
3878
+
"id": 172,
3879
+
"from_node_id": 176,
3880
+
"to_node_id": 177,
3881
+
"from_change_id": "85d33a42-5cbc-44b8-8e97-afd3edb1eeda",
3882
+
"to_change_id": "dbe4421e-0496-4e3d-8548-e1c9156ce023",
3883
+
"edge_type": "leads_to",
3884
+
"weight": 1.0,
3885
+
"rationale": "Investigation action",
3886
+
"created_at": "2025-12-24T18:50:49.358413200-05:00"
3887
+
},
3888
+
{
3889
+
"id": 173,
3890
+
"from_node_id": 177,
3891
+
"to_node_id": 178,
3892
+
"from_change_id": "dbe4421e-0496-4e3d-8548-e1c9156ce023",
3893
+
"to_change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
3894
+
"edge_type": "leads_to",
3895
+
"weight": 1.0,
3896
+
"rationale": "Implementation based on analysis",
3897
+
"created_at": "2025-12-24T18:51:21.616689800-05:00"
3898
+
},
3899
+
{
3900
+
"id": 174,
3901
+
"from_node_id": 178,
3902
+
"to_node_id": 179,
3903
+
"from_change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
3904
+
"to_change_id": "21ac5b6e-575e-46fb-8695-1a7b44fd0f68",
3905
+
"edge_type": "leads_to",
3906
+
"weight": 1.0,
3907
+
"rationale": "Implementation complete",
3908
+
"created_at": "2025-12-24T18:54:10.755729900-05:00"
3909
+
},
3910
+
{
3911
+
"id": 175,
3912
+
"from_node_id": 178,
3913
+
"to_node_id": 180,
3914
+
"from_change_id": "96b417f2-4236-48bb-8ad3-3104f9f9c3b7",
3915
+
"to_change_id": "28e2400d-a153-4c27-a75b-e6b249355649",
3916
+
"edge_type": "leads_to",
3917
+
"weight": 1.0,
3918
+
"rationale": "Implementation complete",
3919
+
"created_at": "2025-12-24T19:06:36.936132900-05:00"
3920
+
},
3921
+
{
3922
+
"id": 176,
3923
+
"from_node_id": 180,
3924
+
"to_node_id": 181,
3925
+
"from_change_id": "28e2400d-a153-4c27-a75b-e6b249355649",
3926
+
"to_change_id": "acba6854-0d74-4547-91ba-391149cc5e57",
3927
+
"edge_type": "leads_to",
3928
+
"weight": 1.0,
3929
+
"rationale": "Committed to repository",
3930
+
"created_at": "2025-12-24T19:39:06.240788400-05:00"
3810
3931
}
3811
3932
]
3812
3933
}
+5
-14
src/components/login/HeroSection.tsx
+5
-14
src/components/login/HeroSection.tsx
···
1
1
import FireflyLogo from "../../assets/at-firefly-logo.svg?react";
2
-
import Tooltip from "../common/Tooltip";
3
2
4
3
interface HeroSectionProps {
5
4
reducedMotion?: boolean;
6
5
}
7
6
8
-
export default function HeroSection({ reducedMotion = false }: HeroSectionProps) {
7
+
export default function HeroSection({
8
+
reducedMotion = false,
9
+
}: HeroSectionProps) {
9
10
return (
10
11
<div className="text-center md:text-left">
11
12
<div className="justify-center md:justify-start mb-4">
···
17
18
<h1 className="text-5xl md:text-6xl font-bold bg-gradient-to-r from-purple-600 via-cyan-500 to-pink-500 dark:from-cyan-300 dark:via-purple-300 dark:to-pink-300 bg-clip-text text-transparent mb-3 md:mb-4">
18
19
ATlast
19
20
</h1>
20
-
<p className="text-xl md:text-2xl lg:text-2xl text-purple-900 dark:text-cyan-100 mb-2 font-medium inline-flex items-center gap-2 justify-center md:justify-start w-full">
21
-
<span>Find Your Light in the ATmosphere</span>
22
-
<Tooltip
23
-
content={
24
-
<div>
25
-
<p className="font-semibold mb-1">What's the ATmosphere?</p>
26
-
<p className="text-xs leading-relaxed">
27
-
The <strong>ATmosphere</strong> is an open network of social apps that use one login, including Bluesky, Blacksky, Tangled, Flashes, Leaflet, and more. Once you login, you can explore the social apps that let you follow different people!
28
-
</p>
29
-
</div>
30
-
}
31
-
/>
21
+
<p className="text-xl md:text-2xl lg:text-2xl text-purple-900 dark:text-cyan-100 mb-2 font-medium">
22
+
Find Your Light in the ATmosphere
32
23
</p>
33
24
<p className="text-purple-750 dark:text-cyan-250 mb-2">
34
25
Reconnect with your internet, one firefly at a time
+25
-2
src/pages/Login.tsx
+25
-2
src/pages/Login.tsx
···
8
8
import ValuePropsSection from "../components/login/ValuePropsSection";
9
9
import HowItWorksSection from "../components/login/HowItWorksSection";
10
10
import HandleInput from "../components/login/HandleInput";
11
+
import Tooltip from "../components/common/Tooltip";
11
12
12
13
interface LoginPageProps {
13
14
onSubmit: (handle: string) => void;
···
48
49
try {
49
50
const url = new URL(
50
51
"xrpc/app.bsky.actor.searchActorsTypeahead",
51
-
"https://public.api.bsky.app"
52
+
"https://public.api.bsky.app",
52
53
);
53
54
url.searchParams.set("q", handle);
54
55
url.searchParams.set("limit", "1");
···
168
169
Light Up Your Network
169
170
</h2>
170
171
<p className="text-purple-750 dark:text-cyan-250 text-center mb-6">
171
-
Reconnect in the ATmosphere as:
172
+
Reconnect in the ATmosphere
173
+
<sup className="ml-0.5">
174
+
<Tooltip
175
+
content={
176
+
<div className="text-left">
177
+
<p className="font-semibold mb-1">
178
+
What's the ATmosphere?
179
+
</p>
180
+
<p className="text-xs leading-relaxed">
181
+
The <strong>ATmosphere</strong> is a shared home for
182
+
social apps using one login. Your follows stay with
183
+
you, even if you change apps.
184
+
</p>
185
+
</div>
186
+
}
187
+
/>
188
+
</sup>{" "}
172
189
</p>
173
190
174
191
<form
···
177
194
method="post"
178
195
>
179
196
<div>
197
+
<label
198
+
htmlFor="atproto-handle"
199
+
className="block text-sm font-semibold text-purple-900 dark:text-cyan-100 mb-2"
200
+
>
201
+
Your ATmosphere Handle
202
+
</label>
180
203
<actor-typeahead rows={5}>
181
204
<HandleInput
182
205
ref={inputRef}