logo/copy changes

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

package-lock.json

@@ -1,11 +1,11 @@
 {
-  "name": "ditto",
+  "name": "agora",
   "version": "2.8.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "ditto",
+      "name": "agora",
       "version": "2.8.0",
       "dependencies": {
         "@capacitor/app": "^8.0.0",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ditto",
+  "name": "agora",
   "private": true,
   "version": "2.8.0",
   "type": "module",

src/components/AgoraLogo.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils';
 
-interface DittoLogoProps {
+interface AgoraLogoProps {
   className?: string;
   size?: number;
 }
@@ -28,7 +28,7 @@ function LightningBolt({ size }: { size: number }) {
 }
 
 /** Agora badge icon used across app chrome. */
-export function DittoLogo({ className, size = 40 }: DittoLogoProps) {
+export function AgoraLogo({ className, size = 40 }: AgoraLogoProps) {
   const boltSize = Math.max(12, Math.round(size * 0.56));
 
   return (

src/components/AppProvider.tsx

@@ -217,7 +217,7 @@ function useApplyBackground(theme: Theme, customTheme: ThemeConfig | undefined,
 
 /**
  * Hook to dynamically recolor the favicon to match the current primary color.
- * Uses the same mask approach as DittoLogo: loads the SVG, draws it as a mask
+ * Uses a mask approach with /logo.svg: loads the SVG, draws it as a mask
  * on a canvas filled with the primary color, and sets the result as the favicon.
  */
 function useApplyFavicon(theme: Theme, customTheme: ThemeConfig | undefined, themes: ThemesConfig | undefined) {

src/components/InitialSyncGate.tsx

@@ -24,7 +24,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { DittoLogo } from "@/components/DittoLogo";
+import { AgoraLogo } from "@/components/AgoraLogo";
 import { ImageCropDialog } from "@/components/ImageCropDialog";
 import { IntroImage } from "@/components/IntroImage";
 import { ProfileCard } from "@/components/ProfileCard";
@@ -170,7 +170,7 @@ function SyncScreen({ phase }: { phase: SyncPhase }) {
         {/* Logo with gentle pulse */}
         <div className="relative">
           <div className="absolute inset-0 rounded-full bg-primary/10 animate-ping opacity-30" />
-          <DittoLogo size={72} className="relative" />
+          <AgoraLogo size={72} className="relative" />
         </div>
 
         {/* Spinner */}
@@ -511,7 +511,7 @@ function SetupQuestionnaire({
 function KeygenStep({ onGenerate }: { onGenerate: () => void }) {
   return (
     <div className="flex flex-col items-center text-center gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
-      <DittoLogo size={80} />
+      <AgoraLogo size={80} />
 
       <div className="space-y-3">
         <h1 className="text-2xl font-bold tracking-tight">
@@ -1229,7 +1229,7 @@ function OutroStep({ onComplete }: { onComplete: () => void }) {
   return (
     <div className="flex flex-col items-center text-center gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
       <div className="relative">
-        <DittoLogo size={72} />
+        <AgoraLogo size={72} />
         <div className="absolute -bottom-1 -right-1 bg-primary/10 rounded-full p-1.5">
           <Heart className="w-5 h-5 text-primary fill-primary" />
         </div>

src/components/LandingHero.tsx

@@ -2,7 +2,7 @@ import { useMemo, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
-import { DittoLogo } from '@/components/DittoLogo';
+import { AgoraLogo } from '@/components/AgoraLogo';
 import { Button } from '@/components/ui/button';
 import { useAppContext } from '@/hooks/useAppContext';
 import { useTheme } from '@/hooks/useTheme';
@@ -133,7 +133,7 @@ export function LandingHero({ onLoginClick, onSignupClick }: LandingHeroProps) {
       {/* ── Hero Header ── */}
       <div className="px-4 pt-8 pb-6 text-center space-y-4">
         <div className="flex justify-center landing-hero-fade" style={{ animationDelay: '0ms' }}>
-          <DittoLogo size={56} />
+          <AgoraLogo size={56} />
         </div>
 
         <div className="space-y-2 landing-hero-fade" style={{ animationDelay: '80ms' }}>

src/components/LeftSidebar.tsx

@@ -8,7 +8,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';
 import { getAvatarShape } from '@/lib/avatarShape';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
-import { DittoLogo } from '@/components/DittoLogo';
+import { AgoraLogo } from '@/components/AgoraLogo';
 import { EmojifiedText } from '@/components/CustomEmoji';
 import { ProfileSearchDropdown } from '@/components/ProfileSearchDropdown';
 import { SidebarNavList } from '@/components/SidebarNavItem';
@@ -90,7 +90,7 @@ export function LeftSidebar() {
       <div className="flex items-center px-3 mb-1">
         <Link to="/" onClick={scrollToTopIfCurrent('/')} className="flex items-center gap-2.5">
           <div className="bg-background/85 rounded-full p-0.5">
-            <DittoLogo size={44} />
+            <AgoraLogo size={44} />
           </div>
           <div className="flex flex-col leading-none">
             <span className="text-xl font-black tracking-tight text-foreground">ÁGORA</span>

src/components/MobileTopBar.tsx

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { DittoLogo } from '@/components/DittoLogo';
+import { AgoraLogo } from '@/components/AgoraLogo';
 import { BarsStaggeredIcon } from '@/components/icons/BarsStaggeredIcon';
 import { ArcBackground } from '@/components/ArcBackground';
 import { useNavHidden } from '@/contexts/LayoutContext';
@@ -46,7 +46,7 @@ export function MobileTopBar({ onAvatarClick, hasSubHeader }: MobileTopBarProps)
           {/* Center: Agora lockup */}
           <div className="flex-1 flex items-center justify-center">
             <Link to="/" onClick={handleLogoClick} className="flex items-center gap-2">
-              <DittoLogo size={28} />
+              <AgoraLogo size={28} />
               <div className="flex flex-col leading-none">
                 <span className="text-sm font-black tracking-tight text-foreground">ÁGORA</span>
                 <span className="text-[7px] uppercase tracking-wider text-muted-foreground font-semibold">

src/pages/FollowPage.tsx

@@ -25,7 +25,7 @@ import { parsePackEvent } from '@/lib/packUtils';
 import { PackFeedTab, MemberCard, MemberCardSkeleton } from '@/components/FollowPackDetailContent';
 import { genUserName } from '@/lib/genUserName';
 import { ArcBackground, ARC_OVERHANG_PX } from '@/components/ArcBackground';
-import { DittoLogo } from '@/components/DittoLogo';
+import { AgoraLogo } from '@/components/AgoraLogo';
 import { Nip05Badge } from '@/components/Nip05Badge';
 import { SubHeaderBar } from '@/components/SubHeaderBar';
 import { TabButton } from '@/components/TabButton';
@@ -229,7 +229,7 @@ function FollowView({ pubkey }: { pubkey: string }) {
           )}
           <Link to="/" className="absolute top-3 left-3">
             <div className="bg-background/85 rounded-full">
-              <DittoLogo size={48} />
+              <AgoraLogo size={48} />
             </div>
           </Link>
         </div>
@@ -443,7 +443,7 @@ function FollowPackView({ addr, relays }: { addr: AddrCoords; relays?: string[]
             <Skeleton className="w-full h-full rounded-none" />
             <Link to="/" className="absolute top-3 left-3">
               <div className="bg-background/85 rounded-full">
-                <DittoLogo size={48} />
+                <AgoraLogo size={48} />
               </div>
             </Link>
           </div>
@@ -475,7 +475,7 @@ function FollowPackView({ addr, relays }: { addr: AddrCoords; relays?: string[]
           )}
           <Link to="/" className="absolute top-3 left-3">
             <div className="bg-background/85 rounded-full">
-              <DittoLogo size={48} />
+              <AgoraLogo size={48} />
             </div>
           </Link>
         </div>