@yannelli/paseo-linear-plugin 1.0.1 → 1.1.0-alpha.0

package/client/settings-live.tsx

@@ -0,0 +1,128 @@
+import { type PluginSurfaceProps, useSettings } from "@getpaseo/plugin/client";
+import {
+  SettingsCard,
+  SettingsSection,
+  SettingsSelect,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { type LinearSettings, linearSettings, type MappingMode } from "../shared/settings";
+import { useProviders } from "./queries";
+import { type ReadySettings, SaveBar, SettingsGate, useSettingsDraft } from "./settings-fields";
+import type { Theme } from "./ui";
+
+const MAPPING_OPTIONS: readonly { label: string; value: MappingMode }[] = [
+  { label: "Ticket text: free, rough", value: "semantic" },
+  { label: "Explore agent: reads the repo first", value: "explore" },
+];
+const SAME_AGENT = "";
+const MODEL_DEFAULT = "";
+
+export function LiveSettings({ theme }: PluginSurfaceProps) {
+  const settings = useSettings(linearSettings);
+  const render = useCallback(
+    (ready: ReadySettings) => <LiveEditor theme={theme} settings={ready} />,
+    [theme],
+  );
+  return (
+    <SettingsGate theme={theme} title="Live" settings={settings}>
+      {render}
+    </SettingsGate>
+  );
+}
+
+type Live = LinearSettings["live"];
+
+function LiveEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
+  const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
+  const providers = useProviders();
+  const live = values.live;
+  const change = useCallback(
+    (patch: Partial<Live>) => edit((current) => ({ ...current, live: { ...current.live, ...patch } })),
+    [edit],
+  );
+  const agentOptions = useMemo(() => {
+    const options = [{ label: "Same agent as the implementer", value: SAME_AGENT }];
+    for (const agent of providers.data ?? []) {
+      for (const model of agent.models) {
+        options.push({ label: `${agent.label} · ${model.label}`, value: `${agent.id}/${model.id}` });
+      }
+    }
+    if (live.exploreProvider && !options.some((option) => option.value === live.exploreProvider)) {
+      options.push({ label: `${live.exploreProvider} · not on this host`, value: live.exploreProvider });
+    }
+    return options;
+  }, [providers.data, live.exploreProvider]);
+  // Efforts of the chosen model, such as Low to Max, with its default first.
+  const effortOptions = useMemo(() => {
+    const [agentId, ...rest] = live.exploreProvider.split("/");
+    const modelId = rest.join("/");
+    const model = providers.data
+      ?.find((agent) => agent.id === agentId)
+      ?.models.find((entry) => entry.id === modelId);
+    if (!model || model.efforts.length === 0) return null;
+    const fallback = model.efforts.find((effort) => effort.id === model.defaultEffortId);
+    return [
+      { label: fallback ? `Model default: ${fallback.label}` : "Model default", value: MODEL_DEFAULT },
+      ...model.efforts.map((effort) => ({ label: effort.label, value: effort.id })),
+    ];
+  }, [providers.data, live.exploreProvider]);
+
+  return (
+    <View>
+      <SettingsSection title="Linear Live">
+        <SettingsCard>
+          <SettingsSwitch
+            label="Show Linear Live"
+            hint="Track agents started from an issue: sub-issues, todos, and the files they touch."
+            value={live.enabled}
+            onValueChange={(enabled) => change({ enabled })}
+          />
+          <SettingsSelect
+            label="Map files with"
+            hint="Ticket text finds paths named in the issue. The explore agent reads the repository first, and the implement agent starts when the map is ready. It costs provider usage."
+            value={live.mapping}
+            options={MAPPING_OPTIONS}
+            onValueChange={(mapping) => change({ mapping })}
+            disabled={!live.enabled}
+          />
+          <SettingsSelect
+            label="Explore and setup agent"
+            hint="It may only read and search the project folder. A faster, cheaper model is usually enough."
+            value={live.exploreProvider}
+            options={agentOptions}
+            onValueChange={(exploreProvider) => change({ exploreProvider, exploreEffort: MODEL_DEFAULT })}
+          />
+          {effortOptions ? (
+            <SettingsSelect
+              label="Explore and setup effort"
+              hint="How much the model thinks before it answers. Lower is faster and uses less of your plan."
+              value={effortOptions.some((option) => option.value === live.exploreEffort) ? live.exploreEffort : MODEL_DEFAULT}
+              options={effortOptions}
+              onValueChange={(exploreEffort) => change({ exploreEffort })}
+            />
+          ) : null}
+        </SettingsCard>
+      </SettingsSection>
+      <SettingsSection title="Linear status sync">
+        <SettingsCard>
+          <SettingsSwitch
+            label="Update Linear from agent todos"
+            hint="After each turn, a todo that starts with a sub-issue key moves that sub-issue forward: In Progress, then Done. The parent moves to In Review when every sub-issue is Done. Statuses never move back. A project can turn this on or off for itself, under Projects."
+            value={live.syncTodos}
+            onValueChange={(syncTodos) => change({ syncTodos })}
+          />
+        </SettingsCard>
+      </SettingsSection>
+      <SaveBar
+        theme={theme}
+        dirty={dirty}
+        saving={settings.saving}
+        error={settings.saveError}
+        onSave={() => void save()}
+        onDiscard={discard}
+      />
+    </View>
+  );
+}

package/client/settings-overrides.tsx

@@ -0,0 +1,148 @@
+import { SettingsCard, SettingsSection, SettingsSelect } from "@getpaseo/plugin/client/ui";
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import {
+  type LinearSettings,
+  type ProjectConfig,
+  type ProjectOverrides,
+  projectDefaults,
+} from "../shared/settings";
+import { useProviders } from "./queries";
+import { COPY, LIMIT_OPTIONS, limitLabel } from "./settings-agents";
+import { ISOLATION_OPTIONS } from "./settings-prompts";
+
+// A project's own values for settings that all projects share. "Same as all projects" removes
+// the project's value, so the project follows the setting for all projects again.
+
+const INHERIT = "__all__";
+const AUTO_MODEL = "__auto__";
+const ON_OFF = [
+  { label: "On", value: "on" },
+  { label: "Off", value: "off" },
+];
+
+type BooleanKey = {
+  [Key in keyof ProjectOverrides]-?: NonNullable<ProjectOverrides[Key]> extends boolean ? Key : never;
+}[keyof ProjectOverrides];
+
+interface Option {
+  label: string;
+  value: string;
+}
+
+const onOff = (value: boolean) => (value ? "On" : "Off");
+const labelOf = (options: readonly Option[], value: string) =>
+  options.find((option) => option.value === value)?.label ?? value;
+
+function OverrideSelect(props: {
+  label: string;
+  hint?: string;
+  /** The project's own value, or undefined when it follows all projects. */
+  value: string | undefined;
+  /** How the setting for all projects reads, such as "On". */
+  inherited: string;
+  options: readonly Option[];
+  disabled?: boolean;
+  onChange(value: string | undefined): void;
+}) {
+  const { onChange } = props;
+  const options = useMemo(
+    () => [{ label: `Same as all projects: ${props.inherited}`, value: INHERIT }, ...props.options],
+    [props.inherited, props.options],
+  );
+  const select = useCallback((value: string) => onChange(value === INHERIT ? undefined : value), [onChange]);
+  return (
+    <SettingsSelect
+      label={props.label}
+      hint={props.hint}
+      value={props.value ?? INHERIT}
+      options={options}
+      disabled={props.disabled}
+      onValueChange={select}
+    />
+  );
+}
+
+export function ProjectOverridesSection(props: {
+  values: LinearSettings;
+  config: ProjectConfig;
+  change(patch: Partial<ProjectConfig>): void;
+}) {
+  const { values, config, change } = props;
+  const own = config.overrides;
+  const providers = useProviders();
+  const set = useCallback(
+    <Key extends keyof ProjectOverrides>(key: Key, value: ProjectOverrides[Key] | undefined) => {
+      const { [key]: _previous, ...others } = config.overrides;
+      change({ overrides: value === undefined ? others : { ...others, [key]: value } });
+    },
+    [change, config.overrides],
+  );
+  const modelOptions = useMemo(() => {
+    const options: Option[] = [{ label: "Provider default", value: AUTO_MODEL }];
+    for (const agent of providers.data ?? []) {
+      for (const model of agent.models) options.push({ label: `${agent.label} · ${model.label}`, value: `${agent.id}/${model.id}` });
+    }
+    if (own.provider && !options.some((option) => option.value === own.provider)) {
+      options.push({ label: `${own.provider} · not on this host`, value: own.provider });
+    }
+    return options;
+  }, [providers.data, own.provider]);
+  const tools = projectDefaults(values, config.projectId).tools;
+  const toggle = (key: BooleanKey, label: string, global: boolean, extra: { hint?: string; disabled?: boolean } = {}) => (
+    <OverrideSelect
+      label={label}
+      hint={extra.hint}
+      value={own[key] === undefined ? undefined : own[key] ? "on" : "off"}
+      inherited={onOff(global)}
+      options={ON_OFF}
+      disabled={extra.disabled}
+      onChange={(value) => set(key, value === undefined ? undefined : value === "on")}
+    />
+  );
+  const globalModel = values.launch.provider || AUTO_MODEL;
+  return (
+    <View>
+      <SettingsSection title="Agent defaults for this project">
+        <SettingsCard>
+          <OverrideSelect
+            label="Model"
+            hint="Preselected when you start an agent from an issue in this project."
+            value={own.provider === undefined ? undefined : own.provider || AUTO_MODEL}
+            inherited={labelOf(modelOptions, globalModel)}
+            options={modelOptions}
+            onChange={(value) => set("provider", value === undefined ? undefined : value === AUTO_MODEL ? "" : value)}
+          />
+          <OverrideSelect
+            label="Run agents in"
+            value={own.isolation}
+            inherited={labelOf(ISOLATION_OPTIONS, values.launch.isolation)}
+            options={ISOLATION_OPTIONS}
+            onChange={(value) => set("isolation", value as ProjectOverrides["isolation"])}
+          />
+          {toggle("includeComments", "Include issue comments", values.launch.includeComments)}
+          {toggle("moveToStarted", "Move the issue to In Progress", values.launch.moveToStarted)}
+          {toggle("assignToMe", "Assign the issue to me", values.launch.assignToMe)}
+        </SettingsCard>
+      </SettingsSection>
+      <SettingsSection title="Linear tools and sync for this project">
+        <SettingsCard>
+          {toggle("syncTodos", "Update Linear from agent todos", values.live.syncTodos, {
+            hint: "After each turn, todos that start with a sub-issue key move that sub-issue forward.",
+          })}
+          {toggle("tools", COPY.enabled.label, values.tools.enabled, { hint: COPY.enabled.hint })}
+          {toggle("allowEdits", COPY.allowEdits.label, values.tools.allowEdits, { disabled: !tools.enabled })}
+          {toggle("assignAgents", COPY.assignAgents.label, values.tools.assignAgents, { disabled: !tools.enabled })}
+          <OverrideSelect
+            label={COPY.maxAgents.label}
+            value={own.maxAgents === undefined ? undefined : String(own.maxAgents)}
+            inherited={limitLabel(values.tools.maxAgents)}
+            options={LIMIT_OPTIONS}
+            disabled={!tools.enabled}
+            onChange={(value) => set("maxAgents", value === undefined ? undefined : Number(value))}
+          />
+        </SettingsCard>
+      </SettingsSection>
+    </View>
+  );
+}

package/client/settings-projects.tsx

@@ -21,6 +21,10 @@ import {
   upsertProject,
 } from "../shared/settings";
 import { effectiveKeyScope, KeyScopeProvider } from "./key-scope";
+import { ProjectSetup } from "./project-init";
+import { ProjectKnowledgeSection } from "./project-knowledge";
+import { AccessSection } from "./settings-access";
+import { ProjectOverridesSection } from "./settings-overrides";
 import { type PaseoProjectOption, useAuthStatus, useCatalog, useProjects } from "./queries";
 import {
   MultilineField,
@@ -40,11 +44,15 @@ const STEPS_PLACEHOLDER = "Run the type checker\nUpdate the changelog\nOpen a dr
 
 type Change = (patch: Partial<ProjectConfig>) => void;
 
-export function ProjectSettings({ theme }: PluginSurfaceProps) {
+export function ProjectSettings({ theme, navigation }: PluginSurfaceProps) {
   const settings = useSettings(linearSettings);
+  const openAgent = useMemo(
+    () => (navigation ? (agentId: string) => navigation.openAgent({ agentId }) : undefined),
+    [navigation],
+  );
   const render = useCallback(
-    (ready: ReadySettings) => <ProjectEditor theme={theme} settings={ready} />,
-    [theme],
+    (ready: ReadySettings) => <ProjectEditor theme={theme} settings={ready} openAgent={openAgent} />,
+    [theme, openAgent],
   );
   return (
     <SettingsGate theme={theme} title="Projects" settings={settings}>
@@ -70,7 +78,12 @@ function projectOptions(
   return [...known, ...missing];
 }
 
-function ProjectEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
+function ProjectEditor(props: {
+  theme: Theme;
+  settings: ReadySettings;
+  openAgent?: (agentId: string) => void;
+}) {
+  const { theme, settings } = props;
   const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
   const projects = useProjects();
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -120,6 +133,12 @@ function ProjectEditor({ theme, settings }: { theme: Theme; settings: ReadySetti
   }
   return (
     <View>
+      <AccessSection
+        access={values.access}
+        saved={settings.values.access}
+        projects={projects.data}
+        edit={edit}
+      />
       <SettingsSection title="Project">
         <SettingsCard>
           <SettingsSelect
@@ -131,7 +150,10 @@ function ProjectEditor({ theme, settings }: { theme: Theme; settings: ReadySetti
           <SettingsRow label="Folder" hint={config.rootPath || "Unknown"} />
         </SettingsCard>
       </SettingsSection>
+      <ProjectOverridesSection values={values} config={config} change={change} />
       <TeamsSection config={config} change={change} />
+      {paseoProject ? <ProjectKnowledgeSection projectId={paseoProject.projectId} /> : null}
+      <ProjectSetup theme={theme} config={config} change={change} openAgent={props.openAgent} />
       <InstructionsSection theme={theme} config={config} change={change} />
       {AGENT_ACTIONS.map((action) => (
         <ActionSection key={action} theme={theme} action={action} config={config} change={change} />

package/client/settings-prompts.tsx

@@ -28,7 +28,7 @@ import {
 } from "./settings-fields";
 import type { Theme } from "./ui";
 
-const ISOLATION_OPTIONS: readonly { label: string; value: Isolation }[] = [
+export const ISOLATION_OPTIONS: readonly { label: string; value: Isolation }[] = [
   { label: "New worktree on the issue branch", value: "worktree" },
   { label: "The project or current workspace", value: "workspace" },
 ];
@@ -89,11 +89,11 @@ function LaunchDefaults({ launch, edit }: { launch: Launch; edit: Edit }) {
     ? launch.provider
     : AUTO_MODEL;
   return (
-    <SettingsSection title="Agent defaults">
+    <SettingsSection title="Agent defaults for all projects">
       <SettingsCard>
         <SettingsSelect
           label="Model"
-          hint="Preselected when you start an agent from an issue."
+          hint="Preselected when you start an agent from an issue. A project can use its own defaults in Linear settings, under Projects."
           value={model}
           options={modelOptions}
           onValueChange={chooseModel}

package/client/timeline-card.tsx

@@ -4,6 +4,7 @@ import { useCallback, useMemo } from "react";
 import { Pressable, Text, View } from "react-native";
 import type { IssueCard } from "../shared/linear";
 import { ACTION_LABELS } from "../shared/prompts";
+import { PluginIcon } from "./plugin-icon";
 import { usePressableStyle } from "./ui";
 
 export function IssueCardRow({ item, theme }: PluginTimelineItemProps<IssueCard>) {
@@ -44,7 +45,7 @@ export function IssueCardRow({ item, theme }: PluginTimelineItemProps<IssueCard>
       onPress={open}
       style={style}
     >
-      <Icon name="SquareKanban" size={16} color={colors.foregroundMuted} />
+      <PluginIcon size={16} color={colors.foregroundMuted} theme={theme} />
       <View style={styles.body}>
         <Text numberOfLines={1} style={styles.title}>
           <Text style={styles.identifier}>{`${card.identifier}  `}</Text>

package/client/tool-buttons.tsx

@@ -0,0 +1,68 @@
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { type ReactNode, useMemo } from "react";
+import { ActivityIndicator, Pressable, View } from "react-native";
+import { type Theme, usePressableStyle } from "./ui";
+
+// Small icon buttons for card toolbars, such as the map actions. A group draws them in one
+// bordered track.
+
+export function ToolGroup({ theme, children }: { theme: Theme; children: ReactNode }) {
+  const { colors } = theme;
+  const style = useMemo(
+    () =>
+      ({
+        flexDirection: "row",
+        alignItems: "center",
+        padding: 2,
+        gap: 2,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface1,
+      }) as const,
+    [colors],
+  );
+  return <View style={style}>{children}</View>;
+}
+
+export function ToolButton(props: {
+  theme: Theme;
+  icon: string;
+  /** Read by screen readers and shown as the tooltip on web. */
+  label: string;
+  onPress(): void;
+  /** A toggle that is on. */
+  active?: boolean;
+  disabled?: boolean;
+  busy?: boolean;
+}) {
+  const { colors } = props.theme;
+  const styles = useMemo(() => {
+    const idle = {
+      width: 26,
+      height: 24,
+      borderRadius: 6,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: props.active ? colors.surface2 : "transparent",
+      opacity: props.disabled ? 0.4 : 1,
+    } as const;
+    return { idle, hover: { ...idle, backgroundColor: colors.surface2 } };
+  }, [colors, props.active, props.disabled]);
+  const pressStyle = usePressableStyle(styles.idle, styles.hover);
+  const color = props.active ? colors.foreground : colors.foregroundMuted;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={props.label}
+      accessibilityState={{ selected: props.active === true, disabled: props.disabled === true }}
+      disabled={props.disabled || props.busy}
+      onPress={props.onPress}
+      hitSlop={4}
+      style={pressStyle}
+      {...({ title: props.label } as object)}
+    >
+      {props.busy ? <ActivityIndicator size="small" color={color} /> : <Icon name={props.icon} size={14} color={color} />}
+    </Pressable>
+  );
+}

package/client/ui.tsx

@@ -1,6 +1,6 @@
 import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
-import { type ReactNode, useCallback, useMemo } from "react";
+import { type ComponentType, type ReactNode, useCallback, useMemo } from "react";
 import {
   ActivityIndicator,
   Pressable,
@@ -15,6 +15,15 @@ export { Avatar, LabelPill, PriorityIcon, priorityMeta, StateIcon } from "./glyp
 
 export type Theme = PluginSurfaceProps["theme"];
 
+/** A Lucide icon name, or a component such as the plugin icon. */
+export type Glyph = string | ComponentType<{ size: number; color: string; theme: Theme }>;
+
+export function GlyphIcon(props: { glyph: Glyph; size: number; color: string; theme: Theme }) {
+  const { glyph: Custom, size, color, theme } = props;
+  if (typeof Custom === "string") return <Icon name={Custom} size={size} color={color} />;
+  return <Custom size={size} color={color} theme={theme} />;
+}
+
 type InteractionState = PressableStateCallbackType & { hovered?: boolean };
 
 export function interactive(state: PressableStateCallbackType): boolean {
@@ -43,7 +52,7 @@ function buttonFill(variant: ButtonVariant, colors: Theme["colors"]): string {
 export interface ButtonProps {
   theme: Theme;
   label: string;
-  icon?: string;
+  icon?: Glyph;
   variant?: ButtonVariant;
   size?: keyof typeof HEIGHT;
   disabled?: boolean;
@@ -52,10 +61,10 @@ export interface ButtonProps {
   onPress(): void;
 }
 
-function ButtonGlyph(props: { busy: boolean; icon?: string; size: number; color: string }) {
+function ButtonGlyph(props: { busy: boolean; icon?: Glyph; size: number; color: string; theme: Theme }) {
   if (props.busy) return <ActivityIndicator size="small" color={props.color} />;
   if (!props.icon) return null;
-  return <Icon name={props.icon} size={props.size} color={props.color} />;
+  return <GlyphIcon glyph={props.icon} size={props.size} color={props.color} theme={props.theme} />;
 }
 
 export function Button({
@@ -103,7 +112,7 @@ export function Button({
       onPress={onPress}
       style={pressStyle}
     >
-      <ButtonGlyph busy={busy === true} icon={icon} size={size === "xs" ? 14 : 16} color={ink} />
+      <ButtonGlyph busy={busy === true} icon={icon} size={size === "xs" ? 14 : 16} color={ink} theme={theme} />
       <Text numberOfLines={1} style={styles.label}>
         {label}
       </Text>
@@ -276,7 +285,7 @@ export function OptionRow(props: {
 
 export function EmptyState(props: {
   theme: Theme;
-  icon: string;
+  icon: Glyph;
   title: string;
   detail?: string;
   tone?: "default" | "danger";
@@ -309,7 +318,7 @@ export function EmptyState(props: {
   );
   return (
     <View style={styles.root}>
-      <Icon name={props.icon} size={28} color={colors.foregroundMuted} />
+      <GlyphIcon glyph={props.icon} size={28} color={colors.foregroundMuted} theme={props.theme} />
       <Text style={styles.title}>{props.title}</Text>
       {props.detail ? <Text style={styles.detail}>{props.detail}</Text> : null}
       {props.children}

package/client/web.ts

@@ -0,0 +1,81 @@
+import { Platform } from "react-native";
+
+// The only module that uses the DOM. Off the web each export does nothing.
+// The file picker is a hidden file input, because plugins cannot use native document pickers.
+// Local storage keeps small values for the next start; it can be missing or blocked.
+
+interface FileLike {
+  name: string;
+  size: number;
+  text(): Promise<string>;
+}
+
+interface FileInputLike {
+  type: string;
+  accept: string;
+  files: ArrayLike<FileLike> | null;
+  onchange: (() => void) | null;
+  click(): void;
+}
+
+interface DocumentLike {
+  createElement(tag: "input"): FileInputLike;
+}
+
+/** True where pickTextFile can open a file picker. */
+export const canPickFiles = Platform.OS === "web";
+
+export type PickedFile = { name: string; text: string } | { error: string };
+
+/** Opens the browser file picker and calls onPick with the chosen file. Nothing on cancel. */
+export function pickTextFile(accept: string, maxBytes: number, onPick: (file: PickedFile) => void): void {
+  const document = (globalThis as { document?: DocumentLike }).document;
+  if (!canPickFiles || !document) return;
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = accept;
+  input.onchange = () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    if (file.size > maxBytes) {
+      onPick({ error: `${file.name} is too large. Use a file under ${Math.round(maxBytes / 1000)} KB.` });
+      return;
+    }
+    file.text().then(
+      (text) => onPick({ name: file.name, text }),
+      () => onPick({ error: `Paseo could not read ${file.name}.` }),
+    );
+  };
+  input.click();
+}
+
+interface StorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+function storage(): StorageLike | null {
+  if (Platform.OS !== "web") return null;
+  try {
+    return (globalThis as { localStorage?: StorageLike }).localStorage ?? null;
+  } catch {
+    return null;
+  }
+}
+
+/** A value saved on this device, or null off the web or when storage is blocked. */
+export function readStored(key: string): string | null {
+  try {
+    return storage()?.getItem(key) ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function writeStored(key: string, value: string): void {
+  try {
+    storage()?.setItem(key, value);
+  } catch {
+    // Blocked storage only means the next start uses the built-in icon first.
+  }
+}