Feature/folder naming clean up

eslint.config.mjs

@@ -33,6 +33,16 @@ export default tseslint.config(
       "unicorn/prevent-abbreviations": "off",
       "unicorn/no-null": "off",
 
+      "unicorn/filename-case": [
+        "error",
+        {
+          cases: {
+            kebabCase: true,
+            pascalCase: true,
+          },
+        },
+      ],
+
       // Next.js rules
       ...pluginNext.configs.recommended.rules,
       ...pluginNext.configs["core-web-vitals"].rules,

src/components/CalendarViewUI/calendar-grid.tsx → src/app/CalendarView/CalendarGrid.tsx

@@ -1,7 +1,7 @@
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 
-import DayCell from "./day-cell";
+import DayCell from "./DayCell";
 
 export default function CalendarGrid({
   daysInMonth,

src/components/CalendarViewUI/calendar-view.tsx → src/app/CalendarView/CalendarView.tsx

@@ -1,4 +1,4 @@
-import MonthSection from "./month-section";
+import MonthSection from "./MonthSection";
 
 export default function CalendarView(): React.ReactElement {
   return (

src/components/CalendarViewUI/day-cell.tsx → src/app/CalendarView/DayCell.tsx

@@ -1,7 +1,7 @@
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 
-import EventItem from "./event-item";
+import EventItem from "./EventItem";
 
 export default function DayCell({ day }: { day: number }): React.ReactElement {
   return (

src/components/CalendarViewUI/month-section.tsx → src/app/CalendarView/MonthSection.tsx

@@ -1,6 +1,6 @@
 import Box from "@mui/material/Box";
 
-import CalendarGrid from "./calendar-grid";
+import CalendarGrid from "./CalendarGrid";
 
 export default function MonthSection({
   monthName,

src/components/Filters/check-boxes.tsx → src/app/Filters/CheckBoxes.tsx

@@ -43,14 +43,14 @@ type CheckboxOption<T extends string> = {
   label: string;
 };
 
-type CheckboxesGroupProps<T extends Record<string, boolean>> = {
+type CheckboxGroupProps<T extends Record<string, boolean>> = {
   checked: T;
   setChecked: React.Dispatch<React.SetStateAction<T>>;
   options: readonly CheckboxOption<Extract<keyof T, string>>[];
 };
 
-export default function CheckboxesGroup<T extends Record<string, boolean>>(
-  props: CheckboxesGroupProps<T>,
+export default function CheckboxGroup<T extends Record<string, boolean>>(
+  props: CheckboxGroupProps<T>,
 ): React.ReactElement {
   const { checked, setChecked, options } = props;
 

src/components/Filters/date-picker.tsx → src/app/Filters/DateRangePicker.tsx

@@ -9,7 +9,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { Dayjs } from "dayjs";
 import * as React from "react";
 
-export default function DatePickerValue(): React.ReactElement {
+export default function DateRangePicker(): React.ReactElement {
   const [start, setStart] = React.useState<Dayjs | null>(null);
   const [end, setEnd] = React.useState<Dayjs | null>(null);
 

src/components/Filters/dropdown-menu.tsx → src/app/Filters/FiltersDropdown.tsx

@@ -35,7 +35,7 @@ type DropdownProps = {
   onChange: (event: SelectChangeEvent) => void;
 };
 
-export default function Dropdown({
+export default function FiltersDropdown({
   label,
   value,
   options,

src/components/Filters/modal.tsx → src/app/Filters/FiltersModal.tsx

@@ -17,9 +17,9 @@ import {
 import { SelectChangeEvent } from "@mui/material/Select";
 import * as React from "react";
 
-import CheckboxesGroup from "./check-boxes";
-import DatePickerValue from "./date-picker";
-import Dropdown from "./dropdown-menu";
+import CheckboxesGroup from "./CheckBoxes";
+import DatePickerValue from "./DateRangePicker";
+import Dropdown from "./FiltersDropdown";
 
 type FiltersModalProps = {
   open: boolean;

src/components/Filters/index.tsx → src/app/Filters/index.tsx

@@ -7,8 +7,8 @@ import { Box, Button } from "@mui/material";
 import { SelectChangeEvent } from "@mui/material/Select";
 import * as React from "react";
 
-import Dropdown from "./dropdown-menu";
-import FiltersModal from "./modal";
+import Dropdown from "./FiltersDropdown";
+import FiltersModal from "./FiltersModal";
 
 export default function Filters(): React.ReactElement {
   const [open, setOpen] = React.useState(false);

src/components/ProfileDropdown/index.tsx → src/app/Header/ProfileDropdown.tsx

@@ -47,6 +47,7 @@ export default function ProfileDropdown(): React.ReactElement {
             width={32}
             height={32}
             alt="User avatar"
+            draggable={false}
           />
         )}
       </Box>
@@ -65,52 +66,44 @@ export default function ProfileDropdown(): React.ReactElement {
       >
         <MenuItem
           onClick={() => {
-            void router.push("/update-profile");
+            void router.push("/account/update-profile");
             handleClose();
           }}
         >
           Update Profile
         </MenuItem>
         <MenuItem
           onClick={() => {
-            void router.push("/change-password");
+            void router.push("/account/change-password");
             handleClose();
           }}
         >
           Change Password
         </MenuItem>
         <MenuItem
           onClick={() => {
-            void router.push("/manage-affiliations");
+            void router.push("/account/manage-affiliations");
             handleClose();
           }}
         >
           Manage Affiliations
         </MenuItem>
         <MenuItem
           onClick={() => {
-            void router.push("/view-hours");
+            void router.push("/account/view-hours");
             handleClose();
           }}
         >
           View Hours
         </MenuItem>
         <MenuItem
           onClick={() => {
-            void router.push("/notification-settings");
+            void router.push("/account/notification-settings");
             handleClose();
           }}
         >
           Notification Settings
         </MenuItem>
-        <MenuItem
-          onClick={() => {
-            void router.push("/language");
-            handleClose();
-          }}
-        >
-          Language
-        </MenuItem>
         <MenuItem
           onClick={() => {
             void signOut({ callbackUrl: "/" });

src/components/Header/index.tsx → src/app/Header/index.tsx

@@ -11,9 +11,8 @@ import Link from "next/link";
 import { useSession } from "next-auth/react";
 import * as React from "react";
 
-import AuthButton from "../AuthButton";
-import DefaultButton from "../DefaultButton";
-import ProfileDropdown from "../ProfileDropdown";
+import ProfileDropdown from "@/app/Header/ProfileDropdown";
+import { AuthButton, DefaultButton } from "@/components/Button";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
@@ -106,7 +105,6 @@ export default function Header(): React.ReactElement {
                 variant="h6"
                 noWrap
                 component="a"
-                href="#app-bar-with-responsive-menu"
                 sx={{
                   ml: 1,
                   mr: 2,

src/app/README.md

@@ -0,0 +1,7 @@
+## App Directory Conventions
+
+- kebab-case folders represent routes (URL segments)
+- PascalCase folders represent colocated components
+- A folder becomes a route only if it contains page.tsx, layout.tsx, etc.
+- Components colocated in app are scoped to that route
+- Helpers use camelCase

src/components/ToggleViews/calendar-view.tsx → src/app/ToggleViews/CalendarView.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import * as React from "react";
 
-import type { View } from "../ToggleViews/view-types";
+import type { View } from "./view-types";
 
 type CalendarViewProps = {
   activeView: View;

src/components/ToggleViews/list-view.tsx → src/app/ToggleViews/ListView.tsx

@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import * as React from "react";
 
-import type { View } from "../ToggleViews/view-types";
+import type { View } from "./view-types";
 
 type ListViewProps = {
   activeView: View;

src/components/ToggleViews/index.tsx → src/app/ToggleViews/index.tsx

@@ -5,9 +5,9 @@ import MapIcon from "@mui/icons-material/Map";
 import { Box, ButtonGroup, IconButton } from "@mui/material";
 import * as React from "react";
 
-import CalendarView from "./calendar-view";
-import ListView from "./list-view";
-import MapView from "./map-view";
+import CalendarView from "./CalendarView";
+import ListView from "./ListView";
+import MapView from "./MapView";
 import { View } from "./view-types";
 
 export default function ToggleViews(): React.ReactElement {

src/components/VolunteerEventCard/index.tsx → src/app/VolunteerEventCard.tsx

@@ -8,7 +8,7 @@ import Typography from "@mui/material/Typography";
 import { useSession } from "next-auth/react";
 import * as React from "react";
 
-import DefaultButton from "../DefaultButton";
+import { DefaultButton } from "@/components/Button";
 
 export default function VolunteerEventCard(): React.ReactElement {
   const { status } = useSession();
@@ -32,7 +32,7 @@ export default function VolunteerEventCard(): React.ReactElement {
             </Box>
 
             {status === "authenticated" && (
-              <DefaultButton label="Sign Up" href="/" />
+              <DefaultButton label="Register" href="/" />
             )}
           </Box>