feat(settings): Add options to hide optional pages

Author: PrettyCoffee

src/app/layout.tsx

@@ -15,9 +15,11 @@ import { Layout } from "components/layouts/layout"
 import { Github } from "components/ui/icon"
 import { IconButton } from "components/ui/icon-button"
 import { ErrorBoundary } from "components/utility/error-boundary"
+import { preferencesData } from "data/preferences"
+import { useAtom } from "lib/yaasl"
 import { useTrans } from "locales/locale-provider"
 
-const routes = [
+export const routes = [
   { to: "/", title: msg`Time Tracker`, icon: ClockFading },
   { to: "/calendar", title: msg`Calendar View`, icon: CalendarRange },
   { to: "/search", title: msg`Search`, icon: Search },
@@ -34,13 +36,18 @@ const routes = [
 const SideActions = () => {
   const [path] = useHashLocation()
   const trans = useTrans()
+  const { hiddenRoutes = [] } = useAtom(preferencesData)
+
+  const visibleRoutes = routes.filter(
+    route => !hiddenRoutes.includes(route.to ?? route.href)
+  )
 
   const isActive = (to?: string) =>
     !to ? false : to.split("/").find(Boolean) === path.split("/").find(Boolean)
 
   return (
     <>
-      {routes.map(props => (
+      {visibleRoutes.map(props => (
         <IconButton
           key={props.to ?? props.href}
           {...props}

src/app/routes/settings/fragments/check-option.tsx

@@ -0,0 +1,96 @@
+import { KeyboardEvent } from "react"
+
+import { css, keyframes } from "goober"
+import { Check } from "lucide-react"
+
+import { Icon } from "components/ui/icon"
+import { IconProp } from "types/base-props"
+import { cn } from "utils/cn"
+import { focusNavigator } from "utils/focus-navigator"
+import { hstack, interactive } from "utils/styles"
+
+const shiftFocus = (event: KeyboardEvent, x: number) =>
+  focusNavigator({
+    event,
+    cellSelector: "button[role='checkbox']",
+    offset: { x, y: 0 },
+  })
+const eventByKey: Record<string, (event: KeyboardEvent) => void> = {
+  ArrowLeft: event => shiftFocus(event, -1),
+  ArrowUp: event => shiftFocus(event, -1),
+  ArrowRight: event => shiftFocus(event, 1),
+  ArrowDown: event => shiftFocus(event, 1),
+}
+export const checkOptionFocusManager = (event: KeyboardEvent) => {
+  if (!Object.keys(eventByKey).includes(event.key)) {
+    return
+  }
+  event.preventDefault()
+  eventByKey[event.key]?.(event)
+}
+
+const wiggle = keyframes`
+  0% {
+      rotate: 0deg;
+      scale: 0;
+  }
+  25% {
+      rotate: 10deg;
+  }
+  50% {
+    rotate: -10deg;
+    scale: 1;
+  }
+  75% {
+      rotate: 10deg;
+  }
+  100% {
+    rotate: 0deg;
+  }
+`
+
+const checkAnimation = css`
+  animation: 500ms ${wiggle} ease-in-out forwards;
+`
+
+interface CheckOptionProps extends Required<IconProp> {
+  label: string
+  active: boolean
+  onClick: () => void
+}
+export const CheckOption = ({
+  active,
+  label,
+  icon,
+  onClick,
+}: CheckOptionProps) => (
+  <label
+    className={cn(
+      interactive({ look: "ghost" }),
+      hstack({ align: "center", justify: "between", gap: 2 }),
+      "h-10 rounded-lg border-stroke-gentle pr-4 pl-2.5"
+    )}
+  >
+    <button
+      role="checkbox"
+      aria-checked={active}
+      onClick={onClick}
+      className={cn(
+        "relative inline-grid size-5 cursor-pointer place-content-center rounded-sm border-2 border-stroke-gentle",
+        active && "border-stroke-invert"
+      )}
+    >
+      {active && (
+        <Icon
+          icon={Check}
+          size="xs"
+          strokeWidth={4}
+          color="default"
+          className={cn(checkAnimation)}
+        />
+      )}
+    </button>
+    <Icon icon={icon} size="md" />
+    {label}
+  </label>
+)

src/app/routes/settings/settings-general.tsx

@@ -9,14 +9,17 @@ import {
   TableProperties,
 } from "lucide-react"
 
+import { routes } from "app/layout"
 import { Card } from "components/ui/card"
 import { Input } from "components/ui/input"
 import { Select } from "components/ui/select"
 import { preferencesData } from "data/preferences"
 import { useAtom } from "lib/yaasl"
+import { useTrans } from "locales/locale-provider"
 import { cn } from "utils/cn"
 import { vstack } from "utils/styles"
 
+import { CheckOption, checkOptionFocusManager } from "./fragments/check-option"
 import { OrChain } from "./fragments/or-chain"
 import { RadioOption, radioOptionFocusManager } from "./fragments/radio-option"
 
@@ -169,10 +172,46 @@ const SelectStyle = () => {
   )
 }
 
+const HiddenRoutes = () => {
+  const trans = useTrans()
+  const { hiddenRoutes = [] } = useAtom(preferencesData)
+  const hidableRoutes = routes.filter(({ to, href }) =>
+    /search|stats|calendar|github/i.test(to ?? href)
+  )
+  return (
+    <Card
+      title={t`Hidden pages`}
+      description={t`Hide optional pages from the navigation of the side-menu, if you don't use them.`}
+    >
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div
+        className="flex flex-row flex-wrap gap-2"
+        onKeyDown={checkOptionFocusManager}
+      >
+        {hidableRoutes.map(({ title, icon, href, to }) => {
+          const active = !hiddenRoutes.includes(href ?? to)
+          return (
+            <CheckOption
+              key={href ?? to}
+              icon={icon}
+              label={trans(title)}
+              active={active}
+              onClick={() =>
+                preferencesData.actions.toggleHiddenRoute(href ?? to, active)
+              }
+            />
+          )
+        })}
+      </div>
+    </Card>
+  )
+}
+
 export const SettingsGeneral = () => (
   <div className={cn(vstack({ gap: 2 }))}>
     <Language />
     <Locale />
+    <HiddenRoutes />
     <SummaryStyle />
     <SelectStyle />
   </div>

src/data/preferences/preferences.ts

@@ -4,6 +4,7 @@ import { createSlice, indexedDb, sync } from "lib/yaasl"
 import { Resolve } from "types/util-types"
 
 export const preferencesSchema = z.object({
+  hiddenRoutes: z.optional(z.array(z.string())), // optional for legacy reasons
   locale: z.string(),
   language: z.string(),
   summaryStyle: z.enum(["table", "grid"]),
@@ -23,6 +24,15 @@ export const preferencesData = createSlice({
   defaultValue,
   effects: [indexedDb(), sync()],
   reducers: {
+    toggleHiddenRoute: (state, route: string, checked: boolean) => {
+      const hiddenRoutes = (state.hiddenRoutes ?? []).filter(
+        path => path !== route
+      )
+      return {
+        ...state,
+        hiddenRoutes: checked ? [...hiddenRoutes, route] : hiddenRoutes,
+      }
+    },
     setLocale: (state, locale: string) => ({
       ...state,
       locale: locale || "iso",