Update profile saving#143
Conversation
WalkthroughThis pull request introduces a conditional update in the Changes
Sequence Diagram(s)sequenceDiagram
participant Parent as Parent Component
participant Avatar as Avatar.svelte Component
Parent->>Avatar: Update picture prop
Avatar->>Avatar: Trigger $effect block
Avatar->>Avatar: Check if picture exists
Avatar->>Avatar: Update avatarImage
Avatar-->>Parent: Re-render with updated image
sequenceDiagram
participant User as End User
participant Profile as Profile Settings Page
participant Textarea as Textarea Component
User->>Textarea: Inputs text
Textarea->>Textarea: Update value via two-way binding
Textarea->>Profile: Emit input event and update state
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/lib/components/ui/textarea/textarea.svelte (1)
18-38: Good implementation of customizable textarea with comprehensive event handling.The textarea includes all necessary event handlers and utilizes the
cnutility for class merging. The implementation allows for complete customization via both classes and additional attributes through$$restProps.Consider enhancing the component with these accessibility and UX features:
<script lang="ts"> import { cn } from "$lib/utils.js"; import type { HTMLTextareaAttributes } from "svelte/elements"; import type { TextareaEvents } from "./index.js"; type $$Props = HTMLTextareaAttributes; type $$Events = TextareaEvents; let className: $$Props["class"] = undefined; export let value: $$Props["value"] = undefined; export { className as class }; // Workaround for https://github.com/sveltejs/svelte/issues/9305 // Fixed in Svelte 5, but not backported to 4.x. export let readonly: $$Props["readonly"] = undefined; +// Optional accessibility and UX enhancements +export let maxLength: number | undefined = undefined; +export let showCharCount = false; +export let autoGrow = false; + +// For auto-growing functionality +let textarea: HTMLTextAreaElement; +let height = 'auto'; + +function adjustHeight() { + if (autoGrow && textarea) { + textarea.style.height = 'auto'; + textarea.style.height = `${textarea.scrollHeight}px`; + } +} + +$: if (value && autoGrow) adjustHeight(); </script> <textarea class={cn( "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[3rem] w-full border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-input focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className )} bind:value {readonly} + bind:this={textarea} + style={autoGrow ? `height: ${height}` : undefined} + {maxLength} on:blur on:change on:click on:focus on:keydown on:keypress on:keyup on:mouseover on:mouseenter on:mouseleave on:paste on:input {...$$restProps} ></textarea> +{#if showCharCount && maxLength} +<div class="text-xs text-muted-foreground text-right mt-1"> + {value ? value.length : 0}/{maxLength} +</div> +{/if}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/lib/components/Avatar.svelte(1 hunks)src/lib/components/ui/textarea/index.ts(1 hunks)src/lib/components/ui/textarea/textarea.svelte(1 hunks)src/routes/(app)/settings/profile/+page.svelte(3 hunks)src/routes/(app)/settings/wallet/+page.svelte(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: build-android-split
- GitHub Check: build-android-universal
- GitHub Check: build-macos (x86_64, x86_64-apple-darwin)
- GitHub Check: build-macos (aarch64, aarch64-apple-darwin)
- GitHub Check: build-linux
- GitHub Check: rust-checks
🔇 Additional comments (9)
src/routes/(app)/settings/wallet/+page.svelte (1)
103-103: Good accessibility improvement with small viewport height unitChanging from
vhtosvhunit improves layout consistency across different mobile browsers where UI elements like address bars can appear/disappear, affecting the available viewport height.src/lib/components/Avatar.svelte (1)
27-30: Great addition for reactive avatar updatesThis change improves component reactivity by ensuring the avatar image updates whenever the
pictureprop changes, not just on initial render or when thepubkeychanges.src/lib/components/ui/textarea/index.ts (1)
1-28: Well-structured component with proper TypeScript typingThe new Textarea component implementation follows best practices with:
- Comprehensive event typing for strong type safety
- Clear export pattern consistent with other UI components
- Proper extension of native HTML events
This will provide excellent developer experience and type checking when using the component.
src/routes/(app)/settings/profile/+page.svelte (5)
7-7: Good import of the new Textarea componentProperly imports the new UI component that will replace the standard HTML textarea.
68-68: Consistent layout approach with wallet pageUsing
h-[calc(100svh-7rem)]matches the same pattern used in the wallet settings page, providing consistent behavior across different settings screens.
129-133: Good implementation of the new Textarea componentThe custom Textarea component replaces the standard HTML textarea element, maintaining the same binding approach while gaining the benefits of the styled component.
116-149: Improved form layout with consistent paddingThe restructured form with consistent
px-4padding for each input section improves the visual consistency and spacing of the form elements.
150-151: Well-positioned save button with responsive behaviorThe save button positioning provides a good mobile experience (fixed to bottom) while maintaining proper layout on desktop (relative positioning with appropriate margins).
src/lib/components/ui/textarea/textarea.svelte (1)
1-16: Well-structured TypeScript definitions and props setup.The component has solid TypeScript typing with proper inheritance from HTML textarea attributes. The workaround for the Svelte 4.x issue with readonly attributes is well-documented and future-proofed.
1 participant
Fixes #141
Summary by CodeRabbit
New Features
Style