Skip to content

Commit 9e2d51f

Browse files
cfeenstra67cfeenstra67
committed
minor fixes
1 parent bba596c commit 9e2d51f

File tree

11 files changed

+360
-345
lines changed

11 files changed

+360
-345
lines changed

‎src/client/components/Layout.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
import { themeClasses, useTheme } from "../lib/theme";
22
import { cn } from "../lib/utils";
3-
import NavBar from "./NavBar";
3+
import NavBar, { type NavbarProps } from "./NavBar";
44
import { Toaster } from "./ui/toaster";
55
import { TooltipProvider } from "./ui/tooltip";
66

7-
export interface LayoutProps {
7+
export interface LayoutProps extends NavbarProps {
88
children: React.ReactNode | React.ReactNode[];
9-
searchDisabled?: boolean;
109
}
1110

12-
export default function Layout({ children, searchDisabled }: LayoutProps) {
11+
export default function Layout({ children, ...navbarProps }: LayoutProps) {
1312
const theme = useTheme();
1413

1514
return (
@@ -21,7 +20,7 @@ export default function Layout({ children, searchDisabled }: LayoutProps) {
2120
)}
2221
>
2322
<TooltipProvider>
24-
<NavBar searchDisabled={searchDisabled} />
23+
<NavBar {...navbarProps} />
2524
<div className="pt-14 flex h-full">{children}</div>
2625
<Toaster />
2726
</TooltipProvider>

‎src/client/components/NavBar.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,16 @@ import { Input } from "./ui/input";
88
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
99

1010
export interface NavbarProps {
11+
autoFocus?: boolean;
1112
searchDisabled?: boolean;
13+
onSearchFocus?: () => void;
1214
}
1315

14-
export default function NavBar({ searchDisabled }: NavbarProps) {
16+
export default function NavBar({
17+
searchDisabled,
18+
autoFocus,
19+
onSearchFocus,
20+
}: NavbarProps) {
1521
const { query, setQuery } = useContext(AppContext);
1622

1723
return (
@@ -26,11 +32,12 @@ export default function NavBar({ searchDisabled }: NavbarProps) {
2632
<div className="relative">
2733
<Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
2834
<Input
29-
autoFocus
35+
autoFocus={autoFocus}
3036
placeholder="Search history..."
3137
className="pl-8"
3238
value={query}
3339
onChange={(e) => setQuery(e.target.value)}
40+
onFocus={onSearchFocus}
3441
disabled={searchDisabled}
3542
/>
3643
{query ? (

‎src/client/components/SearchResultsItem.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ function SingleAggregatedSearchResultsItem({
280280
tabId={session.endedAt ? undefined : session.tabId}
281281
rel="noreferrer"
282282
>
283-
<div className="text-sm font-medium leading-none truncate block">
283+
<div className="text-sm font-medium leading-tight truncate block">
284284
<Tooltip>
285285
<TooltipTrigger asChild>
286286
<span>

‎src/client/components/SessionDetail.tsx‎

Lines changed: 74 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { BinaryOperator } from "@/src/server/clause";
22
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
33
import { useContext, useState } from "react";
4+
import { Link } from "wouter";
45
import { AppContext } from "../lib";
56
import SearchResults from "./SearchResults";
67
import SessionCard from "./SessionCard";
@@ -114,72 +115,81 @@ export default function SessionDetail({
114115
) : sessionQuery.status === "error" ? (
115116
<div>Error loading visit: {sessionQuery.error.message}.</div>
116117
) : (
117-
<div>Visit not found.</div>
118+
<div className="flex flex-col gap-6">
119+
<h1 className="text-xl font-semibold">Visit not found</h1>
120+
121+
<Link className="underline" href="/">
122+
Back to search
123+
</Link>
124+
</div>
118125
)}
119-
<Tabs
120-
value={tabValue}
121-
onValueChange={(value) => setTabValue([value, false])}
122-
className="flex-grow overflow-hidden flex flex-col"
123-
>
124-
<TabsList>
125-
<TabsTrigger value="parents">
126-
Navigated to this page from (
127-
{parentSessionsCount === null ? "..." : parentSessionsCount})
128-
</TabsTrigger>
129-
<TabsTrigger value="visits">
130-
Visits to this page (
131-
{sessionsCount === null ? "..." : sessionsCount})
132-
</TabsTrigger>
133-
</TabsList>
134-
<TabsContent
135-
value="parents"
136-
className="flex-1 overflow-y-scroll overflow-x-hidden"
137-
>
138-
{parentSessions.status === "error" ? (
139-
<p>
140-
An error occurred while loading pages that we navigated to this
141-
one from.
142-
</p>
143-
) : (
144-
<>
145-
<SearchResults
146-
showChildren="full"
147-
showControls
148-
aggregate
149-
animate
150-
isLoading={parentSessions.status === "pending"}
151-
sessions={
152-
parentSessions.data?.pages.flatMap((page) => page.results) ??
153-
[]
154-
}
155-
onEndReached={() => parentSessions.fetchNextPage()}
156-
/>
157-
</>
158-
)}
159-
</TabsContent>
160-
<TabsContent
161-
value="visits"
162-
className="flex-1 overflow-y-scroll overflow-x-hidden"
126+
{sessionQuery.status === "pending" || session ? (
127+
<Tabs
128+
value={tabValue}
129+
onValueChange={(value) => setTabValue([value, false])}
130+
className="flex-grow overflow-hidden flex flex-col gap-4"
163131
>
164-
{sessionsQuery.status === "error" ? (
165-
<p>An error occurred while loading other visits to this page.</p>
166-
) : (
167-
<>
168-
<SearchResults
169-
showChildren="full"
170-
showControls
171-
animate
172-
isLoading={sessionsQuery.status === "pending"}
173-
sessions={
174-
sessionsQuery.data?.pages.flatMap((page) => page.results) ??
175-
[]
176-
}
177-
onEndReached={() => sessionsQuery.fetchNextPage()}
178-
/>
179-
</>
180-
)}
181-
</TabsContent>
182-
</Tabs>
132+
<TabsList>
133+
<TabsTrigger value="parents">
134+
Navigated to this page from (
135+
{parentSessionsCount === null ? "..." : parentSessionsCount})
136+
</TabsTrigger>
137+
<TabsTrigger value="visits">
138+
Visits to this page (
139+
{sessionsCount === null ? "..." : sessionsCount})
140+
</TabsTrigger>
141+
</TabsList>
142+
<TabsContent
143+
value="parents"
144+
className="flex-1 overflow-y-scroll overflow-x-hidden"
145+
>
146+
{parentSessions.status === "error" ? (
147+
<p>
148+
An error occurred while loading pages that we navigated to this
149+
one from.
150+
</p>
151+
) : (
152+
<>
153+
<SearchResults
154+
showChildren="full"
155+
showControls
156+
aggregate
157+
animate
158+
isLoading={parentSessions.status === "pending"}
159+
sessions={
160+
parentSessions.data?.pages.flatMap(
161+
(page) => page.results,
162+
) ?? []
163+
}
164+
onEndReached={() => parentSessions.fetchNextPage()}
165+
/>
166+
</>
167+
)}
168+
</TabsContent>
169+
<TabsContent
170+
value="visits"
171+
className="flex-1 overflow-y-scroll overflow-x-hidden"
172+
>
173+
{sessionsQuery.status === "error" ? (
174+
<p>An error occurred while loading other visits to this page.</p>
175+
) : (
176+
<>
177+
<SearchResults
178+
showChildren="full"
179+
showControls
180+
animate
181+
isLoading={sessionsQuery.status === "pending"}
182+
sessions={
183+
sessionsQuery.data?.pages.flatMap((page) => page.results) ??
184+
[]
185+
}
186+
onEndReached={() => sessionsQuery.fetchNextPage()}
187+
/>
188+
</>
189+
)}
190+
</TabsContent>
191+
</Tabs>
192+
) : null}
183193
</>
184194
);
185195
}

‎src/client/components/SettingsLayout.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { useLocation } from "wouter";
2+
import { cn } from "../lib/utils";
3+
import Layout from "./Layout";
4+
import type { SettingsPage } from "./SettingsSideBar";
5+
import SettingsSideBar from "./SettingsSideBar";
6+
7+
export interface SettingsLayoutProps extends React.PropsWithChildren {
8+
page: SettingsPage;
9+
expanded?: boolean;
10+
}
11+
12+
export default function SettingsLayout({
13+
children,
14+
page,
15+
expanded,
16+
}: SettingsLayoutProps) {
17+
const [_, setLocation] = useLocation();
18+
19+
return (
20+
<Layout onSearchFocus={() => setLocation("/")}>
21+
<div className="flex flex-1 overflow-hidden">
22+
<SettingsSideBar page={page} />
23+
24+
<main
25+
className={cn("flex-1 overflow-hidden p-4", {
26+
"max-w-[700px] mx-auto": !expanded,
27+
})}
28+
>
29+
{children}
30+
</main>
31+
</div>
32+
</Layout>
33+
);
34+
}

‎src/client/pages/History.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ export default function History() {
278278
}
279279

280280
return (
281-
<Layout searchDisabled={!!checksState}>
281+
<Layout autoFocus searchDisabled={!!checksState}>
282282
{deleteRequest !== null ? (
283283
<DeleteSessionModal
284284
request={deleteRequest}

‎src/client/pages/SessionDetail.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
1+
import { useLocation } from "wouter";
12
import Layout from "../components/Layout";
23
import SessionDetailComponent, {
34
type SessionDetailProps,
45
} from "../components/SessionDetail";
56

67
export default function SessionDetail({ sessionId }: SessionDetailProps) {
8+
const [_, setLocation] = useLocation();
9+
710
return (
811
<Layout>
912
<div className="flex flex-1 overflow-hidden">
1013
<main className="flex-1 overflow-hidden min-h-full p-4 max-w-[800px] mx-auto">
11-
<SessionDetailComponent sessionId={sessionId} />
14+
<div className="rounded-xl border shadow p-6 flex flex-col gap-6 mt-4">
15+
<SessionDetailComponent
16+
sessionId={sessionId}
17+
onDelete={() => setLocation("/")}
18+
/>
19+
</div>
1220
</main>
1321
</div>
1422
</Layout>

‎src/client/pages/settings/About.tsx‎

Lines changed: 41 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,49 @@
11
import { platform, version } from "../../../constants";
2-
import Layout from "../../components/Layout";
3-
import SettingsSideBar, {
4-
SettingsPage,
5-
} from "../../components/SettingsSideBar";
2+
import SettingsLayout from "../../components/SettingsLayout";
3+
import { SettingsPage } from "../../components/SettingsSideBar";
64

75
export default function About() {
86
return (
9-
<Layout>
10-
<div className="flex flex-1 overflow-hidden">
11-
<SettingsSideBar page={SettingsPage.About} />
7+
<SettingsLayout page={SettingsPage.About}>
8+
<h1 className="text-2xl font-semibold leading-none tracking-tight p-6">
9+
About
10+
</h1>
1211

13-
<main className="flex-1 overflow-hidden p-4 max-w-[700px] mx-auto">
14-
<h1 className="text-2xl font-semibold leading-none tracking-tight p-6">
15-
About
16-
</h1>
17-
18-
<div className="rounded-xl border shadow p-6 flex flex-col gap-4 gap-y-6">
19-
<div>
20-
<span className="font-bold">Version:</span> {version}
21-
</div>
22-
<div>
23-
<span className="font-bold">Platform:</span> {platform}
24-
</div>
25-
<p>
26-
<b>Egghead</b> is a browser extension developed by Cam Feenstra
27-
with the goal of helping you get value from your browser history.
28-
</p>
29-
<p>
30-
The default chrome browser history does not offer very useful
31-
search functionality, and it doesn{"'"}t let you do simple things
32-
like understand which links you opened on a given page. Egghead is
33-
designed to fix these problems. I{"'"}ve found it useful so far,
34-
and I hope you do.
35-
</p>
36-
<p>
37-
Egghead is completely open source, and you can find the code in
38-
the{" "}
39-
<a
40-
href="https://github.com/cfeenstra67/egghead"
41-
target="_blank"
42-
rel="noreferrer"
43-
>
44-
Github repo
45-
</a>
46-
.
47-
</p>
48-
<p>
49-
If you have problems using the app, or encounter any bugs, please
50-
open an issue on the Github repo or contact me at{" "}
51-
<a href="me@camfeenstra.com">me@camfeenstra.com</a>.
52-
</p>
53-
</div>
54-
</main>
12+
<div className="rounded-xl border shadow p-6 flex flex-col gap-4 gap-y-6">
13+
<div>
14+
<span className="font-bold">Version:</span> {version}
15+
</div>
16+
<div>
17+
<span className="font-bold">Platform:</span> {platform}
18+
</div>
19+
<p>
20+
<b>Egghead</b> is a browser extension developed by Cam Feenstra with
21+
the goal of helping you get value from your browser history.
22+
</p>
23+
<p>
24+
The default chrome browser history does not offer very useful search
25+
functionality, and it doesn{"'"}t let you do simple things like
26+
understand which links you opened on a given page. Egghead is designed
27+
to fix these problems. I{"'"}ve found it useful so far, and I hope you
28+
do.
29+
</p>
30+
<p>
31+
Egghead is completely open source, and you can find the code in the{" "}
32+
<a
33+
href="https://github.com/cfeenstra67/egghead"
34+
target="_blank"
35+
rel="noreferrer"
36+
>
37+
Github repo
38+
</a>
39+
.
40+
</p>
41+
<p>
42+
If you have problems using the app, or encounter any bugs, please open
43+
an issue on the Github repo or contact me at{" "}
44+
<a href="me@camfeenstra.com">me@camfeenstra.com</a>.
45+
</p>
5546
</div>
56-
</Layout>
47+
</SettingsLayout>
5748
);
5849
}

0 commit comments

Comments
 (0)