Skip to content

Commit 850e860

Browse files
benjamin-parkshobbescodes
benjamin-parks
and
hobbescodes
authored
Invite Notifications (#138)
* chore: WIP notification center query/components * fix: swap components to be Popover * chore: add notification center to small viewport drawer * chore: move NotificationCenter out of drawer so it's always on the main part of the layout * chore: remove trigger (X) button from popover * feature: WIP accept/decline invitations from notification center * refactor(notifications-center): properly handle invite mutations * chore: stylize buttons and hide them until mouse is hovering the card * chore: remove un-needed stack and box. Adjust height of notification card to prevent resizing on hover * refactor(notifications-center): update styles and handlers * refactor(notifications-center): update styles * chore: move static text to app.config * chore: adjust icon style and size for invitations popover * Update src/components/notifications/NotificationCenter/NotificationCenter.tsx Co-authored-by: hobbescodes <[email protected]> * chore: adjust config for notifications * chore: remove standardschema from UpdateFeedbackSchema title * fix(update-feedback): prevent default on field clicks * chore: update generated artifacts * refactor(header): update action variants, update notifications center copy * refactor(notifications-center): update placement for indicator --------- Co-authored-by: hobbescodes <[email protected]>
1 parent 36293e9 commit 850e860

File tree

12 files changed

+387
-81
lines changed

12 files changed

+387
-81
lines changed

‎bun.lock

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
"@tanstack/react-query": "^5.70.0",
1515
"@tanstack/react-query-devtools": "^5.70.0",
1616
"@tanstack/react-table": "^8.21.2",
17-
"@theme-toggles/react": "^4.1.0",
1817
"dayjs": "^1.11.13",
1918
"graphql": "^16.10.0",
2019
"graphql-request": "^7.1.2",
@@ -618,8 +617,6 @@
618617

619618
"@testing-library/user-event": ["@testing-library/[email protected]", "", { "peerDependencies": { "@testing-library/dom": ">=7.21.4" } }, "sha512-vq7fv0rnt+QTXgPxr5Hjc210p6YKq2kmdziLgnsZGgLJ9e6VAShx1pACLuRjd/AS/sr7phAR58OIIpf0LlmQNw=="],
620619

621-
"@theme-toggles/react": ["@theme-toggles/[email protected]", "", { "peerDependencies": { "react": "^16 || ^17 || ^18", "react-dom": "^16 || ^17 || ^18" } }, "sha512-h3SuJMsej8DfelHt5fjNIlaMfJOK52Vku4pPDVoHaTwjAcoTr4fn8hzeur2oiqWBYFYfKugvv1RdQaBFXaiPKg=="],
622-
623620
"@ts-morph/common": ["@ts-morph/[email protected]", "", { "dependencies": { "minimatch": "^9.0.4", "path-browserify": "^1.0.1", "tinyglobby": "^0.2.9" } }, "sha512-kMnZz+vGGHi4GoHnLmMhGNjm44kGtKUXGnOvrKmMwAuvNjM/PgKVGfUnL7IDvK7Jb2QQ82jq3Zmp04Gy+r3Dkg=="],
624621

625622
"@types/aria-query": ["@types/[email protected]", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="],

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@
6363
"@tanstack/react-query": "^5.70.0",
6464
"@tanstack/react-query-devtools": "^5.70.0",
6565
"@tanstack/react-table": "^8.21.2",
66-
"@theme-toggles/react": "^4.1.0",
6766
"dayjs": "^1.11.13",
6867
"graphql": "^16.10.0",
6968
"graphql-request": "^7.1.2",

‎src/components/feedback/UpdateFeedback/UpdateFeedback.tsx

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { CharacterLimit } from "components/core";
1818
import { useFeedbackByIdQuery, useUpdatePostMutation } from "generated/graphql";
1919
import { token } from "generated/panda/tokens";
2020
import { app } from "lib/config";
21-
import { DEBOUNCE_TIME, standardRegexSchema } from "lib/constants";
21+
import { DEBOUNCE_TIME } from "lib/constants";
2222
import { useForm, useViewportSize } from "lib/hooks";
2323
import { toaster } from "lib/util";
2424

@@ -34,7 +34,9 @@ const updateFeedbackDetails = app.projectPage.projectFeedback.updateFeedback;
3434

3535
/** Schema for defining the shape of the update feedback form fields, as well as validating the form. */
3636
const updateFeedbackSchema = z.object({
37-
title: standardRegexSchema
37+
title: z
38+
.string()
39+
.trim()
3840
.min(3, updateFeedbackDetails.errors.title.minLength)
3941
.max(90, updateFeedbackDetails.errors.title.maxLength),
4042
description: z
@@ -173,7 +175,10 @@ const UpdateFeedback = ({ user, feedback, ...rest }: Props) => {
173175
placeholder={
174176
app.projectPage.projectFeedback.feedbackTitle.placeholder
175177
}
176-
onClick={(evt) => evt.stopPropagation()}
178+
onClick={(evt) => {
179+
evt.preventDefault();
180+
evt.stopPropagation();
181+
}}
177182
/>
178183
)}
179184
</AppField>
@@ -188,7 +193,10 @@ const UpdateFeedback = ({ user, feedback, ...rest }: Props) => {
188193
rows={5}
189194
minH={32}
190195
maxLength={MAX_DESCRIPTION_LENGTH}
191-
onClick={(evt) => evt.stopPropagation()}
196+
onClick={(evt) => {
197+
evt.preventDefault();
198+
evt.stopPropagation();
199+
}}
192200
/>
193201
)}
194202
</AppField>

‎src/components/layout/HeaderActions/HeaderActions.tsx

Lines changed: 64 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
SidebarNavigation,
2121
ThemeToggle,
2222
} from "components/layout";
23+
import { NotificationCenter } from "components/notifications";
2324
import { token } from "generated/panda/tokens";
2425
import { app } from "lib/config";
2526
import { useAuth, useViewportSize } from "lib/hooks";
@@ -54,11 +55,15 @@ const HeaderActions = () => {
5455

5556
if (isSmallViewport) {
5657
return (
57-
<Flex alignItems="center" gap={4}>
58+
<Flex alignItems="center" gap={1}>
5859
<ThemeToggle />
5960

6061
{isAuthenticated ? (
61-
<AccountInformation />
62+
<HStack>
63+
<NotificationCenter />
64+
65+
<AccountInformation />
66+
</HStack>
6267
) : (
6368
<HStack>
6469
<Button variant="outline" onClick={() => signIn("omni")}>
@@ -73,67 +78,71 @@ const HeaderActions = () => {
7378
}
7479

7580
return (
76-
<Flex alignItems="center" gap={4}>
81+
<Flex alignItems="center" gap={1}>
7782
<ThemeToggle />
7883

79-
<Drawer
80-
open={isMobileSidebarOpen}
81-
onOpenChange={({ open }) => {
82-
setIsMobileSidebarOpen(open);
83-
}}
84-
trigger={
85-
<Button
86-
variant="ghost"
87-
bgColor={{
88-
base: "background.subtle",
89-
_hover: "background.muted/80",
90-
}}
91-
p={0}
92-
>
93-
<Icon src={RiMenu3Fill} h={5} w={5} />
94-
</Button>
95-
}
96-
contentProps={{ boxShadow: "card" }}
97-
>
98-
<Flex justifyContent="space-between">
99-
<ThemeToggle />
100-
101-
<DrawerCloseTrigger asChild>
84+
<HStack>
85+
{isAuthenticated && <NotificationCenter />}
86+
87+
<Drawer
88+
open={isMobileSidebarOpen}
89+
onOpenChange={({ open }) => {
90+
setIsMobileSidebarOpen(open);
91+
}}
92+
trigger={
10293
<Button
10394
variant="ghost"
104-
bgColor="background.muted"
105-
p={1}
106-
aria-label="Close Mobile Sidebar"
95+
bgColor={{
96+
base: "background.subtle",
97+
_hover: "background.muted/80",
98+
}}
99+
p={0}
107100
>
108-
<Icon src={FiX} />
101+
<Icon src={RiMenu3Fill} h={5} w={5} />
109102
</Button>
110-
</DrawerCloseTrigger>
111-
</Flex>
112-
113-
<Stack h="full" flex={1} justify="space-between">
114-
<Stack mt={4} align="center">
115-
<LogoLink
116-
width={60}
117-
flexDirection="column"
118-
onClick={() => setIsMobileSidebarOpen(false)}
119-
/>
120-
121-
{!isLoading && <SidebarNavigation />}
122-
</Stack>
123-
124-
{isAuthenticated ? (
125-
<AccountInformation />
126-
) : (
127-
<Stack>
128-
<Button variant="outline" onClick={() => signIn("omni")}>
129-
{app.auth.signIn.label}
103+
}
104+
contentProps={{ boxShadow: "card" }}
105+
>
106+
<Flex justifyContent="space-between">
107+
<ThemeToggle />
108+
109+
<DrawerCloseTrigger asChild>
110+
<Button
111+
variant="ghost"
112+
bgColor="background.muted"
113+
p={1}
114+
aria-label="Close Mobile Sidebar"
115+
>
116+
<Icon src={FiX} />
130117
</Button>
131-
132-
<Button onClick={handleSignUp}>{app.auth.signUp.label}</Button>
118+
</DrawerCloseTrigger>
119+
</Flex>
120+
121+
<Stack h="full" flex={1} justify="space-between">
122+
<Stack mt={4} align="center">
123+
<LogoLink
124+
width={60}
125+
flexDirection="column"
126+
onClick={() => setIsMobileSidebarOpen(false)}
127+
/>
128+
129+
{!isLoading && <SidebarNavigation />}
133130
</Stack>
134-
)}
135-
</Stack>
136-
</Drawer>
131+
132+
{isAuthenticated ? (
133+
<AccountInformation />
134+
) : (
135+
<Stack>
136+
<Button variant="outline" onClick={() => signIn("omni")}>
137+
{app.auth.signIn.label}
138+
</Button>
139+
140+
<Button onClick={handleSignUp}>{app.auth.signUp.label}</Button>
141+
</Stack>
142+
)}
143+
</Stack>
144+
</Drawer>
145+
</HStack>
137146
</Flex>
138147
);
139148
};

‎src/components/layout/ThemeToggle/ThemeToggle.tsx

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
11
"use client";
22

3-
import { sigil } from "@omnidev/sigil";
4-
import { Expand } from "@theme-toggles/react";
3+
import { Button, Icon } from "@omnidev/sigil";
54
import { useTheme } from "next-themes";
65
import { useHotkeys } from "react-hotkeys-hook";
6+
import { PiMoonFill as Moon, PiSunFill as Sun } from "react-icons/pi";
77
import { useIsClient } from "usehooks-ts";
88

9-
import "@theme-toggles/react/css/Expand.css";
10-
11-
const PandaExpand = sigil(Expand);
12-
139
/**
1410
* Toggle application color mode.
1511
*/
@@ -32,18 +28,16 @@ const ThemeToggle = () => {
3228
if (!isClient) return null;
3329

3430
return (
35-
// @ts-ignore ignore missing props
36-
<PandaExpand
37-
onToggle={toggleTheme}
38-
toggled={resolvedTheme === "light"}
39-
css={{
40-
p: 2.5,
41-
"& svg": {
42-
w: 5,
43-
h: 5,
44-
},
45-
}}
46-
/>
31+
<Button
32+
variant="icon"
33+
aria-label="Toggle theme"
34+
bgColor="transparent"
35+
color="foreground.default"
36+
onClick={toggleTheme}
37+
>
38+
{<Icon src={Sun} _light={{ display: "none" }} />}
39+
{<Icon src={Moon} _dark={{ display: "none" }} />}
40+
</Button>
4741
);
4842
};
4943

0 commit comments

Comments
 (0)