fix: initial stepper fixes #1240
Conversation
WalkthroughThis pull request refines several Vue components. In Steps.vue, the rendering logic for step items is restructured to use the index for determining separator visibility and button styling based on state. In index.vue, the Changes
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (4)
🪧 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: 2
🧹 Nitpick comments (2)
web/components/Activation/Steps.vue (2)
85-100: Improved button styling based on step stateThe button component with conditional styling based on step state provides better visual feedback. However, the complex conditional class binding could be simplified for better maintainability.
Consider extracting the conditional class logic to a computed property:
<script setup lang="ts"> // ... existing code ... + const getButtonClass = (state: StepState) => { + if (state === 'inactive') return ''; + const baseClass = 'ring-2 ring-offset-2 ring-offset-background *:cursor-default'; + return baseClass + (state === 'completed' ? ' ring-success' : ' ring-primary'); + } </script> <template> <!-- ... --> <Button :variant="state === 'completed' ? 'primary' : state === 'active' ? 'primary' : 'outline'" size="md" - :class="`z-10 rounded-full ${ - state !== 'inactive' - ? 'ring-2 ring-offset-2 ring-offset-background *:cursor-default ' + - (state === 'completed' ? 'ring-success' : 'ring-primary') - : '' - }`" + :class="`z-10 rounded-full ${getButtonClass(state)}`" :disabled="state === 'inactive'" >
114-114: Improved separator rendering logicUsing the index to determine whether to show the separator is more explicit and reliable than previous methods. However, the styling is hardcoded.
Consider making the separator styling more configurable through props or CSS variables:
- <StepperSeparator v-if="index < steps.length - 1" class="w-[50px] bg-black h-[30px]" /> + <StepperSeparator v-if="index < steps.length - 1" class="separator-line" />And then define the separator-line class in your CSS with variables that can be easily changed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)
📒 Files selected for processing (4)
web/components/Activation/Steps.vue(1 hunks)web/pages/index.vue(0 hunks)web/pages/webComponents.vue(1 hunks)web/pages/welcome.vue(1 hunks)
💤 Files with no reviewable changes (1)
- web/pages/index.vue
🧰 Additional context used
🧠 Learnings (1)
web/pages/welcome.vue (1)
Learnt from: pujitm
PR: unraid/api#1143
File: web/components/DummyServerSwitcher.vue:16-19
Timestamp: 2025-03-15T20:46:54.933Z
Learning: The DummyServerSwitcher component in web/components/DummyServerSwitcher.vue is a development tool for testing different server states, and includes intentional debug elements to aid development.
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (3)
web/pages/webComponents.vue (1)
60-62: Clean addition of the welcome modal componentThe addition follows the established pattern in the file: horizontal rule, component header, and component placement. This is consistent with the organization of other components in this file.
web/components/Activation/Steps.vue (2)
78-78: Good addition of index to the v-for directiveAdding the index parameter enables more precise control over the rendering of elements, particularly for the separator conditional logic.
102-113: Well-structured step content organizationMoving the title and description within the StepperTrigger improves the organization and visual hierarchy of each step.
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
🤖 I have created a release *beep* *boop* --- ## [4.3.1](v4.3.0...v4.3.1) (2025-03-18) ### Bug Fixes * stepper fixes ([#1240](#1240)) ([e7f6f5e](e7f6f5e)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Refactor** - Streamlined the activation steps display with improved conditional rendering and enhanced interactive button styling. - **New Features** - Introduced a new welcome page featuring a dummy server switcher and refreshed welcome modal. - Expanded the activation interface with a new activation code section for clearer navigation. - **Chores** - Removed the welcome modal from the home page to simplify the layout. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Zack Spear <hi@zackspear.com>
🤖 I have created a release *beep* *boop* --- ## [4.3.1](v4.3.0...v4.3.1) (2025-03-18) ### Bug Fixes * stepper fixes ([#1240](#1240)) ([e7f6f5e](e7f6f5e)) --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Summary by CodeRabbit