fix: lint and format cmds
Some checks failed
CI / install (pull_request) Successful in 3m28s
CI / lint (pull_request) Failing after 45s
CI / type-check (pull_request) Failing after 43s
CI / build (pull_request) Failing after 10m2s
CI / format-check (pull_request) Failing after 10m7s

This commit is contained in:
Tobias Klemp
2025-12-03 22:27:18 +01:00
parent c49cd85a09
commit cce1dfff33
21 changed files with 369 additions and 353 deletions

View File

@@ -1,65 +1,65 @@
import { IsMobile } from "$lib/hooks/is-mobile.svelte.js";
import { getContext, setContext } from "svelte";
import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
import { IsMobile } from '$lib/hooks/is-mobile.svelte.js'
import { getContext, setContext } from 'svelte'
import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js'
type Getter<T> = () => T;
type Getter<T> = () => T
export type SidebarStateProps = {
/**
* A getter function that returns the current open state of the sidebar.
* We use a getter function here to support `bind:open` on the `Sidebar.Provider`
* component.
*/
open: Getter<boolean>;
/**
* A getter function that returns the current open state of the sidebar.
* We use a getter function here to support `bind:open` on the `Sidebar.Provider`
* component.
*/
open: Getter<boolean>
/**
* A function that sets the open state of the sidebar. To support `bind:open`, we need
* a source of truth for changing the open state to ensure it will be synced throughout
* the sub-components and any `bind:` references.
*/
setOpen: (open: boolean) => void;
};
class SidebarState {
readonly props: SidebarStateProps;
open = $derived.by(() => this.props.open());
openMobile = $state(false);
setOpen: SidebarStateProps["setOpen"];
#isMobile: IsMobile;
state = $derived.by(() => (this.open ? "expanded" : "collapsed"));
constructor(props: SidebarStateProps) {
this.setOpen = props.setOpen;
this.#isMobile = new IsMobile();
this.props = props;
}
// Convenience getter for checking if the sidebar is mobile
// without this, we would need to use `sidebar.isMobile.current` everywhere
get isMobile() {
return this.#isMobile.current;
}
// Event handler to apply to the `<svelte:window>`
handleShortcutKeydown = (e: KeyboardEvent) => {
if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
this.toggle();
}
};
setOpenMobile = (value: boolean) => {
this.openMobile = value;
};
toggle = () => {
return this.#isMobile.current
? (this.openMobile = !this.openMobile)
: this.setOpen(!this.open);
};
/**
* A function that sets the open state of the sidebar. To support `bind:open`, we need
* a source of truth for changing the open state to ensure it will be synced throughout
* the sub-components and any `bind:` references.
*/
setOpen: (open: boolean) => void
}
const SYMBOL_KEY = "scn-sidebar";
class SidebarState {
readonly props: SidebarStateProps
open = $derived.by(() => this.props.open())
openMobile = $state(false)
setOpen: SidebarStateProps['setOpen']
#isMobile: IsMobile
state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'))
constructor(props: SidebarStateProps) {
this.setOpen = props.setOpen
this.#isMobile = new IsMobile()
this.props = props
}
// Convenience getter for checking if the sidebar is mobile
// without this, we would need to use `sidebar.isMobile.current` everywhere
get isMobile() {
return this.#isMobile.current
}
// Event handler to apply to the `<svelte:window>`
handleShortcutKeydown = (e: KeyboardEvent) => {
if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
e.preventDefault()
this.toggle()
}
}
setOpenMobile = (value: boolean) => {
this.openMobile = value
}
toggle = () => {
return this.#isMobile.current
? (this.openMobile = !this.openMobile)
: this.setOpen(!this.open)
}
}
const SYMBOL_KEY = 'scn-sidebar'
/**
* Instantiates a new `SidebarState` instance and sets it in the context.
@@ -68,7 +68,7 @@ const SYMBOL_KEY = "scn-sidebar";
* @returns The `SidebarState` instance.
*/
export function setSidebar(props: SidebarStateProps): SidebarState {
return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props))
}
/**
@@ -77,5 +77,5 @@ export function setSidebar(props: SidebarStateProps): SidebarState {
* @returns The `SidebarState` instance.
*/
export function useSidebar(): SidebarState {
return getContext(Symbol.for(SYMBOL_KEY));
return getContext(Symbol.for(SYMBOL_KEY))
}