calabasas 0.16.1 → 0.17.0

package/dist/index.js

@@ -5741,6 +5741,652 @@ export const listAppEmojis = query({
 });`
 };
 
+// src/lib/registry/components/role-creator.ts
+var roleCreator = {
+  name: "role-creator",
+  kind: "component",
+  description: "Discord-style role creation dialog with color picker, member assignment, and position ordering",
+  requiredSyncTypes: ["roles", "members"],
+  requiredShadcnComponents: ["dialog", "button", "popover", "command"],
+  generateReactComponent: () => `"use client";
+
+import { useState, useMemo } from "react";
+import { useQuery } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  Check,
+  X,
+  ChevronsUpDown,
+  User,
+  Plus,
+  ChevronUp,
+  ChevronDown,
+} from "lucide-react";
+
+/**
+ * Discord's 20 preset role colors arranged in two rows:
+ * Row 1 — lighter tones, Row 2 — darker counterparts.
+ */
+const PRESET_COLORS: number[] = [
+  0x1abc9c, 0x2ecc71, 0x3498db, 0x9b59b6, 0xe91e63,
+  0xf1c40f, 0xe67e22, 0xe74c3c, 0x95a5a6, 0x607d8b,
+  0x11806a, 0x1f8b4c, 0x206694, 0x71368a, 0xad1457,
+  0xc27c0e, 0xa84300, 0x992d22, 0x979c9f, 0x546e7a,
+];
+
+/** Convert Discord integer color to hex CSS string */
+function colorToHex(color: number): string {
+  if (color === 0) return "#99AAB5";
+  return "#" + color.toString(16).padStart(6, "0");
+}
+
+/** Convert hex string to Discord integer color */
+function hexToColor(hex: string): number {
+  const clean = hex.replace("#", "");
+  const parsed = parseInt(clean, 16);
+  return isNaN(parsed) ? 0 : parsed;
+}
+
+/** Convert Discord integer color to rgba string */
+function colorToRgba(color: number, alpha: number): string {
+  if (color === 0) return \`rgba(153, 170, 181, \${alpha})\`;
+  const r = (color >> 16) & 0xff;
+  const g = (color >> 8) & 0xff;
+  const b = color & 0xff;
+  return \`rgba(\${r}, \${g}, \${b}, \${alpha})\`;
+}
+
+/** Build Discord CDN avatar URL */
+function avatarUrl(
+  userId: string,
+  avatar: string | undefined,
+): string | null {
+  if (!avatar) return null;
+  return \`https://cdn.discordapp.com/avatars/\${userId}/\${avatar}.png?size=32\`;
+}
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type RoleCreatorData = {
+  name: string;
+  color: number;
+  memberIds: string[];
+  position: number;
+};
+
+type RoleCreatorProps = {
+  guildDiscordId: string;
+  defaultMemberIds?: string[];
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  onCreate?: (data: RoleCreatorData) => void;
+  trigger?: React.ReactNode;
+  className?: string;
+};
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function RoleCreator({
+  guildDiscordId,
+  defaultMemberIds = [],
+  open: controlledOpen,
+  onOpenChange,
+  onCreate,
+  trigger,
+  className,
+}: RoleCreatorProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  // Form state
+  const [name, setName] = useState("new role");
+  const [color, setColor] = useState(0);
+  const [customHex, setCustomHex] = useState("");
+  const [usingCustom, setUsingCustom] = useState(false);
+  const [selectedMembers, setSelectedMembers] = useState<string[]>(defaultMemberIds);
+  const [memberPickerOpen, setMemberPickerOpen] = useState(false);
+  const [positionIndex, setPositionIndex] = useState(0);
+
+  // Data
+  const roles = useQuery(api.calabasas.queries.listRolesForCreator, {
+    guildDiscordId,
+  });
+  const members = useQuery(api.calabasas.queries.listMembersForCreator, {
+    guildDiscordId,
+  });
+
+  // Sort roles highest-position first, exclude @everyone
+  const sortedRoles = useMemo(() => {
+    if (!roles) return [];
+    return roles
+      .filter((r) => r.name !== "@everyone")
+      .sort((a, b) => b.position - a.position);
+  }, [roles]);
+
+  // Calculate the position value from the insertion index
+  const calculatedPosition = useMemo(() => {
+    if (sortedRoles.length === 0) return 1;
+    if (positionIndex === 0) return sortedRoles[0].position + 1;
+    if (positionIndex >= sortedRoles.length) return 1;
+    return sortedRoles[positionIndex - 1].position;
+  }, [sortedRoles, positionIndex]);
+
+  const reset = () => {
+    setName("new role");
+    setColor(0);
+    setCustomHex("");
+    setUsingCustom(false);
+    setSelectedMembers(defaultMemberIds);
+    setMemberPickerOpen(false);
+    setPositionIndex(0);
+  };
+
+  const setOpen = (v: boolean) => {
+    if (!v) reset();
+    if (!isControlled) setInternalOpen(v);
+    onOpenChange?.(v);
+  };
+
+  const handleCreate = () => {
+    onCreate?.({
+      name,
+      color,
+      memberIds: selectedMembers,
+      position: calculatedPosition,
+    });
+    setOpen(false);
+  };
+
+  const toggleMember = (userId: string) => {
+    setSelectedMembers((prev) =>
+      prev.includes(userId)
+        ? prev.filter((id) => id !== userId)
+        : [...prev, userId],
+    );
+  };
+
+  const selectPreset = (c: number) => {
+    setColor(c);
+    setUsingCustom(false);
+    setCustomHex("");
+  };
+
+  const moveUp = () => setPositionIndex((i) => Math.max(0, i - 1));
+  const moveDown = () =>
+    setPositionIndex((i) => Math.min(sortedRoles.length, i + 1));
+
+  // ── Render ───────────────────────────────────────────────────────────────
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger ?? (
+          <Button variant="outline" className={className}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create Role
+          </Button>
+        )}
+      </DialogTrigger>
+
+      <DialogContent className="sm:max-w-[520px] p-0 gap-0 overflow-hidden">
+        {/* ── Header ──────────────────────────────────────────────── */}
+        <DialogHeader className="px-6 pt-6 pb-2">
+          <DialogTitle>Create Role</DialogTitle>
+          <DialogDescription>
+            Configure the role's appearance, assign members, and set its
+            position in the hierarchy.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* ── Live preview ────────────────────────────────────────── */}
+        <div className="px-6 py-3">
+          <div className="flex items-center gap-3 rounded-lg border bg-muted/40 px-4 py-3">
+            <span
+              className="h-3.5 w-3.5 rounded-full shrink-0 transition-colors duration-200"
+              style={{ backgroundColor: colorToHex(color) }}
+            />
+            <span className="text-sm font-medium truncate">
+              {name || "new role"}
+            </span>
+            <span
+              className="ml-auto text-[11px] font-medium px-2.5 py-0.5 rounded-full transition-colors duration-200"
+              style={{
+                backgroundColor: colorToRgba(color, 0.12),
+                color: colorToHex(color),
+                border: \`1px solid \${colorToRgba(color, 0.25)}\`,
+              }}
+            >
+              Preview
+            </span>
+          </div>
+        </div>
+
+        {/* ── Scrollable body ─────────────────────────────────────── */}
+        <div className="overflow-y-auto max-h-[60vh] px-6 pb-2 space-y-5">
+          {/* ROLE NAME --------------------------------------------------- */}
+          <fieldset>
+            <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+              Role Name
+            </legend>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="new role"
+              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            />
+          </fieldset>
+
+          {/* ROLE COLOR -------------------------------------------------- */}
+          <fieldset>
+            <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+              Role Color
+            </legend>
+
+            {/* Default (no color) toggle */}
+            <button
+              onClick={() => selectPreset(0)}
+              className={cn(
+                "mb-3 inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors",
+                color === 0
+                  ? "border-primary bg-primary/10 text-primary"
+                  : "border-input text-muted-foreground hover:bg-accent",
+              )}
+            >
+              <span
+                className="h-4 w-4 rounded-full border-2 transition-colors"
+                style={{
+                  borderColor: "#99AAB5",
+                  backgroundColor: color === 0 ? "#99AAB5" : "transparent",
+                }}
+              />
+              Default
+            </button>
+
+            {/* Preset grid (2 rows of 10) */}
+            <div className="grid grid-cols-10 gap-2 mb-3">
+              {PRESET_COLORS.map((c) => (
+                <button
+                  key={c}
+                  onClick={() => selectPreset(c)}
+                  className={cn(
+                    "h-7 w-7 rounded-full transition-all duration-150 hover:scale-110 focus-visible:outline-none relative",
+                    color === c &&
+                      "ring-2 ring-offset-2 ring-offset-background ring-primary scale-110",
+                  )}
+                  style={{ backgroundColor: colorToHex(c) }}
+                  title={colorToHex(c)}
+                >
+                  {color === c && (
+                    <Check className="h-3 w-3 text-white absolute inset-0 m-auto drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]" />
+                  )}
+                </button>
+              ))}
+            </div>
+
+            {/* Custom color */}
+            <div className="flex items-center gap-2">
+              <div className="relative">
+                <input
+                  type="color"
+                  value={color !== 0 ? colorToHex(color) : "#000000"}
+                  onChange={(e) => {
+                    const hex = e.target.value;
+                    setColor(hexToColor(hex));
+                    setCustomHex(hex);
+                    setUsingCustom(true);
+                  }}
+                  className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+                />
+                <div
+                  className={cn(
+                    "h-7 w-7 rounded-full border-2 flex items-center justify-center cursor-pointer transition-colors",
+                    usingCustom
+                      ? "border-primary"
+                      : "border-dashed border-muted-foreground/40 hover:border-muted-foreground",
+                  )}
+                  style={
+                    usingCustom && color !== 0
+                      ? { backgroundColor: colorToHex(color), borderStyle: "solid" }
+                      : {}
+                  }
+                >
+                  {!usingCustom && (
+                    <Plus className="h-3 w-3 text-muted-foreground" />
+                  )}
+                </div>
+              </div>
+              <input
+                type="text"
+                value={customHex}
+                onChange={(e) => {
+                  const v = e.target.value;
+                  setCustomHex(v);
+                  if (v.match(/^#?[0-9a-fA-F]{6}$/)) {
+                    setColor(hexToColor(v));
+                    setUsingCustom(true);
+                  }
+                }}
+                placeholder="#000000"
+                maxLength={7}
+                className="w-[88px] rounded-md border border-input bg-background px-2 py-1 text-sm font-mono shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              />
+            </div>
+          </fieldset>
+
+          {/* ADD MEMBERS ------------------------------------------------- */}
+          <fieldset>
+            <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+              Add Members
+              {selectedMembers.length > 0 && (
+                <span className="ml-1.5 text-[11px] font-normal">
+                  ({selectedMembers.length})
+                </span>
+              )}
+            </legend>
+
+            {/* Selected member chips */}
+            {selectedMembers.length > 0 && (
+              <div className="flex flex-wrap gap-1.5 mb-2">
+                {selectedMembers.map((userId) => {
+                  const member = members?.find(
+                    (m) => m.discordUserId === userId,
+                  );
+                  if (!member) return null;
+                  const url = avatarUrl(member.discordUserId, member.avatar);
+                  return (
+                    <span
+                      key={userId}
+                      className="inline-flex items-center gap-1.5 rounded-full bg-primary/10 text-primary pl-1 pr-1.5 py-0.5 text-xs font-medium"
+                    >
+                      {url ? (
+                        <img
+                          src={url}
+                          alt=""
+                          className="h-4 w-4 rounded-full shrink-0 object-cover"
+                        />
+                      ) : (
+                        <div className="h-4 w-4 rounded-full bg-primary/20 flex items-center justify-center shrink-0">
+                          <User className="h-2.5 w-2.5" />
+                        </div>
+                      )}
+                      {member.displayName ?? member.username}
+                      <button
+                        onClick={() => toggleMember(userId)}
+                        className="rounded-full p-0.5 hover:bg-primary/20 transition-colors"
+                      >
+                        <X className="h-3 w-3" />
+                      </button>
+                    </span>
+                  );
+                })}
+              </div>
+            )}
+
+            {/* Member combobox */}
+            <Popover open={memberPickerOpen} onOpenChange={setMemberPickerOpen}>
+              <PopoverTrigger asChild>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  aria-expanded={memberPickerOpen}
+                  className="w-full justify-between font-normal"
+                >
+                  <span className="text-muted-foreground">
+                    Search by name or ID...
+                  </span>
+                  <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+                <Command>
+                  <CommandInput placeholder="Search members..." />
+                  <CommandList>
+                    <CommandEmpty>No members found.</CommandEmpty>
+                    <CommandGroup>
+                      {members?.map((member) => {
+                        const checked = selectedMembers.includes(
+                          member.discordUserId,
+                        );
+                        const url = avatarUrl(
+                          member.discordUserId,
+                          member.avatar,
+                        );
+                        return (
+                          <CommandItem
+                            key={member.discordUserId}
+                            value={\`\${member.discordUserId} \${member.username} \${member.displayName ?? ""} \${member.nick ?? ""}\`}
+                            onSelect={() => toggleMember(member.discordUserId)}
+                          >
+                            {url ? (
+                              <img
+                                src={url}
+                                alt=""
+                                className="mr-2 h-5 w-5 rounded-full shrink-0 object-cover"
+                              />
+                            ) : (
+                              <div className="mr-2 h-5 w-5 rounded-full bg-muted flex items-center justify-center shrink-0">
+                                <User className="h-3 w-3 text-muted-foreground" />
+                              </div>
+                            )}
+                            <span className="truncate">
+                              {member.displayName ?? member.username}
+                            </span>
+                            <Check
+                              className={cn(
+                                "ml-auto h-4 w-4",
+                                checked ? "opacity-100" : "opacity-0",
+                              )}
+                            />
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+          </fieldset>
+
+          {/* ROLE POSITION ------------------------------------------------ */}
+          <fieldset>
+            <div className="flex items-center justify-between mb-2">
+              <legend className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                Role Position
+              </legend>
+              <div className="flex items-center gap-0.5">
+                <button
+                  onClick={moveUp}
+                  disabled={positionIndex === 0}
+                  className="rounded-md p-1 hover:bg-accent disabled:opacity-25 disabled:pointer-events-none transition-colors"
+                  title="Move up"
+                >
+                  <ChevronUp className="h-4 w-4" />
+                </button>
+                <button
+                  onClick={moveDown}
+                  disabled={positionIndex >= sortedRoles.length}
+                  className="rounded-md p-1 hover:bg-accent disabled:opacity-25 disabled:pointer-events-none transition-colors"
+                  title="Move down"
+                >
+                  <ChevronDown className="h-4 w-4" />
+                </button>
+              </div>
+            </div>
+
+            <div className="max-h-[200px] overflow-y-auto rounded-md border border-input">
+              {sortedRoles.length === 0 && roles !== undefined ? (
+                <>
+                  <NewRoleEntry
+                    name={name}
+                    color={color}
+                  />
+                  <EveryoneEntry />
+                </>
+              ) : sortedRoles.length === 0 ? (
+                <div className="px-3 py-8 text-center text-sm text-muted-foreground">
+                  Loading roles...
+                </div>
+              ) : (
+                <>
+                  {sortedRoles.map((role, i) => (
+                    <div key={role.discordId}>
+                      {positionIndex === i && (
+                        <NewRoleEntry
+                          name={name}
+                          color={color}
+                        />
+                      )}
+                      <div className="flex items-center gap-2.5 px-3 py-2 text-sm">
+                        <span
+                          className="h-3 w-3 rounded-full shrink-0"
+                          style={{ backgroundColor: colorToHex(role.color) }}
+                        />
+                        <span className="truncate flex-1">{role.name}</span>
+                        <span className="text-[11px] tabular-nums text-muted-foreground">
+                          {role.position}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                  {positionIndex >= sortedRoles.length && (
+                    <NewRoleEntry
+                      name={name}
+                      color={color}
+                    />
+                  )}
+                  <EveryoneEntry />
+                </>
+              )}
+            </div>
+          </fieldset>
+        </div>
+
+        {/* ── Footer ──────────────────────────────────────────────── */}
+        <div className="flex items-center justify-end gap-3 border-t px-6 py-4 mt-1">
+          <Button variant="ghost" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleCreate}
+            disabled={!name.trim()}
+            className="transition-colors duration-200"
+            style={
+              color !== 0
+                ? { backgroundColor: colorToHex(color), color: "#fff" }
+                : undefined
+            }
+          >
+            Create Role
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+// ── Sub-components ─────────────────────────────────────────────────────────
+
+function NewRoleEntry({ name, color }: { name: string; color: number }) {
+  return (
+    <div className="flex items-center gap-2.5 px-3 py-2 bg-primary/[0.08] border-l-2 border-l-primary">
+      <span
+        className="h-3 w-3 rounded-full shrink-0 transition-colors duration-200"
+        style={{ backgroundColor: colorToHex(color) }}
+      />
+      <span className="text-sm font-medium truncate flex-1">
+        {name || "new role"}
+      </span>
+      <span className="text-[11px] font-semibold text-primary">NEW</span>
+    </div>
+  );
+}
+
+function EveryoneEntry() {
+  return (
+    <div className="flex items-center gap-2.5 px-3 py-2 opacity-40">
+      <span className="h-3 w-3 rounded-full shrink-0 bg-muted-foreground/50" />
+      <span className="text-sm truncate">@everyone</span>
+      <span className="ml-auto text-[11px] tabular-nums">0</span>
+    </div>
+  );
+}
+`,
+  generateConvexQueries: () => `export const listRolesForCreator = query({
+  args: { guildDiscordId: v.string() },
+  returns: v.array(
+    v.object({
+      discordId: v.string(),
+      name: v.string(),
+      color: v.number(),
+      position: v.number(),
+    })
+  ),
+  handler: async (ctx, { guildDiscordId }) => {
+    const roles = await ctx.db
+      .query("calabasasRoles")
+      .withIndex("by_guild", (q) => q.eq("guildDiscordId", guildDiscordId))
+      .collect();
+    return roles.map((r) => ({
+      discordId: r.discordId,
+      name: r.name,
+      color: r.color,
+      position: r.position,
+    }));
+  },
+});
+
+export const listMembersForCreator = query({
+  args: { guildDiscordId: v.string() },
+  returns: v.array(
+    v.object({
+      discordUserId: v.string(),
+      username: v.string(),
+      displayName: v.optional(v.string()),
+      avatar: v.optional(v.string()),
+      nick: v.optional(v.string()),
+    })
+  ),
+  handler: async (ctx, { guildDiscordId }) => {
+    const members = await ctx.db
+      .query("calabasasMembers")
+      .withIndex("by_guild", (q) => q.eq("guildDiscordId", guildDiscordId))
+      .collect();
+    return members.map((m) => ({
+      discordUserId: m.discordUserId,
+      username: m.username,
+      displayName: m.displayName,
+      avatar: m.avatar,
+      nick: m.nick,
+    }));
+  },
+});`
+};
+
 // src/lib/registry/index.ts
 var REGISTRY = [
   channelSelect,
@@ -5754,7 +6400,8 @@ var REGISTRY = [
   channelTree,
   memberRoster,
   useOnlineCount,
-  emojiPicker
+  emojiPicker,
+  roleCreator
 ];
 function getComponent(name) {
   return REGISTRY.find((c) => c.name === name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "calabasas",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "description": "CLI for Calabasas - Discord Gateway as a Service for Convex",
   "type": "module",
   "bin": {