Merge branch 'ship-button-checks' of https://github.com/JeffreyWangDev/flavortown into ship-button-checks

Author: JeffreyWangDev

Gemfile

@@ -118,3 +118,6 @@ gem "sentry-rails"
 # for pagination
 gem "pagy", "~> 43.2"
 gem "norairrecord"
+
+gem "awesome_print"
+gem "activeinsights"

Gemfile.lock

@@ -63,6 +63,10 @@ GEM
       activestorage (>= 6.1.4)
       activesupport (>= 6.1.4)
       marcel (>= 1.0.3)
+    activeinsights (1.3.3)
+      chartkick
+      importmap-rails
+      rails (>= 7.2)
     activejob (8.1.1)
       activesupport (= 8.1.1)
       globalid (>= 0.3.6)
@@ -101,6 +105,7 @@ GEM
       fiddle
     ast (2.4.3)
     attr_required (1.0.2)
+    awesome_print (1.9.2)
     aws-eventstream (1.4.0)
     aws-partitions (1.1190.0)
     aws-sdk-core (3.239.2)
@@ -710,7 +715,9 @@ PLATFORMS
 DEPENDENCIES
   aasm
   active_storage_validations
+  activeinsights
   annotaterb
+  awesome_print
   aws-sdk-s3
   blazer
   blind_index

README.md

@@ -39,6 +39,18 @@ docker-compose run web bin/rails bundle install
 docker-compose run web bin/lint
 ```
 
+if its giving you a file not found error and you are on windows, try running these commands. They switch line endings to lf (linux) ones
+
+This will reset all your code!
+
+```
+git config --local core.autocrlf false
+git rm --cached -r .   
+git reset --hard
+```
+
+
+
 ## i hate docker
 
 weirdo, but okay, you gotta figure out how to get postgres running yourself bucko

app/assets/stylesheets/components/_kitchen_tutorial_steps.scss

@@ -1,22 +1,60 @@
 .tutorial-steps {
+  position: relative;
+  z-index: 1;
+
   &__header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-m);
     margin-bottom: var(--space-xl);
+    cursor: pointer;
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  &__toggle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.2s ease;
+    transform: rotate(-90deg);
+
+    svg {
+      width: 20px;
+      height: 20px;
+      fill: var(--color-brown-500);
+    }
+  }
+
+  &[open] > &__header &__toggle-icon {
+    transform: rotate(0deg);
+  }
+
+  &__title {
+    font-family: var(--font-family-jua);
+    font-size: var(--font-size-l);
+    color: var(--color-brown-500);
   }
 
   &__progress {
-    margin-bottom: var(--space-l);
+    display: flex;
+    align-items: center;
+    gap: var(--space-m);
+    flex: 1;
   }
 
   &__progress-text {
-    display: block;
-    margin-bottom: var(--space-s);
     font-family: var(--font-family-jua);
     font-size: var(--font-size-l);
     color: var(--color-brown-500);
+    white-space: nowrap;
   }
 
   &__progress-bar {
-    width: 100%;
+    flex: 1;
     height: 12px;
     background: var(--color-tan-300);
     border: 3px solid var(--color-brown-400);
@@ -26,7 +64,11 @@
 
   &__progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, var(--color-green-400) 0%, var(--color-green-300) 100%);
+    background: linear-gradient(
+      90deg,
+      var(--color-green-400) 0%,
+      var(--color-green-300) 100%
+    );
     transition: width 0.3s ease;
     border-radius: 999px;
   }
@@ -69,7 +111,7 @@
   }
 
   &[data-tooltip]:hover::before {
-    content: '';
+    content: "";
     position: absolute;
     bottom: 120%;
     left: 50%;

app/assets/stylesheets/components/_post.scss

@@ -54,6 +54,8 @@
   &__avatar {
     width: 48px;
     height: 48px;
+    max-width: 48px;
+    max-height: 48px;
     border-radius: 50%;
     background-color: var(--color-brown-300);
     display: grid;
@@ -83,6 +85,36 @@
     font-size: var(--font-size-l);
   }
 
+  &__duration {
+    font-size: var(--font-size-m);
+    font-weight: 600;
+    color: var(--color-bg);
+    opacity: 0.8;
+  }
+
+  &__debug {
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: var(--border-radius);
+    padding: var(--space-s);
+    font-size: var(--font-size-s);
+
+    summary {
+      cursor: pointer;
+      font-weight: 600;
+      color: var(--color-bg);
+    }
+
+    pre {
+      margin: var(--space-s) 0 0;
+      padding: var(--space-s);
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: calc(var(--border-radius) / 2);
+      overflow-x: auto;
+      font-size: var(--font-size-xs);
+      color: var(--color-tan-300);
+    }
+  }
+
   &__body {
     font-size: var(--font-size-xl);
     line-height: 1.5;

app/assets/stylesheets/pages/projects/_new.scss

@@ -62,6 +62,24 @@
     padding-right: var(--space-xxl);
     gap: var(--space-m);
   }
+
+  &__time-preview {
+    background: var(--color-green-100);
+    border: 2px solid var(--color-green-300);
+    border-radius: var(--border-radius);
+    padding: var(--space-m) var(--space-l);
+    text-align: center;
+
+    p {
+      margin: 0;
+      font-size: var(--font-size-l);
+      color: var(--color-green-600);
+    }
+
+    strong {
+      color: var(--color-green-700);
+    }
+  }
 }
 
 @media (max-width: 768px) {

app/assets/stylesheets/pages/shop/_my_orders.scss

@@ -40,11 +40,17 @@
   &__item {
     display: flex;
     flex-direction: column;
-    background: linear-gradient(135deg, var(--color-bg-2) 0%, var(--color-bg) 100%);
+    background: linear-gradient(
+      135deg,
+      var(--color-bg-2) 0%,
+      var(--color-bg) 100%
+    );
     border-radius: var(--border-radius);
     overflow: hidden;
     box-shadow: var(--shadow);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
 
     &:hover {
       transform: translateY(-2px);
@@ -164,7 +170,7 @@
     border: none;
     padding: 0;
     margin: 0;
-    
+
     &:hover {
       color: var(--color-blue-300);
       text-decoration: underline;

app/components/hackatime_project_selector_component.html.erb

@@ -4,7 +4,8 @@
   data-attribute="<%= attribute %>"
   data-project-icon-path="<%= project_icon_path %>"
   data-close-icon-path="<%= close_icon_path %>"
-  data-hackatime-project-selector-initial-projects-value="<%= initial_projects.to_json %>">
+  data-hackatime-project-selector-initial-projects-value="<%= initial_projects.to_json %>"
+  data-hackatime-project-selector-project-times-value="<%= project_times.to_json %>">
   <label class="hackatime-project-selector__label"><%= label %></label>
 
   <div class="hackatime-project-selector__control">

app/components/hackatime_project_selector_component.rb

@@ -3,15 +3,16 @@
 class HackatimeProjectSelectorComponent < ViewComponent::Base
   COLORS = %i[red blue green yellow].freeze
 
-  attr_reader :label, :color, :subtitle, :form, :attribute, :projects
+  attr_reader :label, :color, :subtitle, :form, :attribute, :projects, :project_times
 
-  def initialize(label:, form:, attribute:, color: :blue, subtitle: nil, projects: [])
+  def initialize(label:, form:, attribute:, color: :blue, subtitle: nil, projects: [], project_times: {})
     @label = label
     @form = form
     @attribute = attribute
     @color = normalize_color(color)
     @subtitle = subtitle
     @projects = projects
+    @project_times = project_times
   end
 
   def input_classes

app/components/kitchen_tutorial_steps_component.rb

@@ -4,14 +4,17 @@ class KitchenTutorialStepsComponent < ApplicationComponent
   def initialize(tutorial_steps:, completed_steps:, current_user:)
     @tutorial_steps = tutorial_steps
     @completed_steps = completed_steps
-    @current_user = current_user
   end
 
   def view_template
-    div(class: "tutorial-steps") do
-      div(class: "tutorial-steps__header") do
+    details(class: "tutorial-steps", open: !all_completed?) do
+      summary(class: "tutorial-steps__header") do
+        span(class: "tutorial-steps__toggle-icon") do
+          raw helpers.inline_svg_tag("icons/chevron-down.svg", alt: "")
+        end
+        span(class: "tutorial-steps__title") { "Tutorial" }
         div(class: "tutorial-steps__progress") do
-          span(class: "tutorial-steps__progress-text") { "#{completed_count} of #{total_count} completed" }
+          span(class: "tutorial-steps__progress-text") { "#{completed_count} of #{total_count}" }
           div(class: "tutorial-steps__progress-bar") do
             div(class: "tutorial-steps__progress-fill", style: "width: #{progress_percentage}%")
           end
@@ -26,6 +29,8 @@ def view_template
     end
   end
 
+  def all_completed? = completed_count == total_count
+
   private
 
   def render_step_card(step)
@@ -60,9 +65,16 @@ def render_cta(step, completed, deps_ok, verb)
       return unless link
 
       div(class: "state-card__cta") do
-        button_to link, method: verb, form_class: "btn btn--borderless btn--bg_yellow", data: { turbo: false } do
-          span { "Start" }
-          raw helpers.inline_svg_tag("icons/right-arrow.svg")
+        if verb == :get
+          a(href: link, class: "btn btn--borderless btn--bg_yellow", data: { turbo: false }) do
+            span { "Start" }
+            raw helpers.inline_svg_tag("icons/right-arrow.svg")
+          end
+        else
+          button_to link, method: verb, form_class: "btn btn--borderless btn--bg_yellow", data: { turbo: false } do
+            span { "Start" }
+            raw helpers.inline_svg_tag("icons/right-arrow.svg")
+          end
         end
       end
     elsif !deps_ok