-33

.github/workflows/ci.yml

reviewed

··· 1 1 - name: CI 2 2 - 3 3 - on: 4 4 - push: 5 5 - branches: [ main ] 6 6 - pull_request: 7 7 - branches: [ main ] 8 8 - 9 9 - env: 10 10 - CARGO_TERM_COLOR: always 11 11 - 12 12 - jobs: 13 13 - test: 14 14 - name: Test 15 15 - runs-on: ubuntu-latest 16 16 - steps: 17 17 - - uses: actions/checkout@v4 18 18 - - uses: dtolnay/rust-toolchain@stable 19 19 - with: 20 20 - components: rustfmt, clippy 21 21 - - uses: Swatinem/rust-cache@v2 22 22 - 23 23 - - name: Check formatting 24 24 - run: cargo fmt -- --check 25 25 - 26 26 - - name: Build 27 27 - run: cargo build --verbose 28 28 - 29 29 - - name: Run clippy 30 30 - run: cargo clippy -- -D warnings 31 31 - 32 32 - - name: Run tests 33 33 - run: cargo test --verbose

-52

.github/workflows/fly-review.yml

reviewed

··· 1 1 - name: Deploy Review App 2 2 - on: 3 3 - # Run this workflow on every PR event. Existing review apps will be updated when the PR is updated. 4 4 - pull_request: 5 5 - types: [opened, reopened, synchronize, closed] 6 6 - paths: 7 7 - - 'src/**' 8 8 - - 'templates/**' 9 9 - - 'static/**' 10 10 - - 'Cargo.toml' 11 11 - - 'Cargo.lock' 12 12 - - 'Dockerfile' 13 13 - - 'fly.toml' 14 14 - - 'fly.review.toml' 15 15 - - 'build.rs' 16 16 - - 'sqlx-data.json' 17 17 - env: 18 18 - FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }} 19 19 - # Set these to your Fly.io organization and preferred region. 20 20 - FLY_REGION: ewr 21 21 - FLY_ORG: personal 22 22 - 23 23 - jobs: 24 24 - review_app: 25 25 - runs-on: ubuntu-latest 26 26 - outputs: 27 27 - url: ${{ steps.deploy.outputs.url }} 28 28 - # Only run one deployment at a time per PR. 29 29 - concurrency: 30 30 - group: pr-${{ github.event.number }} 31 31 - 32 32 - # Deploying apps with this "review" environment allows the URL for the app to be displayed in the PR UI. 33 33 - environment: 34 34 - name: review 35 35 - # The script in the `deploy` sets the URL output for each review app. 36 36 - url: ${{ steps.deploy.outputs.url }} 37 37 - steps: 38 38 - - name: Get code 39 39 - uses: actions/checkout@v4 40 40 - 41 41 - - name: Deploy PR app to Fly.io 42 42 - id: deploy 43 43 - uses: superfly/fly-pr-review-apps@1.2.1 44 44 - with: 45 45 - name: zzstoatzz-status-pr-${{ github.event.number }} 46 46 - config: fly.review.toml 47 47 - # Use smaller resources for review apps 48 48 - vmsize: shared-cpu-1x 49 49 - memory: 256 50 50 - # Set OAUTH_REDIRECT_BASE dynamically for OAuth redirects 51 51 - secrets: | 52 52 - OAUTH_REDIRECT_BASE=https://zzstoatzz-status-pr-${{ github.event.number }}.fly.dev

-16

.github/workflows/fly.yml

reviewed

··· 1 1 - name: Fly Deploy 2 2 - on: 3 3 - push: 4 4 - branches: 5 5 - - main 6 6 - jobs: 7 7 - deploy: 8 8 - name: Deploy app 9 9 - runs-on: ubuntu-latest 10 10 - concurrency: deploy-group # ensure only one action runs at a time 11 11 - steps: 12 12 - - uses: actions/checkout@v4 13 13 - - uses: superfly/flyctl-actions/setup-flyctl@master 14 14 - - run: flyctl deploy --remote-only 15 15 - env: 16 16 - FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

+5 -4

.gitignore

reviewed

··· 1 1 - /target 2 2 - .idea 3 3 - .env 4 4 - statusphere.sqlite3 1 1 + # wrangler/cloudflare 2 2 + .wrangler/ 3 3 + 4 4 + # notes 5 5 + oauth-experience.md

+59 -40

Dockerfile

reviewed

··· 1 1 - # Build stage 2 2 - FROM rustlang/rust:nightly-slim AS builder 1 1 + ARG GLEAM_VERSION=v1.13.0 3 2 4 4 - # Install build dependencies 5 5 - RUN apt-get update && apt-get install -y \ 6 6 - pkg-config \ 7 7 - libssl-dev \ 8 8 - && rm -rf /var/lib/apt/lists/* 3 3 + # Build stage - compile the application 4 4 + FROM ghcr.io/gleam-lang/gleam:${GLEAM_VERSION}-erlang-alpine AS builder 9 5 10 10 - WORKDIR /app 6 6 + # Install build dependencies (including PostgreSQL client for multi-database support) 7 7 + RUN apk add --no-cache \ 8 8 + bash \ 9 9 + git \ 10 10 + nodejs \ 11 11 + npm \ 12 12 + build-base \ 13 13 + sqlite-dev \ 14 14 + postgresql-dev 11 15 12 12 - # Copy manifests 13 13 - COPY Cargo.toml Cargo.lock ./ 16 16 + # Configure git for non-interactive use 17 17 + ENV GIT_TERMINAL_PROMPT=0 14 18 15 15 - # Copy source code 16 16 - COPY src ./src 17 17 - COPY templates ./templates 18 18 - COPY lexicons ./lexicons 19 19 - COPY static ./static 19 19 + # Clone quickslice at the v0.17.3 tag (includes sub claim fix) 20 20 + RUN git clone --depth 1 --branch v0.17.3 https://github.com/bigmoves/quickslice.git /build 21 21 + 22 22 + # Install dependencies for all projects 23 23 + RUN cd /build/client && gleam deps download 24 24 + RUN cd /build/lexicon_graphql && gleam deps download 25 25 + RUN cd /build/server && gleam deps download 26 26 + 27 27 + # Apply patches to dependencies 28 28 + RUN cd /build && patch -p1 < patches/mist-websocket-protocol.patch 29 29 + 30 30 + # Install JavaScript dependencies for client 31 31 + RUN cd /build/client && npm install 20 32 21 21 - # Build for release 22 22 - RUN cargo build --release 33 33 + # Compile the client code and output to server's static directory 34 34 + RUN cd /build/client \ 35 35 + && gleam add --dev lustre_dev_tools \ 36 36 + && gleam run -m lustre/dev build quickslice_client --minify --outdir=/build/server/priv/static 37 37 + 38 38 + # Compile the server code 39 39 + RUN cd /build/server \ 40 40 + && gleam export erlang-shipment 23 41 24 24 - # Runtime stage 25 25 - FROM debian:bookworm-slim 42 42 + # Runtime stage - slim image with only what's needed to run 43 43 + FROM ghcr.io/gleam-lang/gleam:${GLEAM_VERSION}-erlang-alpine 26 44 27 27 - # Install runtime dependencies 28 28 - RUN apt-get update && apt-get install -y \ 29 29 - ca-certificates \ 30 30 - libssl3 \ 31 31 - && rm -rf /var/lib/apt/lists/* 45 45 + # Install runtime dependencies and dbmate for migrations 46 46 + ARG TARGETARCH 47 47 + RUN apk add --no-cache sqlite-libs sqlite libpq curl \ 48 48 + && DBMATE_ARCH=$([ "$TARGETARCH" = "arm64" ] && echo "arm64" || echo "amd64") \ 49 49 + && curl -fsSL -o /usr/local/bin/dbmate https://github.com/amacneil/dbmate/releases/latest/download/dbmate-linux-${DBMATE_ARCH} \ 50 50 + && chmod +x /usr/local/bin/dbmate 32 51 33 33 - WORKDIR /app 52 52 + # Copy the compiled server code from the builder stage 53 53 + COPY --from=builder /build/server/build/erlang-shipment /app 34 54 35 35 - # Copy the built binary 36 36 - COPY --from=builder /app/target/release/nate-status /app/nate-status 55 55 + # Copy database migrations and config 56 56 + COPY --from=builder /build/server/db /app/db 57 57 + COPY --from=builder /build/server/.dbmate.yml /app/.dbmate.yml 58 58 + COPY --from=builder /build/server/docker-entrypoint.sh /app/docker-entrypoint.sh 37 59 38 38 - # Copy templates and lexicons 39 39 - COPY templates ./templates 40 40 - COPY lexicons ./lexicons 41 41 - # Copy static files 42 42 - COPY static ./static 60 60 + # Set up the entrypoint 61 61 + WORKDIR /app 43 62 44 44 - # Create directory for SQLite database 45 45 - RUN mkdir -p /data 63 63 + # Create the data directory for the SQLite database and Fly.io volume mount 64 64 + RUN mkdir -p /data && chmod 755 /data 46 65 47 66 # Set environment variables 48 48 - ENV DB_PATH=/data/status.db 49 49 - ENV ENABLE_FIREHOSE=true 67 67 + ENV HOST=0.0.0.0 68 68 + ENV PORT=8080 50 69 51 51 - # Expose port 52 52 - EXPOSE 8080 70 70 + # Expose the port the server will run on 71 71 + EXPOSE $PORT 53 72 54 54 - # Run the binary 55 55 - CMD ["./nate-status"] 73 73 + # Run the server 74 74 + CMD ["/app/docker-entrypoint.sh", "run"]

+45 -65

README.md

reviewed

··· 1 1 - # status 1 1 + # quickslice-status 2 2 3 3 - a personal status tracker built on at protocol, where i can post my current status (like slack status) decoupled from any specific platform. 3 3 + a status app for bluesky, built with [quickslice](https://github.com/bigmoves/quickslice). 4 4 5 5 - live at: [status.zzstoatzz.io](https://status.zzstoatzz.io) 6 6 - 7 7 - ## about 5 5 + **live:** https://quickslice-status.pages.dev 8 6 9 9 - this is my personal status url - think of it like a service health page, but for a person. i can update my status with an emoji and optional text, and it's stored permanently in my at protocol repository. 7 7 + ## architecture 10 8 11 11 - ## credits 9 9 + - **backend**: [quickslice](https://github.com/bigmoves/quickslice) on fly.io - handles oauth, graphql api, jetstream ingestion 10 10 + - **frontend**: static site on cloudflare pages - vanilla js spa 12 11 13 13 - this app is based on [bailey townsend's rusty statusphere](https://github.com/fatfingers23/rusty_statusphere_example_app), which is an excellent rust implementation of the at protocol quick start guide. bailey did all the heavy lifting with the atproto integration and the overall architecture. i've adapted it for my personal use case. 12 12 + ## deployment 14 13 15 15 - major thanks to: 16 16 - - [bailey townsend (@baileytownsend.dev)](https://bsky.app/profile/baileytownsend.dev) for the rusty statusphere boilerplate 17 17 - - the atrium-rs maintainers for the rust at protocol libraries 18 18 - - the rocketman maintainers for the jetstream consumer 14 14 + ### backend (fly.io) 19 15 20 20 - ## development 16 16 + builds quickslice from source at v0.17.3 tag. 21 17 22 18 ```bash 23 23 - cp .env.template .env 24 24 - cargo run 25 25 - # navigate to http://127.0.0.1:8080 19 19 + fly deploy 26 20 ``` 27 21 28 28 - ### custom emojis (no redeploys) 29 29 - 30 30 - Emojis are now served from a runtime directory configured by `EMOJI_DIR` (defaults to `static/emojis` locally; set to `/data/emojis` on Fly.io). On startup, if the runtime emoji directory is empty, it will be seeded from the bundled `static/emojis`. 31 31 - 32 32 - - Local dev: add image files to `static/emojis/` (or set `EMOJI_DIR` in `.env`). 33 33 - - Production (Fly.io): upload files directly into the mounted volume at `/data/emojis` — no rebuild or redeploy needed. 34 34 - 35 35 - Examples with Fly CLI: 36 36 - 22 22 + required secrets: 37 23 ```bash 38 38 - # Open an SSH console to the machine 39 39 - fly ssh console -a zzstoatzz-status 40 40 - 41 41 - # Inside the VM, copy or fetch files into /data/emojis 42 42 - mkdir -p /data/emojis 43 43 - curl -L -o /data/emojis/my_new_emoji.png https://example.com/my_new_emoji.png 24 24 + fly secrets set SECRET_KEY_BASE="$(openssl rand -base64 64 | tr -d '\n')" 25 25 + fly secrets set OAUTH_SIGNING_KEY="$(goat key generate -t p256 | tail -1)" 44 26 ``` 45 27 46 46 - Or from your machine using SFTP: 28 28 + ### frontend (cloudflare pages) 47 29 48 30 ```bash 49 49 - fly ssh sftp -a zzstoatzz-status 50 50 - sftp> put ./static/emojis/my_new_emoji.png /data/emojis/ 31 31 + cd site 32 32 + npx wrangler pages deploy . --project-name=quickslice-status 51 33 ``` 52 34 53 53 - The app serves them at `/emojis/<filename>` and lists them via `/api/custom-emojis`. 35 35 + ## oauth client registration 54 36 55 55 - ### admin upload endpoint 37 37 + register an oauth client in the quickslice admin ui at `https://zzstoatzz-quickslice-status.fly.dev/` 56 38 57 57 - When logged in as the admin DID, you can upload PNG or GIF emojis without SSH via a simple endpoint: 39 39 + redirect uri: `https://quickslice-status.pages.dev/callback` 58 40 59 59 - - Endpoint: `POST /admin/upload-emoji` 60 60 - - Auth: session-based; only the admin DID is allowed 61 61 - - Form fields (multipart/form-data): 62 62 - - `file`: the image file (PNG or GIF), max 5MB 63 63 - - `name` (optional): base filename (letters, numbers, `-`, `_`) without extension 41 41 + ## lexicon 64 42 65 65 - Example with curl: 43 43 + uses `io.zzstoatzz.status` lexicon for user statuses. 66 44 67 67 - ```bash 68 68 - curl -i -X POST \ 69 69 - -F "file=@./static/emojis/sample.png" \ 70 70 - -F "name=my_sample" \ 71 71 - http://localhost:8080/admin/upload-emoji 45 45 + ```json 46 46 + { 47 47 + "lexicon": 1, 48 48 + "id": "io.zzstoatzz.status", 49 49 + "defs": { 50 50 + "main": { 51 51 + "type": "record", 52 52 + "key": "self", 53 53 + "record": { 54 54 + "type": "object", 55 55 + "required": ["status", "createdAt"], 56 56 + "properties": { 57 57 + "status": { "type": "string", "maxLength": 128 }, 58 58 + "createdAt": { "type": "string", "format": "datetime" } 59 59 + } 60 60 + } 61 61 + } 62 62 + } 63 63 + } 72 64 ``` 73 65 74 74 - Response will include the public URL (e.g., `/emojis/my_sample.png`). 75 75 - 76 76 - ### available commands 66 66 + ## local development 77 67 78 78 - we use [just](https://github.com/casey/just) for common tasks: 79 79 - 68 68 + serve the frontend locally: 80 69 ```bash 81 81 - just watch # run with hot-reloading 82 82 - just deploy # deploy to fly.io 83 83 - just lint # run clippy 84 84 - just fmt # format code 85 85 - just clean # clean build artifacts 70 70 + cd site 71 71 + python -m http.server 8000 86 72 ``` 87 73 88 88 - ## tech stack 89 89 - 90 90 - - [rust](https://www.rust-lang.org/) with [actix web](https://actix.rs/) 91 91 - - [at protocol](https://atproto.com/) (via [atrium-rs](https://github.com/sugyan/atrium)) 92 92 - - [sqlite](https://www.sqlite.org/) for local storage 93 93 - - [jetstream](https://github.com/bluesky-social/jetstream) for firehose consumption 94 94 - - [fly.io](https://fly.io/) for hosting 74 74 + for oauth to work locally, you'd need to register a separate oauth client with `http://localhost:8000/callback` as the redirect uri and update `CONFIG.clientId` in `app.js`.

+20 -21

fly.toml

reviewed

··· 1 1 - app = "zzstoatzz-status" 2 2 - primary_region = "ewr" 1 1 + # fly.toml app configuration file generated for zzstoatzz-quickslice-status on 2025-12-13T16:42:55-06:00 2 2 + # 3 3 + # See https://fly.io/docs/reference/configuration/ for information about how to use this file. 4 4 + # 5 5 + 6 6 + app = 'zzstoatzz-quickslice-status' 7 7 + primary_region = 'ewr' 3 8 4 9 [build] 5 5 - dockerfile = "Dockerfile" 10 10 + dockerfile = 'Dockerfile' 6 11 7 12 [env] 8 8 - SERVER_PORT = "8080" 9 9 - SERVER_HOST = "0.0.0.0" 10 10 - DATABASE_URL = "sqlite:///data/status.db" 11 11 - ENABLE_FIREHOSE = "true" 12 12 - OAUTH_REDIRECT_BASE = "https://status.zzstoatzz.io" 13 13 - EMOJI_DIR = "/data/emojis" 13 13 + DATABASE_URL = 'sqlite:/data/quickslice.db' 14 14 + HOST = '0.0.0.0' 15 15 + PORT = '8080' 16 16 + EXTERNAL_BASE_URL = 'https://zzstoatzz-quickslice-status.fly.dev' 17 17 + 18 18 + [[mounts]] 19 19 + source = 'quickslice_data' 20 20 + destination = '/data' 14 21 15 22 [http_service] 16 23 internal_port = 8080 17 24 force_https = true 18 18 - auto_stop_machines = true 25 25 + auto_stop_machines = 'stop' 19 26 auto_start_machines = true 20 27 min_machines_running = 1 21 21 - 22 22 - [http_service.concurrency] 23 23 - type = "requests" 24 24 - hard_limit = 250 25 25 - soft_limit = 200 26 26 - 27 27 - [[mounts]] 28 28 - source = "status_data" 29 29 - destination = "/data" 30 28 31 29 [[vm]] 32 32 - cpu_kind = "shared" 30 30 + memory = '1gb' 31 31 + cpu_kind = 'shared' 33 32 cpus = 1 34 34 - memory_mb = 512 33 33 + memory_mb = 1024

+30

lexicons/preferences.json

reviewed

··· 1 1 + { 2 2 + "lexicon": 1, 3 3 + "id": "io.zzstoatzz.status.preferences", 4 4 + "defs": { 5 5 + "main": { 6 6 + "type": "record", 7 7 + "key": "literal:self", 8 8 + "record": { 9 9 + "type": "object", 10 10 + "properties": { 11 11 + "accentColor": { 12 12 + "type": "string", 13 13 + "description": "Hex color for accent/highlight color (e.g. #4a9eff)", 14 14 + "maxLength": 7 15 15 + }, 16 16 + "font": { 17 17 + "type": "string", 18 18 + "description": "Font family preference", 19 19 + "maxLength": 64 20 20 + }, 21 21 + "theme": { 22 22 + "type": "string", 23 23 + "description": "Theme preference: light, dark, or system", 24 24 + "enum": ["light", "dark", "system"] 25 25 + } 26 26 + } 27 27 + } 28 28 + } 29 29 + } 30 30 + }

+2 -3

lexicons/status.json

reviewed

··· 11 11 "properties": { 12 12 "emoji": { 13 13 "type": "string", 14 14 - "description": "Status emoji", 14 14 + "description": "Status emoji or custom emoji slug (e.g. custom:bufo-stab)", 15 15 "minLength": 1, 16 16 - "maxGraphemes": 1, 17 17 - "maxLength": 32 16 16 + "maxLength": 64 18 17 }, 19 18 "text": { 20 19 "type": "string",

+1220

site/app.js

reviewed

··· 1 1 + // Configuration 2 2 + const CONFIG = { 3 3 + server: 'https://zzstoatzz-quickslice-status.fly.dev', 4 4 + clientId: 'client_2mP9AwgVHkg1vaSpcWSsKw', 5 5 + }; 6 6 + 7 7 + // Base path for routing (empty for root domain, '/subpath' for subdirectory) 8 8 + const BASE_PATH = ''; 9 9 + 10 10 + let client = null; 11 11 + let userPreferences = null; 12 12 + 13 13 + // Default preferences 14 14 + const DEFAULT_PREFERENCES = { 15 15 + accentColor: '#4a9eff', 16 16 + font: 'mono', 17 17 + theme: 'dark' 18 18 + }; 19 19 + 20 20 + // Available fonts - use simple keys, map to actual CSS in applyPreferences 21 21 + const FONTS = [ 22 22 + { value: 'system', label: 'system' }, 23 23 + { value: 'mono', label: 'mono' }, 24 24 + { value: 'serif', label: 'serif' }, 25 25 + { value: 'comic', label: 'comic' }, 26 26 + ]; 27 27 + 28 28 + const FONT_CSS = { 29 29 + 'system': 'system-ui, -apple-system, sans-serif', 30 30 + 'mono': 'ui-monospace, SF Mono, Monaco, monospace', 31 31 + 'serif': 'ui-serif, Georgia, serif', 32 32 + 'comic': 'Comic Sans MS, Comic Sans, cursive', 33 33 + }; 34 34 + 35 35 + // Preset accent colors 36 36 + const ACCENT_COLORS = [ 37 37 + '#4a9eff', // blue (default) 38 38 + '#10b981', // green 39 39 + '#f59e0b', // amber 40 40 + '#ef4444', // red 41 41 + '#8b5cf6', // purple 42 42 + '#ec4899', // pink 43 43 + '#06b6d4', // cyan 44 44 + '#f97316', // orange 45 45 + ]; 46 46 + 47 47 + // Apply preferences to the page 48 48 + function applyPreferences(prefs) { 49 49 + const { accentColor, font, theme } = { ...DEFAULT_PREFERENCES, ...prefs }; 50 50 + 51 51 + document.documentElement.style.setProperty('--accent', accentColor); 52 52 + // Map simple font key to actual CSS font-family 53 53 + const fontCSS = FONT_CSS[font] || FONT_CSS['mono']; 54 54 + document.documentElement.style.setProperty('--font-family', fontCSS); 55 55 + document.documentElement.setAttribute('data-theme', theme); 56 56 + 57 57 + localStorage.setItem('theme', theme); 58 58 + } 59 59 + 60 60 + // Load preferences from server 61 61 + async function loadPreferences() { 62 62 + if (!client) return DEFAULT_PREFERENCES; 63 63 + 64 64 + try { 65 65 + const user = client.getUser(); 66 66 + if (!user) return DEFAULT_PREFERENCES; 67 67 + 68 68 + const res = await fetch(`${CONFIG.server}/graphql`, { 69 69 + method: 'POST', 70 70 + headers: { 'Content-Type': 'application/json' }, 71 71 + body: JSON.stringify({ 72 72 + query: ` 73 73 + query GetPreferences($did: String!) { 74 74 + ioZzstoatzzStatusPreferences( 75 75 + where: { did: { eq: $did } } 76 76 + first: 1 77 77 + ) { 78 78 + edges { node { accentColor font theme } } 79 79 + } 80 80 + } 81 81 + `, 82 82 + variables: { did: user.did } 83 83 + }) 84 84 + }); 85 85 + const json = await res.json(); 86 86 + const edges = json.data?.ioZzstoatzzStatusPreferences?.edges || []; 87 87 + 88 88 + if (edges.length > 0) { 89 89 + userPreferences = edges[0].node; 90 90 + return userPreferences; 91 91 + } 92 92 + return DEFAULT_PREFERENCES; 93 93 + } catch (e) { 94 94 + console.error('Failed to load preferences:', e); 95 95 + return DEFAULT_PREFERENCES; 96 96 + } 97 97 + } 98 98 + 99 99 + // Save preferences to server 100 100 + async function savePreferences(prefs) { 101 101 + if (!client) return; 102 102 + 103 103 + try { 104 104 + const user = client.getUser(); 105 105 + if (!user) return; 106 106 + 107 107 + // First, delete any existing preferences records for this user 108 108 + const res = await fetch(`${CONFIG.server}/graphql`, { 109 109 + method: 'POST', 110 110 + headers: { 'Content-Type': 'application/json' }, 111 111 + body: JSON.stringify({ 112 112 + query: ` 113 113 + query GetExistingPrefs($did: String!) { 114 114 + ioZzstoatzzStatusPreferences(where: { did: { eq: $did } }, first: 50) { 115 115 + edges { node { uri } } 116 116 + } 117 117 + } 118 118 + `, 119 119 + variables: { did: user.did } 120 120 + }) 121 121 + }); 122 122 + const json = await res.json(); 123 123 + const existing = json.data?.ioZzstoatzzStatusPreferences?.edges || []; 124 124 + 125 125 + // Delete all existing preference records 126 126 + for (const edge of existing) { 127 127 + const rkey = edge.node.uri.split('/').pop(); 128 128 + try { 129 129 + await client.mutate(` 130 130 + mutation DeletePref($rkey: String!) { 131 131 + deleteIoZzstoatzzStatusPreferences(rkey: $rkey) { uri } 132 132 + } 133 133 + `, { rkey }); 134 134 + } catch (e) { 135 135 + console.warn('Failed to delete old pref:', e); 136 136 + } 137 137 + } 138 138 + 139 139 + // Create new preferences record 140 140 + await client.mutate(` 141 141 + mutation SavePreferences($input: CreateIoZzstoatzzStatusPreferencesInput!) { 142 142 + createIoZzstoatzzStatusPreferences(input: $input) { uri } 143 143 + } 144 144 + `, { 145 145 + input: { 146 146 + accentColor: prefs.accentColor, 147 147 + font: prefs.font, 148 148 + theme: prefs.theme 149 149 + } 150 150 + }); 151 151 + 152 152 + userPreferences = prefs; 153 153 + applyPreferences(prefs); 154 154 + } catch (e) { 155 155 + console.error('Failed to save preferences:', e); 156 156 + alert('Failed to save preferences: ' + e.message); 157 157 + } 158 158 + } 159 159 + 160 160 + // Create settings modal 161 161 + function createSettingsModal() { 162 162 + const overlay = document.createElement('div'); 163 163 + overlay.className = 'settings-overlay hidden'; 164 164 + overlay.innerHTML = ` 165 165 + <div class="settings-modal"> 166 166 + <div class="settings-header"> 167 167 + <h3>settings</h3> 168 168 + <button class="settings-close" aria-label="close">✕</button> 169 169 + </div> 170 170 + <div class="settings-content"> 171 171 + <div class="setting-group"> 172 172 + <label>accent color</label> 173 173 + <div class="color-picker"> 174 174 + ${ACCENT_COLORS.map(c => ` 175 175 + <button class="color-btn" data-color="${c}" style="background: ${c}" title="${c}"></button> 176 176 + `).join('')} 177 177 + <input type="color" id="custom-color" class="custom-color-input" title="custom color"> 178 178 + </div> 179 179 + </div> 180 180 + <div class="setting-group"> 181 181 + <label>font</label> 182 182 + <select id="font-select"> 183 183 + ${FONTS.map(f => `<option value="${f.value}">${f.label}</option>`).join('')} 184 184 + </select> 185 185 + </div> 186 186 + <div class="setting-group"> 187 187 + <label>theme</label> 188 188 + <select id="theme-select"> 189 189 + <option value="dark">dark</option> 190 190 + <option value="light">light</option> 191 191 + <option value="system">system</option> 192 192 + </select> 193 193 + </div> 194 194 + </div> 195 195 + <div class="settings-footer"> 196 196 + <button id="save-settings" class="save-btn">save</button> 197 197 + </div> 198 198 + </div> 199 199 + `; 200 200 + 201 201 + const modal = overlay.querySelector('.settings-modal'); 202 202 + const closeBtn = overlay.querySelector('.settings-close'); 203 203 + const colorBtns = overlay.querySelectorAll('.color-btn'); 204 204 + const customColor = overlay.querySelector('#custom-color'); 205 205 + const fontSelect = overlay.querySelector('#font-select'); 206 206 + const themeSelect = overlay.querySelector('#theme-select'); 207 207 + const saveBtn = overlay.querySelector('#save-settings'); 208 208 + 209 209 + let currentPrefs = { ...DEFAULT_PREFERENCES }; 210 210 + 211 211 + function updateColorSelection(color) { 212 212 + colorBtns.forEach(btn => btn.classList.toggle('active', btn.dataset.color === color)); 213 213 + customColor.value = color; 214 214 + currentPrefs.accentColor = color; 215 215 + } 216 216 + 217 217 + function open(prefs) { 218 218 + currentPrefs = { ...DEFAULT_PREFERENCES, ...prefs }; 219 219 + updateColorSelection(currentPrefs.accentColor); 220 220 + fontSelect.value = currentPrefs.font; 221 221 + themeSelect.value = currentPrefs.theme; 222 222 + overlay.classList.remove('hidden'); 223 223 + } 224 224 + 225 225 + function close() { 226 226 + overlay.classList.add('hidden'); 227 227 + } 228 228 + 229 229 + overlay.addEventListener('click', e => { if (e.target === overlay) close(); }); 230 230 + closeBtn.addEventListener('click', close); 231 231 + 232 232 + colorBtns.forEach(btn => { 233 233 + btn.addEventListener('click', () => updateColorSelection(btn.dataset.color)); 234 234 + }); 235 235 + 236 236 + customColor.addEventListener('input', () => { 237 237 + updateColorSelection(customColor.value); 238 238 + }); 239 239 + 240 240 + fontSelect.addEventListener('change', () => { 241 241 + currentPrefs.font = fontSelect.value; 242 242 + }); 243 243 + 244 244 + themeSelect.addEventListener('change', () => { 245 245 + currentPrefs.theme = themeSelect.value; 246 246 + }); 247 247 + 248 248 + saveBtn.addEventListener('click', async () => { 249 249 + saveBtn.disabled = true; 250 250 + saveBtn.textContent = 'saving...'; 251 251 + await savePreferences(currentPrefs); 252 252 + saveBtn.disabled = false; 253 253 + saveBtn.textContent = 'save'; 254 254 + close(); 255 255 + }); 256 256 + 257 257 + document.body.appendChild(overlay); 258 258 + return { open, close }; 259 259 + } 260 260 + 261 261 + // Theme (fallback for non-logged-in users) 262 262 + function initTheme() { 263 263 + const saved = localStorage.getItem('theme') || 'dark'; 264 264 + document.documentElement.setAttribute('data-theme', saved); 265 265 + } 266 266 + 267 267 + function toggleTheme() { 268 268 + const current = document.documentElement.getAttribute('data-theme'); 269 269 + const next = current === 'dark' ? 'light' : 'dark'; 270 270 + document.documentElement.setAttribute('data-theme', next); 271 271 + localStorage.setItem('theme', next); 272 272 + 273 273 + // If logged in, also update preferences 274 274 + if (userPreferences) { 275 275 + userPreferences.theme = next; 276 276 + savePreferences(userPreferences); 277 277 + } 278 278 + } 279 279 + 280 280 + // Timestamp formatting (ported from original status app) 281 281 + const TimestampFormatter = { 282 282 + formatRelative(date, now = new Date()) { 283 283 + const diffMs = now - date; 284 284 + const diffMins = Math.floor(diffMs / 60000); 285 285 + const diffHours = Math.floor(diffMs / 3600000); 286 286 + const diffDays = Math.floor(diffMs / 86400000); 287 287 + 288 288 + if (diffMs < 30000) return 'just now'; 289 289 + if (diffMins < 60) return `${diffMins}m ago`; 290 290 + if (diffHours < 24) { 291 291 + const remainingMins = diffMins % 60; 292 292 + return remainingMins === 0 ? `${diffHours}h ago` : `${diffHours}h ${remainingMins}m ago`; 293 293 + } 294 294 + if (diffDays < 7) { 295 295 + const remainingHours = diffHours % 24; 296 296 + return remainingHours === 0 ? `${diffDays}d ago` : `${diffDays}d ${remainingHours}h ago`; 297 297 + } 298 298 + 299 299 + const timeStr = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase(); 300 300 + if (date.getFullYear() === now.getFullYear()) { 301 301 + return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' + timeStr; 302 302 + } 303 303 + return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + ', ' + timeStr; 304 304 + }, 305 305 + 306 306 + formatCompact(date, now = new Date()) { 307 307 + const diffMs = now - date; 308 308 + const diffDays = Math.floor(diffMs / 86400000); 309 309 + 310 310 + if (date.toDateString() === now.toDateString()) { 311 311 + return date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase(); 312 312 + } 313 313 + const yesterday = new Date(now); 314 314 + yesterday.setDate(yesterday.getDate() - 1); 315 315 + if (date.toDateString() === yesterday.toDateString()) { 316 316 + return 'yesterday, ' + date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase(); 317 317 + } 318 318 + if (diffDays < 7) { 319 319 + const dayName = date.toLocaleDateString('en-US', { weekday: 'short' }).toLowerCase(); 320 320 + const time = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase(); 321 321 + return `${dayName}, ${time}`; 322 322 + } 323 323 + if (date.getFullYear() === now.getFullYear()) { 324 324 + return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase(); 325 325 + } 326 326 + return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase(); 327 327 + }, 328 328 + 329 329 + getFullTimestamp(date) { 330 330 + const dayName = date.toLocaleDateString('en-US', { weekday: 'long' }); 331 331 + const monthDay = date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }); 332 332 + const time = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', second: '2-digit', hour12: true }); 333 333 + const tzAbbr = date.toLocaleTimeString('en-US', { timeZoneName: 'short' }).split(' ').pop(); 334 334 + return `${dayName}, ${monthDay} at ${time} ${tzAbbr}`; 335 335 + } 336 336 + }; 337 337 + 338 338 + function relativeTime(dateStr, format = 'relative') { 339 339 + const date = new Date(dateStr); 340 340 + return format === 'compact' 341 341 + ? TimestampFormatter.formatCompact(date) 342 342 + : TimestampFormatter.formatRelative(date); 343 343 + } 344 344 + 345 345 + function relativeTimeFuture(dateStr) { 346 346 + const date = new Date(dateStr); 347 347 + const now = new Date(); 348 348 + const diffMs = date - now; 349 349 + 350 350 + if (diffMs <= 0) return 'now'; 351 351 + 352 352 + const diffMins = Math.floor(diffMs / 60000); 353 353 + const diffHours = Math.floor(diffMs / 3600000); 354 354 + const diffDays = Math.floor(diffMs / 86400000); 355 355 + 356 356 + if (diffMins < 1) return 'in less than a minute'; 357 357 + if (diffMins < 60) return `in ${diffMins}m`; 358 358 + if (diffHours < 24) { 359 359 + const remainingMins = diffMins % 60; 360 360 + return remainingMins === 0 ? `in ${diffHours}h` : `in ${diffHours}h ${remainingMins}m`; 361 361 + } 362 362 + if (diffDays < 7) { 363 363 + const remainingHours = diffHours % 24; 364 364 + return remainingHours === 0 ? `in ${diffDays}d` : `in ${diffDays}d ${remainingHours}h`; 365 365 + } 366 366 + 367 367 + // For longer times, show the date 368 368 + const timeStr = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase(); 369 369 + if (date.getFullYear() === now.getFullYear()) { 370 370 + return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' + timeStr; 371 371 + } 372 372 + return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) + ', ' + timeStr; 373 373 + } 374 374 + 375 375 + function fullTimestamp(dateStr) { 376 376 + return TimestampFormatter.getFullTimestamp(new Date(dateStr)); 377 377 + } 378 378 + 379 379 + // Emoji picker 380 380 + let emojiData = null; 381 381 + let bufoList = null; 382 382 + let userFrequentEmojis = null; 383 383 + const DEFAULT_FREQUENT_EMOJIS = ['😊', '👍', '❤️', '😂', '🎉', '🔥', '✨', '💯', '🚀', '💪', '🙏', '👏', '😴', '🤔', '👀', '💻']; 384 384 + 385 385 + async function loadUserFrequentEmojis() { 386 386 + if (userFrequentEmojis) return userFrequentEmojis; 387 387 + if (!client) return DEFAULT_FREQUENT_EMOJIS; 388 388 + 389 389 + try { 390 390 + const user = client.getUser(); 391 391 + if (!user) return DEFAULT_FREQUENT_EMOJIS; 392 392 + 393 393 + // Fetch user's status history to count emoji usage 394 394 + const res = await fetch(`${CONFIG.server}/graphql`, { 395 395 + method: 'POST', 396 396 + headers: { 'Content-Type': 'application/json' }, 397 397 + body: JSON.stringify({ 398 398 + query: ` 399 399 + query GetUserEmojis($did: String!) { 400 400 + ioZzstoatzzStatusRecord( 401 401 + first: 100 402 402 + where: { did: { eq: $did } } 403 403 + ) { 404 404 + edges { node { emoji } } 405 405 + } 406 406 + } 407 407 + `, 408 408 + variables: { did: user.did } 409 409 + }) 410 410 + }); 411 411 + const json = await res.json(); 412 412 + const emojis = json.data?.ioZzstoatzzStatusRecord?.edges?.map(e => e.node.emoji) || []; 413 413 + 414 414 + if (emojis.length === 0) return DEFAULT_FREQUENT_EMOJIS; 415 415 + 416 416 + // Count emoji frequency 417 417 + const counts = {}; 418 418 + emojis.forEach(e => { counts[e] = (counts[e] || 0) + 1; }); 419 419 + 420 420 + // Sort by frequency and take top 16 421 421 + const sorted = Object.entries(counts) 422 422 + .sort((a, b) => b[1] - a[1]) 423 423 + .slice(0, 16) 424 424 + .map(([emoji]) => emoji); 425 425 + 426 426 + userFrequentEmojis = sorted.length > 0 ? sorted : DEFAULT_FREQUENT_EMOJIS; 427 427 + return userFrequentEmojis; 428 428 + } catch (e) { 429 429 + console.error('Failed to load frequent emojis:', e); 430 430 + return DEFAULT_FREQUENT_EMOJIS; 431 431 + } 432 432 + } 433 433 + 434 434 + async function loadBufoList() { 435 435 + if (bufoList) return bufoList; 436 436 + const res = await fetch('/bufos.json'); 437 437 + if (!res.ok) throw new Error('Failed to load bufos'); 438 438 + bufoList = await res.json(); 439 439 + return bufoList; 440 440 + } 441 441 + 442 442 + async function loadEmojiData() { 443 443 + if (emojiData) return emojiData; 444 444 + try { 445 445 + const response = await fetch('https://cdn.jsdelivr.net/npm/emoji-datasource@15.1.0/emoji.json'); 446 446 + if (!response.ok) throw new Error('Failed to fetch'); 447 447 + const data = await response.json(); 448 448 + 449 449 + const emojis = {}; 450 450 + const categories = { frequent: DEFAULT_FREQUENT_EMOJIS, people: [], nature: [], food: [], activity: [], travel: [], objects: [], symbols: [], flags: [] }; 451 451 + const categoryMap = { 452 452 + 'Smileys & Emotion': 'people', 'People & Body': 'people', 'Animals & Nature': 'nature', 453 453 + 'Food & Drink': 'food', 'Activities': 'activity', 'Travel & Places': 'travel', 454 454 + 'Objects': 'objects', 'Symbols': 'symbols', 'Flags': 'flags' 455 455 + }; 456 456 + 457 457 + data.forEach(emoji => { 458 458 + const char = emoji.unified.split('-').map(u => String.fromCodePoint(parseInt(u, 16))).join(''); 459 459 + const keywords = [...(emoji.short_names || []), ...(emoji.name ? emoji.name.toLowerCase().split(/[\s_-]+/) : [])]; 460 460 + emojis[char] = keywords; 461 461 + const cat = categoryMap[emoji.category]; 462 462 + if (cat && categories[cat]) categories[cat].push(char); 463 463 + }); 464 464 + 465 465 + emojiData = { emojis, categories }; 466 466 + return emojiData; 467 467 + } catch (e) { 468 468 + console.error('Failed to load emoji data:', e); 469 469 + return { emojis: {}, categories: { frequent: DEFAULT_FREQUENT_EMOJIS, people: [], nature: [], food: [], activity: [], travel: [], objects: [], symbols: [], flags: [] } }; 470 470 + } 471 471 + } 472 472 + 473 473 + function searchEmojis(query, data) { 474 474 + if (!query) return []; 475 475 + const q = query.toLowerCase(); 476 476 + return Object.entries(data.emojis) 477 477 + .filter(([char, keywords]) => keywords.some(k => k.includes(q))) 478 478 + .map(([char]) => char) 479 479 + .slice(0, 50); 480 480 + } 481 481 + 482 482 + function createEmojiPicker(onSelect) { 483 483 + const overlay = document.createElement('div'); 484 484 + overlay.className = 'emoji-picker-overlay hidden'; 485 485 + overlay.innerHTML = ` 486 486 + <div class="emoji-picker"> 487 487 + <div class="emoji-picker-header"> 488 488 + <h3>pick an emoji</h3> 489 489 + <button class="emoji-picker-close" aria-label="close">✕</button> 490 490 + </div> 491 491 + <input type="text" class="emoji-search" placeholder="search emojis..."> 492 492 + <div class="emoji-categories"> 493 493 + <button class="category-btn active" data-category="frequent">⭐</button> 494 494 + <button class="category-btn" data-category="custom">🐸</button> 495 495 + <button class="category-btn" data-category="people">😊</button> 496 496 + <button class="category-btn" data-category="nature">🌿</button> 497 497 + <button class="category-btn" data-category="food">🍔</button> 498 498 + <button class="category-btn" data-category="activity">⚽</button> 499 499 + <button class="category-btn" data-category="travel">✈️</button> 500 500 + <button class="category-btn" data-category="objects">💡</button> 501 501 + <button class="category-btn" data-category="symbols">💕</button> 502 502 + <button class="category-btn" data-category="flags">🏁</button> 503 503 + </div> 504 504 + <div class="emoji-grid"></div> 505 505 + <div class="bufo-helper hidden"><a href="https://find-bufo.fly.dev/" target="_blank">need help finding a bufo?</a></div> 506 506 + </div> 507 507 + `; 508 508 + 509 509 + const picker = overlay.querySelector('.emoji-picker'); 510 510 + const grid = overlay.querySelector('.emoji-grid'); 511 511 + const search = overlay.querySelector('.emoji-search'); 512 512 + const closeBtn = overlay.querySelector('.emoji-picker-close'); 513 513 + const categoryBtns = overlay.querySelectorAll('.category-btn'); 514 514 + const bufoHelper = overlay.querySelector('.bufo-helper'); 515 515 + 516 516 + let currentCategory = 'frequent'; 517 517 + let data = null; 518 518 + 519 519 + async function renderCategory(cat) { 520 520 + currentCategory = cat; 521 521 + categoryBtns.forEach(b => b.classList.toggle('active', b.dataset.category === cat)); 522 522 + bufoHelper.classList.toggle('hidden', cat !== 'custom'); 523 523 + 524 524 + if (cat === 'custom') { 525 525 + grid.classList.add('bufo-grid'); 526 526 + grid.innerHTML = '<div class="loading">loading bufos...</div>'; 527 527 + try { 528 528 + const bufos = await loadBufoList(); 529 529 + grid.innerHTML = bufos.map(name => ` 530 530 + <button class="emoji-btn bufo-btn" data-emoji="custom:${name}" title="${name}"> 531 531 + <img src="https://all-the.bufo.zone/${name}.png" alt="${name}" loading="lazy" onerror="this.src='https://all-the.bufo.zone/${name}.gif'"> 532 532 + </button> 533 533 + `).join(''); 534 534 + } catch (e) { 535 535 + grid.innerHTML = '<div class="no-results">failed to load bufos</div>'; 536 536 + } 537 537 + return; 538 538 + } 539 539 + 540 540 + grid.classList.remove('bufo-grid'); 541 541 + 542 542 + // Load user's frequent emojis for the frequent category 543 543 + if (cat === 'frequent') { 544 544 + grid.innerHTML = '<div class="loading">loading...</div>'; 545 545 + const frequentEmojis = await loadUserFrequentEmojis(); 546 546 + grid.innerHTML = frequentEmojis.map(e => { 547 547 + if (e.startsWith('custom:')) { 548 548 + const name = e.replace('custom:', ''); 549 549 + return `<button class="emoji-btn bufo-btn" data-emoji="${e}" title="${name}"> 550 550 + <img src="https://all-the.bufo.zone/${name}.png" alt="${name}" onerror="this.src='https://all-the.bufo.zone/${name}.gif'"> 551 551 + </button>`; 552 552 + } 553 553 + return `<button class="emoji-btn" data-emoji="${e}">${e}</button>`; 554 554 + }).join(''); 555 555 + return; 556 556 + } 557 557 + 558 558 + if (!data) data = await loadEmojiData(); 559 559 + const emojis = data.categories[cat] || []; 560 560 + grid.innerHTML = emojis.map(e => `<button class="emoji-btn" data-emoji="${e}">${e}</button>`).join(''); 561 561 + } 562 562 + 563 563 + function close() { 564 564 + overlay.classList.add('hidden'); 565 565 + search.value = ''; 566 566 + } 567 567 + 568 568 + function open() { 569 569 + overlay.classList.remove('hidden'); 570 570 + renderCategory('frequent'); 571 571 + search.focus(); 572 572 + } 573 573 + 574 574 + overlay.addEventListener('click', e => { if (e.target === overlay) close(); }); 575 575 + closeBtn.addEventListener('click', close); 576 576 + categoryBtns.forEach(btn => btn.addEventListener('click', () => renderCategory(btn.dataset.category))); 577 577 + 578 578 + grid.addEventListener('click', e => { 579 579 + const btn = e.target.closest('.emoji-btn'); 580 580 + if (btn) { 581 581 + onSelect(btn.dataset.emoji); 582 582 + close(); 583 583 + } 584 584 + }); 585 585 + 586 586 + search.addEventListener('input', async () => { 587 587 + const q = search.value.trim(); 588 588 + if (!q) { renderCategory(currentCategory); return; } 589 589 + 590 590 + // Search both emojis and bufos 591 591 + if (!data) data = await loadEmojiData(); 592 592 + const emojiResults = searchEmojis(q, data); 593 593 + 594 594 + // Search bufos by name 595 595 + let bufoResults = []; 596 596 + try { 597 597 + const bufos = await loadBufoList(); 598 598 + const qLower = q.toLowerCase(); 599 599 + bufoResults = bufos.filter(name => name.toLowerCase().includes(qLower)).slice(0, 30); 600 600 + } catch (e) { /* ignore */ } 601 601 + 602 602 + grid.classList.remove('bufo-grid'); 603 603 + bufoHelper.classList.add('hidden'); 604 604 + 605 605 + if (emojiResults.length === 0 && bufoResults.length === 0) { 606 606 + grid.innerHTML = '<div class="no-results">no emojis found</div>'; 607 607 + return; 608 608 + } 609 609 + 610 610 + let html = ''; 611 611 + // Show emoji results first 612 612 + html += emojiResults.map(e => `<button class="emoji-btn" data-emoji="${e}">${e}</button>`).join(''); 613 613 + // Then bufo results 614 614 + html += bufoResults.map(name => ` 615 615 + <button class="emoji-btn bufo-btn" data-emoji="custom:${name}" title="${name}"> 616 616 + <img src="https://all-the.bufo.zone/${name}.png" alt="${name}" onerror="this.src='https://all-the.bufo.zone/${name}.gif'"> 617 617 + </button> 618 618 + `).join(''); 619 619 + 620 620 + grid.innerHTML = html; 621 621 + }); 622 622 + 623 623 + document.body.appendChild(overlay); 624 624 + return { open, close }; 625 625 + } 626 626 + 627 627 + // Render emoji (handles custom:name format) 628 628 + function renderEmoji(emoji) { 629 629 + if (emoji && emoji.startsWith('custom:')) { 630 630 + const name = emoji.slice(7); 631 631 + return `<img src="https://all-the.bufo.zone/${name}.png" alt="${name}" title="${name}" onerror="this.src='https://all-the.bufo.zone/${name}.gif'">`; 632 632 + } 633 633 + return emoji || '-'; 634 634 + } 635 635 + 636 636 + function escapeHtml(str) { 637 637 + if (!str) return ''; 638 638 + const div = document.createElement('div'); 639 639 + div.textContent = str; 640 640 + return div.innerHTML; 641 641 + } 642 642 + 643 643 + // Parse markdown links [text](url) and return HTML 644 644 + function parseLinks(text) { 645 645 + if (!text) return ''; 646 646 + // First escape HTML, then parse markdown links 647 647 + const escaped = escapeHtml(text); 648 648 + // Match [text](url) pattern 649 649 + return escaped.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, linkText, url) => { 650 650 + // Validate URL (basic check) 651 651 + if (url.startsWith('http://') || url.startsWith('https://')) { 652 652 + return `<a href="${url}" target="_blank" rel="noopener">${linkText}</a>`; 653 653 + } 654 654 + return match; 655 655 + }); 656 656 + } 657 657 + 658 658 + // Resolve handle to DID 659 659 + async function resolveHandle(handle) { 660 660 + const res = await fetch(`https://bsky.social/xrpc/com.atproto.identity.resolveHandle?handle=${encodeURIComponent(handle)}`); 661 661 + if (!res.ok) return null; 662 662 + const data = await res.json(); 663 663 + return data.did; 664 664 + } 665 665 + 666 666 + // Resolve DID to handle 667 667 + async function resolveDidToHandle(did) { 668 668 + const res = await fetch(`https://plc.directory/${did}`); 669 669 + if (!res.ok) return null; 670 670 + const data = await res.json(); 671 671 + // alsoKnownAs is like ["at://handle"] 672 672 + if (data.alsoKnownAs && data.alsoKnownAs.length > 0) { 673 673 + return data.alsoKnownAs[0].replace('at://', ''); 674 674 + } 675 675 + return null; 676 676 + } 677 677 + 678 678 + // Router 679 679 + function getRoute() { 680 680 + const path = window.location.pathname; 681 681 + if (path === '/' || path === '/index.html') return { page: 'home' }; 682 682 + if (path === '/feed' || path === '/feed.html') return { page: 'feed' }; 683 683 + if (path.startsWith('/@')) { 684 684 + const handle = path.slice(2); 685 685 + return { page: 'profile', handle }; 686 686 + } 687 687 + return { page: '404' }; 688 688 + } 689 689 + 690 690 + // Render home page 691 691 + async function renderHome() { 692 692 + const main = document.getElementById('main-content'); 693 693 + document.getElementById('page-title').textContent = 'status'; 694 694 + 695 695 + if (typeof QuicksliceClient === 'undefined') { 696 696 + main.innerHTML = '<div class="center">failed to load. check console.</div>'; 697 697 + return; 698 698 + } 699 699 + 700 700 + try { 701 701 + client = await QuicksliceClient.createQuicksliceClient({ 702 702 + server: CONFIG.server, 703 703 + clientId: CONFIG.clientId, 704 704 + redirectUri: window.location.origin + '/', 705 705 + }); 706 706 + console.log('Client created with server:', CONFIG.server, 'clientId:', CONFIG.clientId); 707 707 + 708 708 + if (window.location.search.includes('code=')) { 709 709 + console.log('Got OAuth callback with code, handling...'); 710 710 + try { 711 711 + const result = await client.handleRedirectCallback(); 712 712 + console.log('handleRedirectCallback result:', result); 713 713 + } catch (err) { 714 714 + console.error('handleRedirectCallback error:', err); 715 715 + } 716 716 + window.history.replaceState({}, document.title, '/'); 717 717 + } 718 718 + 719 719 + const isAuthed = await client.isAuthenticated(); 720 720 + 721 721 + if (!isAuthed) { 722 722 + main.innerHTML = ` 723 723 + <div class="center"> 724 724 + <p>share your status on the atproto network</p> 725 725 + <form id="login-form"> 726 726 + <input type="text" id="handle-input" placeholder="your.handle" required> 727 727 + <button type="submit">log in</button> 728 728 + </form> 729 729 + </div> 730 730 + `; 731 731 + document.getElementById('login-form').addEventListener('submit', async (e) => { 732 732 + e.preventDefault(); 733 733 + const handle = document.getElementById('handle-input').value.trim(); 734 734 + if (handle && client) { 735 735 + await client.loginWithRedirect({ handle }); 736 736 + } 737 737 + }); 738 738 + } else { 739 739 + const user = client.getUser(); 740 740 + if (!user) { 741 741 + // Token might be invalid, log out 742 742 + await client.logout(); 743 743 + window.location.reload(); 744 744 + return; 745 745 + } 746 746 + const handle = await resolveDidToHandle(user.did) || user.did; 747 747 + 748 748 + // Load and apply preferences, set up settings/logout buttons 749 749 + const prefs = await loadPreferences(); 750 750 + applyPreferences(prefs); 751 751 + 752 752 + // Show settings button and set up modal 753 753 + const settingsBtn = document.getElementById('settings-btn'); 754 754 + settingsBtn.classList.remove('hidden'); 755 755 + const settingsModal = createSettingsModal(); 756 756 + settingsBtn.addEventListener('click', () => settingsModal.open(userPreferences || prefs)); 757 757 + 758 758 + // Add logout button to header nav (if not already there) 759 759 + if (!document.getElementById('logout-btn')) { 760 760 + const nav = document.querySelector('header nav'); 761 761 + const logoutBtn = document.createElement('button'); 762 762 + logoutBtn.id = 'logout-btn'; 763 763 + logoutBtn.className = 'nav-btn'; 764 764 + logoutBtn.setAttribute('aria-label', 'log out'); 765 765 + logoutBtn.setAttribute('title', 'log out'); 766 766 + logoutBtn.innerHTML = ` 767 767 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 768 768 + <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> 769 769 + <polyline points="16 17 21 12 16 7"></polyline> 770 770 + <line x1="21" y1="12" x2="9" y2="12"></line> 771 771 + </svg> 772 772 + `; 773 773 + logoutBtn.addEventListener('click', async () => { 774 774 + await client.logout(); 775 775 + window.location.href = '/'; 776 776 + }); 777 777 + nav.appendChild(logoutBtn); 778 778 + } 779 779 + 780 780 + // Set page title with Bluesky profile link 781 781 + document.getElementById('page-title').innerHTML = `<a href="https://bsky.app/profile/${handle}" target="_blank">@${handle}</a>`; 782 782 + 783 783 + // Load user's statuses (full history) 784 784 + const res = await fetch(`${CONFIG.server}/graphql`, { 785 785 + method: 'POST', 786 786 + headers: { 'Content-Type': 'application/json' }, 787 787 + body: JSON.stringify({ 788 788 + query: ` 789 789 + query GetUserStatuses($did: String!) { 790 790 + ioZzstoatzzStatusRecord( 791 791 + first: 100 792 792 + where: { did: { eq: $did } } 793 793 + sortBy: [{ field: "createdAt", direction: DESC }] 794 794 + ) { 795 795 + edges { node { uri did emoji text createdAt expires } } 796 796 + } 797 797 + } 798 798 + `, 799 799 + variables: { did: user.did } 800 800 + }) 801 801 + }); 802 802 + const json = await res.json(); 803 803 + const statuses = json.data.ioZzstoatzzStatusRecord.edges.map(e => e.node); 804 804 + 805 805 + let currentHtml = '<span class="big-emoji">-</span>'; 806 806 + let historyHtml = ''; 807 807 + 808 808 + if (statuses.length > 0) { 809 809 + const current = statuses[0]; 810 810 + const expiresHtml = current.expires ? ` • clears ${relativeTimeFuture(current.expires)}` : ''; 811 811 + currentHtml = ` 812 812 + <span class="big-emoji">${renderEmoji(current.emoji)}</span> 813 813 + <div class="status-info"> 814 814 + ${current.text ? `<span id="current-text">${parseLinks(current.text)}</span>` : ''} 815 815 + <span class="meta">since ${relativeTime(current.createdAt)}${expiresHtml}</span> 816 816 + </div> 817 817 + `; 818 818 + if (statuses.length > 1) { 819 819 + historyHtml = '<section class="history"><h2>history</h2><div id="history-list">'; 820 820 + statuses.slice(1).forEach(s => { 821 821 + // Extract rkey from URI (at://did/collection/rkey) 822 822 + const rkey = s.uri.split('/').pop(); 823 823 + historyHtml += ` 824 824 + <div class="status-item"> 825 825 + <span class="emoji">${renderEmoji(s.emoji)}</span> 826 826 + <div class="content"> 827 827 + <div>${s.text ? `<span class="text">${parseLinks(s.text)}</span>` : ''}</div> 828 828 + <span class="time">${relativeTime(s.createdAt)}</span> 829 829 + </div> 830 830 + <button class="delete-btn" data-rkey="${escapeHtml(rkey)}" title="delete"> 831 831 + <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 832 832 + <line x1="18" y1="6" x2="6" y2="18"></line> 833 833 + <line x1="6" y1="6" x2="18" y2="18"></line> 834 834 + </svg> 835 835 + </button> 836 836 + </div> 837 837 + `; 838 838 + }); 839 839 + historyHtml += '</div></section>'; 840 840 + } 841 841 + } 842 842 + 843 843 + const currentEmoji = statuses.length > 0 ? statuses[0].emoji : '😊'; 844 844 + 845 845 + main.innerHTML = ` 846 846 + <div class="profile-card"> 847 847 + <div class="current-status">${currentHtml}</div> 848 848 + </div> 849 849 + <form id="status-form" class="status-form"> 850 850 + <div class="emoji-input-row"> 851 851 + <button type="button" id="emoji-trigger" class="emoji-trigger"> 852 852 + <span id="selected-emoji">${renderEmoji(currentEmoji)}</span> 853 853 + </button> 854 854 + <input type="hidden" id="emoji-input" value="${escapeHtml(currentEmoji)}"> 855 855 + <input type="text" id="text-input" placeholder="what's happening?" maxlength="256"> 856 856 + </div> 857 857 + <div class="form-actions"> 858 858 + <select id="expires-select"> 859 859 + <option value="">don't clear</option> 860 860 + <option value="30">30 min</option> 861 861 + <option value="60">1 hour</option> 862 862 + <option value="120">2 hours</option> 863 863 + <option value="240">4 hours</option> 864 864 + <option value="480">8 hours</option> 865 865 + <option value="1440">1 day</option> 866 866 + <option value="10080">1 week</option> 867 867 + <option value="custom">custom...</option> 868 868 + </select> 869 869 + <input type="datetime-local" id="custom-datetime" class="custom-datetime hidden"> 870 870 + <button type="submit">set status</button> 871 871 + </div> 872 872 + </form> 873 873 + ${historyHtml} 874 874 + `; 875 875 + 876 876 + // Set up emoji picker 877 877 + const emojiInput = document.getElementById('emoji-input'); 878 878 + const selectedEmojiEl = document.getElementById('selected-emoji'); 879 879 + const emojiPicker = createEmojiPicker((emoji) => { 880 880 + emojiInput.value = emoji; 881 881 + selectedEmojiEl.innerHTML = renderEmoji(emoji); 882 882 + }); 883 883 + document.getElementById('emoji-trigger').addEventListener('click', () => emojiPicker.open()); 884 884 + 885 885 + // Custom datetime toggle 886 886 + const expiresSelect = document.getElementById('expires-select'); 887 887 + const customDatetime = document.getElementById('custom-datetime'); 888 888 + 889 889 + // Helper to format date for datetime-local input (local timezone) 890 890 + function toLocalDatetimeString(date) { 891 891 + const offset = date.getTimezoneOffset(); 892 892 + const local = new Date(date.getTime() - offset * 60 * 1000); 893 893 + return local.toISOString().slice(0, 16); 894 894 + } 895 895 + 896 896 + expiresSelect.addEventListener('change', () => { 897 897 + if (expiresSelect.value === 'custom') { 898 898 + customDatetime.classList.remove('hidden'); 899 899 + // Set min to now (prevent past dates) 900 900 + const now = new Date(); 901 901 + customDatetime.min = toLocalDatetimeString(now); 902 902 + // Default to 1 hour from now 903 903 + const defaultTime = new Date(Date.now() + 60 * 60 * 1000); 904 904 + customDatetime.value = toLocalDatetimeString(defaultTime); 905 905 + } else { 906 906 + customDatetime.classList.add('hidden'); 907 907 + } 908 908 + }); 909 909 + 910 910 + document.getElementById('status-form').addEventListener('submit', async (e) => { 911 911 + e.preventDefault(); 912 912 + const emoji = document.getElementById('emoji-input').value.trim(); 913 913 + const text = document.getElementById('text-input').value.trim(); 914 914 + const expiresVal = document.getElementById('expires-select').value; 915 915 + const customDt = document.getElementById('custom-datetime').value; 916 916 + 917 917 + if (!emoji) return; 918 918 + 919 919 + const input = { emoji, createdAt: new Date().toISOString() }; 920 920 + if (text) input.text = text; 921 921 + if (expiresVal === 'custom' && customDt) { 922 922 + input.expires = new Date(customDt).toISOString(); 923 923 + } else if (expiresVal && expiresVal !== 'custom') { 924 924 + input.expires = new Date(Date.now() + parseInt(expiresVal) * 60 * 1000).toISOString(); 925 925 + } 926 926 + 927 927 + try { 928 928 + await client.mutate(` 929 929 + mutation CreateStatus($input: CreateIoZzstoatzzStatusRecordInput!) { 930 930 + createIoZzstoatzzStatusRecord(input: $input) { uri } 931 931 + } 932 932 + `, { input }); 933 933 + window.location.reload(); 934 934 + } catch (err) { 935 935 + console.error('Failed to create status:', err); 936 936 + alert('Failed to set status: ' + err.message); 937 937 + } 938 938 + }); 939 939 + 940 940 + // Delete buttons 941 941 + document.querySelectorAll('.delete-btn').forEach(btn => { 942 942 + btn.addEventListener('click', async () => { 943 943 + const rkey = btn.dataset.rkey; 944 944 + if (!confirm('Delete this status?')) return; 945 945 + 946 946 + try { 947 947 + await client.mutate(` 948 948 + mutation DeleteStatus($rkey: String!) { 949 949 + deleteIoZzstoatzzStatusRecord(rkey: $rkey) { uri } 950 950 + } 951 951 + `, { rkey }); 952 952 + window.location.reload(); 953 953 + } catch (err) { 954 954 + console.error('Failed to delete status:', err); 955 955 + alert('Failed to delete: ' + err.message); 956 956 + } 957 957 + }); 958 958 + }); 959 959 + } 960 960 + } catch (e) { 961 961 + console.error('Failed to init:', e); 962 962 + main.innerHTML = '<div class="center">failed to initialize. check console.</div>'; 963 963 + } 964 964 + } 965 965 + 966 966 + // Render feed page 967 967 + let feedCursor = null; 968 968 + let feedHasMore = true; 969 969 + 970 970 + async function renderFeed(append = false) { 971 971 + const main = document.getElementById('main-content'); 972 972 + document.getElementById('page-title').textContent = 'global feed'; 973 973 + 974 974 + if (!append) { 975 975 + // Initialize auth UI for header elements 976 976 + await initAuthUI(); 977 977 + main.innerHTML = '<div id="feed-list" class="feed-list"><div class="center">loading...</div></div><div id="load-more" class="center hidden"><button id="load-more-btn">load more</button></div><div id="end-of-feed" class="center hidden"><span class="meta">you\'ve reached the end</span></div>'; 978 978 + } 979 979 + 980 980 + const feedList = document.getElementById('feed-list'); 981 981 + 982 982 + try { 983 983 + const res = await fetch(`${CONFIG.server}/graphql`, { 984 984 + method: 'POST', 985 985 + headers: { 'Content-Type': 'application/json' }, 986 986 + body: JSON.stringify({ 987 987 + query: ` 988 988 + query GetFeed($after: String) { 989 989 + ioZzstoatzzStatusRecord(first: 20, after: $after, sortBy: [{ field: "createdAt", direction: DESC }]) { 990 990 + edges { node { uri did emoji text createdAt } cursor } 991 991 + pageInfo { hasNextPage endCursor } 992 992 + } 993 993 + } 994 994 + `, 995 995 + variables: { after: append ? feedCursor : null } 996 996 + }) 997 997 + }); 998 998 + 999 999 + const json = await res.json(); 1000 1000 + const data = json.data.ioZzstoatzzStatusRecord; 1001 1001 + const statuses = data.edges.map(e => e.node); 1002 1002 + feedCursor = data.pageInfo.endCursor; 1003 1003 + feedHasMore = data.pageInfo.hasNextPage; 1004 1004 + 1005 1005 + // Resolve all handles in parallel 1006 1006 + const handlePromises = statuses.map(s => resolveDidToHandle(s.did)); 1007 1007 + const handles = await Promise.all(handlePromises); 1008 1008 + 1009 1009 + if (!append) { 1010 1010 + feedList.innerHTML = ''; 1011 1011 + } 1012 1012 + 1013 1013 + statuses.forEach((status, i) => { 1014 1014 + const handle = handles[i] || status.did.slice(8, 28); 1015 1015 + const div = document.createElement('div'); 1016 1016 + div.className = 'status-item'; 1017 1017 + div.innerHTML = ` 1018 1018 + <span class="emoji">${renderEmoji(status.emoji)}</span> 1019 1019 + <div class="content"> 1020 1020 + <div> 1021 1021 + <a href="/@${handle}" class="author">@${handle}</a> 1022 1022 + ${status.text ? `<span class="text">${parseLinks(status.text)}</span>` : ''} 1023 1023 + </div> 1024 1024 + <span class="time">${relativeTime(status.createdAt)}</span> 1025 1025 + </div> 1026 1026 + `; 1027 1027 + feedList.appendChild(div); 1028 1028 + }); 1029 1029 + 1030 1030 + const loadMore = document.getElementById('load-more'); 1031 1031 + const endOfFeed = document.getElementById('end-of-feed'); 1032 1032 + if (feedHasMore) { 1033 1033 + loadMore.classList.remove('hidden'); 1034 1034 + endOfFeed.classList.add('hidden'); 1035 1035 + } else { 1036 1036 + loadMore.classList.add('hidden'); 1037 1037 + endOfFeed.classList.remove('hidden'); 1038 1038 + } 1039 1039 + 1040 1040 + // Attach load more handler 1041 1041 + const btn = document.getElementById('load-more-btn'); 1042 1042 + if (btn && !btn.dataset.bound) { 1043 1043 + btn.dataset.bound = 'true'; 1044 1044 + btn.addEventListener('click', () => renderFeed(true)); 1045 1045 + } 1046 1046 + } catch (e) { 1047 1047 + console.error('Failed to load feed:', e); 1048 1048 + if (!append) { 1049 1049 + feedList.innerHTML = '<div class="center">failed to load feed</div>'; 1050 1050 + } 1051 1051 + } 1052 1052 + } 1053 1053 + 1054 1054 + // Render profile page 1055 1055 + async function renderProfile(handle) { 1056 1056 + const main = document.getElementById('main-content'); 1057 1057 + const pageTitle = document.getElementById('page-title'); 1058 1058 + 1059 1059 + // Initialize auth UI for header elements 1060 1060 + await initAuthUI(); 1061 1061 + 1062 1062 + pageTitle.innerHTML = `<a href="https://bsky.app/profile/${handle}" target="_blank">@${handle}</a>`; 1063 1063 + 1064 1064 + main.innerHTML = '<div class="center">loading...</div>'; 1065 1065 + 1066 1066 + try { 1067 1067 + // Resolve handle to DID 1068 1068 + const did = await resolveHandle(handle); 1069 1069 + if (!did) { 1070 1070 + main.innerHTML = '<div class="center">user not found</div>'; 1071 1071 + return; 1072 1072 + } 1073 1073 + 1074 1074 + const res = await fetch(`${CONFIG.server}/graphql`, { 1075 1075 + method: 'POST', 1076 1076 + headers: { 'Content-Type': 'application/json' }, 1077 1077 + body: JSON.stringify({ 1078 1078 + query: ` 1079 1079 + query GetUserStatuses($did: String!) { 1080 1080 + ioZzstoatzzStatusRecord(first: 20, where: { did: { eq: $did } }, sortBy: [{ field: "createdAt", direction: DESC }]) { 1081 1081 + edges { node { uri did emoji text createdAt expires } } 1082 1082 + } 1083 1083 + } 1084 1084 + `, 1085 1085 + variables: { did } 1086 1086 + }) 1087 1087 + }); 1088 1088 + 1089 1089 + const json = await res.json(); 1090 1090 + const statuses = json.data.ioZzstoatzzStatusRecord.edges.map(e => e.node); 1091 1091 + 1092 1092 + if (statuses.length === 0) { 1093 1093 + main.innerHTML = '<div class="center">no statuses yet</div>'; 1094 1094 + return; 1095 1095 + } 1096 1096 + 1097 1097 + const current = statuses[0]; 1098 1098 + const expiresHtml = current.expires ? ` • clears ${relativeTimeFuture(current.expires)}` : ''; 1099 1099 + let html = ` 1100 1100 + <div class="profile-card"> 1101 1101 + <div class="current-status"> 1102 1102 + <span class="big-emoji">${renderEmoji(current.emoji)}</span> 1103 1103 + <div class="status-info"> 1104 1104 + ${current.text ? `<span id="current-text">${parseLinks(current.text)}</span>` : ''} 1105 1105 + <span class="meta">${relativeTime(current.createdAt)}${expiresHtml}</span> 1106 1106 + </div> 1107 1107 + </div> 1108 1108 + </div> 1109 1109 + `; 1110 1110 + 1111 1111 + if (statuses.length > 1) { 1112 1112 + html += '<section class="history"><h2>history</h2><div class="feed-list">'; 1113 1113 + statuses.slice(1).forEach(status => { 1114 1114 + html += ` 1115 1115 + <div class="status-item"> 1116 1116 + <span class="emoji">${renderEmoji(status.emoji)}</span> 1117 1117 + <div class="content"> 1118 1118 + <div>${status.text ? `<span class="text">${parseLinks(status.text)}</span>` : ''}</div> 1119 1119 + <span class="time">${relativeTime(status.createdAt)}</span> 1120 1120 + </div> 1121 1121 + </div> 1122 1122 + `; 1123 1123 + }); 1124 1124 + html += '</div></section>'; 1125 1125 + } 1126 1126 + 1127 1127 + main.innerHTML = html; 1128 1128 + } catch (e) { 1129 1129 + console.error('Failed to load profile:', e); 1130 1130 + main.innerHTML = '<div class="center">failed to load profile</div>'; 1131 1131 + } 1132 1132 + } 1133 1133 + 1134 1134 + // Update nav active state - hide current page icon, show the other 1135 1135 + function updateNavActive(page) { 1136 1136 + const navHome = document.getElementById('nav-home'); 1137 1137 + const navFeed = document.getElementById('nav-feed'); 1138 1138 + // Hide the nav icon for the current page, show the other 1139 1139 + if (navHome) navHome.classList.toggle('hidden', page === 'home'); 1140 1140 + if (navFeed) navFeed.classList.toggle('hidden', page === 'feed'); 1141 1141 + } 1142 1142 + 1143 1143 + // Initialize auth state for header (settings, logout) - used by all pages 1144 1144 + async function initAuthUI() { 1145 1145 + if (typeof QuicksliceClient === 'undefined') return; 1146 1146 + 1147 1147 + try { 1148 1148 + client = await QuicksliceClient.createQuicksliceClient({ 1149 1149 + server: CONFIG.server, 1150 1150 + clientId: CONFIG.clientId, 1151 1151 + redirectUri: window.location.origin + '/', 1152 1152 + }); 1153 1153 + 1154 1154 + const isAuthed = await client.isAuthenticated(); 1155 1155 + if (!isAuthed) return; 1156 1156 + 1157 1157 + const user = client.getUser(); 1158 1158 + if (!user) return; 1159 1159 + 1160 1160 + // Load and apply preferences 1161 1161 + const prefs = await loadPreferences(); 1162 1162 + applyPreferences(prefs); 1163 1163 + 1164 1164 + // Show settings button and set up modal 1165 1165 + const settingsBtn = document.getElementById('settings-btn'); 1166 1166 + settingsBtn.classList.remove('hidden'); 1167 1167 + const settingsModal = createSettingsModal(); 1168 1168 + settingsBtn.addEventListener('click', () => settingsModal.open(userPreferences || prefs)); 1169 1169 + 1170 1170 + // Add logout button to header nav (if not already there) 1171 1171 + if (!document.getElementById('logout-btn')) { 1172 1172 + const nav = document.querySelector('header nav'); 1173 1173 + const logoutBtn = document.createElement('button'); 1174 1174 + logoutBtn.id = 'logout-btn'; 1175 1175 + logoutBtn.className = 'nav-btn'; 1176 1176 + logoutBtn.setAttribute('aria-label', 'log out'); 1177 1177 + logoutBtn.setAttribute('title', 'log out'); 1178 1178 + logoutBtn.innerHTML = ` 1179 1179 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 1180 1180 + <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> 1181 1181 + <polyline points="16 17 21 12 16 7"></polyline> 1182 1182 + <line x1="21" y1="12" x2="9" y2="12"></line> 1183 1183 + </svg> 1184 1184 + `; 1185 1185 + logoutBtn.addEventListener('click', async () => { 1186 1186 + await client.logout(); 1187 1187 + window.location.href = '/'; 1188 1188 + }); 1189 1189 + nav.appendChild(logoutBtn); 1190 1190 + } 1191 1191 + 1192 1192 + return { user, prefs }; 1193 1193 + } catch (e) { 1194 1194 + console.error('Failed to init auth UI:', e); 1195 1195 + return null; 1196 1196 + } 1197 1197 + } 1198 1198 + 1199 1199 + // Init 1200 1200 + document.addEventListener('DOMContentLoaded', () => { 1201 1201 + initTheme(); 1202 1202 + 1203 1203 + const themeBtn = document.getElementById('theme-toggle'); 1204 1204 + if (themeBtn) { 1205 1205 + themeBtn.addEventListener('click', toggleTheme); 1206 1206 + } 1207 1207 + 1208 1208 + const route = getRoute(); 1209 1209 + updateNavActive(route.page); 1210 1210 + 1211 1211 + if (route.page === 'home') { 1212 1212 + renderHome(); 1213 1213 + } else if (route.page === 'feed') { 1214 1214 + renderFeed(); 1215 1215 + } else if (route.page === 'profile') { 1216 1216 + renderProfile(route.handle); 1217 1217 + } else { 1218 1218 + document.getElementById('main-content').innerHTML = '<div class="center">page not found</div>'; 1219 1219 + } 1220 1220 + });

+1614

site/bufos.json

reviewed

··· 1 1 + [ 2 2 + "according-to-all-known-laws-of-aviation-there-is-no-way-a-bufo-should-be-able-to-fly", 3 3 + "add-bufo", 4 4 + "all-the-bufo", 5 5 + "angry-karen-bufo-would-like-to-speak-with-your-manager", 6 6 + "australian-bufo", 7 7 + "awesomebufo", 8 8 + "be-the-bufo-you-want-to-see", 9 9 + "bigbufo_0_0", 10 10 + "bigbufo_0_1", 11 11 + "bigbufo_0_2", 12 12 + "bigbufo_0_3", 13 13 + "bigbufo_1_0", 14 14 + "bigbufo_1_1", 15 15 + "bigbufo_1_2", 16 16 + "bigbufo_1_3", 17 17 + "bigbufo_2_0", 18 18 + "bigbufo_2_1", 19 19 + "bigbufo_2_2", 20 20 + "bigbufo_2_3", 21 21 + "bigbufo_3_0", 22 22 + "bigbufo_3_1", 23 23 + "bigbufo_3_2", 24 24 + "bigbufo_3_3", 25 25 + "blockheads-bufo", 26 26 + "breaking-bufo", 27 27 + "bronze-bufo", 28 28 + "buff-bufo", 29 29 + "bufo", 30 30 + "bufo_wants_his_money", 31 31 + "bufo-0-10", 32 32 + "bufo-10", 33 33 + "bufo-10-4", 34 34 + "bufo-2022", 35 35 + "bufo-achieving-coding-flow", 36 36 + "bufo-ack", 37 37 + "bufo-actually", 38 38 + "bufo-adding-bugs-to-the-code", 39 39 + "bufo-adidas", 40 40 + "bufo-ages-rapidly-in-the-void", 41 41 + "bufo-aight-imma-head-out", 42 42 + "bufo-airpods", 43 43 + "bufo-alarma", 44 44 + "bufo-all-good", 45 45 + "bufo-all-warm-and-fuzzy-inside", 46 46 + "bufo-am-i", 47 47 + "bufo-amaze", 48 48 + "bufo-ambiently-existing", 49 49 + "bufo-american-football", 50 50 + "bufo-android", 51 51 + "bufo-angel", 52 52 + "bufo-angrily-gives-you-a-birthday-gift", 53 53 + "bufo-angrily-gives-you-white-elephant-gift", 54 54 + "bufo-angry", 55 55 + "bufo-angry-at-fly", 56 56 + "bufo-angry-bullfrog-screech", 57 57 + "bufo-angryandfrozen", 58 58 + "bufo-anime-glasses", 59 59 + "bufo-appears", 60 60 + "bufo-apple", 61 61 + "bufo-appreciates-jwst-pillars-of-creation", 62 62 + "bufo-approve", 63 63 + "bufo-arabicus", 64 64 + "bufo-are-you-seeing-this", 65 65 + "bufo-arr", 66 66 + "bufo-arrr", 67 67 + "bufo-arrrrrr", 68 68 + "bufo-arrrrrrr", 69 69 + "bufo-arrrrrrrrr", 70 70 + "bufo-arrrrrrrrrrrrrrr", 71 71 + "bufo-artist", 72 72 + "bufo-asks-politely-to-stop", 73 73 + "bufo-assists-with-the-landing", 74 74 + "bufo-atc", 75 75 + "bufo-away", 76 76 + "bufo-awkward-smile", 77 77 + "bufo-awkward-smile-nod", 78 78 + "bufo-ayy", 79 79 + "bufo-baby", 80 80 + "bufo-babysits-an-urgent-ticket", 81 81 + "bufo-back-pat", 82 82 + "bufo-backpack", 83 83 + "bufo-backpat", 84 84 + "bufo-bag-of-bufos", 85 85 + "bufo-bait", 86 86 + "bufo-baker", 87 87 + "bufo-baller", 88 88 + "bufo-bandana", 89 89 + "bufo-banging-head-against-the-wall", 90 90 + "bufo-barbie", 91 91 + "bufo-barney", 92 92 + "bufo-barrister", 93 93 + "bufo-baseball", 94 94 + "bufo-basketball", 95 95 + "bufo-batman", 96 96 + "bufo-be-my-valentine", 97 97 + "bufo-became-a-stranger-whose-laugh-you-can-recognize-anywhere", 98 98 + "bufo-bee", 99 99 + "bufo-bee-leaf", 100 100 + "bufo-bee-sad", 101 101 + "bufo-beer", 102 102 + "bufo-begrudgingly-offers-you-a-plus", 103 103 + "bufo-begs-for-ethernet-cable", 104 104 + "bufo-behind-bars", 105 105 + "bufo-bell-pepper", 106 106 + "bufo-betray", 107 107 + "bufo-betray-but-its-a-hotdog", 108 108 + "bufo-big-eyes-stare", 109 109 + "bufo-bigfoot", 110 110 + "bufo-bill-pay", 111 111 + "bufo-bird", 112 112 + "bufo-birthday-but-not-particularly-happy", 113 113 + "bufo-black-history", 114 114 + "bufo-black-tea", 115 115 + "bufo-blank-stare", 116 116 + "bufo-blank-stare_0_0", 117 117 + "bufo-blank-stare_0_1", 118 118 + "bufo-blank-stare_1_0", 119 119 + "bufo-blank-stare_1_1", 120 120 + "bufo-blanket", 121 121 + "bufo-blem", 122 122 + "bufo-blep", 123 123 + "bufo-bless", 124 124 + "bufo-bless-back", 125 125 + "bufo-blesses-this-pr", 126 126 + "bufo-block", 127 127 + "bufo-blogging", 128 128 + "bufo-bloody-mary", 129 129 + "bufo-blows-the-magic-conch", 130 130 + "bufo-blue", 131 131 + "bufo-blueberries", 132 132 + "bufo-blush", 133 133 + "bufo-boba", 134 134 + "bufo-boba-army", 135 135 + "bufo-boi", 136 136 + "bufo-boiii", 137 137 + "bufo-bongo", 138 138 + "bufo-bonk", 139 139 + "bufo-bops-you-on-the-head-with-a-baguette", 140 140 + "bufo-bops-you-on-the-head-with-a-rolled-up-newspaper", 141 141 + "bufo-bouge", 142 142 + "bufo-bouncer-says-its-time-to-go-now", 143 143 + "bufo-bouquet", 144 144 + "bufo-bourgeoisie", 145 145 + "bufo-bowser", 146 146 + "bufo-box-of-chocolates", 147 147 + "bufo-brain", 148 148 + "bufo-brain-damage", 149 149 + "bufo-brain-damage-escalates-to-new-heights", 150 150 + "bufo-brain-damage-intensifies", 151 151 + "bufo-brain-damage-intesifies-more", 152 152 + "bufo-brain-exploding", 153 153 + "bufo-breakdown", 154 154 + "bufo-breaks-tech-bros-heart", 155 155 + "bufo-breaks-up-with-you", 156 156 + "bufo-breaks-your-heart", 157 157 + "bufo-brick", 158 158 + "bufo-brings-a-new-meaning-to-brain-freeze-by-bopping-you-on-the-head-with-a-popsicle", 159 159 + "bufo-brings-a-new-meaning-to-gaveled-by-slamming-the-hammer-very-loud", 160 160 + "bufo-brings-magic-to-the-riot", 161 161 + "bufo-broccoli", 162 162 + "bufo-broke", 163 163 + "bufo-broke-his-toe-and-isn't-sure-what-to-do-about-the-12k-he-signed-up-for", 164 164 + "bufo-broom", 165 165 + "bufo-brought-a-taco", 166 166 + "bufo-bufo", 167 167 + "bufo-but-anatomically-correct", 168 168 + "bufo-but-instead-of-green-its-hotdogs", 169 169 + "bufo-but-instead-of-green-its-pizza", 170 170 + "bufo-but-you-can-feel-the-electro-house-music-in-the-gif-and-oh-yea-theres-also-a-dapper-chicken", 171 171 + "bufo-but-you-can-see-the-bufo-in-bufos-eyes", 172 172 + "bufo-but-you-can-see-the-hotdog-in-their-eyes", 173 173 + "bufo-buy-high-sell-low", 174 174 + "bufo-buy-low-sell-high", 175 175 + "bufo-cache-buddy", 176 176 + "bufo-cackle", 177 177 + "bufo-call-for-help", 178 178 + "bufo-came-into-the-office-just-to-use-the-printer", 179 179 + "bufo-can't-believe-heartbreak-feels-good-in-a-place-like-this", 180 180 + "bufo-can't-help-but-wonder-who-watches-the-watchmen", 181 181 + "bufo-canada", 182 182 + "bufo-cant-believe-your-audacity", 183 183 + "bufo-cant-find-a-pull-request", 184 184 + "bufo-cant-find-an-issue", 185 185 + "bufo-cant-stop-thinking-about-usher-killing-it-on-roller-skates", 186 186 + "bufo-cant-take-it-anymore", 187 187 + "bufo-cantelope", 188 188 + "bufo-capri-sun", 189 189 + "bufo-captain-obvious", 190 190 + "bufo-caribou", 191 191 + "bufo-carnage", 192 192 + "bufo-carrot", 193 193 + "bufo-cash-money", 194 194 + "bufo-cash-squint", 195 195 + "bufo-casts-a-spell-on-you", 196 196 + "bufo-catch", 197 197 + "bufo-caught-a-radioactive-bufo", 198 198 + "bufo-caught-a-small-bufo", 199 199 + "bufo-caused-an-incident", 200 200 + "bufo-celebrate", 201 201 + "bufo-censored", 202 202 + "bufo-chappell-roan", 203 203 + "bufo-chatting", 204 204 + "bufo-check", 205 205 + "bufo-checks-out-the-vibe", 206 206 + "bufo-cheese", 207 207 + "bufo-chef", 208 208 + "bufo-chefkiss", 209 209 + "bufo-chefkiss-with-hat", 210 210 + "bufo-cherries", 211 211 + "bufo-chicken", 212 212 + "bufo-chomp", 213 213 + "bufo-christmas", 214 214 + "bufo-chungus", 215 215 + "bufo-churns-the-butter", 216 216 + "bufo-clap", 217 217 + "bufo-clap-hd", 218 218 + "bufo-claus", 219 219 + "bufo-clown", 220 220 + "bufo-coconut", 221 221 + "bufo-code-freeze", 222 222 + "bufo-coding", 223 223 + "bufo-coffee-happy", 224 224 + "bufo-coin", 225 225 + "bufo-come-to-the-dark-side", 226 226 + "bufo-comfy", 227 227 + "bufo-commits-digital-piracy", 228 228 + "bufo-competes-in-the-bufo-bracket", 229 229 + "bufo-complies-with-the-chinese-government", 230 230 + "bufo-concerned", 231 231 + "bufo-cone-of-shame", 232 232 + "bufo-confetti", 233 233 + "bufo-confused", 234 234 + "bufo-congrats", 235 235 + "bufo-cookie", 236 236 + "bufo-cool-glasses", 237 237 + "bufo-corn", 238 238 + "bufo-cornucopia", 239 239 + "bufo-covid", 240 240 + "bufo-cowboy", 241 241 + "bufo-cozy-blanky", 242 242 + "bufo-crewmate-blue", 243 243 + "bufo-crewmate-blue-bounce", 244 244 + "bufo-crewmate-cyan", 245 245 + "bufo-crewmate-cyan-bounce", 246 246 + "bufo-crewmate-green", 247 247 + "bufo-crewmate-green-bounce", 248 248 + "bufo-crewmate-lime", 249 249 + "bufo-crewmate-lime-bounce", 250 250 + "bufo-crewmate-orange", 251 251 + "bufo-crewmate-orange-bounce", 252 252 + "bufo-crewmate-pink", 253 253 + "bufo-crewmate-pink-bounce", 254 254 + "bufo-crewmate-purple", 255 255 + "bufo-crewmate-purple-bounce", 256 256 + "bufo-crewmate-red", 257 257 + "bufo-crewmate-red-bounce", 258 258 + "bufo-crewmate-yellow", 259 259 + "bufo-crewmate-yellow-bounce", 260 260 + "bufo-crewmates", 261 261 + "bufo-cries-into-his-beer", 262 262 + "bufo-crikey", 263 263 + "bufo-croptop", 264 264 + "bufo-crumbs", 265 265 + "bufo-crustacean", 266 266 + "bufo-cry", 267 267 + "bufo-cry-pray", 268 268 + "bufo-crying", 269 269 + "bufo-crying-in-the-rain", 270 270 + "bufo-crying-jail", 271 271 + "bufo-crying-stop", 272 272 + "bufo-crying-tears-of-crying-tears-of-joy", 273 273 + "bufo-crying-why", 274 274 + "bufo-cubo", 275 275 + "bufo-cucumber", 276 276 + "bufo-cuddle", 277 277 + "bufo-cupcake", 278 278 + "bufo-cuppa", 279 279 + "bufo-cute", 280 280 + "bufo-cute-dance", 281 281 + "bufo-dab", 282 282 + "bufo-dancing", 283 283 + "bufo-dapper", 284 284 + "bufo-dbz", 285 285 + "bufo-deal-with-it", 286 286 + "bufo-declines-your-suppository-offer", 287 287 + "bufo-deep-hmm", 288 288 + "bufo-defend", 289 289 + "bufo-delurk", 290 290 + "bufo-demands-more-nom-noms", 291 291 + "bufo-demure", 292 292 + "bufo-desperately-needs-mavis-beacon", 293 293 + "bufo-detective", 294 294 + "bufo-develops-clairvoyance-while-trapped-in-the-void", 295 295 + "bufo-devil", 296 296 + "bufo-devouring-his-son", 297 297 + "bufo-di-beppo", 298 298 + "bufo-did-not-make-it-through-the-heatwave", 299 299 + "bufo-didnt-get-any-sleep", 300 300 + "bufo-didnt-listen-to-willy-wonka", 301 301 + "bufo-disappointed", 302 302 + "bufo-disco", 303 303 + "bufo-discombobulated", 304 304 + "bufo-disguise", 305 305 + "bufo-ditto", 306 306 + "bufo-dizzy", 307 307 + "bufo-do-not-panic", 308 308 + "bufo-dodge", 309 309 + "bufo-doesnt-believe-you", 310 310 + "bufo-doesnt-understand-how-this-meeting-isnt-an-email", 311 311 + "bufo-doesnt-wanna-get-out-of-the-bath-yet", 312 312 + "bufo-dog", 313 313 + "bufo-domo", 314 314 + "bufo-done-check", 315 315 + "bufo-dont", 316 316 + "bufo-dont-even-see-the-code-anymore", 317 317 + "bufo-dont-trust-whats-over-there", 318 318 + "bufo-double-chin", 319 319 + "bufo-double-vaccinated", 320 320 + "bufo-doubt", 321 321 + "bufo-dough", 322 322 + "bufo-downvote", 323 323 + "bufo-dr-depper", 324 324 + "bufo-dragon", 325 325 + "bufo-drags-knee", 326 326 + "bufo-drake-no", 327 327 + "bufo-drake-yes", 328 328 + "bufo-drifts-through-the-void", 329 329 + "bufo-drinking-baja-blast", 330 330 + "bufo-drinking-boba", 331 331 + "bufo-drinking-coffee", 332 332 + "bufo-drinking-coke", 333 333 + "bufo-drinking-pepsi", 334 334 + "bufo-drinking-pumpkin-spice-latte", 335 335 + "bufo-drinks-from-the-fire-hose", 336 336 + "bufo-drops-everything-now", 337 337 + "bufo-drowning-in-leeks", 338 338 + "bufo-drowns-in-memories-of-ocean", 339 339 + "bufo-drowns-in-tickets-but-ok", 340 340 + "bufo-drumroll", 341 341 + "bufo-easter-bunny", 342 342 + "bufo-eating-hotdog", 343 343 + "bufo-eating-lollipop", 344 344 + "bufo-eats-a-bufo-taco", 345 345 + "bufo-eats-all-your-honey", 346 346 + "bufo-eats-bufo-taco", 347 347 + "bufo-egg", 348 348 + "bufo-elite", 349 349 + "bufo-emo", 350 350 + "bufo-ends-the-holy-war-by-offering-the-objectively-best-programming-language", 351 351 + "bufo-enjoys-life", 352 352 + "bufo-enjoys-life-in-the-windows-xp-background", 353 353 + "bufo-enraged", 354 354 + "bufo-enter", 355 355 + "bufo-enters-the-void", 356 356 + "bufo-entrance", 357 357 + "bufo-ethereum", 358 358 + "bufo-everything-is-on-fire", 359 359 + "bufo-evil", 360 360 + "bufo-excited", 361 361 + "bufo-excited-but-sad", 362 362 + "bufo-existential-dread-sets-in", 363 363 + "bufo-exit", 364 364 + "bufo-experiences-euneirophrenia", 365 365 + "bufo-extra-cool", 366 366 + "bufo-eye-twitch", 367 367 + "bufo-eyeballs", 368 368 + "bufo-eyeballs-bloodshot", 369 369 + "bufo-eyes", 370 370 + "bufo-fab", 371 371 + "bufo-facepalm", 372 372 + "bufo-failed-the-load-test", 373 373 + "bufo-fails-the-vibe-check", 374 374 + "bufo-fancy-tea", 375 375 + "bufo-farmer", 376 376 + "bufo-fastest-rubber-stamp-in-the-west", 377 377 + "bufo-fedora", 378 378 + "bufo-feel-better", 379 379 + "bufo-feeling-pretty-might-delete-later", 380 380 + "bufo-feels-appreciated", 381 381 + "bufo-feels-nothing", 382 382 + "bufo-fell-asleep", 383 383 + "bufo-fellow-kids", 384 384 + "bufo-fieri", 385 385 + "bufo-fight", 386 386 + "bufo-fine-art", 387 387 + "bufo-fingerguns", 388 388 + "bufo-fingerguns-back", 389 389 + "bufo-fire", 390 390 + "bufo-fire-engine", 391 391 + "bufo-firefighter", 392 392 + "bufo-fish", 393 393 + "bufo-fish-bulb", 394 394 + "bufo-fistbump", 395 395 + "bufo-flex", 396 396 + "bufo-flipoff", 397 397 + "bufo-flips-table", 398 398 + "bufo-folder", 399 399 + "bufo-fomo", 400 400 + "bufo-food-please", 401 401 + "bufo-football", 402 402 + "bufo-for-dummies", 403 403 + "bufo-forgot-how-to-type", 404 404 + "bufo-forgot-that-you-existed-it-isnt-love-it-isnt-hate-its-just-indifference", 405 405 + "bufo-found-some-more-leeks", 406 406 + "bufo-found-the-leeks", 407 407 + "bufo-found-yet-another-juicebox", 408 408 + "bufo-french", 409 409 + "bufo-friends", 410 410 + "bufo-frustrated-with-flower", 411 411 + "bufo-fu%C3%9Fball", 412 412 + "bufo-fun-is-over", 413 413 + "bufo-furiously-tries-to-write-python", 414 414 + "bufo-furiously-writes-an-epic-update", 415 415 + "bufo-furiously-writes-you-a-peer-review", 416 416 + "bufo-futbol", 417 417 + "bufo-gamer", 418 418 + "bufo-gaming", 419 419 + "bufo-gandalf", 420 420 + "bufo-gandalf-has-seen-things", 421 421 + "bufo-gandalf-wat", 422 422 + "bufo-gardener", 423 423 + "bufo-garlic", 424 424 + "bufo-gavel", 425 425 + "bufo-gavel-dual-wield", 426 426 + "bufo-gen-z", 427 427 + "bufo-gentleman", 428 428 + "bufo-germany", 429 429 + "bufo-get-in-loser-were-going-shopping", 430 430 + "bufo-gets-downloaded-from-the-cloud", 431 431 + "bufo-gets-hit-in-the-face-with-an-egg", 432 432 + "bufo-gets-uploaded-to-the-cloud", 433 433 + "bufo-gets-whiplash", 434 434 + "bufo-ghost", 435 435 + "bufo-ghost-costume", 436 436 + "bufo-giggling-in-a-cat-onesie", 437 437 + "bufo-give", 438 438 + "bufo-give-money", 439 439 + "bufo-give-pack-of-ice", 440 440 + "bufo-gives-a-fake-moustache", 441 441 + "bufo-gives-a-magic-number", 442 442 + "bufo-gives-an-idea", 443 443 + "bufo-gives-approval", 444 444 + "bufo-gives-can-of-worms", 445 445 + "bufo-gives-databricks", 446 446 + "bufo-gives-j", 447 447 + "bufo-gives-star", 448 448 + "bufo-gives-you-a-feature-flag", 449 449 + "bufo-gives-you-a-hotdog", 450 450 + "bufo-gives-you-some-extra-brain", 451 451 + "bufo-gives-you-some-rice", 452 452 + "bufo-glasses", 453 453 + "bufo-glitch", 454 454 + "bufo-goal", 455 455 + "bufo-goes-super-saiyan", 456 456 + "bufo-goes-to-space", 457 457 + "bufo-goggles-are-too-tight", 458 458 + "bufo-good-morning", 459 459 + "bufo-good-vibe", 460 460 + "bufo-goose-hat-happy-dance", 461 461 + "bufo-got-a-tan", 462 462 + "bufo-got-zapped", 463 463 + "bufo-grapes", 464 464 + "bufo-grasping-at-straws", 465 465 + "bufo-grenade", 466 466 + "bufo-grimaces-with-eyebrows", 467 467 + "bufo-guitar", 468 468 + "bufo-ha-ha", 469 469 + "bufo-hacker", 470 470 + "bufo-hackerman", 471 471 + "bufo-haha-yes-haha-yes", 472 472 + "bufo-hahabusiness", 473 473 + "bufo-halloween", 474 474 + "bufo-halloween-pumpkin", 475 475 + "bufo-hands", 476 476 + "bufo-hands-on-hips-annoyed", 477 477 + "bufo-hangs-ten", 478 478 + "bufo-hangs-up", 479 479 + "bufo-hannibal-lecter", 480 480 + "bufo-hanson", 481 481 + "bufo-happy", 482 482 + "bufo-happy-hour", 483 483 + "bufo-happy-new-year", 484 484 + "bufo-hardhat", 485 485 + "bufo-has-a-5-dollar-footlong", 486 486 + "bufo-has-a-banana", 487 487 + "bufo-has-a-bbq", 488 488 + "bufo-has-a-big-wrench", 489 489 + "bufo-has-a-blue-wrench", 490 490 + "bufo-has-a-crush", 491 491 + "bufo-has-a-dr-pepper", 492 492 + "bufo-has-a-fresh-slice", 493 493 + "bufo-has-a-headache", 494 494 + "bufo-has-a-hot-take", 495 495 + "bufo-has-a-question", 496 496 + "bufo-has-a-sandwich", 497 497 + "bufo-has-a-spoon", 498 498 + "bufo-has-a-timtam", 499 499 + "bufo-has-accepted-its-horrible-fate", 500 500 + "bufo-has-activated", 501 501 + "bufo-has-another-sandwich", 502 502 + "bufo-has-been-cleaning", 503 503 + "bufo-has-gotta-poop-but-hes-stuck-in-a-long-meeting", 504 504 + "bufo-has-infiltrated-your-secure-system", 505 505 + "bufo-has-midas-touch", 506 506 + "bufo-has-read-enough-documentation-for-today", 507 507 + "bufo-has-some-ketchup", 508 508 + "bufo-has-thread-for-guts", 509 509 + "bufo-hasnt-worked-a-full-week-so-far-this-year", 510 510 + "bufo-hat", 511 511 + "bufo-hazmat", 512 512 + "bufo-headbang", 513 513 + "bufo-headphones", 514 514 + "bufo-heart", 515 515 + "bufo-heart-but-its-anatomically-correct", 516 516 + "bufo-hearts", 517 517 + "bufo-hehe", 518 518 + "bufo-hell", 519 519 + "bufo-hello", 520 520 + "bufo-heralds-an-incident", 521 521 + "bufo-heralds-taco-taking", 522 522 + "bufo-heralds-your-success", 523 523 + "bufo-here-to-make-a-dill-for-more-pickles", 524 524 + "bufo-hides", 525 525 + "bufo-high-speed-train", 526 526 + "bufo-highfive-1", 527 527 + "bufo-highfive-2", 528 528 + "bufo-hipster", 529 529 + "bufo-hmm", 530 530 + "bufo-hmm-no", 531 531 + "bufo-hmm-yes", 532 532 + "bufo-holding-space-for-defying-gravity", 533 533 + "bufo-holds-pumpkin", 534 534 + "bufo-homologates", 535 535 + "bufo-hop-in-we're-going-to-flavortown", 536 536 + "bufo-hopes-you-also-are-having-a-good-day", 537 537 + "bufo-hopes-you-are-having-a-good-day", 538 538 + "bufo-hot-pocket", 539 539 + "bufo-hotdog-rocket", 540 540 + "bufo-howdy", 541 541 + "bufo-hug", 542 542 + "bufo-hugs-moo-deng", 543 543 + "bufo-hype", 544 544 + "bufo-i-just-love-it-so-much", 545 545 + "bufo-ice-cream", 546 546 + "bufo-idk", 547 547 + "bufo-idk-but-okay-i-guess-so", 548 548 + "bufo-im-in-danger", 549 549 + "bufo-imposter", 550 550 + "bufo-in-a-pear-tree", 551 551 + "bufo-in-his-cozy-bed-hoping-he-never-gets-capitated", 552 552 + "bufo-in-rome", 553 553 + "bufo-inception", 554 554 + "bufo-increases-his-dimensionality-while-trapped-in-the-void", 555 555 + "bufo-innocent", 556 556 + "bufo-inspecting", 557 557 + "bufo-inspired", 558 558 + "bufo-instigates-a-dramatic-turn-of-events", 559 559 + "bufo-intensifies", 560 560 + "bufo-intern", 561 561 + "bufo-investigates", 562 562 + "bufo-iphone", 563 563 + "bufo-irl", 564 564 + "bufo-iron-throne", 565 565 + "bufo-ironside", 566 566 + "bufo-is-a-little-worried-but-still-trying-to-be-supportive", 567 567 + "bufo-is-a-part-of-gen-z", 568 568 + "bufo-is-about-to-zap-you", 569 569 + "bufo-is-all-ears", 570 570 + "bufo-is-angry-at-the-water-cooler-bottle-company-for-missing-yet-another-delivery", 571 571 + "bufo-is-at-his-wits-end", 572 572 + "bufo-is-at-the-dentist", 573 573 + "bufo-is-better-known-for-the-things-he-does-on-the-mattress", 574 574 + "bufo-is-exhausted-rooting-for-the-antihero", 575 575 + "bufo-is-flying-and-is-the-plane", 576 576 + "bufo-is-getting-abducted", 577 577 + "bufo-is-getting-paged-now", 578 578 + "bufo-is-glad-the-british-were-kicked-out", 579 579 + "bufo-is-happy-youre-happy", 580 580 + "bufo-is-having-a-really-bad-time", 581 581 + "bufo-is-in-a-never-ending-meeting", 582 582 + "bufo-is-in-on-the-joke", 583 583 + "bufo-is-inhaling-this-popcorn", 584 584 + "bufo-is-it-done", 585 585 + "bufo-is-jealous-its-your-birthday", 586 586 + "bufo-is-jean-baptise-emanuel-zorg", 587 587 + "bufo-is-keeping-his-eye-on-you", 588 588 + "bufo-is-lonely", 589 589 + "bufo-is-lost", 590 590 + "bufo-is-lost-in-the-void", 591 591 + "bufo-is-omniscient", 592 592 + "bufo-is-on-a-sled", 593 593 + "bufo-is-panicking", 594 594 + "bufo-is-petting-your-cat", 595 595 + "bufo-is-petting-your-dog", 596 596 + "bufo-is-proud-of-you", 597 597 + "bufo-is-ready-for-xmas", 598 598 + "bufo-is-ready-to-build-when-you-are", 599 599 + "bufo-is-ready-to-burn-down-the-mta-because-their-train-skipped-their-station-again", 600 600 + "bufo-is-ready-to-consume-his-daily-sodium-intake-in-one-sitting", 601 601 + "bufo-is-ready-to-eat", 602 602 + "bufo-is-ready-to-riot", 603 603 + "bufo-is-ready-to-slay-the-dragon", 604 604 + "bufo-is-romantic", 605 605 + "bufo-is-sad-no-one-complimented-their-agent-47-cosplay", 606 606 + "bufo-is-safe-behind-bars", 607 607 + "bufo-is-so-happy-youre-here", 608 608 + "bufo-is-the-perfect-human-form", 609 609 + "bufo-is-trapped-in-a-cameron-winter-phase", 610 610 + "bufo-is-unconcerned", 611 611 + "bufo-is-up-to-something", 612 612 + "bufo-is-very-upset-now", 613 613 + "bufo-is-watching-you", 614 614 + "bufo-is-working-through-the-tears", 615 615 + "bufo-is-working-too-much", 616 616 + "bufo-isitdone", 617 617 + "bufo-isnt-angry-just-disappointed", 618 618 + "bufo-isnt-going-to-rewind-the-vhs-before-returning-it", 619 619 + "bufo-isnt-reading-all-that", 620 620 + "bufo-it-bar", 621 621 + "bufo-italian", 622 622 + "bufo-its-over-9000", 623 623 + "bufo-its-too-early-for-this", 624 624 + "bufo-jam", 625 625 + "bufo-jammies", 626 626 + "bufo-jammin", 627 627 + "bufo-jealous", 628 628 + "bufo-jedi", 629 629 + "bufo-jomo", 630 630 + "bufo-judge", 631 631 + "bufo-judges", 632 632 + "bufo-juice", 633 633 + "bufo-juicebox", 634 634 + "bufo-juicy", 635 635 + "bufo-just-a-little-sad", 636 636 + "bufo-just-a-little-salty", 637 637 + "bufo-just-checking", 638 638 + "bufo-just-finished-a-workout", 639 639 + "bufo-just-got-back-from-the-dentist", 640 640 + "bufo-just-ice", 641 641 + "bufo-just-walked-into-an-awkward-conversation-and-is-now-trying-to-figure-out-how-to-leave", 642 642 + "bufo-just-wanted-you-to-know-this-is-him-trying", 643 643 + "bufo-justice", 644 644 + "bufo-karen", 645 645 + "bufo-keeps-his-password-written-on-a-post-it-note-stuck-to-his-monitor", 646 646 + "bufo-keyboard", 647 647 + "bufo-kills-you-with-kindness", 648 648 + "bufo-king", 649 649 + "bufo-kiwi", 650 650 + "bufo-knife", 651 651 + "bufo-knife-cries-right", 652 652 + "bufo-knife-crying", 653 653 + "bufo-knife-crying-left", 654 654 + "bufo-knife-crying-right", 655 655 + "bufo-knows-age-is-just-a-number", 656 656 + "bufo-knows-his-customers", 657 657 + "bufo-knows-this-is-a-total-bop", 658 658 + "bufo-knuckle-sandwich", 659 659 + "bufo-knuckles", 660 660 + "bufo-koi", 661 661 + "bufo-kudo", 662 662 + "bufo-kuzco", 663 663 + "bufo-kuzco-has-not-learned-his-lesson-yet", 664 664 + "bufo-laser-eyes", 665 665 + "bufo-late-to-the-convo", 666 666 + "bufo-laugh-xd", 667 667 + "bufo-laughing-popcorn", 668 668 + "bufo-laughs-to-mask-the-pain", 669 669 + "bufo-leads-the-way-to-better-docs", 670 670 + "bufo-leaves-you-on-seen", 671 671 + "bufo-left-a-comment", 672 672 + "bufo-left-multiple-comments", 673 673 + "bufo-legal-entities", 674 674 + "bufo-lemon", 675 675 + "bufo-leprechaun", 676 676 + "bufo-let-them-eat-cake", 677 677 + "bufo-lgtm", 678 678 + "bufo-liberty", 679 679 + "bufo-liberty-forgot-her-torch", 680 680 + "bufo-librarian", 681 681 + "bufo-lick", 682 682 + "bufo-licks-his-hway-out-of-prison", 683 683 + "bufo-lies-awake-in-panic", 684 684 + "bufo-life-saver", 685 685 + "bufo-likes-that-idea", 686 686 + "bufo-link", 687 687 + "bufo-listens-to-his-conscience", 688 688 + "bufo-lit", 689 689 + "bufo-littlefoot-is-upset", 690 690 + "bufo-loading", 691 691 + "bufo-lol", 692 692 + "bufo-lol-cry", 693 693 + "bufo-lolsob", 694 694 + "bufo-long", 695 695 + "bufo-lookin-dope", 696 696 + "bufo-looking-very-much", 697 697 + "bufo-looks-a-little-closer", 698 698 + "bufo-looks-for-a-pull-request", 699 699 + "bufo-looks-for-an-issue", 700 700 + "bufo-looks-like-hes-listening-but-hes-not", 701 701 + "bufo-looks-out-of-the-window", 702 702 + "bufo-loves-blobs", 703 703 + "bufo-loves-disco", 704 704 + "bufo-loves-doges", 705 705 + "bufo-loves-pho", 706 706 + "bufo-loves-rice-and-beans", 707 707 + "bufo-loves-ruby", 708 708 + "bufo-loves-this-song", 709 709 + "bufo-luigi", 710 710 + "bufo-lunch", 711 711 + "bufo-lurk", 712 712 + "bufo-lurk-delurk", 713 713 + "bufo-macbook", 714 714 + "bufo-made-salad", 715 715 + "bufo-made-you-a-burrito", 716 716 + "bufo-magician", 717 717 + "bufo-make-it-rain", 718 718 + "bufo-makes-it-rain", 719 719 + "bufo-makes-the-dream-work", 720 720 + "bufo-mama-mia-thatsa-one-spicy-a-meatball", 721 721 + "bufo-marine", 722 722 + "bufo-mario", 723 723 + "bufo-mask", 724 724 + "bufo-matrix", 725 725 + "bufo-medal", 726 726 + "bufo-meltdown", 727 727 + "bufo-melting", 728 728 + "bufo-micdrop", 729 729 + "bufo-midsommar", 730 730 + "bufo-midwest-princess", 731 731 + "bufo-mild-panic", 732 732 + "bufo-mildly-aggravated", 733 733 + "bufo-milk", 734 734 + "bufo-mindblown", 735 735 + "bufo-minecraft-attack", 736 736 + "bufo-minecraft-defend", 737 737 + "bufo-mischievous", 738 738 + "bufo-mitosis", 739 739 + "bufo-mittens", 740 740 + "bufo-modern-art", 741 741 + "bufo-monocle", 742 742 + "bufo-monstera", 743 743 + "bufo-morning", 744 744 + "bufo-morning-starbucks", 745 745 + "bufo-morning-sun", 746 746 + "bufo-mrtayto", 747 747 + "bufo-mushroom", 748 748 + "bufo-mustache", 749 749 + "bufo-my-pho", 750 750 + "bufo-nah", 751 751 + "bufo-naked", 752 752 + "bufo-naptime", 753 753 + "bufo-needs-some-hot-tea-to-process-this-news", 754 754 + "bufo-needs-to-vent", 755 755 + "bufo-nefarious", 756 756 + "bufo-nervous", 757 757 + "bufo-nervous-but-cute", 758 758 + "bufo-night", 759 759 + "bufo-ninja", 760 760 + "bufo-no", 761 761 + "bufo-no-capes", 762 762 + "bufo-no-more-today-thank-you", 763 763 + "bufo-no-prob", 764 764 + "bufo-no-problem", 765 765 + "bufo-no-ragrets", 766 766 + "bufo-no-sleep", 767 767 + "bufo-no-u", 768 768 + "bufo-nod", 769 769 + "bufo-noodles", 770 770 + "bufo-nope", 771 771 + "bufo-nosy", 772 772 + "bufo-not-bad-by-dalle", 773 773 + "bufo-not-my-problem", 774 774 + "bufo-not-respecting-your-personal-space", 775 775 + "bufo-notice-me-senpai", 776 776 + "bufo-notification", 777 777 + "bufo-np", 778 778 + "bufo-nun", 779 779 + "bufo-nyc", 780 780 + "bufo-oatly", 781 781 + "bufo-oblivious-and-innocent", 782 782 + "bufo-of-liberty", 783 783 + "bufo-offering-bufo-offering-bufo-offering-bufo", 784 784 + "bufo-offers-1", 785 785 + "bufo-offers-13", 786 786 + "bufo-offers-2", 787 787 + "bufo-offers-200", 788 788 + "bufo-offers-21", 789 789 + "bufo-offers-3", 790 790 + "bufo-offers-5", 791 791 + "bufo-offers-8", 792 792 + "bufo-offers-a-bagel", 793 793 + "bufo-offers-a-ball-of-mud", 794 794 + "bufo-offers-a-banana-in-these-trying-times", 795 795 + "bufo-offers-a-beer", 796 796 + "bufo-offers-a-bicycle", 797 797 + "bufo-offers-a-bolillo-para-el-susto", 798 798 + "bufo-offers-a-book", 799 799 + "bufo-offers-a-brain", 800 800 + "bufo-offers-a-bufo-egg-in-this-trying-time", 801 801 + "bufo-offers-a-burger", 802 802 + "bufo-offers-a-cake", 803 803 + "bufo-offers-a-clover", 804 804 + "bufo-offers-a-comment", 805 805 + "bufo-offers-a-cookie", 806 806 + "bufo-offers-a-deploy-lock", 807 807 + "bufo-offers-a-factory", 808 808 + "bufo-offers-a-flan", 809 809 + "bufo-offers-a-flowchart-to-help-you-navigate-this-workflow", 810 810 + "bufo-offers-a-focaccia", 811 811 + "bufo-offers-a-furby", 812 812 + "bufo-offers-a-gavel", 813 813 + "bufo-offers-a-generator", 814 814 + "bufo-offers-a-hario-scale", 815 815 + "bufo-offers-a-hot-take", 816 816 + "bufo-offers-a-jetpack-zebra", 817 817 + "bufo-offers-a-kakapo", 818 818 + "bufo-offers-a-like", 819 819 + "bufo-offers-a-little-band-aid-for-a-big-problem", 820 820 + "bufo-offers-a-llama", 821 821 + "bufo-offers-a-loading-spinner", 822 822 + "bufo-offers-a-loading-spinner-spinning", 823 823 + "bufo-offers-a-lock", 824 824 + "bufo-offers-a-mac-m1-chip", 825 825 + "bufo-offers-a-pager", 826 826 + "bufo-offers-a-piece-of-cake", 827 827 + "bufo-offers-a-pr", 828 828 + "bufo-offers-a-pull-request", 829 829 + "bufo-offers-a-rock", 830 830 + "bufo-offers-a-roomba", 831 831 + "bufo-offers-a-ruby", 832 832 + "bufo-offers-a-sandbox", 833 833 + "bufo-offers-a-shocked-pikachu", 834 834 + "bufo-offers-a-speedy-recovery", 835 835 + "bufo-offers-a-status", 836 836 + "bufo-offers-a-taco", 837 837 + "bufo-offers-a-telescope", 838 838 + "bufo-offers-a-tiny-wood-stove", 839 839 + "bufo-offers-a-torta-ahogada", 840 840 + "bufo-offers-a-webhook", 841 841 + "bufo-offers-a-webhook-but-the-logo-is-canonically-correct", 842 842 + "bufo-offers-a-wednesday", 843 843 + "bufo-offers-a11y", 844 844 + "bufo-offers-ai", 845 845 + "bufo-offers-airwrap", 846 846 + "bufo-offers-an-airpod-pro", 847 847 + "bufo-offers-an-easter-egg", 848 848 + "bufo-offers-an-eclair", 849 849 + "bufo-offers-an-egg-in-this-trying-time", 850 850 + "bufo-offers-an-ethernet-cable", 851 851 + "bufo-offers-an-export-of-your-data", 852 852 + "bufo-offers-an-extinguisher", 853 853 + "bufo-offers-an-idea", 854 854 + "bufo-offers-an-incident", 855 855 + "bufo-offers-an-issue", 856 856 + "bufo-offers-an-outage", 857 857 + "bufo-offers-approval", 858 858 + "bufo-offers-avocado", 859 859 + "bufo-offers-bento", 860 860 + "bufo-offers-big-band-aid-for-a-little-problem", 861 861 + "bufo-offers-bitcoin", 862 862 + "bufo-offers-boba", 863 863 + "bufo-offers-boss-coffee", 864 864 + "bufo-offers-box", 865 865 + "bufo-offers-bufo", 866 866 + "bufo-offers-bufo-cubo", 867 867 + "bufo-offers-bufo-offers", 868 868 + "bufo-offers-bufomelon", 869 869 + "bufo-offers-calculated-decision-to-leave-tech-debt-for-now-and-clean-it-up-later", 870 870 + "bufo-offers-caribufo", 871 871 + "bufo-offers-chart-with-upwards-trend", 872 872 + "bufo-offers-chatgpt", 873 873 + "bufo-offers-chrome", 874 874 + "bufo-offers-coffee", 875 875 + "bufo-offers-copilot", 876 876 + "bufo-offers-corn", 877 877 + "bufo-offers-corporate-red-tape", 878 878 + "bufo-offers-covid", 879 879 + "bufo-offers-csharp", 880 880 + "bufo-offers-d20", 881 881 + "bufo-offers-datadog", 882 882 + "bufo-offers-discord", 883 883 + "bufo-offers-dnd", 884 884 + "bufo-offers-empty-wallet", 885 885 + "bufo-offers-f5", 886 886 + "bufo-offers-factorio", 887 887 + "bufo-offers-falafel", 888 888 + "bufo-offers-fart-cloud", 889 889 + "bufo-offers-firefox", 890 890 + "bufo-offers-flatbread", 891 891 + "bufo-offers-footsie", 892 892 + "bufo-offers-friday", 893 893 + "bufo-offers-fud", 894 894 + "bufo-offers-gatorade", 895 895 + "bufo-offers-git-mailing-list", 896 896 + "bufo-offers-golden-handcuffs", 897 897 + "bufo-offers-google-doc", 898 898 + "bufo-offers-google-drive", 899 899 + "bufo-offers-google-sheets", 900 900 + "bufo-offers-hello-kitty", 901 901 + "bufo-offers-help", 902 902 + "bufo-offers-hotdog", 903 903 + "bufo-offers-jira", 904 904 + "bufo-offers-ldap", 905 905 + "bufo-offers-lego", 906 906 + "bufo-offers-model-1857-12-pounder-napoleon-cannon", 907 907 + "bufo-offers-moneybag", 908 908 + "bufo-offers-new-jira", 909 909 + "bufo-offers-nothing", 910 910 + "bufo-offers-notion", 911 911 + "bufo-offers-oatmilk", 912 912 + "bufo-offers-openai", 913 913 + "bufo-offers-pancakes", 914 914 + "bufo-offers-peanuts", 915 915 + "bufo-offers-pineapple", 916 916 + "bufo-offers-power", 917 917 + "bufo-offers-prescription-strength-painkillers", 918 918 + "bufo-offers-python", 919 919 + "bufo-offers-securifriend", 920 920 + "bufo-offers-solar-eclipse", 921 921 + "bufo-offers-spam", 922 922 + "bufo-offers-stash-of-tea-from-the-office-for-the-weekend", 923 923 + "bufo-offers-tayto", 924 924 + "bufo-offers-terraform", 925 925 + "bufo-offers-the-cloud", 926 926 + "bufo-offers-the-power", 927 927 + "bufo-offers-the-weeknd", 928 928 + "bufo-offers-thoughts-and-prayers", 929 929 + "bufo-offers-thread", 930 930 + "bufo-offers-thundercats", 931 931 + "bufo-offers-tim-tams", 932 932 + "bufo-offers-tree", 933 933 + "bufo-offers-turkish-delights", 934 934 + "bufo-offers-ube", 935 935 + "bufo-offers-watermelon", 936 936 + "bufo-offers-you-a-comically-oversized-waffle", 937 937 + "bufo-offers-you-a-db-for-your-customer-data", 938 938 + "bufo-offers-you-a-gdpr-compliant-cookie", 939 939 + "bufo-offers-you-a-kfc-16-piece-family-size-bucket-of-fried-chicken", 940 940 + "bufo-offers-you-a-monster-early-in-the-morning", 941 941 + "bufo-offers-you-a-pint-m8", 942 942 + "bufo-offers-you-a-red-bull-early-in-the-morning", 943 943 + "bufo-offers-you-a-suspiciously-not-urgent-ticket", 944 944 + "bufo-offers-you-an-urgent-ticket", 945 945 + "bufo-offers-you-dangerously-high-rate-limits", 946 946 + "bufo-offers-you-his-crypto-before-he-pumps-and-dumps-it", 947 947 + "bufo-offers-you-logs", 948 948 + "bufo-offers-you-money-in-this-trying-time", 949 949 + "bufo-offers-you-the-best-emoji-culture-ever", 950 950 + "bufo-offers-you-the-moon", 951 951 + "bufo-offers-you-the-world", 952 952 + "bufo-offers-yubikey", 953 953 + "bufo-office", 954 954 + "bufo-oh-hai", 955 955 + "bufo-oh-no", 956 956 + "bufo-oh-yeah", 957 957 + "bufo-ok", 958 958 + "bufo-okay-pretty-salty-now", 959 959 + "bufo-old", 960 960 + "bufo-olives", 961 961 + "bufo-omg", 962 962 + "bufo-on-fire-but-still-excited", 963 963 + "bufo-on-the-ceiling", 964 964 + "bufo-oncall-secondary", 965 965 + "bufo-onion", 966 966 + "bufo-open-mic", 967 967 + "bufo-opens-a-haberdashery", 968 968 + "bufo-orange", 969 969 + "bufo-oreilly", 970 970 + "bufo-pager-duty", 971 971 + "bufo-pajama-party", 972 972 + "bufo-palpatine", 973 973 + "bufo-panic", 974 974 + "bufo-parrot", 975 975 + "bufo-party", 976 976 + "bufo-party-birthday", 977 977 + "bufo-party-conga-line", 978 978 + "bufo-passed-the-load-test", 979 979 + "bufo-passes-the-vibe-check", 980 980 + "bufo-pat", 981 981 + "bufo-peaks-on-you-from-above", 982 982 + "bufo-peaky-blinder", 983 983 + "bufo-pear", 984 984 + "bufo-pearly-whites", 985 985 + "bufo-peek", 986 986 + "bufo-peek-wall", 987 987 + "bufo-peeking", 988 988 + "bufo-pensivity-turned-discomfort-upon-realization-of-reality", 989 989 + "bufo-phew", 990 990 + "bufo-phonecall", 991 991 + "bufo-photographer", 992 992 + "bufo-picked-you-a-flower", 993 993 + "bufo-pikmin", 994 994 + "bufo-pilgrim", 995 995 + "bufo-pilot", 996 996 + "bufo-pinch-hitter", 997 997 + "bufo-pineapple", 998 998 + "bufo-ping", 999 999 + "bufo-pirate", 1000 1000 + "bufo-pitchfork", 1001 1001 + "bufo-pitchforks", 1002 1002 + "bufo-pizza-hut", 1003 1003 + "bufo-placeholder", 1004 1004 + "bufo-platformizes", 1005 1005 + "bufo-plays-some-smooth-jazz", 1006 1006 + "bufo-plays-some-smooth-jazz-intensity-1", 1007 1007 + "bufo-pleading", 1008 1008 + "bufo-pleading-1", 1009 1009 + "bufo-please", 1010 1010 + "bufo-pog", 1011 1011 + "bufo-pog-surprise", 1012 1012 + "bufo-pointing-down-there", 1013 1013 + "bufo-pointing-over-there", 1014 1014 + "bufo-pointing-right-there", 1015 1015 + "bufo-pointing-up-there", 1016 1016 + "bufo-police", 1017 1017 + "bufo-poliwhirl", 1018 1018 + "bufo-ponders", 1019 1019 + "bufo-ponders-2", 1020 1020 + "bufo-ponders-3", 1021 1021 + "bufo-poo", 1022 1022 + "bufo-poof", 1023 1023 + "bufo-popcorn", 1024 1024 + "bufo-popping-out-of-the-coffee", 1025 1025 + "bufo-popping-out-of-the-coffee-upsidedown", 1026 1026 + "bufo-popping-out-of-the-toilet", 1027 1027 + "bufo-pops-by", 1028 1028 + "bufo-pops-out-for-a-quick-bite-to-eat", 1029 1029 + "bufo-possessed", 1030 1030 + "bufo-potato", 1031 1031 + "bufo-pours-one-out", 1032 1032 + "bufo-praise", 1033 1033 + "bufo-pray", 1034 1034 + "bufo-pray-partying", 1035 1035 + "bufo-praying-his-qa-is-on-point", 1036 1036 + "bufo-prays-for-this-to-be-over-already", 1037 1037 + "bufo-prays-for-this-to-be-over-already-intensifies", 1038 1038 + "bufo-prays-to-azure", 1039 1039 + "bufo-prays-to-nvidia", 1040 1040 + "bufo-prays-to-pagerduty", 1041 1041 + "bufo-preach", 1042 1042 + "bufo-presents-to-the-bufos", 1043 1043 + "bufo-pretends-to-have-authority", 1044 1044 + "bufo-pretty-dang-sad", 1045 1045 + "bufo-pride", 1046 1046 + "bufo-psychic", 1047 1047 + "bufo-pumpkin", 1048 1048 + "bufo-pumpkin-head", 1049 1049 + "bufo-pushes-to-prod", 1050 1050 + "bufo-put-on-active-noise-cancelling-headphones-but-can-still-hear-you", 1051 1051 + "bufo-quadruple-vaccinated", 1052 1052 + "bufo-question", 1053 1053 + "bufo-rad", 1054 1054 + "bufo-rainbow", 1055 1055 + "bufo-rainbow-moustache", 1056 1056 + "bufo-raised-hand", 1057 1057 + "bufo-ramen", 1058 1058 + "bufo-reading", 1059 1059 + "bufo-reads-and-analyzes-doc", 1060 1060 + "bufo-reads-and-analyzes-doc-intensifies", 1061 1061 + "bufo-red-flags", 1062 1062 + "bufo-redacted", 1063 1063 + "bufo-regret", 1064 1064 + "bufo-remains-perturbed-from-the-void", 1065 1065 + "bufo-remembers-bad-time", 1066 1066 + "bufo-returns-to-the-void", 1067 1067 + "bufo-retweet", 1068 1068 + "bufo-reverse", 1069 1069 + "bufo-review", 1070 1070 + "bufo-revokes-his-approval", 1071 1071 + "bufo-rich", 1072 1072 + "bufo-rick", 1073 1073 + "bufo-rides-in-style", 1074 1074 + "bufo-riding-goose", 1075 1075 + "bufo-riot", 1076 1076 + "bufo-rip", 1077 1077 + "bufo-roasted", 1078 1078 + "bufo-robs-you", 1079 1079 + "bufo-rocket", 1080 1080 + "bufo-rofl", 1081 1081 + "bufo-roll", 1082 1082 + "bufo-roll-fast", 1083 1083 + "bufo-roll-safe", 1084 1084 + "bufo-roll-the-dice", 1085 1085 + "bufo-rolling-out", 1086 1086 + "bufo-rose", 1087 1087 + "bufo-ross", 1088 1088 + "bufo-royalty", 1089 1089 + "bufo-royalty-sparkle", 1090 1090 + "bufo-rude", 1091 1091 + "bufo-rudolph", 1092 1092 + "bufo-run", 1093 1093 + "bufo-run-right", 1094 1094 + "bufo-rush", 1095 1095 + "bufo-sad", 1096 1096 + "bufo-sad-baguette", 1097 1097 + "bufo-sad-but-ok", 1098 1098 + "bufo-sad-rain", 1099 1099 + "bufo-sad-swinging", 1100 1100 + "bufo-sad-vibe", 1101 1101 + "bufo-sailor-moon", 1102 1102 + "bufo-salad", 1103 1103 + "bufo-salivating", 1104 1104 + "bufo-salty", 1105 1105 + "bufo-salute", 1106 1106 + "bufo-same", 1107 1107 + "bufo-santa", 1108 1108 + "bufo-saves-hyrule", 1109 1109 + "bufo-says-good-morning-to-test-the-waters", 1110 1110 + "bufo-scheduled", 1111 1111 + "bufo-science", 1112 1112 + "bufo-science-intensifies", 1113 1113 + "bufo-scientist", 1114 1114 + "bufo-scientist-intensifies", 1115 1115 + "bufo-screams-into-the-ambient-void", 1116 1116 + "bufo-security-jacket", 1117 1117 + "bufo-sees-what-you-did-there", 1118 1118 + "bufo-segway", 1119 1119 + "bufo-sends-a-demand-signal", 1120 1120 + "bufo-sends-to-print", 1121 1121 + "bufo-sends-you-to-the-shadow-realm", 1122 1122 + "bufo-shakes-up-your-etch-a-sketch", 1123 1123 + "bufo-shaking-eyes", 1124 1124 + "bufo-shaking-head", 1125 1125 + "bufo-shame", 1126 1126 + "bufo-shares-his-banana", 1127 1127 + "bufo-sheesh", 1128 1128 + "bufo-shh", 1129 1129 + "bufo-shh-barking-puppy", 1130 1130 + "bufo-shifty", 1131 1131 + "bufo-ship", 1132 1132 + "bufo-shipit", 1133 1133 + "bufo-shipping", 1134 1134 + "bufo-shower", 1135 1135 + "bufo-showing-off-baby", 1136 1136 + "bufo-showing-off-babypilot", 1137 1137 + "bufo-shredding", 1138 1138 + "bufo-shrek", 1139 1139 + "bufo-shrek-but-canonically-correct", 1140 1140 + "bufo-shrooms", 1141 1141 + "bufo-shrug", 1142 1142 + "bufo-shy", 1143 1143 + "bufo-sigh", 1144 1144 + "bufo-silly", 1145 1145 + "bufo-silly-goose-dance", 1146 1146 + "bufo-simba", 1147 1147 + "bufo-single-tear", 1148 1148 + "bufo-sinks", 1149 1149 + "bufo-sip", 1150 1150 + "bufo-sipping-on-juice", 1151 1151 + "bufo-sips-coffee", 1152 1152 + "bufo-siren", 1153 1153 + "bufo-sit", 1154 1154 + "bufo-sith", 1155 1155 + "bufo-skeledance", 1156 1156 + "bufo-skellington", 1157 1157 + "bufo-skellington-1", 1158 1158 + "bufo-skiing", 1159 1159 + "bufo-slay", 1160 1160 + "bufo-sleep", 1161 1161 + "bufo-slinging-bagels", 1162 1162 + "bufo-slowly-heads-out", 1163 1163 + "bufo-slowly-lurks-in", 1164 1164 + "bufo-smile", 1165 1165 + "bufo-smirk", 1166 1166 + "bufo-smol", 1167 1167 + "bufo-smug", 1168 1168 + "bufo-smugo", 1169 1169 + "bufo-snail", 1170 1170 + "bufo-snaps-a-pic", 1171 1171 + "bufo-snore", 1172 1172 + "bufo-snow", 1173 1173 + "bufo-sobbing", 1174 1174 + "bufo-soccer", 1175 1175 + "bufo-softball", 1176 1176 + "bufo-sombrero", 1177 1177 + "bufo-speaking-math", 1178 1178 + "bufo-spider", 1179 1179 + "bufo-spit", 1180 1180 + "bufo-spooky-szn", 1181 1181 + "bufo-sports", 1182 1182 + "bufo-squad", 1183 1183 + "bufo-squash", 1184 1184 + "bufo-sriracha", 1185 1185 + "bufo-stab", 1186 1186 + "bufo-stab-murder", 1187 1187 + "bufo-stab-reverse", 1188 1188 + "bufo-stamp", 1189 1189 + "bufo-standing", 1190 1190 + "bufo-stare", 1191 1191 + "bufo-stargazing", 1192 1192 + "bufo-stars-in-a-old-timey-talkie", 1193 1193 + "bufo-starstruck", 1194 1194 + "bufo-stay-puft-marshmallow", 1195 1195 + "bufo-steals-your-thunder", 1196 1196 + "bufo-stick", 1197 1197 + "bufo-stick-reverse", 1198 1198 + "bufo-stole-caribufos-antler", 1199 1199 + "bufo-stole-your-crunchwrap-before-you-could-finish-it", 1200 1200 + "bufo-stoned", 1201 1201 + "bufo-stonks", 1202 1202 + "bufo-stonks2", 1203 1203 + "bufo-stop", 1204 1204 + "bufo-stopsign", 1205 1205 + "bufo-strains-his-neck", 1206 1206 + "bufo-strange", 1207 1207 + "bufo-strawberry", 1208 1208 + "bufo-strikes-a-deal", 1209 1209 + "bufo-strikes-the-match-he's-ready-for-inferno", 1210 1210 + "bufo-stripe", 1211 1211 + "bufo-stuffed", 1212 1212 + "bufo-style", 1213 1213 + "bufo-sun-bless", 1214 1214 + "bufo-sunny-side-up", 1215 1215 + "bufo-surf", 1216 1216 + "bufo-sus", 1217 1217 + "bufo-sushi", 1218 1218 + "bufo-sussy-eyebrows", 1219 1219 + "bufo-sweat", 1220 1220 + "bufo-sweep", 1221 1221 + "bufo-sweet-dreams", 1222 1222 + "bufo-sweet-potato", 1223 1223 + "bufo-swims", 1224 1224 + "bufo-sword", 1225 1225 + "bufo-taco", 1226 1226 + "bufo-tada", 1227 1227 + "bufo-take-my-money", 1228 1228 + "bufo-takes-a-bath", 1229 1229 + "bufo-takes-bufo-give", 1230 1230 + "bufo-takes-five-corndogs-to-the-movies-by-himself-as-his-me-time", 1231 1231 + "bufo-takes-hotdog", 1232 1232 + "bufo-takes-slack", 1233 1233 + "bufo-takes-spam", 1234 1234 + "bufo-takes-your-approval", 1235 1235 + "bufo-takes-your-boba", 1236 1236 + "bufo-takes-your-bufo-taco", 1237 1237 + "bufo-takes-your-burrito", 1238 1238 + "bufo-takes-your-copilot", 1239 1239 + "bufo-takes-your-fud-away", 1240 1240 + "bufo-takes-your-golden-handcuffs", 1241 1241 + "bufo-takes-your-incident", 1242 1242 + "bufo-takes-your-nose", 1243 1243 + "bufo-takes-your-pizza", 1244 1244 + "bufo-takes-yubikey", 1245 1245 + "bufo-takes-zoom", 1246 1246 + "bufo-talks-to-brick-wall", 1247 1247 + "bufo-tapioca-pearl", 1248 1248 + "bufo-tea", 1249 1249 + "bufo-teal", 1250 1250 + "bufo-tears-of-joy", 1251 1251 + "bufo-tense", 1252 1252 + "bufo-tequila", 1253 1253 + "bufo-thanks", 1254 1254 + "bufo-thanks-bufo-for-thanking-bufo", 1255 1255 + "bufo-thanks-the-sr-bufo-for-their-wisdom", 1256 1256 + "bufo-thanks-you-for-the-approval", 1257 1257 + "bufo-thanks-you-for-the-bufo", 1258 1258 + "bufo-thanks-you-for-the-comment", 1259 1259 + "bufo-thanks-you-for-the-new-bufo", 1260 1260 + "bufo-thanks-you-for-your-issue", 1261 1261 + "bufo-thanks-you-for-your-pr", 1262 1262 + "bufo-thanks-you-for-your-service", 1263 1263 + "bufo-thanksgiving", 1264 1264 + "bufo-thanos", 1265 1265 + "bufo-thats-a-knee-slapper", 1266 1266 + "bufo-the-builder", 1267 1267 + "bufo-the-crying-osha-compliant-builder", 1268 1268 + "bufo-the-osha-compliant-builder", 1269 1269 + "bufo-think", 1270 1270 + "bufo-thinking", 1271 1271 + "bufo-thinking-about-holidays", 1272 1272 + "bufo-thinks-about-a11y", 1273 1273 + "bufo-thinks-about-azure", 1274 1274 + "bufo-thinks-about-azure-front-door", 1275 1275 + "bufo-thinks-about-azure-front-door-intensifies", 1276 1276 + "bufo-thinks-about-cheeky-nandos", 1277 1277 + "bufo-thinks-about-chocolate", 1278 1278 + "bufo-thinks-about-climbing", 1279 1279 + "bufo-thinks-about-docs", 1280 1280 + "bufo-thinks-about-fishsticks", 1281 1281 + "bufo-thinks-about-mountains", 1282 1282 + "bufo-thinks-about-omelette", 1283 1283 + "bufo-thinks-about-pancakes", 1284 1284 + "bufo-thinks-about-quarter", 1285 1285 + "bufo-thinks-about-redis", 1286 1286 + "bufo-thinks-about-rubberduck", 1287 1287 + "bufo-thinks-about-steak", 1288 1288 + "bufo-thinks-about-steakholder", 1289 1289 + "bufo-thinks-about-teams", 1290 1290 + "bufo-thinks-about-telemetry", 1291 1291 + "bufo-thinks-about-terraform", 1292 1292 + "bufo-thinks-about-ufo", 1293 1293 + "bufo-thinks-about-vacation", 1294 1294 + "bufo-thinks-he-gets-paid-too-much-to-work-here", 1295 1295 + "bufo-thinks-of-shamenun", 1296 1296 + "bufo-thinks-this-is-a-total-bop", 1297 1297 + "bufo-this", 1298 1298 + "bufo-this-is-fine", 1299 1299 + "bufo-this2", 1300 1300 + "bufo-thonk", 1301 1301 + "bufo-thonks-from-the-void", 1302 1302 + "bufo-threatens-to-hit-you-with-the-chancla-and-he-means-it", 1303 1303 + "bufo-threatens-to-thwack-you-with-a-slipper-and-he-means-it", 1304 1304 + "bufo-throws-brick", 1305 1305 + "bufo-thumbsup", 1306 1306 + "bufo-thunk", 1307 1307 + "bufo-thwack", 1308 1308 + "bufo-timeout", 1309 1309 + "bufo-tin-foil-hat", 1310 1310 + "bufo-tin-foil-hat2", 1311 1311 + "bufo-tips-hat", 1312 1312 + "bufo-tired", 1313 1313 + "bufo-tired-of-rooting-for-the-anti-hero", 1314 1314 + "bufo-tired-yes", 1315 1315 + "bufo-toad", 1316 1316 + "bufo-tofu", 1317 1317 + "bufo-toilet-rocket", 1318 1318 + "bufo-tomato", 1319 1319 + "bufo-tongue", 1320 1320 + "bufo-too-many-pings", 1321 1321 + "bufo-took-too-much", 1322 1322 + "bufo-tooth", 1323 1323 + "bufo-tophat", 1324 1324 + "bufo-tortoise", 1325 1325 + "bufo-torus", 1326 1326 + "bufo-trailhead", 1327 1327 + "bufo-train", 1328 1328 + "bufo-transfixed", 1329 1329 + "bufo-transmutes-reality", 1330 1330 + "bufo-trash-can", 1331 1331 + "bufo-travels", 1332 1332 + "bufo-tries-some-yummy-yummy-crossplane", 1333 1333 + "bufo-tries-to-fight-you-but-his-arms-are-too-short-so-count-yourself-lucky", 1334 1334 + "bufo-tries-to-hug-you-back-but-his-arms-are-too-short", 1335 1335 + "bufo-tries-to-hug-you-but-his-arms-are-too-short", 1336 1336 + "bufo-triple-vaccinated", 1337 1337 + "bufo-tripping", 1338 1338 + "bufo-trying-to-relax-while-procrastinating-but-its-not-working", 1339 1339 + "bufo-turns-the-tables", 1340 1340 + "bufo-tux", 1341 1341 + "bufo-typing", 1342 1342 + "bufo-u-dead", 1343 1343 + "bufo-ufo", 1344 1344 + "bufo-ugh", 1345 1345 + "bufo-uh-okay-i-guess-so", 1346 1346 + "bufo-uhhh", 1347 1347 + "bufo-underpaid-postage-at-usps-and-now-they're-coming-after-him-for-the-money-he-owes", 1348 1348 + "bufo-unicorn", 1349 1349 + "bufo-universe", 1350 1350 + "bufo-unlocked-transdimensional-travel-while-in-the-void", 1351 1351 + "bufo-uno", 1352 1352 + "bufo-upvote", 1353 1353 + "bufo-uses-100-percent-of-his-brain", 1354 1354 + "bufo-uwu", 1355 1355 + "bufo-vaccinated", 1356 1356 + "bufo-vaccinates-you", 1357 1357 + "bufo-vampire", 1358 1358 + "bufo-venom", 1359 1359 + "bufo-ventilator", 1360 1360 + "bufo-very-angry", 1361 1361 + "bufo-vibe", 1362 1362 + "bufo-vibe-dance", 1363 1363 + "bufo-vomit", 1364 1364 + "bufo-voted", 1365 1365 + "bufo-waddle", 1366 1366 + "bufo-waiting-for-aws-to-deep-archive-our-data", 1367 1367 + "bufo-waiting-for-azure", 1368 1368 + "bufo-waits-in-queue", 1369 1369 + "bufo-waldo", 1370 1370 + "bufo-walk-away", 1371 1371 + "bufo-wallop", 1372 1372 + "bufo-wants-a-refund", 1373 1373 + "bufo-wants-to-have-a-calm-and-civilized-conversation-with-you", 1374 1374 + "bufo-wants-to-know-your-spaghetti-policy-at-the-movies", 1375 1375 + "bufo-wants-to-return-his-vacuum-that-he-bought-at-costco-four-years-ago-for-a-full-refund", 1376 1376 + "bufo-wants-you-to-buy-his-crypto", 1377 1377 + "bufo-wards-off-the-evil-spirits", 1378 1378 + "bufo-warhol", 1379 1379 + "bufo-was-eavesdropping-and-got-offended-by-your-convo-but-now-has-to-pretend-he-didnt-hear-you", 1380 1380 + "bufo-was-in-paris", 1381 1381 + "bufo-wat", 1382 1382 + "bufo-watches-from-a-distance", 1383 1383 + "bufo-watches-the-rain", 1384 1384 + "bufo-watching-the-clock", 1385 1385 + "bufo-watermelon", 1386 1386 + "bufo-wave", 1387 1387 + "bufo-waves-hello-from-the-void", 1388 1388 + "bufo-wears-a-paper-crown", 1389 1389 + "bufo-wears-the-cone-of-shame", 1390 1390 + "bufo-wedding", 1391 1391 + "bufo-welcome", 1392 1392 + "bufo-welp", 1393 1393 + "bufo-whack", 1394 1394 + "bufo-what-are-you-doing-with-that", 1395 1395 + "bufo-what-did-you-just-say", 1396 1396 + "bufo-what-have-i-done", 1397 1397 + "bufo-what-have-you-done", 1398 1398 + "bufo-what-if", 1399 1399 + "bufo-whatever", 1400 1400 + "bufo-whew", 1401 1401 + "bufo-whisky", 1402 1402 + "bufo-who-me", 1403 1403 + "bufo-wholesome", 1404 1404 + "bufo-why-must-it-all-be-this-way", 1405 1405 + "bufo-why-must-it-be-this-way", 1406 1406 + "bufo-wicked", 1407 1407 + "bufo-wide", 1408 1408 + "bufo-wider-01", 1409 1409 + "bufo-wider-02", 1410 1410 + "bufo-wider-03", 1411 1411 + "bufo-wider-04", 1412 1412 + "bufo-wields-mjolnir", 1413 1413 + "bufo-wields-the-hylian-shield", 1414 1414 + "bufo-will-miss-you", 1415 1415 + "bufo-will-never-walk-cornelia-street-again", 1416 1416 + "bufo-will-not-be-going-to-space-today", 1417 1417 + "bufo-wine", 1418 1418 + "bufo-wink", 1419 1419 + "bufo-wishes-you-a-happy-valentines-day", 1420 1420 + "bufo-with-a-drive-by-hot-take", 1421 1421 + "bufo-with-a-fresh-do", 1422 1422 + "bufo-with-a-pearl-earring", 1423 1423 + "bufo-wizard", 1424 1424 + "bufo-wizard-magic-charge", 1425 1425 + "bufo-wonders-if-deliciousness-of-this-cheese-is-worth-the-pain-his-lactose-intolerance-will-cause", 1426 1426 + "bufo-workin-up-a-sweat-after-eating-a-wendys-double-loaded-double-baked-baked-potato-during-summer", 1427 1427 + "bufo-worldstar", 1428 1428 + "bufo-worried", 1429 1429 + "bufo-worry", 1430 1430 + "bufo-worry-coffee", 1431 1431 + "bufo-would-like-a-bite-of-your-cookie", 1432 1432 + "bufo-writes-a-doc", 1433 1433 + "bufo-wtf", 1434 1434 + "bufo-wut", 1435 1435 + "bufo-yah", 1436 1436 + "bufo-yay", 1437 1437 + "bufo-yay-awkward-eyes", 1438 1438 + "bufo-yay-confetti", 1439 1439 + "bufo-yay-judge", 1440 1440 + "bufo-yayy", 1441 1441 + "bufo-yeehaw", 1442 1442 + "bufo-yells-at-old-bufo", 1443 1443 + "bufo-yes", 1444 1444 + "bufo-yismail", 1445 1445 + "bufo-you-sure-about-that", 1446 1446 + "bufo-yugioh", 1447 1447 + "bufo-yummy", 1448 1448 + "bufo-zoom", 1449 1449 + "bufo-zoom-right", 1450 1450 + "bufo's-a-gamer-girl-but-specifically-nyt-games", 1451 1451 + "bufo+1", 1452 1452 + "bufobot", 1453 1453 + "bufochu", 1454 1454 + "bufocopter", 1455 1455 + "bufoda", 1456 1456 + "bufodile", 1457 1457 + "bufofoop", 1458 1458 + "bufoheimer", 1459 1459 + "bufohub", 1460 1460 + "bufolatro", 1461 1461 + "bufoling", 1462 1462 + "bufolo", 1463 1463 + "bufolta", 1464 1464 + "bufonana", 1465 1465 + "bufone", 1466 1466 + "bufonomical", 1467 1467 + "bufopilot", 1468 1468 + "bufopoof", 1469 1469 + "buforang", 1470 1470 + "buforce-be-with-you", 1471 1471 + "buforead", 1472 1472 + "buforever", 1473 1473 + "bufos-got-your-back", 1474 1474 + "bufos-in-love", 1475 1475 + "bufos-jumping-on-the-bed", 1476 1476 + "bufos-lips-are-sealed", 1477 1477 + "bufovacado", 1478 1478 + "bufowhirl", 1479 1479 + "bufrogu", 1480 1480 + "but-wait-theres-bufo", 1481 1481 + "child-bufo-only-has-deku-sticks-to-save-hyrule", 1482 1482 + "chonky-bufo-wants-to-be-held", 1483 1483 + "christmas-bufo-on-a-goose", 1484 1484 + "circle-of-bufo", 1485 1485 + "confused-math-bufo", 1486 1486 + "constipated-bufo-is-trying-his-hardest", 1487 1487 + "copper-bufo", 1488 1488 + "corrupted-bufo", 1489 1489 + "count-bufo", 1490 1490 + "daily-dose-of-bufo-vitamins", 1491 1491 + "dalmatian-bufo", 1492 1492 + "death-by-a-thousand-bufo-stabs", 1493 1493 + "doctor-bufo", 1494 1494 + "dont-make-bufo-tap-the-sign", 1495 1495 + "double-bufo-sideeye", 1496 1496 + "egg-bufo", 1497 1497 + "eggplant-bufo", 1498 1498 + "et-tu-bufo", 1499 1499 + "everybody-loves-bufo", 1500 1500 + "existential-bufo", 1501 1501 + "feelsgoodbufo", 1502 1502 + "fix-it-bufo", 1503 1503 + "friendly-neighborhood-bufo", 1504 1504 + "future-bufos", 1505 1505 + "get-in-lets-bufo", 1506 1506 + "get-out-of-bufos-swamp", 1507 1507 + "ghost-bufo-of-future-past-is-disappointed-in-your-lack-of-foresight", 1508 1508 + "gold-bufo", 1509 1509 + "good-news-bufo-offers-suppository", 1510 1510 + "google-sheet-bufo", 1511 1511 + "great-white-bufo", 1512 1512 + "happy-bufo-brings-you-a-deescalation-coffee", 1513 1513 + "happy-bufo-brings-you-a-deescalation-tea", 1514 1514 + "heavy-is-the-bufo-that-wears-the-crown", 1515 1515 + "holiday-bufo-offers-you-a-candy-cane", 1516 1516 + "house-of-bufo", 1517 1517 + "i-dont-trust-bufo", 1518 1518 + "i-heart-bufo", 1519 1519 + "i-think-you-should-leave-with-bufo", 1520 1520 + "if-bufo-fits-bufo-sits", 1521 1521 + "interdimensional-bufo-rests-atop-the-terrarium-of-existence", 1522 1522 + "it-takes-a-bufo-to-know-a-bufo", 1523 1523 + "its-been-such-a-long-day-that-bufo-doesnt-really-care-anymore", 1524 1524 + "just-a-bunch-of-bufos", 1525 1525 + "just-hear-bufo-out-for-a-sec", 1526 1526 + "kermit-the-bufo", 1527 1527 + "king-bufo", 1528 1528 + "kirbufo", 1529 1529 + "le-bufo", 1530 1530 + "live-laugh-bufo", 1531 1531 + "loch-ness-bufo", 1532 1532 + "looks-good-to-bufo", 1533 1533 + "low-fidelity-bufo-cant-believe-youve-done-this", 1534 1534 + "low-fidelity-bufo-concerned", 1535 1535 + "low-fidelity-bufo-excited", 1536 1536 + "low-fidelity-bufo-gets-whiplash", 1537 1537 + "m-bufo", 1538 1538 + "maam-this-is-a-bufo", 1539 1539 + "many-bufos", 1540 1540 + "maybe-a-bufo-bigfoot", 1541 1541 + "mega-bufo", 1542 1542 + "mrs-bufo", 1543 1543 + "my-name-is-buford-and-i-am-bufo's-father", 1544 1544 + "nobufo", 1545 1545 + "not-bufo", 1546 1546 + "nothing-inauthentic-bout-this-bufo-yeah-hes-the-real-thing-baby", 1547 1547 + "old-bufo-yells-at-cloud", 1548 1548 + "old-bufo-yells-at-hubble", 1549 1549 + "old-man-yells-at-bufo", 1550 1550 + "old-man-yells-at-old-bufo", 1551 1551 + "one-of-101-bufos", 1552 1552 + "our-bufo-is-in-another-castle", 1553 1553 + "paper-bufo", 1554 1554 + "party-bufo", 1555 1555 + "pixel-bufo", 1556 1556 + "planet-bufo", 1557 1557 + "please-converse-using-only-bufo", 1558 1558 + "poison-dart-bufo", 1559 1559 + "pour-one-out-for-bufo", 1560 1560 + "press-x-to-bufo", 1561 1561 + "princebufo", 1562 1562 + "proud-bufo-is-excited", 1563 1563 + "radioactive-bufo", 1564 1564 + "sad-bufo", 1565 1565 + "safe-driver-bufo", 1566 1566 + "se%C3%B1or-bufo", 1567 1567 + "sen%CC%83or-bufo", 1568 1568 + "shiny-bufo", 1569 1569 + "shut-up-and-take-my-bufo", 1570 1570 + "silver-bufo", 1571 1571 + "sir-bufo-esquire", 1572 1572 + "sir-this-is-a-bufo", 1573 1573 + "sleepy-bufo", 1574 1574 + "smol-bufo-feels-blessed", 1575 1575 + "smol-bufo-has-a-smol-pull-request-that-needs-reviews-and-he-promises-it-will-only-take-a-minute", 1576 1576 + "so-bufoful", 1577 1577 + "spider-bufo", 1578 1578 + "spotify-wrapped-reminded-bufo-his-listening-patterns-are-a-little-unhinged", 1579 1579 + "super-bufo", 1580 1580 + "super-bufo-bros", 1581 1581 + "tabufo", 1582 1582 + "teamwork-makes-the-bufo-work", 1583 1583 + "ted-bufo", 1584 1584 + "the_bufo_formerly_know_as_froge", 1585 1585 + "the-bufo-nightmare-before-christmas", 1586 1586 + "the-bufo-we-deserve", 1587 1587 + "the-bufos-new-groove", 1588 1588 + "the-creation-of-bufo", 1589 1589 + "the-more-you-bufo", 1590 1590 + "the-pinkest-bufo-there-ever-was", 1591 1591 + "theres-a-bufo-for-that", 1592 1592 + "this-8-dollar-starbucks-drink-isnt-helping-bufo-feel-any-better", 1593 1593 + "this-is-bufo", 1594 1594 + "this-will-be-bufos-little-secret", 1595 1595 + "triumphant-bufo", 1596 1596 + "tsa-bufo-gropes-you", 1597 1597 + "two-bufos-beefin", 1598 1598 + "up-and-to-the-bufo", 1599 1599 + "vin-bufo", 1600 1600 + "vintage-bufo", 1601 1601 + "whatever-youre-doing-its-attracting-the-bufos", 1602 1602 + "when-bufo-falls-in-love", 1603 1603 + "whenlifegetsatbufo", 1604 1604 + "with-friends-like-this-bufo-doesnt-need-enemies", 1605 1605 + "wreck-it-bufo", 1606 1606 + "wrong-frog", 1607 1607 + "yay-bufo-1", 1608 1608 + "yay-bufo-2", 1609 1609 + "yay-bufo-3", 1610 1610 + "yay-bufo-4", 1611 1611 + "you-have-awoken-the-bufo", 1612 1612 + "you-have-exquisite-taste-in-bufo", 1613 1613 + "you-left-your-typewriter-at-bufos-apartment" 1614 1614 + ]

+8

site/favicon.svg

reviewed

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"> 2 2 + <!-- Outer ring --> 3 3 + <circle cx="16" cy="16" r="14" fill="none" stroke="#4a9eff" stroke-width="2"/> 4 4 + <!-- Inner status dot --> 5 5 + <circle cx="16" cy="16" r="8" fill="#4a9eff"/> 6 6 + <!-- Small highlight to give it depth --> 7 7 + <circle cx="18" cy="14" r="3" fill="#6bb2ff" opacity="0.7"/> 8 8 + </svg>

+49

site/index.html

reviewed

··· 1 1 + <!DOCTYPE html> 2 2 + <html lang="en"> 3 3 + <head> 4 4 + <meta charset="utf-8"> 5 5 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 6 + <title>status</title> 7 7 + <link rel="icon" type="image/svg+xml" href="/favicon.svg"> 8 8 + <link rel="stylesheet" href="/styles.css"> 9 9 + <script src="https://cdn.jsdelivr.net/gh/bigmoves/quickslice@v0.17.3/quickslice-client-js/dist/quickslice-client.min.js"></script> 10 10 + </head> 11 11 + <body> 12 12 + <div id="app"> 13 13 + <header> 14 14 + <h1 id="page-title">status</h1> 15 15 + <nav> 16 16 + <a href="/" id="nav-home" class="nav-btn" aria-label="home" title="home"> 17 17 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 18 18 + <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path> 19 19 + <polyline points="9 22 9 12 15 12 15 22"></polyline> 20 20 + </svg> 21 21 + </a> 22 22 + <a href="/feed" id="nav-feed" class="nav-btn" aria-label="global feed" title="global feed"> 23 23 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 24 24 + <circle cx="12" cy="12" r="10"></circle> 25 25 + <line x1="2" y1="12" x2="22" y2="12"></line> 26 26 + <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path> 27 27 + </svg> 28 28 + </a> 29 29 + <button id="settings-btn" class="nav-btn hidden" aria-label="settings" title="settings"> 30 30 + <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> 31 31 + <circle cx="12" cy="12" r="3"></circle> 32 32 + <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> 33 33 + </svg> 34 34 + </button> 35 35 + <button id="theme-toggle" aria-label="toggle theme"> 36 36 + <span class="sun">☀</span> 37 37 + <span class="moon">☾</span> 38 38 + </button> 39 39 + </nav> 40 40 + </header> 41 41 + 42 42 + <main id="main-content"> 43 43 + <div class="center">loading...</div> 44 44 + </main> 45 45 + </div> 46 46 + 47 47 + <script src="/app.js"></script> 48 48 + </body> 49 49 + </html>

+791

site/styles.css

reviewed

··· 1 1 + :root { 2 2 + --bg: #0a0a0a; 3 3 + --bg-card: #1a1a1a; 4 4 + --text: #ffffff; 5 5 + --text-secondary: #888; 6 6 + --accent: #4a9eff; 7 7 + --border: #2a2a2a; 8 8 + --radius: 12px; 9 9 + --font-family: ui-monospace, "SF Mono", Monaco, monospace; 10 10 + } 11 11 + 12 12 + [data-theme="light"] { 13 13 + --bg: #ffffff; 14 14 + --bg-card: #f5f5f5; 15 15 + --text: #1a1a1a; 16 16 + --text-secondary: #666; 17 17 + --border: #e0e0e0; 18 18 + } 19 19 + 20 20 + * { 21 21 + margin: 0; 22 22 + padding: 0; 23 23 + box-sizing: border-box; 24 24 + } 25 25 + 26 26 + /* Theme-aware scrollbars */ 27 27 + ::-webkit-scrollbar { 28 28 + width: 8px; 29 29 + height: 8px; 30 30 + } 31 31 + 32 32 + ::-webkit-scrollbar-track { 33 33 + background: var(--bg); 34 34 + } 35 35 + 36 36 + ::-webkit-scrollbar-thumb { 37 37 + background: var(--border); 38 38 + border-radius: 4px; 39 39 + } 40 40 + 41 41 + ::-webkit-scrollbar-thumb:hover { 42 42 + background: var(--text-secondary); 43 43 + } 44 44 + 45 45 + /* Firefox */ 46 46 + * { 47 47 + scrollbar-width: thin; 48 48 + scrollbar-color: var(--border) var(--bg); 49 49 + } 50 50 + 51 51 + body { 52 52 + font-family: var(--font-family); 53 53 + background: var(--bg); 54 54 + color: var(--text); 55 55 + line-height: 1.6; 56 56 + min-height: 100vh; 57 57 + } 58 58 + 59 59 + #app { 60 60 + max-width: 600px; 61 61 + margin: 0 auto; 62 62 + padding: 2rem 1rem; 63 63 + } 64 64 + 65 65 + header { 66 66 + display: flex; 67 67 + justify-content: space-between; 68 68 + align-items: center; 69 69 + margin-bottom: 2rem; 70 70 + padding-bottom: 1rem; 71 71 + border-bottom: 1px solid var(--border); 72 72 + } 73 73 + 74 74 + header h1 { 75 75 + font-size: 1.5rem; 76 76 + font-weight: 600; 77 77 + } 78 78 + 79 79 + nav { 80 80 + display: flex; 81 81 + gap: 1rem; 82 82 + align-items: center; 83 83 + } 84 84 + 85 85 + nav a { 86 86 + color: var(--text-secondary); 87 87 + text-decoration: none; 88 88 + } 89 89 + 90 90 + nav a:hover { 91 91 + color: var(--accent); 92 92 + } 93 93 + 94 94 + .nav-btn { 95 95 + display: flex; 96 96 + align-items: center; 97 97 + justify-content: center; 98 98 + padding: 0.5rem; 99 99 + border-radius: 8px; 100 100 + transition: background 0.15s, color 0.15s; 101 101 + color: var(--text-secondary); 102 102 + background: none; 103 103 + border: none; 104 104 + cursor: pointer; 105 105 + } 106 106 + 107 107 + .nav-btn:hover { 108 108 + background: var(--bg-card); 109 109 + color: var(--accent); 110 110 + } 111 111 + 112 112 + .nav-btn.active { 113 113 + color: var(--accent); 114 114 + } 115 115 + 116 116 + .nav-btn svg { 117 117 + display: block; 118 118 + } 119 119 + 120 120 + #theme-toggle { 121 121 + background: none; 122 122 + border: 1px solid var(--border); 123 123 + border-radius: 8px; 124 124 + padding: 0.5rem; 125 125 + cursor: pointer; 126 126 + font-size: 1rem; 127 127 + } 128 128 + 129 129 + #theme-toggle .sun { display: none; } 130 130 + #theme-toggle .moon { display: inline; color: var(--text); } 131 131 + [data-theme="light"] #theme-toggle .sun { display: inline; color: var(--text); } 132 132 + [data-theme="light"] #theme-toggle .moon { display: none; } 133 133 + 134 134 + .hidden { display: none !important; } 135 135 + .center { text-align: center; padding: 2rem; } 136 136 + 137 137 + /* Login form */ 138 138 + #login-form { 139 139 + display: flex; 140 140 + gap: 0.5rem; 141 141 + margin-top: 1rem; 142 142 + justify-content: center; 143 143 + } 144 144 + 145 145 + #login-form input { 146 146 + padding: 0.75rem 1rem; 147 147 + border: 1px solid var(--border); 148 148 + border-radius: var(--radius); 149 149 + background: var(--bg-card); 150 150 + color: var(--text); 151 151 + font-family: inherit; 152 152 + font-size: 1rem; 153 153 + width: 200px; 154 154 + } 155 155 + 156 156 + #login-form button, button[type="submit"] { 157 157 + padding: 0.75rem 1.5rem; 158 158 + background: var(--accent); 159 159 + color: white; 160 160 + border: none; 161 161 + border-radius: var(--radius); 162 162 + cursor: pointer; 163 163 + font-family: inherit; 164 164 + font-size: 1rem; 165 165 + } 166 166 + 167 167 + #login-form button:hover, button[type="submit"]:hover { 168 168 + opacity: 0.9; 169 169 + } 170 170 + 171 171 + /* Profile card */ 172 172 + .profile-card { 173 173 + background: var(--bg-card); 174 174 + border: 1px solid var(--border); 175 175 + border-radius: var(--radius); 176 176 + padding: 2rem; 177 177 + margin-bottom: 1.5rem; 178 178 + } 179 179 + 180 180 + .current-status { 181 181 + display: flex; 182 182 + flex-direction: column; 183 183 + align-items: center; 184 184 + gap: 1rem; 185 185 + text-align: center; 186 186 + } 187 187 + 188 188 + .big-emoji { 189 189 + font-size: 4rem; 190 190 + line-height: 1; 191 191 + } 192 192 + 193 193 + .big-emoji img { 194 194 + width: 4rem; 195 195 + height: 4rem; 196 196 + object-fit: contain; 197 197 + } 198 198 + 199 199 + .status-info { 200 200 + display: flex; 201 201 + flex-direction: column; 202 202 + gap: 0.25rem; 203 203 + } 204 204 + 205 205 + #current-text { 206 206 + font-size: 1.25rem; 207 207 + } 208 208 + 209 209 + .meta { 210 210 + color: var(--text-secondary); 211 211 + font-size: 0.875rem; 212 212 + } 213 213 + 214 214 + /* Status form */ 215 215 + .status-form { 216 216 + background: var(--bg-card); 217 217 + border: 1px solid var(--border); 218 218 + border-radius: var(--radius); 219 219 + padding: 1rem; 220 220 + margin-bottom: 1.5rem; 221 221 + } 222 222 + 223 223 + .emoji-input-row { 224 224 + display: flex; 225 225 + gap: 0.5rem; 226 226 + margin-bottom: 0.75rem; 227 227 + } 228 228 + 229 229 + .emoji-input-row input { 230 230 + flex: 1; 231 231 + padding: 0.75rem; 232 232 + border: 1px solid var(--border); 233 233 + border-radius: 8px; 234 234 + background: var(--bg); 235 235 + color: var(--text); 236 236 + font-family: inherit; 237 237 + font-size: 1rem; 238 238 + } 239 239 + 240 240 + #emoji-input { 241 241 + max-width: 150px; 242 242 + } 243 243 + 244 244 + .form-actions { 245 245 + display: flex; 246 246 + gap: 0.5rem; 247 247 + justify-content: flex-end; 248 248 + } 249 249 + 250 250 + .form-actions select { 251 251 + padding: 0.75rem; 252 252 + border: 1px solid var(--border); 253 253 + border-radius: 8px; 254 254 + background: var(--bg); 255 255 + color: var(--text); 256 256 + font-family: inherit; 257 257 + } 258 258 + 259 259 + .custom-datetime { 260 260 + padding: 0.75rem; 261 261 + border: 1px solid var(--border); 262 262 + border-radius: 8px; 263 263 + background: var(--bg); 264 264 + color: var(--text); 265 265 + font-family: inherit; 266 266 + } 267 267 + 268 268 + /* History */ 269 269 + .history { 270 270 + margin-bottom: 2rem; 271 271 + } 272 272 + 273 273 + .history h2 { 274 274 + font-size: 0.875rem; 275 275 + text-transform: uppercase; 276 276 + letter-spacing: 0.05em; 277 277 + color: var(--text-secondary); 278 278 + margin-bottom: 1rem; 279 279 + } 280 280 + 281 281 + #history-list { 282 282 + display: flex; 283 283 + flex-direction: column; 284 284 + gap: 0.75rem; 285 285 + } 286 286 + 287 287 + /* Feed list */ 288 288 + .feed-list { 289 289 + display: flex; 290 290 + flex-direction: column; 291 291 + gap: 1rem; 292 292 + } 293 293 + 294 294 + /* Status item (used in both history and feed) */ 295 295 + .status-item { 296 296 + display: flex; 297 297 + gap: 1rem; 298 298 + padding: 1rem; 299 299 + background: var(--bg-card); 300 300 + border: 1px solid var(--border); 301 301 + border-radius: var(--radius); 302 302 + align-items: flex-start; 303 303 + } 304 304 + 305 305 + .status-item:hover { 306 306 + border-color: var(--accent); 307 307 + } 308 308 + 309 309 + .status-item .emoji { 310 310 + font-size: 1.5rem; 311 311 + line-height: 1; 312 312 + flex-shrink: 0; 313 313 + } 314 314 + 315 315 + .status-item .emoji img { 316 316 + width: 1.5rem; 317 317 + height: 1.5rem; 318 318 + object-fit: contain; 319 319 + } 320 320 + 321 321 + .status-item .content { 322 322 + flex: 1; 323 323 + min-width: 0; 324 324 + } 325 325 + 326 326 + .status-item .author { 327 327 + color: var(--text-secondary); 328 328 + font-weight: 600; 329 329 + text-decoration: none; 330 330 + } 331 331 + 332 332 + .status-item .author:hover { 333 333 + color: var(--accent); 334 334 + } 335 335 + 336 336 + .status-item .text { 337 337 + margin-left: 0.5rem; 338 338 + } 339 339 + 340 340 + .status-item .time { 341 341 + display: block; 342 342 + font-size: 0.875rem; 343 343 + color: var(--text-secondary); 344 344 + margin-top: 0.25rem; 345 345 + } 346 346 + 347 347 + .delete-btn { 348 348 + background: transparent; 349 349 + border: none; 350 350 + color: var(--text-secondary); 351 351 + cursor: pointer; 352 352 + padding: 0.25rem; 353 353 + border-radius: 4px; 354 354 + opacity: 0; 355 355 + transition: opacity 0.15s, color 0.15s; 356 356 + flex-shrink: 0; 357 357 + } 358 358 + 359 359 + .status-item:hover .delete-btn { 360 360 + opacity: 1; 361 361 + } 362 362 + 363 363 + .delete-btn:hover { 364 364 + color: #e74c3c; 365 365 + } 366 366 + 367 367 + /* Logout */ 368 368 + .logout-btn { 369 369 + display: block; 370 370 + margin: 0 auto; 371 371 + padding: 0.5rem 1rem; 372 372 + background: none; 373 373 + border: 1px solid var(--border); 374 374 + border-radius: 8px; 375 375 + color: var(--text-secondary); 376 376 + cursor: pointer; 377 377 + font-family: inherit; 378 378 + } 379 379 + 380 380 + .logout-btn:hover { 381 381 + border-color: var(--text); 382 382 + color: var(--text); 383 383 + } 384 384 + 385 385 + /* Load more */ 386 386 + #load-more-btn { 387 387 + padding: 0.75rem 1.5rem; 388 388 + background: var(--bg-card); 389 389 + border: 1px solid var(--border); 390 390 + border-radius: var(--radius); 391 391 + color: var(--text); 392 392 + cursor: pointer; 393 393 + font-family: inherit; 394 394 + } 395 395 + 396 396 + #load-more-btn:hover { 397 397 + border-color: var(--accent); 398 398 + } 399 399 + 400 400 + /* Emoji trigger button */ 401 401 + .emoji-trigger { 402 402 + width: 3rem; 403 403 + height: 3rem; 404 404 + border: none; 405 405 + border-radius: 8px; 406 406 + background: transparent; 407 407 + cursor: pointer; 408 408 + display: flex; 409 409 + align-items: center; 410 410 + justify-content: center; 411 411 + font-size: 1.75rem; 412 412 + flex-shrink: 0; 413 413 + } 414 414 + 415 415 + .emoji-trigger:hover { 416 416 + background: var(--bg-card); 417 417 + } 418 418 + 419 419 + .emoji-trigger img { 420 420 + width: 2.5rem; 421 421 + height: 2.5rem; 422 422 + object-fit: contain; 423 423 + } 424 424 + 425 425 + /* Emoji picker overlay */ 426 426 + .emoji-picker-overlay { 427 427 + position: fixed; 428 428 + inset: 0; 429 429 + background: rgba(0, 0, 0, 0.7); 430 430 + display: flex; 431 431 + align-items: center; 432 432 + justify-content: center; 433 433 + z-index: 1000; 434 434 + padding: 1rem; 435 435 + } 436 436 + 437 437 + .emoji-picker { 438 438 + background: var(--bg-card); 439 439 + border: 1px solid var(--border); 440 440 + border-radius: var(--radius); 441 441 + width: 100%; 442 442 + max-width: 600px; 443 443 + height: 90vh; 444 444 + max-height: 700px; 445 445 + display: flex; 446 446 + flex-direction: column; 447 447 + overflow: hidden; 448 448 + } 449 449 + 450 450 + .emoji-picker-header { 451 451 + display: flex; 452 452 + justify-content: space-between; 453 453 + align-items: center; 454 454 + padding: 1rem; 455 455 + border-bottom: 1px solid var(--border); 456 456 + } 457 457 + 458 458 + .emoji-picker-header h3 { 459 459 + font-size: 1rem; 460 460 + font-weight: 600; 461 461 + } 462 462 + 463 463 + .emoji-picker-close { 464 464 + background: none; 465 465 + border: none; 466 466 + color: var(--text-secondary); 467 467 + cursor: pointer; 468 468 + font-size: 1.25rem; 469 469 + padding: 0.25rem; 470 470 + } 471 471 + 472 472 + .emoji-picker-close:hover { 473 473 + color: var(--text); 474 474 + } 475 475 + 476 476 + .emoji-search { 477 477 + margin: 0.75rem; 478 478 + padding: 0.5rem 0.75rem; 479 479 + border: 1px solid var(--border); 480 480 + border-radius: 8px; 481 481 + background: var(--bg); 482 482 + color: var(--text); 483 483 + font-family: inherit; 484 484 + font-size: 0.875rem; 485 485 + } 486 486 + 487 487 + .emoji-categories { 488 488 + display: flex; 489 489 + gap: 0.25rem; 490 490 + padding: 0 0.75rem; 491 491 + overflow-x: auto; 492 492 + flex-shrink: 0; 493 493 + } 494 494 + 495 495 + .category-btn { 496 496 + padding: 0.5rem; 497 497 + border: none; 498 498 + background: none; 499 499 + cursor: pointer; 500 500 + font-size: 1.25rem; 501 501 + border-radius: 8px; 502 502 + opacity: 0.5; 503 503 + transition: opacity 0.15s; 504 504 + } 505 505 + 506 506 + .category-btn:hover, .category-btn.active { 507 507 + opacity: 1; 508 508 + background: var(--bg); 509 509 + } 510 510 + 511 511 + .emoji-grid { 512 512 + padding: 0.75rem; 513 513 + display: grid; 514 514 + grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); 515 515 + gap: 0.25rem; 516 516 + overflow-y: auto; 517 517 + flex: 1; 518 518 + min-height: 200px; 519 519 + align-content: start; 520 520 + } 521 521 + 522 522 + .emoji-grid.bufo-grid { 523 523 + grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); 524 524 + gap: 0.5rem; 525 525 + } 526 526 + 527 527 + .emoji-btn { 528 528 + padding: 0.5rem; 529 529 + border: none; 530 530 + background: none; 531 531 + cursor: pointer; 532 532 + font-size: 1.5rem; 533 533 + border-radius: 8px; 534 534 + transition: background 0.15s; 535 535 + } 536 536 + 537 537 + .emoji-btn:hover { 538 538 + background: var(--bg); 539 539 + } 540 540 + 541 541 + /* Consistent sizing for mixed emoji/bufo grids (frequent tab) */ 542 542 + .emoji-grid .emoji-btn { 543 543 + width: 48px; 544 544 + height: 48px; 545 545 + display: flex; 546 546 + align-items: center; 547 547 + justify-content: center; 548 548 + font-size: 1.75rem; 549 549 + } 550 550 + 551 551 + .bufo-btn { 552 552 + padding: 0.25rem; 553 553 + } 554 554 + 555 555 + .bufo-grid .bufo-btn { 556 556 + width: 64px; 557 557 + height: 64px; 558 558 + } 559 559 + 560 560 + .bufo-btn img { 561 561 + width: 100%; 562 562 + height: 100%; 563 563 + max-width: 48px; 564 564 + max-height: 48px; 565 565 + object-fit: contain; 566 566 + } 567 567 + 568 568 + .loading { 569 569 + grid-column: 1 / -1; 570 570 + text-align: center; 571 571 + color: var(--text-secondary); 572 572 + padding: 2rem; 573 573 + } 574 574 + 575 575 + .no-results { 576 576 + grid-column: 1 / -1; 577 577 + text-align: center; 578 578 + color: var(--text-secondary); 579 579 + padding: 2rem; 580 580 + } 581 581 + 582 582 + /* Custom emoji input */ 583 583 + .custom-emoji-input { 584 584 + grid-column: 1 / -1; 585 585 + display: flex; 586 586 + gap: 0.5rem; 587 587 + margin-bottom: 1rem; 588 588 + } 589 589 + 590 590 + .custom-emoji-input input { 591 591 + flex: 1; 592 592 + padding: 0.5rem 0.75rem; 593 593 + border: 1px solid var(--border); 594 594 + border-radius: 8px; 595 595 + background: var(--bg); 596 596 + color: var(--text); 597 597 + font-family: inherit; 598 598 + } 599 599 + 600 600 + .custom-emoji-input button { 601 601 + padding: 0.5rem 1rem; 602 602 + background: var(--accent); 603 603 + color: white; 604 604 + border: none; 605 605 + border-radius: 8px; 606 606 + cursor: pointer; 607 607 + font-family: inherit; 608 608 + } 609 609 + 610 610 + .custom-emoji-preview { 611 611 + grid-column: 1 / -1; 612 612 + display: flex; 613 613 + justify-content: center; 614 614 + min-height: 80px; 615 615 + align-items: center; 616 616 + } 617 617 + 618 618 + .bufo-helper { 619 619 + padding: 0.75rem; 620 620 + text-align: center; 621 621 + border-top: 1px solid var(--border); 622 622 + } 623 623 + 624 624 + .bufo-helper a { 625 625 + color: var(--accent); 626 626 + font-size: 0.875rem; 627 627 + } 628 628 + 629 629 + /* Settings Modal */ 630 630 + .settings-overlay { 631 631 + position: fixed; 632 632 + top: 0; 633 633 + left: 0; 634 634 + right: 0; 635 635 + bottom: 0; 636 636 + background: rgba(0, 0, 0, 0.7); 637 637 + display: flex; 638 638 + align-items: center; 639 639 + justify-content: center; 640 640 + z-index: 1000; 641 641 + padding: 1rem; 642 642 + } 643 643 + 644 644 + .settings-modal { 645 645 + background: var(--bg-card); 646 646 + border: 1px solid var(--border); 647 647 + border-radius: var(--radius); 648 648 + width: 100%; 649 649 + max-width: 400px; 650 650 + display: flex; 651 651 + flex-direction: column; 652 652 + } 653 653 + 654 654 + .settings-header { 655 655 + display: flex; 656 656 + justify-content: space-between; 657 657 + align-items: center; 658 658 + padding: 1rem; 659 659 + border-bottom: 1px solid var(--border); 660 660 + } 661 661 + 662 662 + .settings-header h3 { 663 663 + font-size: 1.1rem; 664 664 + font-weight: 500; 665 665 + } 666 666 + 667 667 + .settings-close { 668 668 + background: none; 669 669 + border: none; 670 670 + color: var(--text-secondary); 671 671 + cursor: pointer; 672 672 + font-size: 1.25rem; 673 673 + padding: 0.25rem; 674 674 + } 675 675 + 676 676 + .settings-close:hover { 677 677 + color: var(--text); 678 678 + } 679 679 + 680 680 + .settings-content { 681 681 + padding: 1rem; 682 682 + display: flex; 683 683 + flex-direction: column; 684 684 + gap: 1.25rem; 685 685 + } 686 686 + 687 687 + .setting-group { 688 688 + display: flex; 689 689 + flex-direction: column; 690 690 + gap: 0.5rem; 691 691 + } 692 692 + 693 693 + .setting-group label { 694 694 + font-size: 0.875rem; 695 695 + color: var(--text-secondary); 696 696 + } 697 697 + 698 698 + .setting-group select { 699 699 + padding: 0.75rem; 700 700 + border: 1px solid var(--border); 701 701 + border-radius: 8px; 702 702 + background: var(--bg); 703 703 + color: var(--text); 704 704 + font-family: inherit; 705 705 + font-size: 1rem; 706 706 + } 707 707 + 708 708 + .color-picker { 709 709 + display: flex; 710 710 + flex-wrap: wrap; 711 711 + gap: 0.5rem; 712 712 + align-items: center; 713 713 + } 714 714 + 715 715 + .color-btn { 716 716 + width: 32px; 717 717 + height: 32px; 718 718 + border-radius: 50%; 719 719 + border: 2px solid transparent; 720 720 + cursor: pointer; 721 721 + transition: border-color 0.15s, transform 0.15s; 722 722 + } 723 723 + 724 724 + .color-btn:hover { 725 725 + transform: scale(1.1); 726 726 + } 727 727 + 728 728 + .color-btn.active { 729 729 + border-color: var(--text); 730 730 + } 731 731 + 732 732 + .custom-color-input { 733 733 + width: 32px; 734 734 + height: 32px; 735 735 + border: none; 736 736 + border-radius: 50%; 737 737 + cursor: pointer; 738 738 + background: none; 739 739 + padding: 0; 740 740 + } 741 741 + 742 742 + .custom-color-input::-webkit-color-swatch-wrapper { 743 743 + padding: 0; 744 744 + } 745 745 + 746 746 + .custom-color-input::-webkit-color-swatch { 747 747 + border: 2px solid var(--border); 748 748 + border-radius: 50%; 749 749 + } 750 750 + 751 751 + .settings-footer { 752 752 + padding: 1rem; 753 753 + border-top: 1px solid var(--border); 754 754 + display: flex; 755 755 + justify-content: flex-end; 756 756 + } 757 757 + 758 758 + .settings-footer .save-btn { 759 759 + padding: 0.75rem 1.5rem; 760 760 + background: var(--accent); 761 761 + color: white; 762 762 + border: none; 763 763 + border-radius: 8px; 764 764 + cursor: pointer; 765 765 + font-family: inherit; 766 766 + font-size: 1rem; 767 767 + } 768 768 + 769 769 + .settings-footer .save-btn:hover { 770 770 + opacity: 0.9; 771 771 + } 772 772 + 773 773 + .settings-footer .save-btn:disabled { 774 774 + opacity: 0.5; 775 775 + cursor: not-allowed; 776 776 + } 777 777 + 778 778 + /* Mobile */ 779 779 + @media (max-width: 480px) { 780 780 + .emoji-input-row { 781 781 + flex-direction: row; 782 782 + } 783 783 + 784 784 + .form-actions { 785 785 + flex-direction: column; 786 786 + } 787 787 + 788 788 + .emoji-grid { 789 789 + grid-template-columns: repeat(6, 1fr); 790 790 + } 791 791 + }