feat(web): activation modal steps, updated copy

[zackspear]

Summary by CodeRabbit

Release Notes

• New Features

  • Added a new stepper component for guiding users through activation steps.
  • Enhanced license activation modal with clearer instructions.
  • Introduced new components for stepper functionality, including Stepper, StepperItem, StepperIndicator, StepperDescription, StepperSeparator, StepperTitle, and StepperTrigger.

• Improvements

  • Updated localization strings for better clarity.
  • Refined deployment scripts for web components.
  • Improved modal layout and content organization.
  • Added new entries to the deployment script for updating authorization requests.

• Translations

  • Added new translation entries for license activation and device configuration.
  • Updated existing translation strings for Unraid OS licensing process.

[coderabbitai]

Walkthrough

Arrr! This pull request brings forth a bounty of updates to the Unraid web interface, settin' sail on the seas of activation and licensing! Key changes include modifications to the deployment scripts, translations for clarity, and UI components to guide landlubbers through the license activation process. A new stepper component has been crafted to navigate the waters of user experience, along with updates to modal layouts and the addition of a function to automate updates to the auth-request.php file on the server.

Changes

File	Change Summary
plugin/scripts/deploy-dev.sh	Updated deployment command from npm run deploy-wc:dev to npm run deploy-to-unraid:dev; added update_auth_request function for updating JavaScript paths in auth-request.php.
plugin/source/dynamix.unraid.net/.../translations.php	Added new translation entries for license activation and device configuration; modified existing entries for clarity.
web/_data/serverState.ts	Removed commented-out imports and code; initialized state variables.
web/components/Activation/Modal.vue	Updated modal text for license activation; restructured modal layout.
web/components/Activation/Steps.vue	New component for rendering activation steps with a stepper.
web/components/WelcomeModal.ce.vue	Added ActivationSteps component to modal.
web/components/shadcn/stepper/*	New stepper-related components for creating a multi-step UI.
web/locales/en_US.json	Added new localization strings for activation process; updated existing strings for consistency.

Suggested Reviewers

• pujitm
• mdatelle

Poem

🏴‍☠️ Ahoy, mateys, the license be near,
With stepper steps, we conquer our fear!
From modals to Unraid.net, we shall glide,
With CodeRabbit's magic, we take the tide!
License unlocked, adventure awaits! 🔑✨

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 4

🔭 Outside diff range comments (1)

web/components/Activation/Modal.vue (1)

Line range hint 63-77: Fix event listener cleanup to prevent memory leak.

The current implementation doesn't properly remove the event listener because it uses an empty callback function.

+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === keySequence[sequenceIndex]) {
+    sequenceIndex++;
+  } else {
+    sequenceIndex = 0;
+  }
+
+  if (sequenceIndex === keySequence.length) {
+    activationCodeStore.setActivationModalHidden(true);
+    window.location.href = "/Tools/Registration";
+  }
+};

 onMounted(() => {
-  window.addEventListener("keydown", (event) => {
-    if (event.key === keySequence[sequenceIndex]) {
-      sequenceIndex++;
-    } else {
-      sequenceIndex = 0;
-    }
-
-    if (sequenceIndex === keySequence.length) {
-      activationCodeStore.setActivationModalHidden(true);
-      window.location.href = "/Tools/Registration";
-    }
-  });
+  window.addEventListener("keydown", handleKeydown);
 });

 onUnmounted(() => {
-  window.removeEventListener("keydown", () => {});
+  window.removeEventListener("keydown", handleKeydown);
 });

🧹 Nitpick comments (12)

web/scripts/deploy-dev.sh (1)

44-90: Consider performance optimizations.

The current implementation uses multiple file operations and complex awk commands which might be slow for large files.

Consider these optimizations:

1. Use a single awk command instead of two
2. Use in-memory operations instead of temporary files
3. Cache the file list to avoid repeated directory scans

Would you like me to provide an optimized implementation?

web/components/shadcn/stepper/StepperTitle.vue (1)

8-8: Consider using more specific type for class prop.

Instead of using the broad HTMLAttributes['class'] type, consider using a more specific type like string since the cn utility expects string values.

-const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<StepperTitleProps & { class?: string }>()

web/components/shadcn/stepper/StepperTrigger.vue (1)

23-23: Consider making spacing utilities configurable.

The hardcoded p-2 and gap-2 utilities might not suit all use cases. Consider making these configurable through props or CSS variables for better flexibility.

-      cn('p-2 flex flex-col items-center text-center gap-2 rounded-md', props.class)
+      cn('flex flex-col items-center text-center rounded-md', 
+         'p-[var(--stepper-trigger-padding,0.5rem)]',
+         'gap-[var(--stepper-trigger-gap,0.5rem)]',
+         props.class)

web/components/shadcn/stepper/StepperDescription.vue (1)

23-23: Consider making text size configurable.

The hardcoded text-xs utility might be too small in some contexts. Consider making it configurable through CSS variables or a size prop.

-    :class="cn('text-xs text-muted-foreground', props.class)"
+    :class="cn('text-[var(--stepper-description-size,0.75rem)] text-muted-foreground', props.class)"

web/components/shadcn/stepper/StepperItem.vue (2)

8-8: Consider adding aria-label prop for better accessibility.

The component could benefit from an optional aria-label prop to improve accessibility for screen readers.

-const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<StepperItemProps & {
+  class?: HTMLAttributes['class']
+  'aria-label'?: string
+}>()

---

24-24: Consider making the gap utility configurable.

The gap-2 utility is hardcoded, but different implementations might need different spacing.

-      cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)
+      cn('flex items-center group data-[disabled]:pointer-events-none', 
+         props.gap ? `gap-${props.gap}` : 'gap-2',
+         props.class)

web/components/shadcn/stepper/Stepper.vue (1)

8-9: Consider adding orientation support.

The stepper could benefit from supporting both horizontal and vertical layouts.

-const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<StepperRootProps & {
+  class?: HTMLAttributes['class']
+  orientation?: 'horizontal' | 'vertical'
+}>()

Then update the template to use the orientation:

-    :class="cn('flex gap-2', props.class)"
+    :class="cn(
+      'flex gap-2',
+      props.orientation === 'vertical' ? 'flex-col' : 'flex-row',
+      props.class
+    )"

web/components/shadcn/stepper/StepperSeparator.vue (1)

23-31: Add transition effects for state changes.

The separator could benefit from smooth transitions between states.

       cn(
-        'bg-muted',
+        'bg-muted transition-all duration-200',
         // Disabled
         'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-75',
         // Completed
         'group-data-[state=completed]:bg-accent-foreground',
         props.class
       )

web/components/shadcn/stepper/StepperIndicator.vue (2)

23-33: Enhance visual feedback with transitions and size customization.

The indicator could benefit from:

1. Smooth transitions between states
2. Customizable size

       cn(
-        'inline-flex items-center justify-center rounded-full text-muted-foreground/50 w-10 h-10',
+        'inline-flex items-center justify-center rounded-full text-muted-foreground/50',
+        'transition-all duration-200',
+        props.size === 'sm' ? 'w-8 h-8' : 'w-10 h-10',
         // Disabled
         'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
         // Active
         'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
         // Completed
         'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
         props.class
       )

---

8-8: Add size customization prop.

Allow customizing the indicator size through props.

-const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<StepperIndicatorProps & {
+  class?: HTMLAttributes['class']
+  size?: 'sm' | 'md'
+}>()

web/components/Activation/Steps.vue (1)

23-54: Consider enhancing type safety for the steps array.

While the implementation is good, we can improve type safety by explicitly defining an interface for the step structure.

+interface Step {
+  step: number;
+  title: string;
+  description: string;
+  icon: {
+    inactive: Component;
+    active: Component;
+    completed: Component;
+  };
+}

-const steps = [
+const steps: readonly Step[] = [
   {
     step: 1,
     // ... rest of the steps
   }
 ] as const;

web/components/Modal.vue (1)

178-191: Consider adding ARIA attributes for the subFooter section.

While the implementation is good, consider adding appropriate ARIA attributes to the subFooter section for better accessibility.

-          <div v-if="$slots['subFooter']" class="mt-4 flex justify-center mx-auto" :class="[maxWidth]">
+          <div
+            v-if="$slots['subFooter']"
+            class="mt-4 flex justify-center mx-auto"
+            :class="[maxWidth]"
+            role="complementary"
+            aria-label="Activation progress"
+          >
             <slot name="subFooter" />
           </div>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between c58f7a7 and 391ca24.

📒 Files selected for processing (17)

• plugin/scripts/deploy-dev.sh (1 hunks)
• plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/translations.php (5 hunks)
• web/_data/serverState.ts (1 hunks)
• web/components/Activation/Modal.vue (3 hunks)
• web/components/Activation/Steps.vue (1 hunks)
• web/components/Modal.vue (4 hunks)
• web/components/WelcomeModal.ce.vue (3 hunks)
• web/components/shadcn/stepper/Stepper.vue (1 hunks)
• web/components/shadcn/stepper/StepperDescription.vue (1 hunks)
• web/components/shadcn/stepper/StepperIndicator.vue (1 hunks)
• web/components/shadcn/stepper/StepperItem.vue (1 hunks)
• web/components/shadcn/stepper/StepperSeparator.vue (1 hunks)
• web/components/shadcn/stepper/StepperTitle.vue (1 hunks)
• web/components/shadcn/stepper/StepperTrigger.vue (1 hunks)
• web/components/shadcn/stepper/index.ts (1 hunks)
• web/locales/en_US.json (7 hunks)
• web/scripts/deploy-dev.sh (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• web/_data/serverState.ts

⏰ Context from checks skipped due to timeout of 90000ms (3)

• GitHub Check: Build Web App
• GitHub Check: Build and Test API
• GitHub Check: Cloudflare Pages

🔇 Additional comments (14)

plugin/scripts/deploy-dev.sh (1)

63-63: LGTM! Command rename improves clarity.

The change from deploy-wc:dev to deploy-to-unraid:dev better describes the deployment target.

web/components/shadcn/stepper/index.ts (1)

1-7: LGTM! Well-organized barrel exports.

The exports are well-organized, following a consistent naming convention and providing a clean interface for importing stepper components.

web/components/shadcn/stepper/StepperTitle.vue (1)

20-26: Consider handling text overflow for long titles.

The whitespace-nowrap utility might cause layout issues with long titles. Consider adding text truncation or allowing text wrapping for better responsive behavior.

-    :class="cn('text-md font-semibold whitespace-nowrap', props.class)"
+    :class="cn('text-md font-semibold break-words', props.class)"

✅ Verification successful

The current text handling implementation is appropriate

The whitespace-nowrap utility is correctly used here as the component is primarily used in vertical layouts with centered text, as seen in the Activation Steps implementation. The titles are intentionally kept concise, and breaking words could disrupt the centered layout design.

🏁 Scripts executed

The following scripts were executed for the analysis:

Error: No shell scripts found

---

Script:

#!/bin/bash
# Find all files containing StepperTitle references
echo "=== StepperTitle Usage ==="
rg "StepperTitle" -l

echo -e "\n=== Stepper Component Implementation ==="
# Look for other stepper components and their text handling
fd "Stepper.*\.vue$" web/components/

echo -e "\n=== Similar Text Handling Patterns ==="
# Search for similar text handling classes in Vue components
rg "class=.*(?:whitespace-nowrap|break-words|truncate)" --type vue -A 2

Length of output: 875

---

Script:

#!/bin/bash
# Check StepperTitle usage in Steps.vue
echo "=== StepperTitle Usage in Steps.vue ==="
cat web/components/Activation/Steps.vue

echo -e "\n=== Text Handling in Stepper Components ==="
# Check text handling in other stepper components
cat web/components/shadcn/stepper/StepperDescription.vue
cat web/components/shadcn/stepper/StepperItem.vue

echo -e "\n=== Similar Text Handling Patterns ==="
# Search for similar text handling without file type restriction
rg "class=.*?(whitespace-nowrap|break-words|truncate)" -A 2

Length of output: 5600

web/components/shadcn/stepper/StepperDescription.vue (1)

8-8: Consider using more specific type for class prop.

Similar to other components, consider using a more specific type for the class prop.

-const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>()
+const props = defineProps<StepperDescriptionProps & { class?: string }>()

web/components/Activation/Steps.vue (2)

1-21: LGTM! Well-structured component setup.

The component follows Vue 3 best practices with TypeScript integration and clear type definitions.

---

68-68: Review disabled button behavior.

The StepperItem is marked as :disabled="true" but the Button has :disabled="false". This inconsistency might be confusing. Consider aligning these values or documenting the intention.

Also applies to: 84-84

web/components/Activation/Modal.vue (1)

Line range hint 22-46: LGTM! Clear messaging and improved analytics tracking.

The updated text provides better clarity about the activation process, and the added UTM parameters will help track user engagement with documentation.

web/components/WelcomeModal.ce.vue (1)

8-8: LGTM! Well-integrated activation steps.

The changes effectively integrate the new activation steps component while maintaining mobile responsiveness.

Also applies to: 32-32, 103-105

plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/translations.php (5)

83-83: Well-structured new translation entries for the activation flow!

The new entries follow the established translation pattern and provide clear, user-friendly messages for the activation process.

Also applies to: 123-124, 130-130

---

213-213: Improved clarity in license activation message!

The updated text better specifies the product ("Unraid OS License") and maintains consistent capitalization.

---

293-293: Good addition of security-focused messaging!

The new entry emphasizes the importance of device security during the setup process.

---

315-315: Clear and well-structured process description!

The text effectively breaks down the activation process into distinct steps and explains the purpose of the Unraid.net account.

---

Line range hint 374-374: Excellent explanation of password importance and usage!

The text effectively communicates the purpose and significance of the password while setting clear expectations for its use.

web/locales/en_US.json (1)

38-38: Consistent implementation of translations in JSON format!

The changes mirror those in translations.php while maintaining proper JSON structure and formatting.

Also applies to: 79-79, 180-180, 289-289, 374-374, 384-386

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/1079/dynamix.unraid.net.staging.plg

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (3)

web/components/Activation/Steps.vue (3)

19-33: Enhance type safety with more specific types.

Consider improving the type definitions for better type safety and developer experience.

+import type { Component } from 'vue'
+
 type StepState = "inactive" | "active" | "completed";
 
-defineProps<{ activeStep: number }>();
+defineProps<{ activeStep: 1 | 2 | 3 }>();
 
 interface Step {
-  step: number;
+  step: 1 | 2 | 3;
   title: string;
   description: string;
   icon: {
-    inactive: Component;
-    active: Component;
-    completed: Component;
+    [K in StepState]: Component;
   };
 };

---

34-65: Implement i18n for text content.

The steps configuration contains hardcoded English strings. Consider extracting these strings into translation files for better internationalization support.

+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
 const steps: readonly Step[] = [
   {
     step: 1,
-    title: "Create Device Password",
-    description: "Secure your device",
+    title: t('activation.steps.password.title'),
+    description: t('activation.steps.password.description'),
     // ... icon config
   },
   {
     step: 2,
-    title: "Activate License",
-    description: "Create an Unraid.net account and activate your key",
+    title: t('activation.steps.license.title'),
+    description: t('activation.steps.license.description'),
     // ... icon config
   },
   {
     step: 3,
-    title: "Unleash Your Hardware",
-    description: "Device is ready to configure",
+    title: t('activation.steps.hardware.title'),
+    description: t('activation.steps.hardware.description'),
     // ... icon config
   },
 ] as const;

---

68-114: Improve template implementation.

Several improvements could enhance the code quality:

1. Remove hardcoded disabled states:

-      :disabled="true"
+      :disabled="state === 'inactive'"

-      :disabled="false"
+      :disabled="state === 'inactive'"

2. Extract magic numbers to CSS variables:

-      class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-[1.5rem]"
+      class="absolute stepper-separator"

3. Move inline styles to CSS classes:

<style scoped>
.stepper-separator {
  left: calc(50% + 20px);
  right: calc(-50% + 10px);
  top: 1.5rem;
}
</style>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between 2888dd4 and 898b360.

📒 Files selected for processing (2)

• web/components/Activation/Modal.vue (3 hunks)
• web/components/Activation/Steps.vue (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• web/components/Activation/Modal.vue

⏰ Context from checks skipped due to timeout of 90000ms (3)

• GitHub Check: Build Web App
• GitHub Check: Build and Test API
• GitHub Check: Cloudflare Pages

🔇 Additional comments (1)

web/components/Activation/Steps.vue (1)

1-18: LGTM! Well-organized imports following best practices.

The imports are logically grouped and utilize typed components from the shadcn design system, promoting consistency and type safety.

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/1079/dynamix.unraid.net.staging.plg

[elibosley]

One issue but this looks good.

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/1079/dynamix.unraid.net.staging.plg

[coderabbitai]

Actionable comments posted: 2

♻️ Duplicate comments (2)

web/scripts/deploy-dev.sh (2)

72-85: ⚠️ Potential issue

Secure yer treasure with atomic operations!

Ye temporary file operations be risking our cargo! Let's make it ship-shape with proper atomic operations.

-      ' "\$AUTH_REQUEST_FILE" > "\${AUTH_REQUEST_FILE}.tmp"
+      ' "\$AUTH_REQUEST_FILE" > "\${AUTH_REQUEST_FILE}.tmp" || {
+        echo "Blimey! Failed to create the temporary map"
+        return 1
+      }

       # Now add new entries right after the opening bracket
       awk -v files_to_add=\"\$(printf '%s\n' \"\${FILES_TO_ADD[@]}\" | sort -u | awk '{printf \"  \\\x27%s\\\x27,\n\", \$0}')\" '
         /\\\$arrWhitelist\s*=\s*\[/ {
           print \$0
           print files_to_add
           next
         }
         { print }
-      ' "\${AUTH_REQUEST_FILE}.tmp" > "\${AUTH_REQUEST_FILE}"
+      ' "\${AUTH_REQUEST_FILE}.tmp" > "\${AUTH_REQUEST_FILE}.new" || {
+        echo "Shiver me timbers! Failed to create the new treasure map"
+        rm -f "\${AUTH_REQUEST_FILE}.tmp"
+        return 1
+      }

-      rm "\${AUTH_REQUEST_FILE}.tmp"
+      # Swap the maps atomically
+      mv "\${AUTH_REQUEST_FILE}.new" "\${AUTH_REQUEST_FILE}" || {
+        echo "Arrr! Failed to replace the old map"
+        rm -f "\${AUTH_REQUEST_FILE}.tmp" "\${AUTH_REQUEST_FILE}.new"
+        return 1
+      }
+      rm -f "\${AUTH_REQUEST_FILE}.tmp"

---

92-92: ⚠️ Potential issue

Check yer return values, ye scallywag!

Ye be ignoring the return value from update_auth_request. That's bad luck at sea!

-update_auth_request "$server_name"
+if ! update_auth_request "$server_name"; then
+  echo "Arrr! Failed to update the auth request scroll"
+  exit 1
+fi

🧹 Nitpick comments (3)

web/components/shadcn/stepper/StepperSeparator.vue (2)

19-33: Aye! The template be seaworthy, but could use some polish on the class names, me hearty!

While yer template be solid as a rock, here be some suggestions to make it shine like buried treasure:

Consider this improvement to make yer class names more semantic and comments more descriptive:

   <StepperSeparator
     v-bind="forwarded"
     :class="
       cn(
-        'bg-muted',
+        'bg-muted separator-base',
         // Disabled
-        'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-75',
+        'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-75 separator-disabled',
         // Completed
-        'group-data-[state=completed]:bg-accent-foreground',
+        'group-data-[state=completed]:bg-accent-foreground separator-completed',
         props.class
       )
     "
   />

This'll make it easier for future sailors to navigate yer code, and the semantic class names will help with maintainability!

---

1-33: Shiver me timbers! This fine component could use some documentation, cap'n!

While yer code be ship-shape, adding some documentation would help the crew understand its purpose and usage better. Consider adding:

• Component description
• Props documentation
• Usage examples

Here's a suggestion for the documentation:

+<!--
+ StepperSeparator Component
+ 
+ A visual separator component for the stepper UI that shows progress between steps.
+ 
+ @props class - Optional CSS class to apply custom styles
+ 
+ @example
+ <StepperSeparator class="custom-separator" />
+-->
 <script lang="ts" setup>

web/components/Activation/Steps.vue (1)

34-65: Aye! Let's make these steps speak in many tongues!

Ye've crafted a fine map of steps, but what about our international crew? Consider moving the text to your ship's translation chest (i18n):

const steps: readonly Step[] = [
  {
    step: 1,
-   title: "Create Device Password",
-   description: "Secure your device",
+   title: t('activation.steps.password.title'),
+   description: t('activation.steps.password.description'),
    // ... rest of the configuration
  },
  // ... other steps
]

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro (Legacy)

📥 Commits

Reviewing files that changed from the base of the PR and between c72d947 and e1e5330.

📒 Files selected for processing (17)

• plugin/scripts/deploy-dev.sh (1 hunks)
• plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/translations.php (5 hunks)
• web/_data/serverState.ts (0 hunks)
• web/components/Activation/Modal.vue (3 hunks)
• web/components/Activation/Steps.vue (1 hunks)
• web/components/Modal.vue (4 hunks)
• web/components/WelcomeModal.ce.vue (3 hunks)
• web/components/shadcn/stepper/Stepper.vue (1 hunks)
• web/components/shadcn/stepper/StepperDescription.vue (1 hunks)
• web/components/shadcn/stepper/StepperIndicator.vue (1 hunks)
• web/components/shadcn/stepper/StepperItem.vue (1 hunks)
• web/components/shadcn/stepper/StepperSeparator.vue (1 hunks)
• web/components/shadcn/stepper/StepperTitle.vue (1 hunks)
• web/components/shadcn/stepper/StepperTrigger.vue (1 hunks)
• web/components/shadcn/stepper/index.ts (1 hunks)
• web/locales/en_US.json (7 hunks)
• web/scripts/deploy-dev.sh (1 hunks)

💤 Files with no reviewable changes (1)

• web/_data/serverState.ts

🚧 Files skipped from review as they are similar to previous changes (13)

• web/components/shadcn/stepper/StepperTitle.vue
• web/components/WelcomeModal.ce.vue
• plugin/scripts/deploy-dev.sh
• web/components/shadcn/stepper/StepperDescription.vue
• web/components/shadcn/stepper/StepperTrigger.vue
• web/components/Modal.vue
• web/components/shadcn/stepper/StepperItem.vue
• web/locales/en_US.json
• web/components/shadcn/stepper/Stepper.vue
• web/components/shadcn/stepper/StepperIndicator.vue
• web/components/Activation/Modal.vue
• web/components/shadcn/stepper/index.ts
• plugin/source/dynamix.unraid.net/usr/local/emhttp/plugins/dynamix.my.servers/include/translations.php

🧰 Additional context used

📓 Learnings (1)

web/scripts/deploy-dev.sh (1)

Learnt from: zackspear
PR: unraid/api#1079
File: web/scripts/deploy-dev.sh:51-54
Timestamp: 2025-01-29T00:59:26.633Z
Learning: For the Unraid web components deployment process, JS file validation isn't required in auth-request.php updates since the files come from the controlled build pipeline where we are the source.

⏰ Context from checks skipped due to timeout of 90000ms (3)

• GitHub Check: Build Web App
• GitHub Check: Build and Test API
• GitHub Check: Cloudflare Pages

🔇 Additional comments (6)

web/components/shadcn/stepper/StepperSeparator.vue (1)

1-17: Arrr! A fine piece of TypeScript craftsmanship ye got here, matey!

Ye've done a proper job with the script setup, using TypeScript and the Composition API like a well-seasoned Vue sailor! The prop forwarding be clean as a whistle, and the types be as tight as a ship's hull!

web/scripts/deploy-dev.sh (2)

51-54: Aye, the code looks shipshape!

Based on the retrieved learning from Cap'n @zackspear, we be the source of these JS files, so no extra validation be needed here.

---

43-49: ⚠️ Potential issue

Arrr! Secure yer SSH connection, matey!

Ye be sailing dangerous waters without proper error handling for yer SSH connection. A failed connection could leave ye stranded!

-update_auth_request() {
+update_auth_request() {
   local server_name="$1"
+  local ssh_output
   # SSH into server and update auth-request.php
-  ssh "root@${server_name}" "
+  if ! ssh -q "root@${server_name}" "
     AUTH_REQUEST_FILE='/usr/local/emhttp/auth-request.php'
     WEB_COMPS_DIR='/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components/_nuxt/'
-
+  " 2>/dev/null; then
+    echo "Blimey! Failed to board ${server_name}"
+    return 1
+  fi

Likely invalid or redundant comment.

web/components/Activation/Steps.vue (3)

1-18: Arr! A fine collection of imports ye've gathered here!

Ye've done a proper job organizing yer imports, separating the UI treasures from the icon booty. The dual variants of icons will serve well in different states of our journey!

---

68-114: Aye! A well-crafted piece of UI machinery ye've built here!

The template structure be clean and organized, with proper state handling and smooth transitions between steps. The use of dynamic components for icons be particularly clever!

---

78-80: Arrr! Ye've got some conflicting signals in yer navigation!

Why set :disabled="true" on the StepperItem when ye want the crew to see their progress? This might make the steps less interactive than intended!

Consider if ye really need this restriction, or if it should be conditional:

-:disabled="true"
+:disabled="state === 'inactive'"

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/1079/dynamix.unraid.net.staging.plg

[github-actions]

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL: https://preview.dl.unraid.net/unraid-api/pr/1079/dynamix.unraid.net.staging.plg