vote_fu 0.0.11 → 2.0.1

data/app/assets/stylesheets/vote_fu/votes.css

@@ -0,0 +1,391 @@
+/*
+ * VoteFu Default Styles
+ *
+ * These styles are optional and can be overridden in your application.
+ * Import with: @import "vote_fu/votes";
+ */
+
+/* Vote Widget Container */
+.vote-fu-widget {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.vote-fu-like-widget {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+/* Vote Buttons */
+.vote-fu-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  user-select: none;
+}
+
+.vote-fu-btn:hover:not(.vote-fu-disabled) {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.vote-fu-btn:active:not(.vote-fu-disabled) {
+  transform: scale(0.95);
+}
+
+/* Active States */
+.vote-fu-upvote.vote-fu-active {
+  color: #ff6314;
+  background-color: rgba(255, 99, 20, 0.1);
+}
+
+.vote-fu-downvote.vote-fu-active {
+  color: #7193ff;
+  background-color: rgba(113, 147, 255, 0.1);
+}
+
+.vote-fu-like.vote-fu-active {
+  color: #e0245e;
+}
+
+/* Disabled State */
+.vote-fu-btn.vote-fu-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Vote Count */
+.vote-fu-count {
+  min-width: 2rem;
+  padding: 0.25rem;
+  text-align: center;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Count Update Animation */
+.vote-fu-count-updated {
+  animation: vote-fu-pulse 0.3s ease-out;
+}
+
+@keyframes vote-fu-pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Error Display */
+.vote-fu-error {
+  padding: 0.5rem 1rem;
+  margin: 0.5rem 0;
+  color: #dc2626;
+  background-color: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+/* Container States */
+.vote-fu-widget.vote-fu-voted-up .vote-fu-count {
+  color: #ff6314;
+}
+
+.vote-fu-widget.vote-fu-voted-down .vote-fu-count {
+  color: #7193ff;
+}
+
+.vote-fu-like-widget.vote-fu-liked .vote-fu-count {
+  color: #e0245e;
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .vote-fu-btn:hover:not(.vote-fu-disabled) {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  .vote-fu-upvote.vote-fu-active {
+    background-color: rgba(255, 99, 20, 0.2);
+  }
+
+  .vote-fu-downvote.vote-fu-active {
+    background-color: rgba(113, 147, 255, 0.2);
+  }
+
+  .vote-fu-error {
+    color: #fca5a5;
+    background-color: rgba(220, 38, 38, 0.1);
+    border-color: rgba(220, 38, 38, 0.3);
+  }
+}
+
+/* Compact Variant */
+.vote-fu-widget--compact .vote-fu-btn {
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  padding: 0.125rem 0.25rem;
+  font-size: 0.875rem;
+}
+
+.vote-fu-widget--compact .vote-fu-count {
+  min-width: 1.5rem;
+  font-size: 0.875rem;
+}
+
+/* Vertical Variant (Reddit-style) */
+.vote-fu-widget--vertical {
+  flex-direction: column;
+}
+
+/* Large Variant */
+.vote-fu-widget--large .vote-fu-btn {
+  min-width: 3rem;
+  min-height: 3rem;
+  font-size: 1.5rem;
+}
+
+.vote-fu-widget--large .vote-fu-count {
+  font-size: 1.25rem;
+}
+
+/* ================================================
+   STAR RATING COMPONENT
+   ================================================ */
+
+.vote-fu-star-rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.vote-fu-stars {
+  display: inline-flex;
+  gap: 0.125rem;
+}
+
+.vote-fu-star,
+.vote-fu-star-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #d1d5db;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.vote-fu-star-btn:hover {
+  transform: scale(1.2);
+}
+
+.vote-fu-star-filled,
+.vote-fu-star-btn.vote-fu-star-filled {
+  color: #fbbf24;
+}
+
+.vote-fu-star-half {
+  color: #fbbf24;
+}
+
+.vote-fu-star-rating--readonly .vote-fu-star {
+  cursor: default;
+}
+
+.vote-fu-star-info {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.vote-fu-star-average {
+  font-weight: 600;
+}
+
+.vote-fu-star-count {
+  color: #9ca3af;
+}
+
+/* Star Rating Sizes */
+.vote-fu-star-rating--small .vote-fu-star,
+.vote-fu-star-rating--small .vote-fu-star-btn {
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.875rem;
+}
+
+.vote-fu-star-rating--large .vote-fu-star,
+.vote-fu-star-rating--large .vote-fu-star-btn {
+  width: 2rem;
+  height: 2rem;
+  font-size: 1.75rem;
+}
+
+/* ================================================
+   REACTION BAR COMPONENT
+   ================================================ */
+
+.vote-fu-reaction-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.vote-fu-reactions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.vote-fu-reaction-wrapper {
+  display: inline-flex;
+}
+
+.vote-fu-reaction-wrapper--empty {
+  display: none;
+}
+
+.vote-fu-reaction {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 9999px;
+  background: #f9fafb;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.vote-fu-reaction:hover {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.vote-fu-reaction--active {
+  background: #eff6ff;
+  border-color: #3b82f6;
+}
+
+.vote-fu-reaction--readonly {
+  cursor: default;
+}
+
+.vote-fu-reaction-emoji {
+  font-size: 1rem;
+  line-height: 1;
+}
+
+.vote-fu-reaction-count {
+  font-weight: 500;
+  color: #6b7280;
+}
+
+.vote-fu-reaction--active .vote-fu-reaction-count {
+  color: #3b82f6;
+}
+
+.vote-fu-reaction-users {
+  font-size: 0.75rem;
+  color: #9ca3af;
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vote-fu-add-reaction {
+  display: inline-flex;
+}
+
+.vote-fu-add-reaction-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px dashed #d1d5db;
+  border-radius: 9999px;
+  background: transparent;
+  color: #9ca3af;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.vote-fu-add-reaction-btn:hover {
+  border-color: #9ca3af;
+  color: #6b7280;
+  background: #f9fafb;
+}
+
+/* Dark Mode for Stars and Reactions */
+@media (prefers-color-scheme: dark) {
+  .vote-fu-star,
+  .vote-fu-star-btn {
+    color: #4b5563;
+  }
+
+  .vote-fu-star-filled,
+  .vote-fu-star-btn.vote-fu-star-filled {
+    color: #fbbf24;
+  }
+
+  .vote-fu-star-info {
+    color: #9ca3af;
+  }
+
+  .vote-fu-reaction {
+    background: #1f2937;
+    border-color: #374151;
+    color: #e5e7eb;
+  }
+
+  .vote-fu-reaction:hover {
+    background: #374151;
+    border-color: #4b5563;
+  }
+
+  .vote-fu-reaction--active {
+    background: #1e3a5f;
+    border-color: #3b82f6;
+  }
+
+  .vote-fu-reaction-count {
+    color: #9ca3af;
+  }
+
+  .vote-fu-add-reaction-btn {
+    border-color: #4b5563;
+    color: #6b7280;
+  }
+
+  .vote-fu-add-reaction-btn:hover {
+    background: #1f2937;
+    border-color: #6b7280;
+    color: #9ca3af;
+  }
+}

data/app/channels/vote_fu/application_cable/channel.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module VoteFu
+  module ApplicationCable
+    class Channel < ActionCable::Channel::Base
+    end
+  end
+end

data/app/channels/vote_fu/application_cable/connection.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module VoteFu
+  module ApplicationCable
+    class Connection < ActionCable::Connection::Base
+      identified_by :current_voter
+
+      def connect
+        self.current_voter = find_verified_voter
+      end
+
+      private
+
+      def find_verified_voter
+        # Try common authentication patterns
+        # Applications should override this in their own connection class
+        if (voter = env["warden"]&.user)
+          voter
+        elsif (voter_id = cookies.encrypted[:voter_id])
+          find_voter_by_id(voter_id)
+        elsif (voter_id = request.session[:user_id] || request.session[:voter_id])
+          find_voter_by_id(voter_id)
+        else
+          # Allow anonymous connections for public vote viewing
+          nil
+        end
+      end
+
+      def find_voter_by_id(id)
+        # Try common user model names
+        if defined?(User)
+          User.find_by(id: id)
+        elsif defined?(Account)
+          Account.find_by(id: id)
+        end
+      end
+    end
+  end
+end

data/app/channels/vote_fu/votes_channel.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module VoteFu
+  class VotesChannel < ApplicationCable::Channel
+    # Subscribe to vote updates for a specific voteable
+    #
+    # Params:
+    #   voteable_type: "Post"
+    #   voteable_id: 123
+    #   scope: "quality" (optional)
+    #
+    def subscribed
+      voteable = find_voteable
+      return reject unless voteable
+
+      stream_for voteable_stream_name
+    end
+
+    def unsubscribed
+      stop_all_streams
+    end
+
+    # Broadcast vote update to all subscribers
+    #
+    # Called from Vote model callbacks or controller
+    #
+    def self.broadcast_vote_update(voteable, vote: nil, action: :updated)
+      return unless VoteFu.configuration.turbo_broadcasts
+
+      scopes = [nil] + voteable.received_votes.distinct.pluck(:scope).compact
+
+      scopes.each do |scope|
+        stream_name = stream_name_for(voteable, scope)
+
+        ActionCable.server.broadcast(stream_name, {
+          type: "vote_update",
+          action: action,
+          voteable_type: voteable.class.name,
+          voteable_id: voteable.id,
+          scope: scope,
+          vote: vote&.as_json(only: %i[id value created_at]),
+          stats: vote_stats(voteable, scope),
+          html: render_widget_html(voteable, scope)
+        })
+      end
+    end
+
+    # Broadcast to all subscribers of a voteable (any scope)
+    def self.broadcast_to_voteable(voteable, message)
+      stream_name = "vote_fu:#{voteable.class.name}:#{voteable.id}"
+      ActionCable.server.broadcast(stream_name, message)
+    end
+
+    private
+
+    def find_voteable
+      type = params[:voteable_type]
+      id = params[:voteable_id]
+
+      return nil unless type.present? && id.present?
+
+      begin
+        type.constantize.find_by(id: id)
+      rescue NameError
+        nil
+      end
+    end
+
+    def voteable_stream_name
+      self.class.stream_name_for(
+        find_voteable,
+        params[:scope]
+      )
+    end
+
+    def self.stream_name_for(voteable, scope = nil)
+      base = "vote_fu:#{voteable.class.name}:#{voteable.id}"
+      scope.present? ? "#{base}:#{scope}" : base
+    end
+
+    def self.vote_stats(voteable, scope)
+      {
+        votes_for: voteable.votes_for(scope: scope),
+        votes_against: voteable.votes_against(scope: scope),
+        votes_total: voteable.votes_total(scope: scope),
+        votes_count: voteable.votes_count(scope: scope),
+        plusminus: voteable.plusminus(scope: scope),
+        percent_for: voteable.percent_for(scope: scope),
+        wilson_score: voteable.wilson_score(scope: scope)
+      }
+    end
+
+    def self.render_widget_html(voteable, scope)
+      # Return nil - let the client handle rendering
+      # This avoids needing a renderer context
+      nil
+    end
+  end
+end

data/app/components/vote_fu/like_button_component.rb

@@ -0,0 +1,136 @@
+# frozen_string_literal: true
+
+module VoteFu
+  class LikeButtonComponent < ViewComponent::Base
+    # Simple like button (upvote only, social media style)
+    #
+    # @param voteable [ActiveRecord::Base] The voteable record
+    # @param voter [ActiveRecord::Base, nil] The current voter
+    # @param scope [String, Symbol, nil] Vote scope
+    # @param liked_label [String] Label when liked
+    # @param unliked_label [String] Label when not liked
+    # @param show_count [Boolean] Show like count
+    # @param variant [Symbol] Button style (:default, :compact, :pill)
+    def initialize(
+      voteable:,
+      voter: nil,
+      scope: nil,
+      liked_label: "♥",
+      unliked_label: "♡",
+      show_count: true,
+      variant: :default
+    )
+      @voteable = voteable
+      @voter = voter
+      @scope = scope
+      @liked_label = liked_label
+      @unliked_label = unliked_label
+      @show_count = show_count
+      @variant = variant
+    end
+
+    def call
+      tag.div(**wrapper_attributes) do
+        safe_join([
+          like_button,
+          (count_display if @show_count)
+        ].compact)
+      end
+    end
+
+    private
+
+    def wrapper_attributes
+      {
+        id: dom_id(:widget),
+        class: wrapper_classes,
+        data: stimulus_data
+      }
+    end
+
+    def wrapper_classes
+      classes = ["vote-fu-like-widget"]
+      classes << "vote-fu-like-widget--#{@variant}" unless @variant == :default
+      classes << "vote-fu-liked" if liked?
+      classes.join(" ")
+    end
+
+    def stimulus_data
+      {
+        controller: "vote-fu",
+        vote_fu_voteable_type_value: @voteable.class.name,
+        vote_fu_voteable_id_value: @voteable.id,
+        vote_fu_scope_value: @scope,
+        vote_fu_voted_value: liked?,
+        vote_fu_direction_value: liked? ? "up" : nil
+      }
+    end
+
+    def like_button
+      if @voter
+        form_with(url: toggle_path, method: :post, data: turbo_form_data) do |f|
+          safe_join([
+            f.hidden_field(:voteable_type, value: @voteable.class.name),
+            f.hidden_field(:voteable_id, value: @voteable.id),
+            f.hidden_field(:scope, value: @scope),
+            f.hidden_field(:direction, value: :up),
+            tag.button(
+              liked? ? @liked_label : @unliked_label,
+              type: :submit,
+              class: button_classes,
+              title: liked? ? "Unlike" : "Like",
+              data: { vote_fu_target: "likeBtn" }
+            )
+          ])
+        end
+      else
+        tag.span(@unliked_label, class: "vote-fu-btn vote-fu-like vote-fu-disabled")
+      end
+    end
+
+    def count_display
+      tag.span(
+        like_count,
+        id: dom_id(:count),
+        class: "vote-fu-count",
+        data: { vote_fu_target: "count" }
+      )
+    end
+
+    def button_classes
+      classes = ["vote-fu-btn", "vote-fu-like"]
+      classes << "vote-fu-active" if liked?
+      classes.join(" ")
+    end
+
+    def turbo_form_data
+      { turbo_stream: true, action: "submit->vote-fu#vote" }
+    end
+
+    def current_vote
+      return @current_vote if defined?(@current_vote)
+
+      @current_vote = @voter && @voteable.received_votes.find_by(
+        voter: @voter,
+        scope: @scope
+      )
+    end
+
+    def liked?
+      current_vote&.up?
+    end
+
+    def like_count
+      @voteable.votes_for(scope: @scope)
+    end
+
+    def toggle_path
+      VoteFu::Engine.routes.url_helpers.toggle_votes_path
+    end
+
+    def dom_id(suffix)
+      scope_part = @scope.present? ? "_#{@scope}" : ""
+      "vote_fu_#{@voteable.model_name.singular}_#{@voteable.id}#{scope_part}_#{suffix}"
+    end
+  end
+end