openuispec 0.1.44 → 0.1.46

package/examples/social-app/generated/web/social-app/src/screens/MessagesInboxScreen.tsx

@@ -0,0 +1,52 @@
+import { useDeferredValue, useState } from "react";
+import { useNavigate } from "react-router";
+import { useI18n } from "../i18n";
+import { ConversationCard } from "../components/cards";
+import { EmptyState, ErrorState, ScreenScaffold, SkeletonList, TextField } from "../components/ui";
+import { selectConversations, useAppStore } from "../state/store";
+import { useSimulatedLoading, useUiScenario } from "../lib/utils";
+
+export function MessagesInboxScreen() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const scenario = useUiScenario();
+  const [searchQuery, setSearchQuery] = useState("");
+  const deferred = useDeferredValue(searchQuery);
+  const loading = useSimulatedLoading(`messages-${deferred}`, scenario);
+  const state = useAppStore();
+  const items = scenario === "empty" ? [] : selectConversations(state, deferred);
+
+  return (
+    <ScreenScaffold title="Messages" subtitle="Conversation search, unread indicators, and direct routes into chat threads.">
+      <TextField
+        label={t("messages.search_placeholder")}
+        value={searchQuery}
+        onValueChange={setSearchQuery}
+        placeholder={t("messages.search_placeholder")}
+      />
+
+      {scenario === "error" ? (
+        <ErrorState title="Inbox unavailable" description="The inbox query is in an error state. Remove `?ui=error` to restore it." />
+      ) : loading ? (
+        <SkeletonList count={5} />
+      ) : items.length === 0 ? (
+        <EmptyState title="No conversations" description={t("messages.empty_inbox")} />
+      ) : (
+        <div className="space-y-3">
+          {items.map((item) =>
+            item.participant ? (
+              <ConversationCard
+                key={item.conversation.id}
+                user={item.participant}
+                excerpt={item.lastMessage?.body ?? "No messages yet"}
+                unreadCount={item.unreadCount}
+                timestamp={item.lastMessage?.createdAt}
+                onOpen={() => navigate(`/chat/${item.conversation.id}`)}
+              />
+            ) : null,
+          )}
+        </div>
+      )}
+    </ScreenScaffold>
+  );
+}

package/examples/social-app/generated/web/social-app/src/screens/NotificationsScreen.tsx

@@ -0,0 +1,41 @@
+import { useNavigate } from "react-router";
+import { useI18n } from "../i18n";
+import { NotificationCard } from "../components/cards";
+import { EmptyState, ErrorState, ScreenScaffold, SkeletonList } from "../components/ui";
+import { selectNotifications, useAppStore } from "../state/store";
+import { useSimulatedLoading, useUiScenario } from "../lib/utils";
+
+export function NotificationsScreen() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const scenario = useUiScenario();
+  const loading = useSimulatedLoading("notifications", scenario);
+  const state = useAppStore();
+  const notifications = scenario === "empty" ? [] : selectNotifications(state);
+
+  return (
+    <ScreenScaffold title={t("nav.notifications")} subtitle="Mark-as-read interactions wired to the local mock state.">
+      {scenario === "error" ? (
+        <ErrorState title="Notifications unavailable" description="The notifications request failed. Remove `?ui=error` to recover." />
+      ) : loading ? (
+        <SkeletonList count={6} />
+      ) : notifications.length === 0 ? (
+        <EmptyState title="Nothing new" description={t("notifications.empty")} />
+      ) : (
+        <div className="space-y-3">
+          {notifications.map((item) => (
+            <NotificationCard
+              key={item.id}
+              item={item}
+              actor={item.actor}
+              onOpen={() => {
+                state.markNotificationRead(item.id);
+                navigate(item.postId ? `/posts/${item.postId}` : "/profile");
+              }}
+            />
+          ))}
+        </div>
+      )}
+    </ScreenScaffold>
+  );
+}

package/examples/social-app/generated/web/social-app/src/screens/PostDetailScreen.tsx

@@ -0,0 +1,115 @@
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import { useI18n } from "../i18n";
+import { CommentCard, PostCard } from "../components/cards";
+import { ActionButton, EmptyState, ErrorState, ScreenScaffold, SectionTitle, SkeletonList, TextField } from "../components/ui";
+import { useSimulatedLoading, useUiScenario } from "../lib/utils";
+import { selectCommentsByPost, selectPostById, selectUserById, useAppStore } from "../state/store";
+
+export function PostDetailScreen() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const { postId = "" } = useParams();
+  const scenario = useUiScenario();
+  const loading = useSimulatedLoading(`post-${postId}`, scenario);
+  const state = useAppStore();
+  const [commentText, setCommentText] = useState("");
+  const post = scenario === "empty" ? undefined : selectPostById(state, postId);
+  const comments = scenario === "empty" ? [] : selectCommentsByPost(state, postId);
+
+  if (scenario === "error") {
+    return (
+      <ScreenScaffold title="Post Detail">
+        <ErrorState title="Post unavailable" description="The detail request failed. Remove `?ui=error` to return to the normal state." />
+      </ScreenScaffold>
+    );
+  }
+
+  if (loading) {
+    return (
+      <ScreenScaffold title="Post Detail">
+        <SkeletonList count={1} tall />
+      </ScreenScaffold>
+    );
+  }
+
+  if (!post) {
+    return (
+      <ScreenScaffold title="Post Detail">
+        <EmptyState title="Missing post" description="This post could not be found in the local mock data." />
+      </ScreenScaffold>
+    );
+  }
+
+  const author = selectUserById(state, post.authorId);
+  if (!author) {
+    return null;
+  }
+
+  return (
+    <ScreenScaffold title="Post Detail" subtitle={`Published ${new Date(post.publishedAt).toLocaleDateString()}`}>
+      <PostCard
+        post={post}
+        author={author}
+        hero
+        onAuthor={() => navigate(`/u/${author.id}`)}
+        onLike={() => state.toggleLike(post.id)}
+        onSave={() => state.toggleSave(post.id)}
+      />
+
+      <section className="space-y-4">
+        <ActionButton variant="secondary" icon={post.liked ? "like_fill" : "like"} onClick={() => state.toggleLike(post.id)}>
+          {t("post.like_action")}
+        </ActionButton>
+      </section>
+
+      <section className="space-y-4">
+        <SectionTitle>{t("post.comments_header")}</SectionTitle>
+        {comments.length === 0 ? (
+          <EmptyState title="No comments yet" description={t("post.no_comments")} />
+        ) : (
+          <div className="space-y-3">
+            {comments.map((comment) => {
+              const commentAuthor = selectUserById(state, comment.authorId);
+              if (!commentAuthor) {
+                return null;
+              }
+              return (
+                <CommentCard
+                  key={comment.id}
+                  comment={comment}
+                  author={commentAuthor}
+                  onAuthor={() => navigate(`/u/${commentAuthor.id}`)}
+                />
+              );
+            })}
+          </div>
+        )}
+      </section>
+
+      <TextField
+        label={t("post.comment_placeholder")}
+        value={commentText}
+        multiline
+        onValueChange={setCommentText}
+        placeholder={t("post.comment_placeholder")}
+        trailingAction={
+          <ActionButton
+            variant="primary"
+            icon="send"
+            onClick={() => {
+              if (!commentText.trim()) {
+                return;
+              }
+              state.addComment(post.id, commentText.trim());
+              setCommentText("");
+              state.showToast(t("post.comment_sent"));
+            }}
+          >
+            Send
+          </ActionButton>
+        }
+      />
+    </ScreenScaffold>
+  );
+}

package/examples/social-app/generated/web/social-app/src/screens/ProfileSelfScreen.tsx

@@ -0,0 +1,57 @@
+import { useNavigate } from "react-router";
+import { useI18n } from "../i18n";
+import { PostCard, ProfileHero } from "../components/cards";
+import { ActionButton, EmptyState, ScreenScaffold, SectionTitle, SkeletonList } from "../components/ui";
+import { selectCurrentUser, selectProfilePosts, selectUserById, useAppStore } from "../state/store";
+import { useSimulatedLoading, useUiScenario } from "../lib/utils";
+
+export function ProfileSelfScreen() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const scenario = useUiScenario();
+  const loading = useSimulatedLoading("profile-self", scenario);
+  const state = useAppStore();
+  const user = selectCurrentUser(state);
+  const posts = scenario === "empty" ? [] : selectProfilePosts(state, user.id);
+
+  return (
+    <ScreenScaffold title={t("nav.profile")} subtitle="Your own profile with edit action and authored posts.">
+      {loading ? (
+        <SkeletonList count={2} tall />
+      ) : (
+        <ProfileHero
+          user={user}
+          action={
+            <ActionButton variant="secondary" icon="edit" onClick={() => navigate("/profile/edit")}>
+              {t("profile.edit_button")}
+            </ActionButton>
+          }
+        />
+      )}
+
+      <section className="space-y-4">
+        <SectionTitle>{t("profile.posts_header")}</SectionTitle>
+        {loading ? (
+          <SkeletonList count={3} />
+        ) : posts.length === 0 ? (
+          <EmptyState title="No posts yet" description={t("profile.no_posts_self")} />
+        ) : (
+          <div className="space-y-4">
+            {posts.map((post) => (
+              <div key={post.id} className="rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 shadow-sm">
+                <PostCard
+                  post={post}
+                  author={selectUserById(state, post.authorId) ?? user}
+                  onOpen={() => navigate(`/posts/${post.id}`)}
+                  onAuthor={() => navigate(`/u/${user.id}`)}
+                  onLike={() => state.toggleLike(post.id)}
+                  onSave={() => state.toggleSave(post.id)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </ScreenScaffold>
+  );
+}

package/examples/social-app/generated/web/social-app/src/screens/ProfileUserScreen.tsx

@@ -0,0 +1,76 @@
+import { useNavigate, useParams } from "react-router";
+import { useI18n } from "../i18n";
+import { PostCard, ProfileHero } from "../components/cards";
+import { ActionButton, EmptyState, ErrorState, ScreenScaffold, SectionTitle, SkeletonList } from "../components/ui";
+import { selectProfilePosts, selectUserById, useAppStore } from "../state/store";
+import { useSimulatedLoading, useUiScenario } from "../lib/utils";
+
+export function ProfileUserScreen() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const { userId = "" } = useParams();
+  const scenario = useUiScenario();
+  const loading = useSimulatedLoading(`profile-${userId}`, scenario);
+  const state = useAppStore();
+  const user = scenario === "empty" ? undefined : selectUserById(state, userId);
+  const posts = scenario === "empty" ? [] : selectProfilePosts(state, userId);
+
+  if (scenario === "error") {
+    return (
+      <ScreenScaffold title="Profile">
+        <ErrorState title="Profile unavailable" description="The profile request failed. Remove `?ui=error` to restore it." />
+      </ScreenScaffold>
+    );
+  }
+
+  if (loading) {
+    return (
+      <ScreenScaffold title="Profile">
+        <SkeletonList count={3} tall />
+      </ScreenScaffold>
+    );
+  }
+
+  if (!user) {
+    return (
+      <ScreenScaffold title="Profile">
+        <EmptyState title="Profile missing" description="The requested user does not exist in the local dataset." />
+      </ScreenScaffold>
+    );
+  }
+
+  return (
+    <ScreenScaffold title={user.displayName} subtitle={`@${user.handle}`}>
+      <ProfileHero
+        user={user}
+        action={
+          <ActionButton variant="primary" onClick={() => state.followUser(user.id)}>
+            {t("profile.follow_button")}
+          </ActionButton>
+        }
+      />
+
+      <section className="space-y-4">
+        <SectionTitle>{t("profile.posts_header")}</SectionTitle>
+        {posts.length === 0 ? (
+          <EmptyState title="No posts yet" description={t("profile.no_posts_user")} />
+        ) : (
+          <div className="space-y-4">
+            {posts.map((post) => (
+              <div key={post.id} className="rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 shadow-sm">
+                <PostCard
+                  post={post}
+                  author={user}
+                  onOpen={() => navigate(`/posts/${post.id}`)}
+                  onAuthor={() => navigate(`/u/${user.id}`)}
+                  onLike={() => state.toggleLike(post.id)}
+                  onSave={() => state.toggleSave(post.id)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      </section>
+    </ScreenScaffold>
+  );
+}

package/examples/social-app/generated/web/social-app/src/screens/SearchResultsScreen.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState, startTransition } from "react";
+import { useNavigate, useSearchParams } from "react-router";
+import { useI18n } from "../i18n";
+import { ActionButton, EmptyState, ErrorState, ScreenScaffold, SkeletonList, TextField } from "../components/ui";
+import { selectSearchResults, useAppStore } from "../state/store";
+import { useSimulatedLoading, useUiScenario } from "../lib/utils";
+
+export function SearchResultsScreen() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const scenario = useUiScenario();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [query, setQuery] = useState(searchParams.get("query") ?? "");
+  const [activeTab, setActiveTab] = useState<"posts" | "people" | "tags">(
+    (searchParams.get("tab") as "posts" | "people" | "tags") ?? "posts",
+  );
+  const loading = useSimulatedLoading(`search-${query}-${activeTab}`, scenario);
+  const state = useAppStore();
+  const results = selectSearchResults(state, query, activeTab);
+
+  useEffect(() => {
+    setQuery(searchParams.get("query") ?? "");
+    setActiveTab(((searchParams.get("tab") as "posts" | "people" | "tags") ?? "posts"));
+  }, [searchParams]);
+
+  const visibleResults = scenario === "empty" ? [] : results;
+
+  return (
+    <ScreenScaffold title="Search Results" subtitle={`Querying "${query}" across ${activeTab}.`}>
+      <TextField
+        label={t("search.placeholder")}
+        value={query}
+        onValueChange={setQuery}
+        placeholder={t("search.placeholder")}
+        trailingAction={
+          <ActionButton
+            variant="primary"
+            icon="search"
+            onClick={() => setSearchParams({ query, tab: activeTab })}
+          >
+            Search
+          </ActionButton>
+        }
+      />
+
+      <div className="no-scrollbar flex gap-2 overflow-x-auto pb-1">
+        {[
+          { value: "posts" as const, label: t("search.tab_posts") },
+          { value: "people" as const, label: t("search.tab_people") },
+          { value: "tags" as const, label: t("search.tab_tags") },
+        ].map((tab) => (
+          <ActionButton
+            key={tab.value}
+            variant="chip"
+            selected={activeTab === tab.value}
+            onClick={() => {
+              startTransition(() => setActiveTab(tab.value));
+              setSearchParams({ query, tab: tab.value });
+            }}
+          >
+            {tab.label}
+          </ActionButton>
+        ))}
+      </div>
+
+      {scenario === "error" ? (
+        <ErrorState title="Search failed" description="The search request is in an error state. Remove `?ui=error` to see results." />
+      ) : loading ? (
+        <SkeletonList count={5} />
+      ) : visibleResults.length === 0 ? (
+        <EmptyState title="No results" description={t("search.no_results")} />
+      ) : (
+        <div className="space-y-3">
+          {visibleResults.map((result) => (
+            <button
+              key={`${result.kind}-${result.id}`}
+              type="button"
+              onClick={() => {
+                if (result.kind === "people") {
+                  navigate(`/u/${result.id}`);
+                  return;
+                }
+                navigate(`/posts/${result.id}`);
+              }}
+              className="w-full rounded-card border border-[var(--color-border-default)] bg-[var(--color-surface-secondary)] p-4 text-left shadow-sm transition hover:-translate-y-0.5"
+            >
+              <p className="font-semibold text-[var(--color-text-primary)]">{result.title}</p>
+              <p className="mt-1 text-sm text-[var(--color-text-secondary)]">{result.subtitle}</p>
+              <p className="mt-3 line-clamp-2 text-sm leading-6 text-[var(--color-text-secondary)]">{result.body}</p>
+            </button>
+          ))}
+        </div>
+      )}
+    </ScreenScaffold>
+  );
+}

package/examples/social-app/generated/web/social-app/src/screens/SettingsScreen.tsx

@@ -0,0 +1,77 @@
+import { useNavigate } from "react-router";
+import { useI18n } from "../i18n";
+import { ActionButton, ScreenScaffold, SectionTitle, SelectField, ToggleField } from "../components/ui";
+import { useAppStore } from "../state/store";
+
+export function SettingsScreen() {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const state = useAppStore();
+
+  return (
+    <ScreenScaffold title="Settings" subtitle="Theme select, toggles, and a confirmation dialog for logout.">
+      <section className="space-y-4">
+        <SectionTitle>{t("settings.appearance")}</SectionTitle>
+        <SelectField
+          label={t("settings.theme")}
+          value={state.preferences.theme}
+          options={[
+            { value: "system", label: t("settings.theme_system") },
+            { value: "light", label: t("settings.theme_light") },
+            { value: "dark", label: t("settings.theme_dark") },
+          ]}
+          onValueChange={(value) => state.updatePreference("theme", value as "system" | "light" | "dark")}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <SectionTitle>{t("settings.notifications")}</SectionTitle>
+        <ToggleField
+          label={t("settings.push_notifications")}
+          checked={state.preferences.pushNotifications}
+          onChange={(value) => state.updatePreference("pushNotifications", value)}
+        />
+        <ToggleField
+          label={t("settings.message_previews")}
+          checked={state.preferences.messagePreviews}
+          onChange={(value) => state.updatePreference("messagePreviews", value)}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <SectionTitle>{t("settings.language")}</SectionTitle>
+        <ToggleField
+          label={t("settings.auto_translate")}
+          checked={state.preferences.autoTranslate}
+          onChange={(value) => state.updatePreference("autoTranslate", value)}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <SectionTitle>{t("settings.account")}</SectionTitle>
+        <ActionButton variant="secondary" icon="edit" onClick={() => navigate("/profile/edit")}>
+          {t("settings.edit_profile")}
+        </ActionButton>
+        <ActionButton
+          variant="destructive"
+          onClick={() =>
+            state.openDialog({
+              title: t("settings.logout"),
+              message: t("settings.logout_confirm"),
+              actions: [
+                { label: t("common.cancel"), variant: "secondary", onPress: () => undefined },
+                {
+                  label: t("settings.logout"),
+                  variant: "destructive",
+                  onPress: () => state.logout(),
+                },
+              ],
+            })
+          }
+        >
+          {t("settings.logout")}
+        </ActionButton>
+      </section>
+    </ScreenScaffold>
+  );
+}