openuispec 0.1.24 → 0.1.27

package/examples/todo-orbit/generated/android/Todo Orbit/app/src/main/java/uz/rsteam/todoorbit/ui/components/CommonComponents.kt

@@ -4,8 +4,6 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -13,19 +11,27 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Translate
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.ElevatedCard
-import androidx.compose.material3.FilterChip
-import androidx.compose.material3.Icon
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.ExposedDropdownMenuBox
+import androidx.compose.material3.ExposedDropdownMenuDefaults
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedCard
 import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import androidx.compose.material3.SingleChoiceSegmentedButtonRow
 import androidx.compose.material3.Switch
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
@@ -75,9 +81,7 @@ fun LanguageSelector(current: UiLocale, onSelected: (UiLocale) -> Unit) {
             UiLocale.En.name to stringResource(R.string.settings_language_en),
             UiLocale.Ru.name to stringResource(R.string.settings_language_ru)
         ),
-        leadingIcon = {
-            Icon(Icons.Outlined.Translate, contentDescription = null, tint = MaterialTheme.colorScheme.onSurfaceVariant)
-        },
+        style = EnumSelectorStyle.Segmented,
         onSelected = { selected -> onSelected(UiLocale.entries.first { it.name == selected }) }
     )
 }
@@ -91,29 +95,76 @@ fun ThemeSelector(current: ThemeMode, onSelected: (ThemeMode) -> Unit) {
             ThemeMode.Light.name to stringResource(R.string.settings_theme_light),
             ThemeMode.Dark.name to stringResource(R.string.settings_theme_dark)
         ),
+        style = EnumSelectorStyle.Segmented,
         onSelected = { selected -> onSelected(ThemeMode.entries.first { it.name == selected }) }
     )
 }
 
-@OptIn(ExperimentalLayoutApi::class)
+enum class EnumSelectorStyle {
+    Segmented,
+    Dropdown
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun EnumSelector(
     title: String,
     current: String,
     options: List<Pair<String, String>>,
+    style: EnumSelectorStyle = EnumSelectorStyle.Segmented,
     leadingIcon: @Composable (() -> Unit)? = null,
     onSelected: (String) -> Unit
 ) {
     Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
         Text(title, style = MaterialTheme.typography.titleSmall)
-        FlowRow(horizontalArrangement = Arrangement.spacedBy(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
-            options.forEach { (value, label) ->
-                FilterChip(
-                    selected = value == current,
-                    onClick = { onSelected(value) },
-                    label = { Text(label) },
-                    leadingIcon = if (value == current && leadingIcon != null) leadingIcon else null
-                )
+        when (style) {
+            EnumSelectorStyle.Segmented -> {
+                SingleChoiceSegmentedButtonRow(modifier = Modifier.fillMaxWidth()) {
+                    options.forEachIndexed { index, (value, label) ->
+                        SegmentedButton(
+                            selected = value == current,
+                            onClick = { onSelected(value) },
+                            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
+                            label = { Text(label) }
+                        )
+                    }
+                }
+            }
+
+            EnumSelectorStyle.Dropdown -> {
+                var expanded by remember { mutableStateOf(false) }
+                val selectedLabel = options.firstOrNull { it.first == current }?.second.orEmpty()
+                ExposedDropdownMenuBox(
+                    expanded = expanded,
+                    onExpandedChange = { expanded = !expanded }
+                ) {
+                    OutlinedTextField(
+                        value = selectedLabel,
+                        onValueChange = {},
+                        modifier = Modifier
+                            .menuAnchor()
+                            .fillMaxWidth(),
+                        readOnly = true,
+                        label = { Text(title) },
+                        leadingIcon = leadingIcon,
+                        trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
+                        shape = MaterialTheme.shapes.medium
+                    )
+                    DropdownMenu(
+                        expanded = expanded,
+                        onDismissRequest = { expanded = false }
+                    ) {
+                        options.forEach { (value, label) ->
+                            DropdownMenuItem(
+                                text = { Text(label) },
+                                onClick = {
+                                    expanded = false
+                                    onSelected(value)
+                                }
+                            )
+                        }
+                    }
+                }
             }
         }
     }

package/examples/todo-orbit/generated/android/Todo Orbit/app/src/main/java/uz/rsteam/todoorbit/ui/screens/TasksScreen.kt

@@ -235,6 +235,11 @@ fun TaskDetailPane(
             item {
                 Row(horizontalArrangement = Arrangement.SpaceBetween, modifier = Modifier.fillMaxWidth()) {
                     Column(modifier = Modifier.fillMaxWidth(0.72f)) {
+                        Text(
+                            stringResource(R.string.task_detail_title),
+                            style = MaterialTheme.typography.labelLarge,
+                            color = MaterialTheme.colorScheme.onSurfaceVariant
+                        )
                         Text(task.title, style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold)
                         Text(
                             task.dueDate?.let { formatAbsolute(it, locale) } ?: stringResource(R.string.task_detail_no_due_date),

package/examples/todo-orbit/generated/android/Todo Orbit/app/src/main/java/uz/rsteam/todoorbit/ui/sheets/EditorSheets.kt

@@ -80,6 +80,7 @@ fun TaskEditorSheet(
                 title = stringResource(R.string.create_task_field_priority),
                 current = localDraft.priority.name,
                 options = priorityOptions,
+                style = EnumSelectorStyle.Segmented,
                 onSelected = { selected ->
                     localDraft = localDraft.copy(priority = Priority.entries.first { it.name == selected })
                 }
@@ -185,11 +186,11 @@ fun RecurringRuleSheet(
                 title = stringResource(R.string.recurring_rule_field_cadence),
                 current = draft.cadence?.name.orEmpty(),
                 options = listOf(
-                    "" to "—",
                     Cadence.Daily.name to dailyCadenceLabel,
                     Cadence.Weekly.name to weeklyCadenceLabel,
                     Cadence.Monthly.name to monthlyCadenceLabel
                 ),
+                style = EnumSelectorStyle.Segmented,
                 onSelected = {
                     draft = draft.copy(
                         cadence = Cadence.entries.firstOrNull { entry -> entry.name == it },
@@ -211,6 +212,7 @@ fun RecurringRuleSheet(
                     title = stringResource(R.string.recurring_rule_field_weekday),
                     current = draft.weekday?.name.orEmpty(),
                     options = weekdayOptions,
+                    style = EnumSelectorStyle.Dropdown,
                     onSelected = { draft = draft.copy(weekday = Weekday.entries.firstOrNull { day -> day.name == it }) }
                 )
             }
@@ -266,7 +268,8 @@ fun RecurringRuleSheet(
                 EnumSelector(
                     title = stringResource(R.string.recurring_rule_field_summary_channel),
                     current = draft.summaryChannel?.name.orEmpty(),
-                    options = summaryChannelOptions,
+                    options = summaryChannelOptions.drop(1),
+                    style = EnumSelectorStyle.Segmented,
                     onSelected = {
                         draft = draft.copy(summaryChannel = SummaryChannel.entries.firstOrNull { item -> item.name == it })
                     }

package/examples/todo-orbit/generated/android/Todo Orbit/app/src/main/res/values/strings.xml

@@ -18,6 +18,7 @@
     <string name="home_empty_title">Nothing to do</string>
     <string name="home_empty_body">Add a task or switch filters to see more items.</string>
     <string name="task_detail_no_due_date">No deadline</string>
+    <string name="task_detail_title">Task details</string>
     <string name="task_detail_status">Status</string>
     <string name="task_detail_priority">Priority</string>
     <string name="task_detail_notes">Notes</string>

package/examples/todo-orbit/generated/android/Todo Orbit/app/src/main/res/values-ru/strings.xml

@@ -18,6 +18,7 @@
     <string name="home_empty_title">Список пуст</string>
     <string name="home_empty_body">Добавьте задачу или смените фильтр, чтобы увидеть элементы.</string>
     <string name="task_detail_no_due_date">Без срока</string>
+    <string name="task_detail_title">Детали задачи</string>
     <string name="task_detail_status">Статус</string>
     <string name="task_detail_priority">Приоритет</string>
     <string name="task_detail_notes">Заметки</string>

package/examples/todo-orbit/generated/ios/Todo Orbit/Resources/en.lproj/Localizable.strings

@@ -26,6 +26,7 @@
 "analytics.overdue_section" = "Overdue review";
 "analytics.overdue_subtitle" = "Tasks that need attention first.";
 "analytics.empty_overdue_body" = "Everything important is on track.";
+"task_detail.title" = "Task details";
 "task_detail.status" = "Status";
 "task_detail.priority" = "Priority";
 "task_detail.notes" = "Notes";

package/examples/todo-orbit/generated/ios/Todo Orbit/Resources/ru.lproj/Localizable.strings

@@ -26,6 +26,7 @@
 "analytics.overdue_section" = "Просроченные задачи";
 "analytics.overdue_subtitle" = "Задачи, которым нужно уделить внимание в первую очередь.";
 "analytics.empty_overdue_body" = "Все важные задачи идут по плану.";
+"task_detail.title" = "Детали задачи";
 "task_detail.status" = "Статус";
 "task_detail.priority" = "Приоритет";
 "task_detail.notes" = "Заметки";

package/examples/todo-orbit/generated/ios/Todo Orbit/Sources/TodoOrbit/Flows/RecurringRuleSheet.swift

@@ -34,6 +34,7 @@ struct RecurringRuleSheet: View {
                                     .tag(RecurrenceCadence?.some(cadence))
                             }
                         }
+                        .pickerStyle(.segmented)
                         errorText("cadence")
 
                         TextField(model.string("recurring_rule.field_interval"), text: $draft.interval)
@@ -47,6 +48,7 @@ struct RecurringRuleSheet: View {
                                     Text(model.label(for: weekday)).tag(Weekday?.some(weekday))
                                 }
                             }
+                            .pickerStyle(.menu)
                             errorText("weekday")
                         }
 
@@ -79,6 +81,7 @@ struct RecurringRuleSheet: View {
                                         .tag(SummaryChannel?.some(channel))
                                 }
                             }
+                            .pickerStyle(.segmented)
                             errorText("summaryChannel")
                         }
                     }

package/examples/todo-orbit/generated/ios/Todo Orbit/Sources/TodoOrbit/Flows/TaskEditorSheet.swift

@@ -27,6 +27,7 @@ struct TaskEditorSheet: View {
                             Text(model.label(for: priority)).tag(priority)
                         }
                     }
+                    .pickerStyle(.segmented)
                     DatePicker(
                         model.string(editingTaskID == nil ? "create_task.field_due_date" : "edit_task.field_due_date"),
                         selection: Binding(

package/examples/todo-orbit/generated/ios/Todo Orbit/Sources/TodoOrbit/Screens/SettingsView.swift

@@ -20,11 +20,13 @@ struct SettingsView: View {
                         Text(model.string("settings.language_en")).tag(AppLocale.en)
                         Text(model.string("settings.language_ru")).tag(AppLocale.ru)
                     }
+                    .pickerStyle(.segmented)
 
                     Picker(model.string("settings.theme"), selection: $draft.theme) {
                         Text(model.string("settings.theme_light")).tag(ThemePreference.light)
                         Text(model.string("settings.theme_dark")).tag(ThemePreference.dark)
                     }
+                    .pickerStyle(.segmented)
 
                     Toggle(model.string("settings.reminders"), isOn: $draft.remindersEnabled)
                     Toggle(model.string("settings.daily_summary"), isOn: $draft.dailySummaryEnabled)

package/examples/todo-orbit/generated/ios/Todo Orbit/Sources/TodoOrbit/Screens/TasksHomeView.swift

@@ -312,6 +312,7 @@ private struct TaskDetailPanel: View {
             }
             .padding()
         }
+        .navigationTitle(model.string("task_detail.title"))
     }
 
     private func stat(_ title: String, value: String) -> some View {

package/examples/todo-orbit/generated/ios/Todo Orbit/Sources/TodoOrbit/Support/AppModel.swift

@@ -286,7 +286,7 @@ final class AppModel: ObservableObject {
         guard let date else { return string("task_detail.no_due_date") }
         let formatter = RelativeDateTimeFormatter()
         formatter.locale = locale
-        formatter.unitsStyle = .full
+        formatter.unitsStyle = .abbreviated
         return formatter.localizedString(for: date, relativeTo: .now)
     }
 

package/examples/todo-orbit/generated/web/Todo Orbit/src/App.tsx

@@ -105,6 +105,7 @@ const messages: Record<Locale, Record<string, string>> = {
     "analytics.empty_trend": "No trend data yet.",
     "analytics.empty_overdue": "No overdue tasks",
     "analytics.empty_overdue_body": "Everything important is on track.",
+    "task_detail.title": "Task details",
     "task_detail.status": "Status",
     "task_detail.priority": "Priority",
     "task_detail.notes": "Notes",
@@ -249,6 +250,7 @@ const messages: Record<Locale, Record<string, string>> = {
     "analytics.empty_trend": "Данные тренда пока отсутствуют.",
     "analytics.empty_overdue": "Просроченных задач нет",
     "analytics.empty_overdue_body": "Все важные задачи идут по плану.",
+    "task_detail.title": "Детали задачи",
     "task_detail.status": "Статус",
     "task_detail.priority": "Приоритет",
     "task_detail.notes": "Заметки",
@@ -617,6 +619,7 @@ function HomeScreen({ onOpenModal }: { onOpenModal: (modal: ModalState) => void
   const navigate = useNavigate();
   const isDesktop = useIsDesktop();
   const t = useTranslator();
+  useDocumentTitle(t("nav.tasks"));
   const filteredTasks = useMemo(
     () => filterTasks(tasks, activeFilter, deferredSearch),
     [activeFilter, deferredSearch, tasks]
@@ -720,7 +723,7 @@ function HomeScreen({ onOpenModal }: { onOpenModal: (modal: ModalState) => void
 
                   <div className="task-copy">
                     <strong>{task.title}</strong>
-                    <span>{formatRelativeDate(task.dueDate, useAppStore.getState().locale, t("task_detail.no_due_date"))}</span>
+                    <span>{formatRelativeDate(task.dueDate, useAppStore.getState().locale, t("task_detail.no_due_date"), "short")}</span>
                   </div>
 
                   <span className="priority-dot" style={{ background: priorityAccent[task.priority] }} />
@@ -743,6 +746,8 @@ function HomeScreen({ onOpenModal }: { onOpenModal: (modal: ModalState) => void
 function TaskDetailRoute({ onOpenModal }: { onOpenModal: (modal: ModalState) => void }) {
   const { taskId } = useParams();
   const task = useAppStore((state) => state.tasks.find((entry) => entry.id === taskId));
+  const t = useTranslator();
+  useDocumentTitle(t("task_detail.title"));
 
   if (!task) {
     return <Navigate to="/" replace />;
@@ -840,6 +845,7 @@ function AnalyticsScreen() {
   const [period, setPeriod] = useState<Period>("week");
   const t = useTranslator();
   const locale = useAppStore((state) => state.locale);
+  useDocumentTitle(t("nav.analytics"));
   const overview = getAnalyticsOverview(tasks);
   const trend = getTrendSeries(tasks, period, locale);
   const overdue = getOverdueTasks(tasks);
@@ -917,6 +923,7 @@ function SettingsScreen({ onOpenModal }: { onOpenModal: (modal: ModalState) => v
   const savePreferences = useAppStore((state) => state.savePreferences);
   const pushToast = useAppStore((state) => state.pushToast);
   const t = useTranslator();
+  useDocumentTitle(t("nav.settings"));
   const [form, setForm] = useState(preferences);
 
   useEffect(() => {
@@ -935,7 +942,7 @@ function SettingsScreen({ onOpenModal }: { onOpenModal: (modal: ModalState) => v
 
       <div className="settings-grid">
         <section className="cut-surface form-stack">
-          <SelectField
+          <SegmentedField
             label={t("settings.language")}
             value={form.locale}
             onChange={(value) => setForm((current) => ({ ...current, locale: value as Locale }))}
@@ -945,7 +952,7 @@ function SettingsScreen({ onOpenModal }: { onOpenModal: (modal: ModalState) => v
             ]}
           />
 
-          <SelectField
+          <SegmentedField
             label={t("settings.theme")}
             value={form.theme}
             onChange={(value) => setForm((current) => ({ ...current, theme: value as Theme }))}
@@ -1067,7 +1074,7 @@ function TaskFormModal({
         onChange={setNotes}
         placeholder={t("create_task.field_notes_placeholder")}
       />
-      <SelectField
+      <SegmentedField
         label={taskId ? t("edit_task.field_priority") : t("create_task.field_priority")}
         value={priority}
         onChange={(value) => setPriority(value as Priority)}
@@ -1218,7 +1225,7 @@ function RecurringRuleModal({ onClose }: { onClose: () => void }) {
             error={confirmTouched ? errors.confirmName : ""}
           />
 
-          <SelectField
+          <SegmentedField
             label={t("recurring_rule.field_cadence")}
             value={draft.cadence}
             onChange={(value) =>
@@ -1316,7 +1323,7 @@ function RecurringRuleModal({ onClose }: { onClose: () => void }) {
           />
 
           {draft.enableSummary ? (
-            <SelectField
+            <SegmentedField
               label={t("recurring_rule.field_summary_channel")}
               value={draft.summaryChannel}
               onChange={(value) =>
@@ -1677,6 +1684,46 @@ function SelectField({
   );
 }
 
+function SegmentedField({
+  label,
+  value,
+  onChange,
+  options,
+  error
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{ label: string; value: string }>;
+  error?: string;
+}) {
+  return (
+    <div className="field-block">
+      <span className="field-label">{label}</span>
+      <div className={`segmented-control ${error ? "error" : ""}`} role="radiogroup" aria-label={label}>
+        {options
+          .filter((option) => option.value !== "")
+          .map((option) => {
+            const selected = option.value === value;
+            return (
+              <button
+                key={option.value}
+                aria-checked={selected}
+                className={`segmented-option ${selected ? "selected" : ""}`}
+                onClick={() => onChange(option.value)}
+                role="radio"
+                type="button"
+              >
+                {option.label}
+              </button>
+            );
+          })}
+      </div>
+      {error ? <span className="field-error">{error}</span> : null}
+    </div>
+  );
+}
+
 function DateField({
   label,
   value,
@@ -1774,6 +1821,12 @@ function NavItem({
   );
 }
 
+function useDocumentTitle(title: string) {
+  useEffect(() => {
+    document.title = `${title} | Todo Orbit`;
+  }, [title]);
+}
+
 function useTranslator() {
   const locale = useAppStore((state) => state.locale);
   return (key: string, params?: Record<string, string | number>) => {

package/examples/todo-orbit/generated/web/Todo Orbit/src/styles.css

@@ -323,6 +323,46 @@ button {
   opacity: 0.5;
 }
 
+.segmented-control,
+.segmented-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.segmented-control {
+  padding: 6px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.74);
+}
+
+.segmented-control.error {
+  border-color: rgba(220, 38, 38, 0.4);
+}
+
+.segmented-option {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  outline: none;
+  border-radius: 14px;
+  background: transparent;
+  color: var(--text-secondary);
+  font-weight: 700;
+  padding: 10px 14px;
+  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
+}
+
+.segmented-option:hover {
+  transform: translateY(-1px);
+}
+
+.segmented-option.selected {
+  background: rgba(15, 118, 110, 0.12);
+  color: var(--text);
+}
+
 .input-shell input,
 .input-shell select,
 .input-shell textarea {