fix: linux display main page

2026-09-08 21:57:38 +02:00
parent ac23f98fcd
commit 8f5a7c22cc
14 changed files with 442 additions and 195 deletions
@@ -0,0 +1,55 @@
+/* ChoiceSelect.css */
+.choice-select {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+}
+
+.choice-select[data-disabled] {
+  opacity: 0.5;
+}
+
+.choice-select__input {
+  flex: 1 1 auto;
+  height: var(--card-control-height);
+  padding: 0 var(--space-6) 0 var(--space-3);
+
+  background: var(--bg-panel);
+  color: var(--text-primary);
+
+  border: var(--border-width) solid var(--border-hairline);
+  border-radius: var(--radius-sm);
+
+  font-family: var(--font-ui);
+  font-size: var(--font-sm);
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  outline: none;
+  cursor: pointer;
+
+  transition: border-color var(--dur-base) var(--ease-standard);
+}
+
+.choice-select__input:focus {
+  border-color: var(--accent-brand);
+}
+
+.choice-select__input:disabled {
+  cursor: not-allowed;
+}
+
+.choice-select__chevron {
+  position: absolute;
+  right: var(--space-2);
+  top: 50%;
+  height: 70%;
+  aspect-ratio: 1;
+  transform: translateY(-50%);
+
+  pointer-events: none;
+  color: var(--accent-brand);
+  font-size: var(--font-sm);
+}
@@ -0,0 +1,44 @@
+// ChoiceSelect.tsx
+import { TriangleDownIcon } from '../../assets/icons/Triangle';
+import './ChoiceSelect.css';
+
+type ChoiceSelectProps<T extends string> = {
+  value: T;
+  options: readonly T[];
+  formatLabel?: (value: T) => string;
+  onChange: (value: T) => void;
+  id?: string;
+  disabled?: boolean;
+};
+
+function ChoiceSelect<T extends string>({
+  value,
+  options,
+  formatLabel = (v) => v,
+  onChange,
+  id,
+  disabled,
+}: ChoiceSelectProps<T>) {
+  return (
+    <div className="choice-select" data-disabled={disabled || undefined}>
+      <select
+        id={id}
+        className="choice-select__input"
+        value={value}
+        disabled={disabled}
+        onChange={(e) => onChange(e.target.value as T)}
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {formatLabel(option)}
+          </option>
+        ))}
+      </select>
+      <span className="choice-select__chevron" aria-hidden="true">
+        <TriangleDownIcon />
+      </span>
+    </div>
+  );
+}
+
+export default ChoiceSelect;