path: root/apps/web/app/reader/settings/_components/appearance-settings.tsx

"use client"

import { useTheme } from "next-themes"
import { useUserInterfaceStore } from "@/lib/stores/user-interface-store"

function SettingsSection({
  title,
  defaultOpen,
  children,
}: {
  title: string
  defaultOpen?: boolean
  children: React.ReactNode
}) {
  return (
    <details open={defaultOpen} className="group border-b border-border last:border-b-0">
      <summary className="cursor-pointer select-none px-4 py-3 text-text-primary transition-colors hover:bg-background-tertiary">
        {title}
      </summary>
      <div className="mb-4 space-y-6 px-4 pb-6">{children}</div>
    </details>
  )
}

export function AppearanceSettings() {
  const { theme, setTheme } = useTheme()
  const entryListViewMode = useUserInterfaceStore(
    (state) => state.entryListViewMode
  )
  const setEntryListViewMode = useUserInterfaceStore(
    (state) => state.setEntryListViewMode
  )
  const displayDensity = useUserInterfaceStore(
    (state) => state.displayDensity
  )
  const setDisplayDensity = useUserInterfaceStore(
    (state) => state.setDisplayDensity
  )
  const showFeedFavicons = useUserInterfaceStore(
    (state) => state.showFeedFavicons
  )
  const setShowFeedFavicons = useUserInterfaceStore(
    (state) => state.setShowFeedFavicons
  )
  const focusFollowsInteraction = useUserInterfaceStore(
    (state) => state.focusFollowsInteraction
  )
  const setFocusFollowsInteraction = useUserInterfaceStore(
    (state) => state.setFocusFollowsInteraction
  )
  const timeDisplayFormat = useUserInterfaceStore(
    (state) => state.timeDisplayFormat
  )
  const setTimeDisplayFormat = useUserInterfaceStore(
    (state) => state.setTimeDisplayFormat
  )
  const showEntryImages = useUserInterfaceStore(
    (state) => state.showEntryImages
  )
  const setShowEntryImages = useUserInterfaceStore(
    (state) => state.setShowEntryImages
  )
  const showReadingTime = useUserInterfaceStore(
    (state) => state.showReadingTime
  )
  const setShowReadingTime = useUserInterfaceStore(
    (state) => state.setShowReadingTime
  )
  const showEntryFavicons = useUserInterfaceStore(
    (state) => state.showEntryFavicons
  )
  const setShowEntryFavicons = useUserInterfaceStore(
    (state) => state.setShowEntryFavicons
  )
  const showFoldersAboveFeeds = useUserInterfaceStore(
    (state) => state.showFoldersAboveFeeds
  )
  const setShowFoldersAboveFeeds = useUserInterfaceStore(
    (state) => state.setShowFoldersAboveFeeds
  )
  const prioritiseUnreadEntries = useUserInterfaceStore(
    (state) => state.prioritiseUnreadEntries
  )
  const setPrioritiseUnreadEntries = useUserInterfaceStore(
    (state) => state.setPrioritiseUnreadEntries
  )
  const autoRefreshTimeline = useUserInterfaceStore(
    (state) => state.autoRefreshTimeline
  )
  const setAutoRefreshTimeline = useUserInterfaceStore(
    (state) => state.setAutoRefreshTimeline
  )
  const scrollbarStyle = useUserInterfaceStore(
    (state) => state.scrollbarStyle
  )
  const setScrollbarStyle = useUserInterfaceStore(
    (state) => state.setScrollbarStyle
  )
  const toolbarPosition = useUserInterfaceStore(
    (state) => state.toolbarPosition
  )
  const setToolbarPosition = useUserInterfaceStore(
    (state) => state.setToolbarPosition
  )

  return (
    <div className="py-1">
      <SettingsSection title="general" defaultOpen>
        <div>
          <h3 className="mb-2 text-text-primary">theme</h3>
          <p className="mb-3 text-text-dim">
            controls the colour scheme of the application
          </p>
          <select
            value={theme ?? "system"}
            onChange={(event) => setTheme(event.target.value)}
            className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
          >
            <option value="system">system</option>
            <option value="light">light</option>
            <option value="dark">dark</option>
          </select>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">display density</h3>
          <p className="mb-3 text-text-dim">
            controls the overall text size and spacing
          </p>
          <select
            value={displayDensity}
            onChange={(event) =>
              setDisplayDensity(
                event.target.value as "compact" | "default" | "spacious"
              )
            }
            className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
          >
            <option value="compact">compact</option>
            <option value="default">default</option>
            <option value="spacious">spacious</option>
          </select>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">toolbar position</h3>
          <p className="mb-3 text-text-dim">
            place the toolbar at the top or bottom of the reader
          </p>
          <select
            value={toolbarPosition}
            onChange={(event) =>
              setToolbarPosition(event.target.value as "top" | "bottom")
            }
            className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
          >
            <option value="top">top</option>
            <option value="bottom">bottom</option>
          </select>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">scrollbars</h3>
          <p className="mb-3 text-text-dim">
            choose between themed scrollbars, platform native, or hidden
          </p>
          <select
            value={scrollbarStyle}
            onChange={(event) =>
              setScrollbarStyle(
                event.target.value as "custom" | "native" | "hidden"
              )
            }
            className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
          >
            <option value="custom">themed</option>
            <option value="native">native</option>
            <option value="hidden">hidden</option>
          </select>
        </div>
      </SettingsSection>

      <SettingsSection title="entry list">
        <div>
          <h3 className="mb-2 text-text-primary">entry list view</h3>
          <p className="mb-3 text-text-dim">
            controls how entries are displayed in the list
          </p>
          <select
            value={entryListViewMode}
            onChange={(event) =>
              setEntryListViewMode(
                event.target.value as "compact" | "comfortable" | "expanded"
              )
            }
            className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
          >
            <option value="compact">compact</option>
            <option value="comfortable">comfortable</option>
            <option value="expanded">expanded</option>
          </select>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">entry images</h3>
          <p className="mb-3 text-text-dim">
            show thumbnail images next to entries in the expanded view
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={showEntryImages}
              onChange={(event) => setShowEntryImages(event.target.checked)}
              className="accent-text-primary"
            />
            <span>show entry images</span>
          </label>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">entry favicons</h3>
          <p className="mb-3 text-text-dim">
            show website icons next to feed names in the entry list
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={showEntryFavicons}
              onChange={(event) => setShowEntryFavicons(event.target.checked)}
              className="accent-text-primary"
            />
            <span>show entry favicons</span>
          </label>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">reading time</h3>
          <p className="mb-3 text-text-dim">
            display estimated reading time for articles
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={showReadingTime}
              onChange={(event) => setShowReadingTime(event.target.checked)}
              className="accent-text-primary"
            />
            <span>show reading time</span>
          </label>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">time display</h3>
          <p className="mb-3 text-text-dim">
            choose between relative timestamps (e.g. &ldquo;2h ago&rdquo;) or
            absolute dates
          </p>
          <select
            value={timeDisplayFormat}
            onChange={(event) =>
              setTimeDisplayFormat(
                event.target.value as "relative" | "absolute"
              )
            }
            className="border border-border bg-background-primary px-3 py-2 text-text-primary outline-none focus:border-text-dim"
          >
            <option value="relative">relative</option>
            <option value="absolute">absolute</option>
          </select>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">unread priority</h3>
          <p className="mb-3 text-text-dim">
            push unread articles to the top of the entry list
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={prioritiseUnreadEntries}
              onChange={(event) => setPrioritiseUnreadEntries(event.target.checked)}
              className="accent-text-primary"
            />
            <span>prioritise unread entries</span>
          </label>
        </div>
      </SettingsSection>

      <SettingsSection title="sidebar">
        <div>
          <h3 className="mb-2 text-text-primary">feed favicons</h3>
          <p className="mb-3 text-text-dim">
            show website icons next to feed names in the sidebar
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={showFeedFavicons}
              onChange={(event) => setShowFeedFavicons(event.target.checked)}
              className="accent-text-primary"
            />
            <span>show favicons</span>
          </label>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">sidebar ordering</h3>
          <p className="mb-3 text-text-dim">
            display folders above ungrouped feeds in the sidebar
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={showFoldersAboveFeeds}
              onChange={(event) => setShowFoldersAboveFeeds(event.target.checked)}
              className="accent-text-primary"
            />
            <span>show folders above feeds</span>
          </label>
        </div>
      </SettingsSection>

      <SettingsSection title="behaviour">
        <div>
          <h3 className="mb-2 text-text-primary">automatic refresh</h3>
          <p className="mb-3 text-text-dim">
            automatically load new entries when they arrive, instead of showing
            a notification. only refreshes when scrolled to the top of the entry
            list to preserve your reading position.
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={autoRefreshTimeline}
              onChange={(event) =>
                setAutoRefreshTimeline(event.target.checked)
              }
              className="accent-text-primary"
            />
            <span>enable automatic refresh</span>
          </label>
        </div>
        <div>
          <h3 className="mb-2 text-text-primary">focus follows interaction</h3>
          <p className="mb-3 text-text-dim">
            automatically move keyboard panel focus to the last pane you
            interacted with (clicked or scrolled)
          </p>
          <label className="flex cursor-pointer items-center gap-2 text-text-primary">
            <input
              type="checkbox"
              checked={focusFollowsInteraction}
              onChange={(event) =>
                setFocusFollowsInteraction(event.target.checked)
              }
              className="accent-text-primary"
            />
            <span>enable focus follows interaction</span>
          </label>
        </div>
      </SettingsSection>
    </div>
  )
}