kyd-shared-badge 0.3.69 → 0.3.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.69",
+  "version": "0.3.70",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -23,6 +23,7 @@
     "@chatscope/chat-ui-kit-styles": "^1.4.0",
     "ai": "5.0.47",
     "i18n-iso-countries": "^7.14.0",
+    "lucide-react": "^0.545.0",
     "next-auth": "^4.24.11",
     "react-hot-toast": "^2.6.0",
     "react-icons": "^5.5.0",

package/src/connect/ConnectAccounts.tsx

@@ -3,6 +3,8 @@ import { useRouter } from 'next/navigation';
 import { ProviderIcon } from '../utils/provider';
 import { normalizeLinkedInInput } from './linkedin';
 import type { ConnectAccountsProps } from './types';
+import { CheckCircle, Link2, LinkIcon, Unlink } from 'lucide-react';
+import { Button, Input, Spinner, Card, CardHeader, CardContent, CardFooter } from '../ui';
 
 function byPriority(a: string, b: string) {
   const pr = (id: string) => (id === 'github' ? 0 : id === 'linkedin' ? 1 : 2);
@@ -128,90 +130,129 @@ export function ConnectAccounts(props: ConnectAccountsProps) {
 
   return (
     <div className={className}>
-      {list.map((provider) => {
-        const providerId = provider.id;
-        const isConnected = connectedIds.has(providerId.toLowerCase());
-        const needsReconnect = reconnectIds.has(providerId.toLowerCase());
-        const isUrl = (provider.connectionType || 'url') === 'url' || provider.connectionType === 'link';
-        const isOauth = provider.connectionType === 'oauth';
-        return (
-          <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10">
-            <div className="flex items-center gap-3">
-              <ProviderIcon name={providerId} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
-              <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
-              {provider.beta ? (
-                <span
-                  className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
-                  style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
-                >
-                  Beta
-                </span>
-              ) : null}
-            </div>
+      {(() => {
+        const oauthList = list.filter(p => p.connectionType === 'oauth');
+        const urlList = list.filter(p => (p.connectionType || 'url') === 'url' || p.connectionType === 'link');
 
-            {isConnected ? (
-              <div className="relative flex items-center">
-                <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
-                  {/* Check icon via CSS/emoji to avoid extra deps */}
-                  <span className="w-4 h-4 inline-block">✔</span>
-                  <span className="text-sm font-medium">Connected</span>
-                </div>
-                <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
-                  <button
-                    onClick={() => onDisconnect(providerId)}
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 hover:text-red-700"
+        const Row = (provider: typeof list[number]) => {
+          const providerId = provider.id;
+          const isConnected = connectedIds.has(providerId.toLowerCase());
+          const needsReconnect = reconnectIds.has(providerId.toLowerCase());
+          const isUrl = (provider.connectionType || 'url') === 'url' || provider.connectionType === 'link';
+          const isOauth = provider.connectionType === 'oauth';
+          return (
+            <div key={providerId} className="group flex items-center justify-between p-2 rounded-lg transition-colors hover:bg-[var(--icon-button-secondary)]/10 transform transition-transform hover:-translate-y-px">
+              <div className="flex items-center gap-3">
+                <ProviderIcon name={providerId} className={`sm:size-7 size-5 ${provider.iconColor || 'text-gray-500'}`} />
+                <span className="font-medium sm:text-base text-sm" style={{ color: 'var(--text-main)'}}>{provider.name}</span>
+                {provider.beta ? (
+                  <span
+                    className="ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold bg-blue-100 text-blue-700 border border-blue-200"
+                    style={{ verticalAlign: 'middle', letterSpacing: '0.05em' }}
                   >
-                    <span className="w-3 h-3 inline-block">✕</span>
-                    <span>Disconnect</span>
-                  </button>
-                </div>
+                    Beta
+                  </span>
+                ) : null}
               </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                {selectedProviderId === providerId && isUrl ? (
-                  <form onSubmit={(e) => { e.preventDefault(); onSubmitLink(providerId); }} className="flex items-center gap-2">
-                    <div className="relative">
-                      <input
-                        type="url"
-                        value={linkUrl}
-                        onChange={(e) => setLinkUrl(e.target.value)}
-                        placeholder={provider.placeholder || 'https://example.com/your-profile'}
-                        required
-                        className="w-72 border bg-transparent p-2 text-sm rounded"
-                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
-                        onPaste={providerId === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
-                        onBlur={providerId === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
-                      />
-                    </div>
-                    <button type="submit" disabled={isSubmitting} className="px-3 py-2 rounded bg-[var(--icon-accent)] text-white">
-                      {isSubmitting ? 'Connecting…' : 'Connect'}
-                    </button>
-                  </form>
-                ) : (
-                  <>
-                    <button
-                      onClick={() => (isOauth ? onOAuth(providerId) : setSelectedProviderId(providerId))}
-                      className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded"
+
+              {isConnected ? (
+                <div className="relative flex items-center">
+                  <div className="flex items-center gap-2 transition-opacity group-hover:opacity-0" style={{ color: 'var(--success-green)'}}>
+                    {/* CheckCircle icon (inline SVG) */}
+                    <CheckCircle className="size-3 sm:size-4" />
+                    <span className="text-sm font-medium">Connected</span>
+                  </div>
+                  <div className="absolute right-0 opacity-0 transition-opacity group-hover:opacity-100">
+                    <Button
+                      onClick={() => onDisconnect(providerId)}
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm text-red-600 hover:text-red-700 hover:underline"
                     >
-                      <span className="sm:text-base text-sm">Connect</span>
-                    </button>
-                    {needsReconnect && (
-                      <button
-                        onClick={() => onDisconnect(providerId)}
-                        className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
-                        style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                      {/* Unlink icon (inline SVG) */}
+                      <Unlink className="size-3 sm:size-4" />
+                      <span>Disconnect</span>
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  {selectedProviderId === providerId && isUrl ? (
+                    <form onSubmit={(e) => { e.preventDefault(); onSubmitLink(providerId); }} className="flex items-center gap-2">
+                      <div className="relative">
+                        <Input
+                          type="url"
+                          value={linkUrl}
+                          onChange={(e) => setLinkUrl(e.target.value)}
+                          placeholder={provider.placeholder || 'https://example.com/your-profile'}
+                          required
+                          className="w-72 border bg-transparent p-2 text-sm rounded"
+                          style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                          onPaste={providerId === 'linkedin' ? (e) => { const text = e.clipboardData.getData('text'); setLinkUrl(normalizeLinkedInInput(text)); e.preventDefault(); } : undefined}
+                          onBlur={providerId === 'linkedin' ? (() => setLinkUrl(normalizeLinkedInInput(linkUrl))) : undefined}
+                        />
+                      </div>
+                      <Button type="submit" disabled={isSubmitting} className="px-3 py-2 rounded bg-[var(--icon-accent)] text-white">
+                        {isSubmitting ? 'Connecting…' : 'Connect'}
+                      </Button>
+                    </form>
+                  ) : (
+                    <>
+                      <Button
+                        onClick={() => (isOauth ? onOAuth(providerId) : setSelectedProviderId(providerId))}
+                        className="bg-[var(--icon-button-secondary)] text-[var(--text-main)] hover:bg-[var(--icon-accent)] hover:text-white border-0 sm:px-4 px-3 py-1 sm:py-2 rounded-lg flex items-center gap-2"
                       >
-                        <span className="w-3 h-3 inline-block">✕</span>
-                        <span>Remove</span>
-                      </button>
-                    )}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
+                        {/* OAuth/URL leading icon */}
+                        {isOauth ? (
+                          <Link2 className="size-3 sm:size-4" />
+                        ) : (
+                          <LinkIcon className="size-3 sm:size-4" />
+                        )}
+                        <span className="sm:text-base text-sm">Connect</span>
+                      </Button>
+                      {needsReconnect && (
+                        <Button
+                          onClick={() => onDisconnect(providerId)}
+                          className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm rounded border"
+                          style={{ color: 'var(--text-main)', borderColor: 'var(--icon-button-secondary)'}}
+                        >
+                          {/* Unlink icon (inline SVG) */}
+                          <Unlink className="size-3 sm:size-4" />
+                          <span>Remove</span>
+                        </Button>
+                      )}
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          );
+        };
+
+        return (
+          <>
+            {oauthList.length ? (
+              <>
+                <div className="flex items-center my-2">
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                  <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>OAuth</span>
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                </div>
+                {oauthList.map(p => Row(p))}
+              </>
+            ) : null}
+
+            {urlList.length ? (
+              <>
+                <div className="flex items-center my-2">
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                  <span className="mx-3 text-[10px] sm:text-xs uppercase tracking-wide" style={{ color: 'var(--text-secondary)'}}>Public Urls</span>
+                  <div className="flex-1 border-t" style={{ borderColor: 'var(--icon-button-secondary)', opacity: 0.3 }} />
+                </div>
+                {urlList.map(p => Row(p))}
+              </>
+            ) : null}
+          </>
         );
-      })}
+      })()}
     </div>
   );
 }

package/src/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

package/src/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col sm:p-4 p-4", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("sm:pt-2 sm:pb-4 sm:px-4 pb-3 px-4 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center sm:p-6 p-2 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

package/src/ui/index.ts

@@ -0,0 +1,4 @@
+export * from './button';
+export * from './card';
+export * from './input';
+export * from './spinner';

package/src/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm text-xs",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

package/src/ui/spinner.tsx

@@ -0,0 +1,12 @@
+'use client'
+import React from 'react'
+
+export function Spinner() {
+  return (
+    <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[var(--icon-accent-hover)]"></div>
+  )
+}
+
+export default Spinner
+
+