@agent-native/core-corpus 0.201.0-nightly-20261005153421 → 0.201.0

package/corpus/templates/slides/app/components/deck/DeckFilterMenu.tsx

@@ -1,5 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
-import { IconFilter } from "@tabler/icons-react";
+import { IconChevronDown } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -9,14 +9,7 @@ import {
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { FilterTriggerIndicator } from "@/components/ui/filter-trigger";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import type { DeckFilter } from "@/lib/deck-filter";
-import { cn } from "@/lib/utils";
 
 export function DeckFilterMenu({
   value,
@@ -26,45 +19,60 @@ export function DeckFilterMenu({
   onChange: (value: DeckFilter) => void;
 }) {
   const t = useT();
-  const filtered = value === "mine";
-  const label = filtered ? t("home.showMineDecks") : t("home.showAllDecks");
+  const optionLabels: Record<DeckFilter, string> = {
+    all: t("home.ownedByAnyone"),
+    mine: t("home.ownedByMe"),
+    "not-mine": t("home.sharedWithMe"),
+  };
+  const label = optionLabels[value];
   return (
     <DropdownMenu>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              aria-label={label}
-              className={cn(
-                "size-9 shrink-0 p-0",
-                filtered && "border border-primary/40 text-primary",
-              )}
-            >
-              <FilterTriggerIndicator active={filtered}>
-                <IconFilter className="size-3.5" aria-hidden="true" />
-              </FilterTriggerIndicator>
-            </Button>
-          </DropdownMenuTrigger>
-        </TooltipTrigger>
-        <TooltipContent>{label}</TooltipContent>
-      </Tooltip>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          aria-label={label}
+          className="h-9 shrink-0 gap-2"
+        >
+          <span className="grid">
+            {Object.entries(optionLabels).map(([filter, option]) => (
+              <span
+                key={filter}
+                aria-hidden="true"
+                className="invisible col-start-1 row-start-1 whitespace-nowrap"
+              >
+                {option}
+              </span>
+            ))}
+            <span className="col-start-1 row-start-1 whitespace-nowrap">
+              {label}
+            </span>
+          </span>
+          <IconChevronDown className="size-4" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
       <DropdownMenuContent align="start">
         <DropdownMenuRadioGroup
           value={value}
           onValueChange={(nextValue) => {
-            if (nextValue === "mine" || nextValue === "all") {
+            if (
+              nextValue === "mine" ||
+              nextValue === "all" ||
+              nextValue === "not-mine"
+            ) {
               onChange(nextValue);
             }
           }}
         >
-          <DropdownMenuRadioItem value="mine">
-            {t("home.mine")}
+          <DropdownMenuRadioItem value="all" indicator="check">
+            {t("home.ownedByAnyone")}
+          </DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value="mine" indicator="check">
+            {t("home.ownedByMe")}
           </DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="all">
-            {t("home.all")}
+          <DropdownMenuRadioItem value="not-mine" indicator="check">
+            {t("home.sharedWithMe")}
           </DropdownMenuRadioItem>
         </DropdownMenuRadioGroup>
       </DropdownMenuContent>

package/corpus/templates/slides/app/components/home/SlidesHomeLibrary.tsx

@@ -0,0 +1,79 @@
+import type { ReactNode } from "react";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+export type SlidesHomeLibraryTab = "templates" | "recent";
+
+interface SlidesHomeLibraryProps {
+  value: SlidesHomeLibraryTab;
+  onValueChange: (value: SlidesHomeLibraryTab) => void;
+  labels: { templates: string; recent: string };
+  browseAll?: ReactNode;
+  search?: ReactNode;
+  recentActions?: ReactNode;
+  templates: ReactNode;
+  recent?: ReactNode;
+  recentVisible: boolean;
+}
+
+export function SlidesHomeLibrary({
+  value,
+  onValueChange,
+  labels,
+  browseAll,
+  search,
+  recentActions,
+  templates,
+  recent,
+  recentVisible,
+}: SlidesHomeLibraryProps) {
+  const activeValue = recentVisible ? value : "templates";
+
+  return (
+    <section
+      className="agent-prompt-home-library"
+      aria-label={labels.templates}
+    >
+      <Tabs
+        className="agent-prompt-home-tabs"
+        value={activeValue}
+        onValueChange={(nextValue) => {
+          if (nextValue === "templates" || nextValue === "recent") {
+            onValueChange(nextValue);
+          }
+        }}
+      >
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <TabsList variant="line">
+            {recentVisible ? (
+              <TabsTrigger value="recent" className="flex-none">
+                {labels.recent}
+              </TabsTrigger>
+            ) : null}
+            <TabsTrigger
+              value="templates"
+              className="flex-none"
+              onClick={() => {
+                if (activeValue === "templates") onValueChange("templates");
+              }}
+            >
+              {labels.templates}
+            </TabsTrigger>
+          </TabsList>
+          {activeValue === "recent" ? (
+            <div className="flex w-full min-w-0 flex-wrap items-center justify-end gap-2 sm:w-auto">
+              {search}
+              {recentActions}
+            </div>
+          ) : (
+            browseAll
+          )}
+        </div>
+        <TabsContent value="templates">{templates}</TabsContent>
+        {recentVisible ? (
+          <TabsContent value="recent">{recent}</TabsContent>
+        ) : null}
+      </Tabs>
+    </section>
+  );
+}

package/corpus/templates/slides/app/components/layout/Header.tsx

@@ -77,21 +77,8 @@ function HeaderControls({
   );
 }
 
-export function HomeHeaderActions({
-  search,
-  children,
-}: {
-  search: ReactNode;
-  children: ReactNode;
-}) {
-  return (
-    <>
-      {search ? (
-        <div className="slides-home-search w-full">{search}</div>
-      ) : null}
-      <HeaderControls showNotifications={false}>{children}</HeaderControls>
-    </>
-  );
+export function HomeHeaderActions({ children }: { children: ReactNode }) {
+  return <HeaderControls showNotifications={false}>{children}</HeaderControls>;
 }
 
 export function Header() {

package/corpus/templates/slides/app/components/ui/tabs.tsx

@@ -0,0 +1,59 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    variant?: "default" | "line";
+  }
+>(({ className, variant = "default", ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    data-variant={variant}
+    className={cn(
+      variant === "line"
+        ? "group/tabs-list inline-flex w-fit items-center justify-start gap-1 border-b border-border bg-transparent p-0 text-muted-foreground"
+        : "inline-flex h-9 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1 text-sm font-medium ring-offset-background transition-[color,background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "group-data-[variant=line]/tabs-list:relative group-data-[variant=line]/tabs-list:h-9 group-data-[variant=line]/tabs-list:flex-none group-data-[variant=line]/tabs-list:rounded-none group-data-[variant=line]/tabs-list:border-b-2 group-data-[variant=line]/tabs-list:border-transparent group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:font-medium group-data-[variant=line]/tabs-list:text-muted-foreground group-data-[variant=line]/tabs-list:data-[state=active]:border-foreground group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:text-foreground group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/corpus/templates/slides/app/global.css

@@ -16,69 +16,28 @@
 @source "./**/*.{ts,tsx}";
 
 .slides-home-header {
-  container-type: inline-size;
   border-bottom: 0;
 }
 
 .slides-home-toolbar {
-  display: grid;
   height: 3.5rem;
-  grid-template-columns: minmax(0, 1fr) minmax(150px, 1fr) minmax(0, 1fr);
-  grid-template-rows: 3.5rem;
-  column-gap: 0.75rem;
   padding: 0 1rem;
 }
 
-.slides-home-search {
-  display: flex;
-  grid-column: 2;
-  grid-row: 1;
-  width: 100%;
-  min-width: 150px;
-  max-width: 30rem;
-  align-items: center;
-  align-self: center;
-  justify-self: center;
-}
-
-.slides-home-toolbar:not(:has(.slides-home-search)) > :last-child {
-  grid-column: 2 / -1;
-}
-
 @media (min-width: 64rem) {
   .slides-home-toolbar {
     padding-inline: 1.5rem;
   }
 }
 
-@container (max-width: 25rem) {
-  .slides-home-toolbar {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  .slides-home-toolbar:has(.slides-home-search) {
-    height: 7rem;
-    grid-template-rows: 3.5rem 3.5rem;
-  }
-
-  .slides-home-search {
-    grid-column: 1 / -1;
-    grid-row: 2;
-    justify-self: center;
-  }
-}
-
 .slides-home-toolbar h1 {
   font-size: 1rem;
   line-height: 1.25rem;
 }
 
 .slides-home-mobile-toolbar {
-  display: grid;
-  grid-template-columns: minmax(4rem, 1fr) minmax(0, min(30rem, 60vw)) minmax(
-      4rem,
-      1fr
-    );
+  display: flex;
+  justify-content: space-between;
   min-width: 0;
   align-items: center;
 }
@@ -91,21 +50,11 @@
   background-color: var(--color-background);
 }
 
-.slides-home-mobile-toolbar > .slides-home-mobile-search {
-  grid-column: 2;
-  width: 100%;
-  min-width: 0;
-  max-width: 30rem;
-  justify-self: center;
-}
-
 .slides-home-mobile-toolbar > .slides-home-mobile-import {
-  grid-column: 3;
-  justify-self: end;
   min-width: 0;
   max-width: 100%;
   flex-shrink: 0;
-  margin-inline-start: 0;
+  margin-inline-start: auto;
 }
 
 @media (max-width: 40rem) {

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -1008,9 +1008,13 @@ const messages = {
     all: "All",
     showMineDecks: "Show decks created by me",
     mine: "Mine",
+    ownedByAnyone: "Owned by anyone",
+    ownedByMe: "Owned by me",
+    sharedWithMe: "Shared with me",
     createDeckOrVisual: "Create a presentation",
     noMineDecks: "No decks created by you yet.",
     noDecksMatchSearch: "No decks match your search.",
+    noDecksMatchFilter: "No decks match the current filter.",
     deleteDeckTitle: "Delete Deck?",
     deleteDeckDescription:
       "This will permanently delete this deck and all its slides. This action cannot be undone.",

package/corpus/templates/slides/app/lib/deck-filter.ts

@@ -1,12 +1,13 @@
 export const DECK_FILTER_STORAGE_KEY = "slides:deck-filter";
 
-export type DeckFilter = "all" | "mine";
+export type DeckFilter = "all" | "mine" | "not-mine";
 
 export function resolveDeckFilter(
   createdByParam: string | null,
   storedFilter: DeckFilter | undefined,
 ): DeckFilter {
   if (createdByParam === "me") return "mine";
+  if (createdByParam === "not-me") return "not-mine";
   if (createdByParam !== null) return "all";
   return storedFilter ?? "mine";
 }
@@ -21,7 +22,9 @@ export function readStoredDeckFilter(
 
   try {
     const stored = storage.getItem(DECK_FILTER_STORAGE_KEY);
-    return stored === "all" || stored === "mine" ? stored : undefined;
+    return stored === "all" || stored === "mine" || stored === "not-mine"
+      ? stored
+      : undefined;
   } catch {
     // coercion-ok: localStorage failures intentionally fall back to the default filter.
     return undefined;