Skip to content

Commit 0b50477

Browse files
dtemkin1dtemkin1
committed
work on mobile sidebar, better types, accordion changes
1 parent 957ea78 commit 0b50477

12 files changed

+871
-822
lines changed

‎package.json

+9-8
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,26 @@
1616
"check": "biome check --write ."
1717
},
1818
"dependencies": {
19-
"@ark-ui/solid": "^4.8.0",
19+
"@ark-ui/solid": "^4.9.0",
2020
"@fontsource-variable/inter": "^5.1.1",
2121
"@fontsource-variable/roboto-mono": "^5.1.1",
2222
"@solid-primitives/cookies": "^0.0.1",
2323
"@solid-primitives/media": "^2.2.10",
2424
"@solid-primitives/storage": "^4.2.1",
2525
"@solid-primitives/utils": "^6.2.3",
2626
"@solidjs/meta": "^0.29.4",
27-
"@solidjs/router": "^0.15.2",
27+
"@solidjs/router": "^0.15.3",
2828
"@solidjs/start": "^1.0.11",
2929
"localforage": "^1.10.0",
30-
"lucide-solid": "^0.471.0",
30+
"lucide-solid": "^0.473.0",
3131
"solid-js": "^1.9.4",
3232
"ua-parser-js": "^2.0.0",
3333
"vinxi": "^0.4.3",
3434
"vite-plugin-solid": "^2.11.0",
3535
"vite-tsconfig-paths": "^5.1.4"
3636
},
3737
"overrides": {
38-
"vite": "5.4.10"
38+
"vite": "5.4.11"
3939
},
4040
"engines": {
4141
"node": ">=18"
@@ -48,13 +48,14 @@
4848
"@solid-cli/core": "^0.0.26",
4949
"@solidjs/testing-library": "^0.8.10",
5050
"@testing-library/jest-dom": "^6.6.3",
51-
"@testing-library/user-event": "^14.5.2",
52-
"@types/node": "^22.10.5",
51+
"@testing-library/user-event": "^14.6.0",
52+
"@types/node": "^22.10.7",
5353
"jsdom": "^26.0.0",
54-
"postcss": "^8.4.49",
54+
"postcss": "^8.5.1",
5555
"solid-devtools": "^0.33.0",
5656
"typescript": "^5.7.3",
57-
"vitest": "^2.1.8"
57+
"vite": "^5.4.11",
58+
"vitest": "^3.0.2"
5859
},
5960
"bugs": {
6061
"url": "https://github.com/sipb/courseroad3/issues"

‎pnpm-lock.yaml

+740-725
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/simple-fuzzball.png

14.6 KB
Loading

‎src/components/Audit.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { type Component, For, Index, createMemo, createSignal } from "solid-js";
22
import { Portal } from "solid-js/web";
3-
import { Stack } from "styled-system/jsx";
43

54
import { useCombobox, useTagsInput } from "@ark-ui/solid";
65
import { CheckIcon, ChevronsUpDownIcon, XIcon } from "lucide-solid";
6+
import { Stack } from "styled-system/jsx";
77
import { Combobox, createListCollection } from "~/components/ui/combobox";
88
import { IconButton } from "~/components/ui/icon-button";
99
import { TagsInput } from "~/components/ui/tags-input";
@@ -148,7 +148,6 @@ const SelectProgram: Component<{
148148
</TagsInput.Item>
149149
)}
150150
</Index>
151-
152151
<TagsInput.Input
153152
placeholder={
154153
comboboxInput().hasSelectedItems
@@ -157,6 +156,7 @@ const SelectProgram: Component<{
157156
}
158157
asChild={(inputProps) => <Combobox.Input {...inputProps()} />}
159158
/>
159+
160160
<Combobox.Trigger
161161
asChild={(triggerProps) => (
162162
<IconButton

‎src/components/Road.tsx

+12-12
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import { createServerCookie } from "@solid-primitives/cookies";
22
import type { Component } from "solid-js";
33
import { Index, Show, createSignal } from "solid-js";
44

5-
import { useAccordion } from "@ark-ui/solid";
65
import { BanIcon } from "lucide-solid";
76
import Semester from "~/components/Semester";
87
import { Accordion } from "~/components/ui/accordion";
98
import { IconButton } from "~/components/ui/icon-button";
109

10+
import { Float } from "styled-system/jsx";
1111
import type { SimplifiedSelectedSubjects } from "~/context/types";
1212

1313
const Road: Component<{
@@ -40,14 +40,12 @@ const Road: Component<{
4040

4141
const [numSems, setNumSems] = createSignal(numSemesters);
4242

43-
const accordion = useAccordion({
44-
value: visibleList(),
45-
onValueChange: (e) => setVisibleList(e.value),
46-
multiple: true,
47-
});
48-
4943
return (
50-
<Accordion.RootProvider lazyMount unmountOnExit value={accordion}>
44+
<Accordion.Root
45+
value={visibleList()}
46+
onValueChange={(e) => setVisibleList(e.value)}
47+
multiple
48+
>
5149
<Index each={[...Array(numSems()).keys()]}>
5250
{(index) => (
5351
<Semester
@@ -60,11 +58,13 @@ const Road: Component<{
6058
)}
6159
</Index>
6260
<Show when={props.addingFromCard}>
63-
<IconButton display="fixed" bottom="2rem" right="2rem">
64-
<BanIcon />
65-
</IconButton>
61+
<Float placement="bottom-end" offset="8">
62+
<IconButton>
63+
<BanIcon />
64+
</IconButton>
65+
</Float>
6666
</Show>
67-
</Accordion.RootProvider>
67+
</Accordion.Root>
6868
);
6969
};
7070

‎src/components/Semester.tsx

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { type Component, For, createMemo } from "solid-js";
22

33
import { ChevronDownIcon } from "lucide-solid";
4-
import { HStack } from "styled-system/jsx";
4+
import { Flex, Grid, HStack } from "styled-system/jsx";
55
import Class from "~/components/Class";
66
import { Accordion } from "~/components/ui/accordion";
77
import { Text } from "~/components/ui/text";
@@ -137,17 +137,22 @@ const Semester: Component<{
137137
hidden={store.hideIAP && semesterType() === "IAP"}
138138
>
139139
<Accordion.ItemTrigger>
140-
<HStack gap={6}>
141-
<Text width="12em">
142-
{semesterYearName()} {semesterType()} {semesterYearRendered()}
143-
</Text>
144-
<Text minWidth="4.5em" fontSize="sm">
145-
Units: {semesterInformation().totalUnits}
146-
</Text>
147-
<Text fontSize="sm">
148-
Hours: {semesterInformation().totalExpectedHours.toFixed(1)}
149-
</Text>
150-
</HStack>
140+
<Grid gap={6} gridTemplateColumns="4fr 6fr" w="full">
141+
<Flex justifyContent="space-between" flexWrap="wrap">
142+
<Text minWidth="fit-content">
143+
{semesterYearName()} {semesterType()} {semesterYearRendered()}
144+
</Text>
145+
<HStack gap="4">
146+
<Text fontSize="sm">
147+
Units: {semesterInformation().totalUnits}
148+
</Text>
149+
<Text fontSize="sm">
150+
Hours: {semesterInformation().totalExpectedHours.toFixed(1)}
151+
</Text>
152+
</HStack>
153+
</Flex>
154+
<HStack>{/* SMALL CLASSES WILL GO HERE */}</HStack>
155+
</Grid>
151156
<Accordion.ItemIndicator>
152157
<ChevronDownIcon />
153158
</Accordion.ItemIndicator>

‎src/components/layout/Sidebar.tsx

+62-47
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,33 @@
11
import { A } from "@solidjs/router";
22
import type { Component } from "solid-js";
3-
import { Box, Flex, HStack, Stack } from "styled-system/jsx";
3+
import { Box, HStack, Stack, VStack } from "styled-system/jsx";
44

55
import { SquareCheckIcon } from "lucide-solid";
6-
import About from "~/components/About";
76
import Audit from "~/components/Audit";
87
import Settings from "~/components/Settings";
9-
import ThemeToggler from "~/components/ThemeToggler";
108
import { Icon } from "~/components/ui/icon";
11-
import { Link } from "~/components/ui/link";
9+
import { Link, type LinkProps } from "~/components/ui/link";
1210
import { Text } from "~/components/ui/text";
1311

14-
import type {
15-
CourseRequirementsWithKey,
16-
Reqs,
17-
SimplifiedSelectedSubjects,
18-
} from "~/context/types";
12+
import type { CourseRequirementsWithKey } from "~/context/types";
13+
14+
import sipbLogo from "~/assets/simple-fuzzball.png";
1915

2016
const Sidebar: Component<{
2117
changeYear: (year: number) => void;
2218
reqList: CourseRequirementsWithKey[];
2319
}> = (props) => {
2420
return (
25-
<Stack>
26-
<SidebarButtons changeYear={props.changeYear} />
27-
<Audit reqList={props.reqList} />
28-
</Stack>
29-
);
30-
};
31-
32-
const SidebarButtons: Component<{
33-
changeYear: (year: number) => void;
34-
}> = (props) => {
35-
return (
36-
<HStack>
37-
<About />
38-
<ThemeToggler />
39-
<Settings changeYear={props.changeYear} />
40-
</HStack>
21+
<>
22+
<Stack h="full">
23+
<Stack flex={1} overflowY="auto">
24+
<Audit reqList={props.reqList} />
25+
</Stack>
26+
<HStack justifyContent="end">
27+
<Settings changeYear={props.changeYear} />
28+
</HStack>
29+
</Stack>
30+
</>
4131
);
4232
};
4333

@@ -56,11 +46,11 @@ export const SidebarWarningText: Component = () => {
5646
target="_blank"
5747
rel="noreferrer"
5848
href="https://student.mit.edu/cgi-bin/shrwsdau.sh"
59-
>
60-
official audit
61-
</A>
49+
/>
6250
)}
63-
/>
51+
>
52+
official audit
53+
</Link>
6454
,{" "}
6555
<Link
6656
asChild={(linkProps) => (
@@ -69,11 +59,11 @@ export const SidebarWarningText: Component = () => {
6959
target="_blank"
7060
rel="noreferrer"
7161
href="http://student.mit.edu/catalog/index.cgi"
72-
>
73-
course catalog
74-
</A>
62+
/>
7563
)}
76-
/>
64+
>
65+
course catalog
66+
</Link>
7767
, and{" "}
7868
<Link
7969
asChild={(linkProps) => (
@@ -82,11 +72,11 @@ export const SidebarWarningText: Component = () => {
8272
target="_blank"
8373
rel="noreferrer"
8474
href="http://catalog.mit.edu/degree-charts/"
85-
>
86-
degree charts
87-
</A>
75+
/>
8876
)}
89-
/>{" "}
77+
>
78+
degree charts
79+
</Link>{" "}
9080
and confirm with your department advisors.
9181
</Text>
9282
);
@@ -103,27 +93,27 @@ export const SidebarProbelmsEmail: Component = () => {
10393
target="_blank"
10494
rel="noreferrer"
10595
href="https://fireroad.mit.edu/requirements/"
106-
>
107-
here
108-
</A>
96+
/>
10997
)}
110-
/>{" "}
98+
>
99+
here
100+
</Link>{" "}
111101
or send an email to{" "}
112102
<Link
113103
asChild={(linkProps) => (
114-
<a {...linkProps} href="mailto:[email protected]">
115-
[email protected]
116-
</a>
104+
<a {...linkProps} href="mailto:[email protected]" />
117105
)}
118-
/>
106+
>
107+
[email protected]
108+
</Link>
119109
.
120110
</Text>
121111
);
122112
};
123113

124114
export const SidebarTitle: Component = () => {
125115
return (
126-
<Flex>
116+
<VStack alignItems="start">
127117
<Box p={2} bg="colorPalette.default" color="colorPalette.fg">
128118
<HStack>
129119
<Icon asChild={(childProps) => <SquareCheckIcon {...childProps} />} />
@@ -132,7 +122,32 @@ export const SidebarTitle: Component = () => {
132122
</Text>
133123
</HStack>
134124
</Box>
135-
</Flex>
125+
</VStack>
126+
);
127+
};
128+
129+
// TODO: find nice way of integrating logo
130+
// do we want to? it would match hydrant ig but idk
131+
export const SIPBLogo: Component<LinkProps> = (props) => {
132+
return (
133+
<Link
134+
{...props}
135+
asChild={(linkProps) => (
136+
<A
137+
{...linkProps}
138+
target="_blank"
139+
rel="noreferrer"
140+
href="https://sipb.mit.edu"
141+
/>
142+
)}
143+
>
144+
By SIPB
145+
<Icon
146+
asChild={(iconProps) => (
147+
<img {...iconProps} src={sipbLogo} alt="SIPB Logo" />
148+
)}
149+
/>
150+
</Link>
136151
);
137152
};
138153

‎src/components/layout/SidebarContainer.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import type { ParentComponent } from "solid-js";
22

3-
import { Flex, Stack } from "styled-system/jsx";
3+
import { Flex, Float, Stack } from "styled-system/jsx";
4+
import About from "~/components/About";
5+
import ThemeToggler from "~/components/ThemeToggler";
46
import {
57
SidebarProbelmsEmail,
68
SidebarTitle,
@@ -18,11 +20,17 @@ const SidebarContainer: ParentComponent<{
1820
<Flex class={props.headerClass}>
1921
<SidebarTitle />
2022
</Flex>
23+
<Float placement="top-end" offset="9">
24+
<About />
25+
</Float>
2126
<Stack class={props.bodyClass}>{props.children}</Stack>
2227
<Stack class={props.footerClass} color="fg.muted">
2328
<SidebarWarningText />
2429
<SidebarProbelmsEmail />
2530
</Stack>
31+
<Float placement="bottom-end" offset="9">
32+
<ThemeToggler />
33+
</Float>
2634
</aside>
2735
);
2836
};

0 commit comments

Comments
 (0)