Feature: Add Tag and Resource filtering to the calendar pages

.github/workflows/check.yml

@@ -0,0 +1,25 @@
+name: Frontend Check
+
+on: [push, pull_request]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        # Uses the official action to install Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+        working-directory: ./frontend
+
+      - name: Run check script
+        # This executes the "check" script defined in your package.json
+        run: bun run check
+        working-directory: ./frontend

.github/workflows/frontend.yml

@@ -3,6 +3,10 @@ name: Docker Build InfoSections frontend
 on:
     push:
         branches: [ release ]
+    workflow_run:
+      workflows: ["Frontend Check"]
+      types:
+        - completed
 
 jobs:
   build:

frontend/src/lib/ACalToAdd.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { CalendarDBModel } from "./utils";
+    import type { CalendarDBModel } from "./cal.utils";
 
     let {
         calendar,
@@ -21,7 +21,7 @@
         bind:checked={checked}
         onchange={(event) => addToCalsToAdd(event, calendar.id)}
     />
-    <label for="caltoadd{calendar.id}" class="w-full h-full block p-2 flex items-center gap-2 cursor-pointer">
+    <label for="caltoadd{calendar.id}" class="w-full h-full p-2 flex items-center gap-2 cursor-pointer">
         <div class="dot w-3 h-3 {checked ? "bg-green-600" : "bg-accent"} rounded-xl"></div>
         {calendar.name}
     </label>

frontend/src/lib/AnIncludedCalendar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { Shield, CalendarDays, TriangleAlert, X } from "@lucide/svelte";
-    import { type CalendarDBModel } from "@/utils";
-    import { Button } from "@/components/ui/button";
     import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+    import { type CalendarDBModel } from "@/cal.utils";
+    import { Button } from "@/components/ui/button";
 
     let { 
         calendarId,

frontend/src/lib/Calendar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { CalendarCustomizations, CalendarFilters } from "./utils";
+    import type { CalendarCustomizations, CalendarFilters } from "./cal.utils";
     import MonthCalView from "./calendar/monthView/MonthCalView.svelte";
     import WeekCalView from "./calendar/weekView/WeekCalView.svelte";
     import type { EventDBModelExpanded } from "./event.utils";

frontend/src/lib/Day.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { dateRangeOverlaps, LONGDAYTOSTRING, MONTHTOSTRING, type CalendarCustomizations, type CalendarFilters } from "./utils";
+    import { type CalendarCustomizations, type CalendarFilters } from "./cal.utils";
+    import { dateRangeOverlaps, LONGDAYTOSTRING, MONTHTOSTRING } from "./utils";
     import { type EventDBModelExpanded } from "./event.utils";
     import { Temporal } from "temporal-polyfill";
     import Event from "./Event.svelte";

frontend/src/lib/Event.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
     import { CalendarPlus, ClipboardClock, Clock, MapPin } from "@lucide/svelte";
-    import { MONTHTOSTRING, type CalendarCustomizations } from "./utils";
-    import EventResources from "./EventResources.svelte";
+    import { type CalendarCustomizations } from "./cal.utils";
     import { type EventDBModelExpanded } from "./event.utils";
+    import EventResources from "./EventResources.svelte";
     import EventTimes from "./EventTimes.svelte";
     import { Temporal } from "temporal-polyfill";
+    import { MONTHTOSTRING } from "./utils";
     import Time from "./Time.svelte";
 
     let { event, currentDay, calendarCustomizations, timeZone }: { event: EventDBModelExpanded, currentDay: Temporal.ZonedDateTime, calendarCustomizations: CalendarCustomizations, timeZone: Temporal.TimeZoneLike } = $props();

frontend/src/lib/EventResources.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
+    import type { EventDBModelExpanded } from "./event.utils";
     import { Package,  Warehouse } from "@lucide/svelte";
-    import type { EventDBModel, EventDBModelExpanded } from "./event.utils";
 
     let { resources, showResourcePathname, showResources, showRooms }: { resources: EventDBModelExpanded["expand"]["resources"], showResourcePathname: boolean, showResources: boolean, showRooms: boolean } = $props();
 
-    let res: Exclude<EventDBModel["resources"], null> = $state([]);
-    let rooms: Exclude<EventDBModel["resources"], null> = $state([]);
+    let res: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
+    let rooms: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
 
     $effect(() => {
         if (resources && resources !== null) {

frontend/src/lib/EverythingSearch.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import type { CalendarDBModel, EventListDBModel, ImageFeedDBModel } from "./utils";
+    import type { EventListDBModel, ImageFeedDBModel } from "./utils";
     import Badge from "./components/ui/badge/badge.svelte";
     import * as Kbd from "$lib/components/ui/kbd/index.js";
+    import type { CalendarDBModel } from "./cal.utils";
     import { Input } from "@/components/ui/input";
     import {  Search, } from "@lucide/svelte";
     import { goto } from "$app/navigation";

frontend/src/lib/IncludedCalendars.svelte

@@ -3,8 +3,8 @@
     import * as Dialog from "$lib/components/ui/dialog/index.js";
     import AnIncludedCalendar from "./AnIncludedCalendar.svelte";
     import * as Empty from "$lib/components/ui/empty/index.js";
+    import { type CalendarDBModel } from "@/cal.utils";
     import { Button } from "@/components/ui/button";
-    import { type CalendarDBModel } from "@/utils";
     import { CalendarDays } from "@lucide/svelte";
     import ACalToAdd from "./ACalToAdd.svelte";
     import { toast } from "svelte-sonner";
@@ -107,7 +107,7 @@
 </div>
 
 <Dialog.Root bind:open={includeACalendarPopup}>
-    <Dialog.Content class="sm:max-w-[500px] max-h-screen overflow-y-auto" style="max-height: calc(100vh - 50px);">
+    <Dialog.Content class="sm:max-w-125 max-h-screen overflow-y-auto" style="max-height: calc(100vh - 50px);">
         <Dialog.Header>
             <Dialog.Title>Incude Calendar</Dialog.Title>
             <Dialog.Description>KEEP IN MIND that a password protected calendar will be public and will not require a password. Also, any calendar that has access to UNPUBLISHED events also will be public.

frontend/src/lib/cal.utils.ts

@@ -0,0 +1,64 @@
+import type { RecordModel } from "pocketbase";
+
+export type CalendarCustomizations = {
+	viewType: "3day" | "week" | "month",
+	useAMPM: boolean,
+    showResourcePathname: boolean,
+	onlyShowLocationTitle: boolean,
+	showLocation: boolean,
+	showResources: boolean,
+	showRooms: boolean,
+	showDescription: boolean
+}
+
+export const defaultCalendarCustomizations: CalendarCustomizations = {
+	viewType: "3day",
+	useAMPM: true,
+	showResourcePathname: false,
+	onlyShowLocationTitle: false,
+	showLocation: true,
+	showResources: true,
+	showRooms: true,
+	showDescription: false
+}
+
+export type CalendarFilters = {
+	onlyShowFeatured: boolean,
+	hideUnpublished: boolean,
+	resourceFilterType: "allow" | "block"
+	allowResources: string[],
+	blockResources: string[],
+	enableResourceFiltering: boolean,
+	tagFilterType: "allow" | "block",
+	allowTags: string[],
+	blockTags: string[],
+	enableTagFiltering: boolean
+};
+
+export const defaultCalendarFilters: CalendarFilters = {
+	hideUnpublished: true,
+	onlyShowFeatured: true,
+	resourceFilterType: "block",
+	allowResources: [],
+	blockResources: [],
+	enableResourceFiltering: false,
+	tagFilterType: "block",
+	allowTags: [],
+	blockTags: [],
+	enableTagFiltering: false
+}
+
+export interface CalendarDBModel extends RecordModel {
+	name: string,
+	password: string,
+	passwordEnabled: boolean,
+	owner: string,
+	logo: string | File,
+	visits: number,
+	filters: CalendarFilters,
+	description: string,
+	passwordScreenMessage: string,
+	displaySettings: CalendarCustomizations,
+	created: string,
+	updated: string
+}

frontend/src/lib/calendar/monthView/MonthCalView.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { getDaysInMonth, type CalendarCustomizations } from "../../utils";
+    import { type CalendarCustomizations } from "../../cal.utils";
     import MonthCalViewDay from "./MonthCalViewDay.svelte";
     import { type EventDBModel } from "../../event.utils";
+    import { getDaysInMonth } from "../../utils";
     import { Temporal } from "temporal-polyfill";
 
     let {

frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { cn, getEventsForDate, isSameDay, type CalendarCustomizations } from "../../utils";
     import MonthCalViewDayEvent from "./MonthCalViewDayEvent.svelte";
+    import { cn, getEventsForDate, isSameDay } from "../../utils";
+    import { type CalendarCustomizations } from "../../cal.utils";
     import { type EventDBModel } from "../../event.utils";
     import { Temporal } from "temporal-polyfill";
 

frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { CalendarCustomizations } from "@/utils";
+    import type { CalendarCustomizations } from "@/cal.utils";
     import type { EventDBModel } from "@/event.utils";
     import { Temporal } from "temporal-polyfill";
     import Time from "@/Time.svelte";

frontend/src/lib/calendar/weekView/WeekCalView.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { getDayRange, type CalendarCustomizations } from "../../utils";
+    import { type CalendarCustomizations } from "../../cal.utils";
     import { type EventDBModel } from "../../event.utils";
     import WeekCalViewDay from "./WeekCalViewDay.svelte";
     import { Temporal } from "temporal-polyfill";
+    import { getDayRange } from "../../utils";
 
     let {
         events,

frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { cn, getEventsForDate, isSameDay, type CalendarCustomizations } from "../../utils";
     import WeekCalViewDayEvent from "./WeekCalViewDayEvent.svelte";
+    import { type CalendarCustomizations } from "../../cal.utils";
+    import { cn, getEventsForDate, isSameDay } from "../../utils";
     import { type EventDBModel } from "../../event.utils";
     import { Temporal } from "temporal-polyfill";
 

frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { type CalendarCustomizations, MONTHTOSTRING } from "@/utils";
+    import { type CalendarCustomizations } from "@/cal.utils";
     import { CalendarPlus, Clock, } from "@lucide/svelte";
     import { type EventDBModel } from "@/event.utils";
     import { Temporal } from "temporal-polyfill";
+    import { MONTHTOSTRING } from "@/utils";
     import Time from "@/Time.svelte";
 
     let { event, currentDay, calendarCustomizations, timeZone }: { event: EventDBModel, currentDay: Temporal.ZonedDateTime, calendarCustomizations: CalendarCustomizations, timeZone: Temporal.TimeZoneLike } = $props();

frontend/src/lib/components/ui/checkbox/checkbox.svelte

@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked

frontend/src/lib/components/ui/item/index.ts

@@ -0,0 +1,34 @@
+import Root from "./item.svelte";
+import Group from "./item-group.svelte";
+import Separator from "./item-separator.svelte";
+import Header from "./item-header.svelte";
+import Footer from "./item-footer.svelte";
+import Content from "./item-content.svelte";
+import Title from "./item-title.svelte";
+import Description from "./item-description.svelte";
+import Actions from "./item-actions.svelte";
+import Media from "./item-media.svelte";
+
+export {
+	Root,
+	Group,
+	Separator,
+	Header,
+	Footer,
+	Content,
+	Title,
+	Description,
+	Actions,
+	Media,
+	//
+	Root as Item,
+	Group as ItemGroup,
+	Separator as ItemSeparator,
+	Header as ItemHeader,
+	Footer as ItemFooter,
+	Content as ItemContent,
+	Title as ItemTitle,
+	Description as ItemDescription,
+	Actions as ItemActions,
+	Media as ItemMedia,
+};

frontend/src/lib/components/ui/item/item-actions.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-actions"
+	class={cn("gap-2 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/item/item-content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-content"
+	class={cn(
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

frontend/src/lib/components/ui/item/item-description.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="item-description"
+	class={cn(
+		"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>

frontend/src/lib/components/ui/item/item-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-footer"
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>