feat(preferences): Add option to change input select menu alignment

Author: PrettyCoffee

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

@@ -2,7 +2,12 @@ import { Fragment, useState } from "react"
 
 import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
-import { LayoutGrid, TableProperties } from "lucide-react"
+import {
+  AlignVerticalJustifyCenter,
+  AlignVerticalJustifyStart,
+  LayoutGrid,
+  TableProperties,
+} from "lucide-react"
 
 import { Card } from "components/ui/card"
 import { Input } from "components/ui/input"
@@ -138,10 +143,40 @@ const SummaryStyle = () => {
   )
 }
 
+const SelectStyle = () => {
+  const { selectMenuAlignment } = useAtom(preferencesData)
+  return (
+    <Card
+      title={t`Selection menu alignment`}
+      description={t`Change how selection menus are aligned to the opening button. Either align the currently selected item with the button or move the menu underneath the button.`}
+    >
+      <OrChain role="radiogroup" onKeyDown={styleRadioButtonFocusManager}>
+        <StyleRadioButton
+          active={selectMenuAlignment === "item-aligned"}
+          icon={AlignVerticalJustifyCenter}
+          label={t`Item aligned`}
+          onClick={() =>
+            preferencesData.actions.setSelectMenuAlignment("item-aligned")
+          }
+        />
+        <StyleRadioButton
+          active={selectMenuAlignment === "popper"}
+          icon={AlignVerticalJustifyStart}
+          label={t`Bottom aligned`}
+          onClick={() =>
+            preferencesData.actions.setSelectMenuAlignment("popper")
+          }
+        />
+      </OrChain>
+    </Card>
+  )
+}
+
 export const SettingsGeneral = () => (
   <div className={cn(vstack({ gap: 2 }))}>
     <Language />
     <Locale />
     <SummaryStyle />
+    <SelectStyle />
   </div>
 )

src/components/ui/select/select.tsx

@@ -5,6 +5,8 @@ import { Dispatch, PropsWithChildren } from "react"
 import * as Primitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
+import { preferencesData } from "data/preferences"
+import { useAtom } from "lib/yaasl"
 import { ClassNameProp, DisableProp } from "types/base-props"
 import { cn } from "utils/cn"
 import { hstack, interactive, surface } from "utils/styles"
@@ -50,33 +52,37 @@ const ScrollDownButton = () => (
   </Primitive.ScrollDownButton>
 )
 
-const Content = ({ children }: PropsWithChildren) => (
-  <Primitive.Portal>
-    <Primitive.Content
-      position="item-aligned"
-      side="bottom"
-      sideOffset={4}
-      align="start"
-      className={cn(
-        zIndex.popover,
-        surface({ look: "overlay", size: "lg" }),
-        "relative max-h-(--radix-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-0",
-        "origin-(--radix-select-content-transform-origin) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
-      )}
-    >
-      <ScrollUpButton />
-      <Primitive.Viewport
+const Content = ({ children }: PropsWithChildren) => {
+  const { selectMenuAlignment } = useAtom(preferencesData)
+
+  return (
+    <Primitive.Portal>
+      <Primitive.Content
+        position={selectMenuAlignment}
+        side="bottom"
+        sideOffset={4}
+        align="start"
         className={cn(
-          "p-1",
-          "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+          zIndex.popover,
+          surface({ look: "overlay", size: "lg" }),
+          "relative max-h-(--radix-select-content-available-height) min-w-32 overflow-x-hidden overflow-y-auto p-0",
+          "origin-(--radix-select-content-transform-origin) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
         )}
       >
-        {children}
-      </Primitive.Viewport>
-      <ScrollDownButton />
-    </Primitive.Content>
-  </Primitive.Portal>
-)
+        <ScrollUpButton />
+        <Primitive.Viewport
+          className={cn(
+            "p-1",
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1"
+          )}
+        >
+          {children}
+        </Primitive.Viewport>
+        <ScrollDownButton />
+      </Primitive.Content>
+    </Primitive.Portal>
+  )
+}
 
 interface OptionProps extends DisableProp, ClassNameProp {
   value: string

src/data/preferences/preferences.ts

@@ -7,13 +7,15 @@ export const preferencesSchema = z.object({
   locale: z.string(),
   language: z.string(),
   summaryStyle: z.enum(["table", "grid"]),
+  selectMenuAlignment: z.enum(["item-aligned", "popper"]),
 })
 type Preferences = Resolve<z.infer<typeof preferencesSchema>>
 
 const defaultValue: Preferences = {
   locale: "iso",
   language: "en",
   summaryStyle: "table",
+  selectMenuAlignment: "item-aligned",
 }
 
 export const preferencesData = createSlice({
@@ -33,5 +35,12 @@ export const preferencesData = createSlice({
       ...state,
       summaryStyle,
     }),
+    setSelectMenuAlignment: (
+      state,
+      selectMenuAlignment: Preferences["selectMenuAlignment"]
+    ) => ({
+      ...state,
+      selectMenuAlignment,
+    }),
   },
 })

src/locales/de/messages.po

@@ -64,7 +64,7 @@ msgstr "Gruppe hinzufügen"
 msgid "Adjust the border radius size of all elements."
 msgstr "Passe die Abrundung der Ecken aller Elemente an."
 
-#: src/app/routes/settings/settings-general.tsx:79
+#: src/app/routes/settings/settings-general.tsx:84
 msgid "Adjust the locale to influcene how dates are displayed. You can either select one in the dropdown or provide your own by using the text field."
 msgstr "Passe das Locale an, um die Darstellung von Datumsangaben zu beeinflussen. Du kannst eines aus der Liste wählen oder ein eigenes im Textfeld angeben."
 
@@ -118,6 +118,10 @@ msgstr "Basisfarben"
 msgid "Border Radius"
 msgstr "Eckenabrundung"
 
+#: src/app/routes/settings/settings-general.tsx:165
+msgid "Bottom aligned"
+msgstr "Unten ausgerichtet"
+
 #: src/components/ui/dialog/dialog.tsx:75
 #: src/features/data-backup/check-backup-reminder.tsx:64
 msgid "Cancel"
@@ -158,6 +162,10 @@ msgstr "Kategoriename"
 msgid "Category order"
 msgstr "Kategorie Reihenfolge"
 
+#: src/app/routes/settings/settings-general.tsx:151
+msgid "Change how selection menus are aligned to the opening button. Either align the currently selected item with the button or move the menu underneath the button."
+msgstr "Ändere, wie Auswahlmenüs zum Button ausgerichtet werden. Entweder wird das aktuell ausgewählte Element mit dem Button ausgerichtet oder das Menü darunter platziert."
+
 #: src/app/routes/settings/settings-theming.tsx:114
 msgid "Change the accent color which highlights focused and active elements."
 msgstr "Ändere die Akzentfarbe, mit der aktive und fokussierte Elemente hervorgehoben werden."
@@ -166,7 +174,7 @@ msgstr "Ändere die Akzentfarbe, mit der aktive und fokussierte Elemente hervorg
 msgid "Choose between dark and light mode, and decide if neutral colors should have a hue."
 msgstr "Wechsel zwischen hellem und dunklem Modus und entscheide, ob neutrale Farben eine Tönung haben sollen."
 
-#: src/app/routes/settings/settings-general.tsx:32
+#: src/app/routes/settings/settings-general.tsx:37
 msgid "Choose the language used for texts in Clocktopus."
 msgstr "Wähle eine Sprache aus, welche für die Texte in Clocktopus verwendet wird."
 
@@ -214,11 +222,11 @@ msgstr "CSV Import / Export"
 msgid "Custom"
 msgstr "Benutzerdefiniert"
 
-#: src/app/routes/settings/settings-general.tsx:90
+#: src/app/routes/settings/settings-general.tsx:95
 msgid "Custom locale"
 msgstr "Eigenes Locale"
 
-#: src/app/routes/settings/settings-general.tsx:109
+#: src/app/routes/settings/settings-general.tsx:114
 msgid "Custom locale (e.g. ja-JP)"
 msgstr "Eigenes Locale (z.B. ja-JP)"
 
@@ -253,7 +261,7 @@ msgstr "Tage Rhythmus"
 msgid "December"
 msgstr "Dezember"
 
-#: src/app/routes/settings/settings-general.tsx:121
+#: src/app/routes/settings/settings-general.tsx:126
 msgid "Decide how the time summary of past dates is displayed — as table rows or in grid items?"
 msgstr "Lege fest, wie die Übersicht vergangener Tage angezeigt wird – als Tabellenzeilen oder als Kacheln?"
 
@@ -404,7 +412,7 @@ msgstr "Zu den Einstellungen"
 msgid "Go to main page"
 msgstr "Zurück zur Hauptseite"
 
-#: src/app/routes/settings/settings-general.tsx:133
+#: src/app/routes/settings/settings-general.tsx:138
 msgid "Grid"
 msgstr "Raster"
 
@@ -455,6 +463,10 @@ msgstr "{0} Einträge importiert"
 msgid "Insufficient data"
 msgstr "Unzureichende Daten"
 
+#: src/app/routes/settings/settings-general.tsx:157
+msgid "Item aligned"
+msgstr "Element ausgerichtet"
+
 #: src/app/routes/stats/stats-route.tsx:94
 #: src/features/date-selection/week.tsx:13
 msgid "January"
@@ -470,13 +482,13 @@ msgstr "Juli"
 msgid "June"
 msgstr "Juni"
 
-#: src/app/routes/settings/settings-general.tsx:30
-#: src/app/routes/settings/settings-general.tsx:38
+#: src/app/routes/settings/settings-general.tsx:35
+#: src/app/routes/settings/settings-general.tsx:43
 msgid "Language"
 msgstr "Sprache"
 
-#: src/app/routes/settings/settings-general.tsx:77
-#: src/app/routes/settings/settings-general.tsx:90
+#: src/app/routes/settings/settings-general.tsx:82
+#: src/app/routes/settings/settings-general.tsx:95
 msgid "Locale"
 msgstr "Locale"
 
@@ -660,6 +672,10 @@ msgstr "Suchergebnisse ({0})"
 msgid "Selected"
 msgstr "Ausgewählt"
 
+#: src/app/routes/settings/settings-general.tsx:150
+msgid "Selection menu alignment"
+msgstr "Ausrichtung von Auswahlmenüs"
+
 #: src/app/routes/stats/stats-route.tsx:102
 #: src/features/date-selection/week.tsx:21
 msgid "September"
@@ -691,7 +707,7 @@ msgstr "Statistiken"
 msgid "Stats by"
 msgstr "Statistiken nach"
 
-#: src/app/routes/settings/settings-general.tsx:120
+#: src/app/routes/settings/settings-general.tsx:125
 msgid "Summary style"
 msgstr "Stil des Übersichtsmodus"
 
@@ -708,7 +724,7 @@ msgstr "Zum Bearbeitungsmodus"
 msgid "Switch to summary mode"
 msgstr "Zum Übersichtsmodus"
 
-#: src/app/routes/settings/settings-general.tsx:127
+#: src/app/routes/settings/settings-general.tsx:132
 msgid "Table"
 msgstr "Tabelle"