Fix styles and rec title

.browserslistrc

@@ -1 +0,0 @@
-> 1%, not ie <= 12

.dockerignore

@@ -5,3 +5,5 @@ tmp/*.*
 public/assets
 public/packs
 node_modules/
+.yarn
+.pnp.*

.foreman

@@ -0,0 +1 @@
+port: 3000

.gitignore

@@ -9,7 +9,7 @@
 
 # Ignore the default SQLite database.
 /db/*.sqlite3
-/db/*.sqlite3-journal
+/db/*.sqlite3*
 
 # Ignore all logfiles and tempfiles.
 /log/*
@@ -27,3 +27,13 @@
 /node_modules
 yarn-debug.log*
 .yarn-integrity
+/dist
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity
+.yarn
+.pnp.*

.ruby-version

@@ -1 +1 @@
-3.0.1
+3.3.5

Dockerfile

@@ -1,17 +1,13 @@
-FROM ruby:3.0.1-buster
+FROM ruby:3.3.5-bookworm
 
 RUN curl -sL https://deb.nodesource.com/setup_lts.x | bash - && \
-    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
-    echo "deb https://dl.yarnpkg.com/debian/ stable main" > /etc/apt/sources.list.d/yarn.list && \
     apt-get update && apt-get dist-upgrade -y && \
     apt-get install -y \
         nodejs \
-        yarn \
         nginx && \
     apt-get autoremove -y && apt-get clean && rm -rf /var/lib/apt/lists/*
 
-RUN gem update --system && gem install bundler
-
+RUN gem update --no-document --system && gem install bundler --no-document && corepack enable
 
 # Install nginx config files
 RUN rm /etc/nginx/sites-enabled/default
@@ -32,12 +28,12 @@ COPY Gemfile* ./
 RUN bundle install
 
 COPY package.json yarn.lock ./
-RUN yarn install --production=true --frozen-lockfile
+RUN yarn install --immutable
 
 COPY . .
 
 # Compile assets
-RUN env RAILS_ENV=production bundle exec rails webpacker:clobber webpacker:compile
+RUN env RAILS_ENV=production bundle exec rails shakapacker:clobber shakapacker:compile
 
 ENV PORT=80
 EXPOSE 80

Gemfile

@@ -1,30 +1,30 @@
 source 'https://rubygems.org'
 
-gem 'rails', '6.1.3.2'
-gem 'pg', '~> 1.2.3'
+gem 'rails', '7.2.1'
+gem 'pg', '~> 1.5.8'
 
-gem 'webpacker', '5.3.0'
+gem 'shakapacker', '8.0.2'
 gem 'bootsnap', '>= 1.1.0', require: false
 
-gem 'oj', '~> 3.11.5'
+gem 'oj', '~> 3.16.6'
+gem 'csv', '~> 3.3'
 
-gem 'kaminari', '~> 1.2.1'
-gem 'unitwise', '~> 2.2.0'
-gem 'redcarpet', '~> 3.5.1'
+gem 'kaminari', '~> 1.2.2'
+gem 'unitwise', '~> 2.3.0'
+gem 'redcarpet', '~> 3.6.0'
 
-gem 'dalli', '~> 2.7.11'
-gem 'puma', '~> 5.3'
-gem 'bcrypt', '~> 3.1.16'
+gem 'dalli', '~> 3.2.8'
+gem 'puma', '~> 6.4'
+gem 'bcrypt', '~> 3.1.18'
 gem 'tzinfo-data'
 
 group :development, :test do
-  gem 'sqlite3', '~> 1.4.2'
+  gem 'sqlite3', '~> 2.1.0'
 
-  gem 'guard', '~> 2.16.2'
+  gem 'guard', '~> 2.18.0'
   gem 'guard-rspec', require: false
-  gem 'rspec-rails', '~> 5.0.1'
+  gem 'rspec-rails', '~> 7.0.1'
   gem 'rails-controller-testing'
-  gem 'factory_bot_rails', '~> 6.2.0'
-  gem 'database_cleaner', '~> 2.0.1'
+  gem 'factory_bot_rails', '~> 6.4.3'
+  gem 'database_cleaner', '~> 2.0.2'
 end
-

Gemfile.lock

@@ -1,97 +1,114 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.1.3.2)
-      actionpack (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
+    actioncable (7.2.1)
+      actionpack (= 7.2.1)
+      activesupport (= 7.2.1)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.1.3.2)
-      actionpack (= 6.1.3.2)
-      activejob (= 6.1.3.2)
-      activerecord (= 6.1.3.2)
-      activestorage (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
-      mail (>= 2.7.1)
-    actionmailer (6.1.3.2)
-      actionpack (= 6.1.3.2)
-      actionview (= 6.1.3.2)
-      activejob (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
-      mail (~> 2.5, >= 2.5.4)
-      rails-dom-testing (~> 2.0)
-    actionpack (6.1.3.2)
-      actionview (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
-      rack (~> 2.0, >= 2.0.9)
-      rack-test (>= 0.6.3)
-      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.1.3.2)
-      actionpack (= 6.1.3.2)
-      activerecord (= 6.1.3.2)
-      activestorage (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
+      zeitwerk (~> 2.6)
+    actionmailbox (7.2.1)
+      actionpack (= 7.2.1)
+      activejob (= 7.2.1)
+      activerecord (= 7.2.1)
+      activestorage (= 7.2.1)
+      activesupport (= 7.2.1)
+      mail (>= 2.8.0)
+    actionmailer (7.2.1)
+      actionpack (= 7.2.1)
+      actionview (= 7.2.1)
+      activejob (= 7.2.1)
+      activesupport (= 7.2.1)
+      mail (>= 2.8.0)
+      rails-dom-testing (~> 2.2)
+    actionpack (7.2.1)
+      actionview (= 7.2.1)
+      activesupport (= 7.2.1)
       nokogiri (>= 1.8.5)
-    actionview (6.1.3.2)
-      activesupport (= 6.1.3.2)
+      racc
+      rack (>= 2.2.4, < 3.2)
+      rack-session (>= 1.0.1)
+      rack-test (>= 0.6.3)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+      useragent (~> 0.16)
+    actiontext (7.2.1)
+      actionpack (= 7.2.1)
+      activerecord (= 7.2.1)
+      activestorage (= 7.2.1)
+      activesupport (= 7.2.1)
+      globalid (>= 0.6.0)
+      nokogiri (>= 1.8.5)
+    actionview (7.2.1)
+      activesupport (= 7.2.1)
       builder (~> 3.1)
-      erubi (~> 1.4)
-      rails-dom-testing (~> 2.0)
-      rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.1.3.2)
-      activesupport (= 6.1.3.2)
+      erubi (~> 1.11)
+      rails-dom-testing (~> 2.2)
+      rails-html-sanitizer (~> 1.6)
+    activejob (7.2.1)
+      activesupport (= 7.2.1)
       globalid (>= 0.3.6)
-    activemodel (6.1.3.2)
-      activesupport (= 6.1.3.2)
-    activerecord (6.1.3.2)
-      activemodel (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
-    activestorage (6.1.3.2)
-      actionpack (= 6.1.3.2)
-      activejob (= 6.1.3.2)
-      activerecord (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
-      marcel (~> 1.0.0)
-      mini_mime (~> 1.0.2)
-    activesupport (6.1.3.2)
-      concurrent-ruby (~> 1.0, >= 1.0.2)
+    activemodel (7.2.1)
+      activesupport (= 7.2.1)
+    activerecord (7.2.1)
+      activemodel (= 7.2.1)
+      activesupport (= 7.2.1)
+      timeout (>= 0.4.0)
+    activestorage (7.2.1)
+      actionpack (= 7.2.1)
+      activejob (= 7.2.1)
+      activerecord (= 7.2.1)
+      activesupport (= 7.2.1)
+      marcel (~> 1.0)
+    activesupport (7.2.1)
+      base64
+      bigdecimal
+      concurrent-ruby (~> 1.0, >= 1.3.1)
+      connection_pool (>= 2.2.5)
+      drb
       i18n (>= 1.6, < 2)
+      logger (>= 1.4.2)
       minitest (>= 5.1)
-      tzinfo (~> 2.0)
-      zeitwerk (~> 2.3)
-    bcrypt (3.1.16)
-    bootsnap (1.7.5)
-      msgpack (~> 1.0)
-    builder (3.2.4)
+      securerandom (>= 0.3)
+      tzinfo (~> 2.0, >= 2.0.5)
+    base64 (0.2.0)
+    bcrypt (3.1.20)
+    bigdecimal (3.1.8)
+    bootsnap (1.18.4)
+      msgpack (~> 1.2)
+    builder (3.3.0)
     coderay (1.1.3)
-    concurrent-ruby (1.1.8)
+    concurrent-ruby (1.3.4)
+    connection_pool (2.4.1)
     crass (1.0.6)
-    dalli (2.7.11)
-    database_cleaner (2.0.1)
-      database_cleaner-active_record (~> 2.0.0)
-    database_cleaner-active_record (2.0.1)
+    csv (3.3.0)
+    dalli (3.2.8)
+    database_cleaner (2.0.2)
+      database_cleaner-active_record (>= 2, < 3)
+    database_cleaner-active_record (2.2.0)
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    diff-lcs (1.4.4)
-    erubi (1.10.0)
-    factory_bot (6.2.0)
+    date (3.3.4)
+    diff-lcs (1.5.1)
+    drb (2.2.1)
+    erubi (1.13.0)
+    factory_bot (6.5.0)
       activesupport (>= 5.0.0)
-    factory_bot_rails (6.2.0)
-      factory_bot (~> 6.2.0)
+    factory_bot_rails (6.4.3)
+      factory_bot (~> 6.4)
       railties (>= 5.0.0)
-    ffi (1.15.0)
-    formatador (0.2.5)
-    globalid (0.4.2)
-      activesupport (>= 4.2.0)
-    guard (2.16.2)
+    ffi (1.17.0)
+    formatador (1.1.0)
+    globalid (1.2.1)
+      activesupport (>= 6.1)
+    guard (2.18.1)
       formatador (>= 0.2.4)
       listen (>= 2.7, < 4.0)
       lumberjack (>= 1.0.12, < 2.0)
       nenv (~> 0.1)
       notiffany (~> 0.0)
-      pry (>= 0.9.12)
+      pry (>= 0.13.0)
       shellany (~> 0.0)
       thor (>= 0.18.1)
     guard-compat (1.2.1)
@@ -99,171 +116,207 @@ GEM
       guard (~> 2.1)
       guard-compat (~> 1.1)
       rspec (>= 2.99.0, < 4.0)
-    i18n (1.8.10)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    kaminari (1.2.1)
+    io-console (0.7.2)
+    irb (1.14.1)
+      rdoc (>= 4.0.0)
+      reline (>= 0.4.2)
+    kaminari (1.2.2)
       activesupport (>= 4.1.0)
-      kaminari-actionview (= 1.2.1)
-      kaminari-activerecord (= 1.2.1)
-      kaminari-core (= 1.2.1)
-    kaminari-actionview (1.2.1)
+      kaminari-actionview (= 1.2.2)
+      kaminari-activerecord (= 1.2.2)
+      kaminari-core (= 1.2.2)
+    kaminari-actionview (1.2.2)
       actionview
-      kaminari-core (= 1.2.1)
-    kaminari-activerecord (1.2.1)
+      kaminari-core (= 1.2.2)
+    kaminari-activerecord (1.2.2)
       activerecord
-      kaminari-core (= 1.2.1)
-    kaminari-core (1.2.1)
+      kaminari-core (= 1.2.2)
+    kaminari-core (1.2.2)
     liner (0.2.4)
-    listen (3.5.1)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    loofah (2.9.1)
+    logger (1.6.1)
+    loofah (2.22.0)
       crass (~> 1.0.2)
-      nokogiri (>= 1.5.9)
-    lumberjack (1.2.8)
-    mail (2.7.1)
+      nokogiri (>= 1.12.0)
+    lumberjack (1.2.10)
+    mail (2.8.1)
       mini_mime (>= 0.1.1)
-    marcel (1.0.1)
+      net-imap
+      net-pop
+      net-smtp
+    marcel (1.0.4)
     memoizable (0.4.2)
       thread_safe (~> 0.3, >= 0.3.1)
-    method_source (1.0.0)
-    mini_mime (1.0.3)
-    mini_portile2 (2.5.1)
-    minitest (5.14.4)
-    msgpack (1.4.2)
+    method_source (1.1.0)
+    mini_mime (1.1.5)
+    mini_portile2 (2.8.7)
+    minitest (5.25.1)
+    msgpack (1.7.2)
     nenv (0.3.0)
-    nio4r (2.5.7)
-    nokogiri (1.11.3)
-      mini_portile2 (~> 2.5.0)
+    net-imap (0.4.16)
+      date
+      net-protocol
+    net-pop (0.1.2)
+      net-protocol
+    net-protocol (0.2.2)
+      timeout
+    net-smtp (0.5.0)
+      net-protocol
+    nio4r (2.7.3)
+    nokogiri (1.16.7)
+      mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     notiffany (0.1.3)
       nenv (~> 0.1)
       shellany (~> 0.0)
-    oj (3.11.5)
-    parslet (1.8.2)
-    pg (1.2.3)
-    pry (0.14.1)
+    oj (3.16.6)
+      bigdecimal (>= 3.0)
+      ostruct (>= 0.2)
+    ostruct (0.6.0)
+    package_json (0.1.0)
+    parslet (2.0.0)
+    pg (1.5.8)
+    pry (0.14.2)
       coderay (~> 1.1)
       method_source (~> 1.0)
-    puma (5.3.0)
+    psych (5.1.2)
+      stringio
+    puma (6.4.3)
       nio4r (~> 2.0)
-    racc (1.5.2)
-    rack (2.2.3)
-    rack-proxy (0.6.5)
+    racc (1.8.1)
+    rack (3.1.7)
+    rack-proxy (0.7.7)
       rack
-    rack-test (1.1.0)
-      rack (>= 1.0, < 3)
-    rails (6.1.3.2)
-      actioncable (= 6.1.3.2)
-      actionmailbox (= 6.1.3.2)
-      actionmailer (= 6.1.3.2)
-      actionpack (= 6.1.3.2)
-      actiontext (= 6.1.3.2)
-      actionview (= 6.1.3.2)
-      activejob (= 6.1.3.2)
-      activemodel (= 6.1.3.2)
-      activerecord (= 6.1.3.2)
-      activestorage (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
+    rack-session (2.0.0)
+      rack (>= 3.0.0)
+    rack-test (2.1.0)
+      rack (>= 1.3)
+    rackup (2.1.0)
+      rack (>= 3)
+      webrick (~> 1.8)
+    rails (7.2.1)
+      actioncable (= 7.2.1)
+      actionmailbox (= 7.2.1)
+      actionmailer (= 7.2.1)
+      actionpack (= 7.2.1)
+      actiontext (= 7.2.1)
+      actionview (= 7.2.1)
+      activejob (= 7.2.1)
+      activemodel (= 7.2.1)
+      activerecord (= 7.2.1)
+      activestorage (= 7.2.1)
+      activesupport (= 7.2.1)
       bundler (>= 1.15.0)
-      railties (= 6.1.3.2)
-      sprockets-rails (>= 2.0.0)
+      railties (= 7.2.1)
     rails-controller-testing (1.0.5)
       actionpack (>= 5.0.1.rc1)
       actionview (>= 5.0.1.rc1)
       activesupport (>= 5.0.1.rc1)
-    rails-dom-testing (2.0.3)
-      activesupport (>= 4.2.0)
+    rails-dom-testing (2.2.0)
+      activesupport (>= 5.0.0)
+      minitest
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.3.0)
-      loofah (~> 2.3)
-    railties (6.1.3.2)
-      actionpack (= 6.1.3.2)
-      activesupport (= 6.1.3.2)
-      method_source
-      rake (>= 0.8.7)
-      thor (~> 1.0)
-    rake (13.0.3)
-    rb-fsevent (0.11.0)
-    rb-inotify (0.10.1)
+    rails-html-sanitizer (1.6.0)
+      loofah (~> 2.21)
+      nokogiri (~> 1.14)
+    railties (7.2.1)
+      actionpack (= 7.2.1)
+      activesupport (= 7.2.1)
+      irb (~> 1.13)
+      rackup (>= 1.0.0)
+      rake (>= 12.2)
+      thor (~> 1.0, >= 1.2.2)
+      zeitwerk (~> 2.6)
+    rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
       ffi (~> 1.0)
-    redcarpet (3.5.1)
-    rspec (3.10.0)
-      rspec-core (~> 3.10.0)
-      rspec-expectations (~> 3.10.0)
-      rspec-mocks (~> 3.10.0)
-    rspec-core (3.10.1)
-      rspec-support (~> 3.10.0)
-    rspec-expectations (3.10.1)
+    rdoc (6.7.0)
+      psych (>= 4.0.0)
+    redcarpet (3.6.0)
+    reline (0.5.10)
+      io-console (~> 0.5)
+    rspec (3.13.0)
+      rspec-core (~> 3.13.0)
+      rspec-expectations (~> 3.13.0)
+      rspec-mocks (~> 3.13.0)
+    rspec-core (3.13.1)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.3)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.10.0)
-    rspec-mocks (3.10.2)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.1)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.10.0)
-    rspec-rails (5.0.1)
-      actionpack (>= 5.2)
-      activesupport (>= 5.2)
-      railties (>= 5.2)
-      rspec-core (~> 3.10)
-      rspec-expectations (~> 3.10)
-      rspec-mocks (~> 3.10)
-      rspec-support (~> 3.10)
-    rspec-support (3.10.2)
+      rspec-support (~> 3.13.0)
+    rspec-rails (7.0.1)
+      actionpack (>= 7.0)
+      activesupport (>= 7.0)
+      railties (>= 7.0)
+      rspec-core (~> 3.13)
+      rspec-expectations (~> 3.13)
+      rspec-mocks (~> 3.13)
+      rspec-support (~> 3.13)
+    rspec-support (3.13.1)
+    securerandom (0.3.1)
     semantic_range (3.0.0)
-    shellany (0.0.1)
-    signed_multiset (0.2.1)
-    sprockets (4.0.2)
-      concurrent-ruby (~> 1.0)
-      rack (> 1, < 3)
-    sprockets-rails (3.2.2)
-      actionpack (>= 4.0)
-      activesupport (>= 4.0)
-      sprockets (>= 3.0.0)
-    sqlite3 (1.4.2)
-    thor (1.1.0)
-    thread_safe (0.3.6)
-    tzinfo (2.0.4)
-      concurrent-ruby (~> 1.0)
-    tzinfo-data (1.2021.1)
-      tzinfo (>= 1.0.0)
-    unitwise (2.2.0)
-      liner (~> 0.2)
-      memoizable (~> 0.4)
-      parslet (~> 1.5)
-      signed_multiset (~> 0.2)
-    webpacker (5.3.0)
+    shakapacker (8.0.2)
       activesupport (>= 5.2)
+      package_json
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
       semantic_range (>= 2.3.0)
-    websocket-driver (0.7.3)
+    shellany (0.0.1)
+    signed_multiset (0.2.1)
+    sqlite3 (2.1.0)
+      mini_portile2 (~> 2.8.0)
+    stringio (3.1.1)
+    thor (1.3.2)
+    thread_safe (0.3.6)
+    timeout (0.4.1)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    tzinfo-data (1.2024.2)
+      tzinfo (>= 1.0.0)
+    unitwise (2.3.0)
+      liner (~> 0.2)
+      memoizable (~> 0.4)
+      parslet (~> 2.0)
+      signed_multiset (~> 0.2)
+    useragent (0.16.10)
+    webrick (1.8.2)
+    websocket-driver (0.7.6)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
-    zeitwerk (2.4.2)
+    zeitwerk (2.6.18)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bcrypt (~> 3.1.16)
+  bcrypt (~> 3.1.18)
   bootsnap (>= 1.1.0)
-  dalli (~> 2.7.11)
-  database_cleaner (~> 2.0.1)
-  factory_bot_rails (~> 6.2.0)
-  guard (~> 2.16.2)
+  csv (~> 3.3)
+  dalli (~> 3.2.8)
+  database_cleaner (~> 2.0.2)
+  factory_bot_rails (~> 6.4.3)
+  guard (~> 2.18.0)
   guard-rspec
-  kaminari (~> 1.2.1)
-  oj (~> 3.11.5)
-  pg (~> 1.2.3)
-  puma (~> 5.3)
-  rails (= 6.1.3.2)
+  kaminari (~> 1.2.2)
+  oj (~> 3.16.6)
+  pg (~> 1.5.8)
+  puma (~> 6.4)
+  rails (= 7.2.1)
   rails-controller-testing
-  redcarpet (~> 3.5.1)
-  rspec-rails (~> 5.0.1)
-  sqlite3 (~> 1.4.2)
+  redcarpet (~> 3.6.0)
+  rspec-rails (~> 7.0.1)
+  shakapacker (= 8.0.2)
+  sqlite3 (~> 2.1.0)
   tzinfo-data
-  unitwise (~> 2.2.0)
-  webpacker (= 5.3.0)
+  unitwise (~> 2.3.0)
 
 BUNDLED WITH
-   2.2.17
+   2.5.20

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020 Dan Elbert
+Copyright (c) 2024 Dan Elbert
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Procfile

@@ -1,2 +1,2 @@
 rails: bundle exec rails s -b 0.0.0.0
-webpacker: bin/webpack-dev-server
+shakapacker: bin/shakapacker-dev-server

README.md

@@ -5,7 +5,7 @@ A self hosted cookbook
 
 Parsley is released under the MIT License.
 
-Copyright (C) 2020  Dan Elbert
+Copyright (C) 2024  Dan Elbert
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/channels/application_cable/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

app/channels/application_cable/connection.rb

@@ -0,0 +1,18 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+    identified_by :current_user
+
+    def connect
+      self.current_user = find_verified_user
+    end
+
+    private
+    def find_verified_user
+      if verified_user = User.find_by(id: cookies.encrypted['_parsley_session']['user_id'])
+        verified_user
+      else
+        reject_unauthorized_connection
+      end
+    end
+  end
+end

app/channels/task_channel.rb

@@ -0,0 +1,12 @@
+class TaskChannel < ApplicationCable::Channel
+
+  def subscribed
+    stream_for current_user.id
+  end
+
+  def self.update_task_list(task_list)
+    task_list.reload
+    self.broadcast_to task_list.user_id, { task_list: TaskListSerializer.for(task_list), action: 'updated' }
+  end
+
+end

app/controllers/application_controller.rb

@@ -4,7 +4,7 @@ class ApplicationController < ActionController::Base
   protect_from_forgery with: :exception
 
   def verified_request?
-    if request.content_type == "application/json"
+    if request.media_type == "application/json"
       true
     else
       super()
@@ -42,9 +42,19 @@ class ApplicationController < ActionController::Base
     if owner
       yield if block_given?
     else
+      respond_to do |format|
+        format.html do
           flash[:warning] = "Operation Not Permitted"
           redirect_to root_path
         end
+
+        format.json do
+          render json: { error: "Operation Not Permitted" }, status: current_user.nil? ? :unauthorized : :forbidden
+        end
+      end
+
+
+    end
   end
 
   def current_user

app/controllers/calculator_controller.rb

@@ -34,8 +34,10 @@ class CalculatorController < ApplicationController
 
       begin
         input_unit = UnitConversion.parse(input)
+        input_unit.unitwise
       rescue UnitConversion::UnparseableUnitError => e
-        data[:errors][:input] << 'invalid string'
+        data[:errors][:input] << e.message
+        input_unit = nil
       end
 
       if !input_unit.nil?

app/controllers/notes_controller.rb

@@ -1,5 +1,5 @@
 class NotesController < ApplicationController
-  before_action :set_note, only: [:show, :edit, :update, :destroy]
+  before_action :set_note, only: [:show, :update, :destroy]
   before_action :ensure_valid_user
 
   # GET /notes

app/controllers/task_items_controller.rb

@@ -9,6 +9,7 @@ class TaskItemsController < ApplicationController
     @task_item.task_list = @task_list
 
     if @task_item.save
+      TaskChannel.update_task_list(@task_list)
       render json: TaskItemSerializer.for(@task_item), status: :created, location: [@task_list, @task_item]
     else
       render json: @task_item.errors, status: :unprocessable_entity
@@ -17,6 +18,7 @@ class TaskItemsController < ApplicationController
 
   def update
     if @task_item.update(task_item_params)
+      TaskChannel.update_task_list(@task_list)
       render json: TaskItemSerializer.for(@task_item), status: :ok, location: [@task_list, @task_item]
     else
       render json: @task_item.errors, status: :unprocessable_entity
@@ -30,6 +32,8 @@ class TaskItemsController < ApplicationController
       @task_items.each { |i| i.destroy }
     end
 
+    TaskChannel.update_task_list(@task_list)
+
     head :no_content
   end
 
@@ -41,6 +45,8 @@ class TaskItemsController < ApplicationController
       @task_items.each { |i| i.update_attribute(:completed, new_status) }
     end
 
+    TaskChannel.update_task_list(@task_list)
+
     head :no_content
   end
 

app/controllers/task_lists_controller.rb

@@ -27,6 +27,7 @@ class TaskListsController < ApplicationController
   def update
     ensure_owner(@task_list) do
       if @task_list.update(task_list_params)
+        TaskChannel.update_task_list(@task_list)
         render json: TaskListSerializer.for(@task_list), status: :ok, location: @task_list
       else
         render json: @task_list.errors, status: :unprocessable_entity
@@ -46,6 +47,7 @@ class TaskListsController < ApplicationController
       recipe = Recipe.find(params[:recipe_id])
 
       @task_list.add_recipe_ingredients(recipe)
+      TaskChannel.update_task_list(@task_list)
 
       head :no_content
     end

app/controllers/users_controller.rb

@@ -50,7 +50,7 @@ class UsersController < ApplicationController
       if @user.save
         set_current_user(@user)
         format.html { redirect_to root_path, notice: 'User created.' }
-        format.json { render :show, status: :created, location: @user }
+        format.json { render json: UserSerializer.for(@user), status: :created, location: @user }
       else
         format.html { render :new }
         format.json { render json: @user.errors, status: :unprocessable_entity }
@@ -68,7 +68,7 @@ class UsersController < ApplicationController
     respond_to do |format|
       if @user.update(user_params)
         format.html { redirect_to root_path, notice: 'User updated.' }
-        format.json { render :show, status: :created, location: @user }
+        format.json { render json: UserSerializer.for(@user) , status: :created, location: @user }
       else
         format.html { render :edit }
         format.json { render json: @user.errors, status: :unprocessable_entity }

app/javascript/components/App.vue

@@ -1,83 +1,67 @@
 <template>
   <div id="app">
-    <vue-progress-bar></vue-progress-bar>
+    <app-progress-bar></app-progress-bar>
     <app-navbar></app-navbar>
     <section id="main" class="">
       <div class="container">
+        <router-view v-slot="{ Component }">
           <transition name="fade" mode="out-in">
-          <router-view v-if="!hasError"></router-view>
+            <component v-if="!hasError" :is="Component" />
             <div v-else>
               <h1>Error!</h1>
-            <p>{{error}}</p>
+              <p>{{ appConfig.error }}</p>
             </div>
           </transition>
+        </router-view>
       </div>
     </section>
   </div>
 </template>
 
-<script>
+<script setup>
+  import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+  import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
+  import { useAppConfigStore } from "../stores/appConfig";
+  import { useLoadResource } from "../lib/useLoadResource";
+  import { useCheckAuthentication } from "../lib/useCheckAuthentication";
+  import AppProgressBar from "./AppProgressBar.vue";
 
-  import { mapMutations, mapState } from "vuex";
-  import api from "../lib/Api";
-  import TWEEN from '@tweenjs/tween.js';
+  const globalTweenGroup = useGlobalTweenGroup();
+  let animationLoop = true;
 
-  export default {
-    data() {
-      return {
-        api: api
-      };
-    },
-    computed: {
-      ...mapState({
-        hasError: state => state.error !== null,
-        error: state => state.error,
-        authChecked: state => state.authChecked,
-        initialLoad: state => state.initialLoad
-      })
-    },
+  const appConfig = useAppConfigStore();
+  const hasError = computed(() => appConfig.error !== null);
 
-    watch: {
-      isLoading(val) {
+  const { loadResource } = useLoadResource();
+  const { checkAuthentication } = useCheckAuthentication(loadResource);
+
+  watch(
+      () => appConfig.initialLoad,
+      (val) => {
         if (val) {
-          this.$Progress.start();
-        } else {
-          this.$Progress.finish();
+          nextTick(() => document.body.classList.remove("loading"));
         }
       },
+      { immediate: true }
+  );
 
-      initialLoad(val) {
-        if (val) {
-          this.$nextTick(() => {
-            document.body.classList.remove("loading");
-          });
-        }
-      }
-    },
-
-    created() {
+  onMounted(() => {
     // Setup global animation loop
     function animate() {
-        TWEEN.update();
+      if (animationLoop) {
+        globalTweenGroup.update();
         requestAnimationFrame(animate);
       }
+    }
     animate();
 
-      if (this.user === null && this.authChecked === false) {
-        this.checkAuthentication();
+    if (appConfig.user === null && appConfig.authChecked === false) {
+      checkAuthentication();
     }
-    },
-
-    mounted() {
-      if (this.initialLoad) {
-        this.$nextTick(() => {
-          document.body.classList.remove("loading");
   });
-      }
-    },
 
-    components: {
-    }
-  }
+  onUnmounted(() => {
+    animationLoop = false;
+  });
 
 </script>

app/javascript/components/AppAutocomplete.vue

@@ -27,13 +27,15 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, ref, watch } from "vue";
   import debounce from 'lodash/debounce';
 
-  export default {
-    props: {
-      value: String,
+  const emit = defineEmits(["update:modelValue", "inputClick", "optionSelected"]);
+
+  const props = defineProps({
+    modelValue: String,
     id: String,
     placeholder: String,
     name: String,
@@ -58,175 +60,157 @@
 
     onGetOptions: Function,
     searchOptions: Array
-    },
+  });
 
-    data() {
-      return {
-        options: [],
-        rawValue: "",
-        isListOpen: false,
-        activeListIndex: 0
-      }
-    },
+  const options = ref([]);
+  const rawValue = ref("");
+  const isListOpen = ref(false);
+  const activeListIndex = ref(0);
 
-    created() {
-      this.rawValue = this.value;
-
-    },
-
-    watch: {
-      value(newValue) {
-        this.rawValue = newValue;
-      }
-    },
-
-    computed: {
-      finalInputClass() {
+  const finalInputClass = computed(() => {
     let cls = ['input'];
-        if (this.inputClass === null) {
+    if (props.inputClass === null) {
       return cls;
-        } else if (Array.isArray(this.inputClass)) {
-          return cls.concat(this.inputClass);
+    } else if (Array.isArray(props.inputClass)) {
+      return cls.concat(props.inputClass);
     } else {
-          cls.push(this.inputClass);
+      cls.push(props.inputClass);
       return cls;
     }
-      },
+  });
 
-      debouncedUpdateOptions() {
-        return debounce(this.updateOptions, this.debounce);
+  watch(
+      () => props.modelValue,
+      (newValue) => { rawValue.value = newValue; },
+      { immediate: true }
+  );
+
+  function optionClass(idx) {
+    return activeListIndex.value === idx ? 'option active' : 'option';
   }
-    },
 
-    methods: {
-      optionClass(idx) {
-        return this.activeListIndex === idx ? 'option active' : 'option';
-      },
+  function optionClick(opt) {
+    selectOption(opt);
+  }
 
-      optionClick(opt) {
-        this.selectOption(opt);
-      },
-
-      optionKey(opt) {
-        if (this.keyAttribute) {
-          return opt[this.keyAttribute]
-        } else if (this.valueAttribute) {
-          return opt[this.valueAttribute];
+  function optionKey(opt) {
+    if (props.keyAttribute) {
+      return opt[props.keyAttribute]
+    } else if (props.valueAttribute) {
+      return opt[props.valueAttribute];
     } else {
       return opt.toString();
     }
-      },
+  }
 
-      optionValue(opt) {
-        if (this.valueAttribute) {
-          return opt[this.valueAttribute];
+  function optionValue(opt) {
+    if (props.valueAttribute) {
+      return opt[props.valueAttribute];
     } else {
       return opt.toString();
     }
-      },
+  }
 
-      optionLabel(opt) {
-        if (this.labelAttribute) {
-          return opt[this.labelAttribute];
+  function optionLabel(opt) {
+    if (props.labelAttribute) {
+      return opt[props.labelAttribute];
     } else {
       return null;
     }
-      },
+  }
 
-      optionMousemove(idx) {
-        this.activeListIndex = idx;
-      },
+  function optionMousemove(idx) {
+    activeListIndex.value = idx;
+  }
 
-      clickHandler(evt) {
-        this.$emit("inputClick", evt);
-      },
+  function clickHandler(evt) {
+    emit('inputClick', evt);
+  }
 
-      blurHandler(evt) {
+  function blurHandler(evt) {
     // blur fires before click.  If the blur was fired because the user clicked a list item, immediately hiding the list here
     // would prevent the click event from firing
     setTimeout(() => {
-          this.isListOpen = false;
+      isListOpen.value = false;
     },250);
-      },
+  }
 
-      inputHandler(evt) {
+  function inputHandler(evt) {
     const newValue = evt.target.value;
 
-        if (this.rawValue !== newValue) {
+    if (rawValue.value !== newValue) {
 
-          this.rawValue = newValue;
+      rawValue.value = newValue;
 
-          this.$emit("input", newValue);
+      emit("update:modelValue", newValue);
 
-          if (newValue.length >= Math.max(1, this.minLength)) {
-            this.debouncedUpdateOptions(newValue);
+      if (newValue.length >= Math.max(1, props.minLength)) {
+        updateOptions(newValue);
       } else {
-            this.isListOpen = false;
+        isListOpen.value = false;
+      }
     }
   }
-      },
 
-      keydownHandler(evt) {
-        if (this.isListOpen === false)
+  function keydownHandler(evt) {
+    if (isListOpen.value === false)
       return;
 
     switch (evt.key) {
       case "ArrowUp":
         evt.preventDefault();
-            this.activeListIndex = Math.max(0, this.activeListIndex - 1);
+        activeListIndex.value = Math.max(0, activeListIndex.value - 1);
         break;
       case "ArrowDown":
         evt.preventDefault();
-            this.activeListIndex = Math.min(this.options.length - 1, this.activeListIndex + 1);
+        activeListIndex.value = Math.min(options.value.length - 1, activeListIndex.value + 1);
         break;
       case "Enter":
         evt.preventDefault();
-            this.selectOption(this.options[this.activeListIndex]);
+        selectOption(options.value[activeListIndex.value]);
         break;
       case "Escape":
         evt.preventDefault();
-            this.isListOpen = false;
+        isListOpen.value = false;
         break;
     }
-      },
+  }
 
-      selectOption(opt) {
-        this.rawValue = this.optionValue(opt);
-        this.$emit("input", this.rawValue);
-        this.$emit("optionSelected", opt);
-        this.isListOpen = false;
-      },
+  function selectOption(opt) {
+    rawValue.value = optionValue(opt);
+    emit("update:modelValue", rawValue.value);
+    emit("optionSelected", opt);
+    isListOpen.value = false;
+  }
 
-      updateOptions(value) {
+  const updateOptions = debounce(function(value) {
     let p = null;
-        if (this.searchOptions) {
+    if (props.searchOptions) {
       const reg = new RegExp("^" + value, "i");
-          const matcher = o => reg.test(this.optionValue(o));
-          p = Promise.resolve(this.searchOptions.filter(matcher));
+      const matcher = o => reg.test(optionValue(o));
+      p = Promise.resolve(props.searchOptions.filter(matcher));
     } else {
-          p = this.onGetOptions(value)
+      p = props.onGetOptions(value)
     }
 
     p.then(opts => {
-          this.options = opts;
-          this.isListOpen = opts.length > 0;
-          this.activeListIndex = 0;
+      options.value = opts;
+      isListOpen.value = opts.length > 0;
+      activeListIndex.value = 0;
     })
-      }
-    }
-  }
+  }, props.debounce);
 
 </script>
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
+  @use "bulma/sass/utilities" as bulma;
 
   $labelLineHeight: 0.8rem;
 
   input.input {
     &::placeholder {
-      color: $grey-darker;
+      color: bulma.$grey-darker;
     }
   }
 
@@ -251,7 +235,7 @@
 
     &.active {
       color: white;
-      background-color: $turquoise;
+      background-color: bulma.$turquoise;
     }
 
     .opt_value {

app/javascript/components/AppConfirm.vue

@@ -1,47 +1,45 @@
 <template>
-  <app-modal :open="open" :title="message" @dismiss="runCancel">
+  <app-modal :open="open" :title="title" @dismiss="runCancel">
+    <p class="is-size-5">{{ message }}</p>
+
+    <template #footer>
       <div class="buttons">
         <button type="button" class="button is-primary" @click="runConfirm">OK</button>
         <button type="button" class="button" @click="runCancel">Cancel</button>
       </div>
+    </template>
   </app-modal>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
-      cancel: {
-        type: Function,
-        required: true
-      },
-
-      confirm: {
-        type: Function,
-        required: true
-      },
+const emit = defineEmits(["cancel", "confirm"]);
 
+const props = defineProps({
   message: {
     type: String,
     required: false,
     default: 'Are you sure?'
   },
 
+  title: {
+    type: String,
+    required: false,
+    default: "Confirm"
+  },
+
   open: {
     type: Boolean,
     required: true
   }
-    },
+});
 
-    methods: {
-      runConfirm() {
-        this.confirm();
-      },
+function runConfirm() {
+  emit("confirm");
+}
 
-      runCancel() {
-        this.cancel();
-      }
-    }
+function runCancel() {
+  emit("cancel");
 }
 
 </script>

app/javascript/components/AppDatePicker.vue

@@ -1,14 +1,15 @@
 <template>
-  <app-text-field :value="stringValue" @input="input" :label="label" type="date"></app-text-field>
+  <app-text-field :value="stringValue" @update:modelValue="input" :label="label" type="date"></app-text-field>
 </template>
 
-<script>
+<script setup>
 
+  import { computed } from "vue";
   import DateTimeUtils from "../lib/DateTimeUtils";
 
-  export default {
-    props: {
-      value: {
+  const emit = defineEmits(["update:modelValue"]);
+  const props = defineProps({
+    modelValue: {
       required: false,
       type: [Date, String]
     },
@@ -18,21 +19,16 @@
       type: String,
       default: null
     }
-    },
+  });
 
-    computed: {
-      stringValue() {
-        const d = DateTimeUtils.toDate(this.value);
+  const stringValue = computed(() => {
+    const d = DateTimeUtils.toDate(props.modelValue);
     return DateTimeUtils.formatDateForEdit(d);
-      }
-    },
+  });
 
-    methods: {
-      input(val) {
+  function input(val) {
     let d = DateTimeUtils.toDate(val + " 00:00");
-        this.$emit("input", d);
-      }
-    }
+    emit("update:modelValue", d);
   }
 
 </script>

app/javascript/components/AppDateTime.vue

@@ -5,12 +5,12 @@
   </span>
 </template>
 
-<script>
+<script setup>
 
+  import { computed } from "vue";
   import DateTimeUtils from "../lib/DateTimeUtils";
 
-  export default {
-    props: {
+  const props = defineProps({
     dateTime: {
       required: true,
       type: [Date, String]
@@ -33,29 +33,21 @@
       type: Boolean,
       default: false
     }
-    },
+  });
 
-    computed: {
-      dateObj() {
-        return DateTimeUtils.toDate(this.dateTime);
-      },
+  const dateObj = computed(() => DateTimeUtils.toDate(props.dateTime));
+  const fullString = computed(() => DateTimeUtils.formatTimestamp(dateObj.value));
 
-      friendlyString() {
+  const friendlyString = computed(() => {
     const parts = [];
-        if (this.showDate) {
-          parts.push(DateTimeUtils.formatDate(this.dateObj));
+    if (props.showDate) {
+      parts.push(DateTimeUtils.formatDate(dateObj.value));
     }
-        if (this.showTime) {
-          parts.push(DateTimeUtils.formatTime(this.dateObj, true));
+    if (props.showTime) {
+      parts.push(DateTimeUtils.formatTime(dateObj.value, true));
     }
     return parts.join(" ");
-      },
-
-      fullString() {
-        return DateTimeUtils.formatTimestamp(this.dateObj);
-      }
-    }
-  }
+  });
 
 </script>
 

app/javascript/components/AppDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown" :class="{'is-active': open, 'is-hoverable': hover}">
+  <div ref="dropdown" class="dropdown" :class="{'is-active': open, 'is-hoverable': hover}">
     <div class="dropdown-trigger">
       <slot name="button">
         <button type="button" class="button" :class="buttonClass" @click="toggle">
@@ -19,10 +19,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+import { useTemplateRef } from "vue";
+import { onClickOutside } from '@vueuse/core'
+
+const emit = defineEmits(["close", "open"]);
+const props = defineProps({
   open: {
     required: false,
     type: Boolean,
@@ -45,40 +48,33 @@
     required: false,
     default: ""
   }
-    },
+});
 
-    methods: {
-      toggle() {
-        if (this.open) {
-          this.triggerClose();
+const dropdownElement = useTemplateRef("dropdown");
+
+onClickOutside(dropdownElement, event => handleOutsideClick(event))
+
+function toggle() {
+  if (props.open) {
+    triggerClose();
   } else {
-          this.triggerOpen();
-        }
-      },
-
-      triggerOpen() {
-        this.$emit("open");
-      },
-
-      triggerClose() {
-        this.$emit("close");
-      },
-
-      handleOutsideClick(evt) {
-        if (this.open) {
-          if (!this.$el.contains(evt.target)) {
-            this.triggerClose();
+    triggerOpen();
   }
 }
+
+function triggerOpen() {
+  emit("open");
 }
-    },
 
-    mounted() {
-      document.addEventListener("click", this.handleOutsideClick);
-    },
+function triggerClose() {
+  emit("close");
+}
 
-    beforeDestroy() {
-      document.removeEventListener("click", this.handleOutsideClick);
+function handleOutsideClick(evt) {
+  if (props.open) {
+    if (!dropdownElement.value.contains(evt.target)) {
+      triggerClose();
+    }
   }
 }
 

app/javascript/components/AppExpandTransition.vue

@@ -9,33 +9,28 @@
   </transition>
 </template>
 
-<script>
+<script setup>
 
   import TWEEN from '@tweenjs/tween.js';
+  import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
 
-  export default {
-    props: {
+  const props = defineProps({
     expandTime: {
       type: Number,
       default: 250
     }
-    },
+  });
 
-    data() {
-      return {
-        animation: null
+  let animation = null;
+
+  function cancel () {
+    if (animation) {
+      animation.stop();
+      animation = null;
     }
-    },
-
-    methods: {
-      cancel () {
-        if (this.animation) {
-          this.animation.stop();
-          this.animation = null;
   }
-      },
 
-      enter(element, done) {
+  function enter(element, done) {
     const width = parseInt(getComputedStyle(element).width);
     const paddingTop = parseInt(getComputedStyle(element).paddingTop);
     const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
@@ -53,15 +48,15 @@
     element.style.overflow = 'hidden';
     element.style.height = 0;
 
-        this.animation = new TWEEN.Tween({height: 0, paddingTop: 0, paddingBottom: 0})
-          .to({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom}, this.expandTime)
+    animation = new TWEEN.Tween({height: 0, paddingTop: 0, paddingBottom: 0})
+        .to({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom}, props.expandTime)
         .onUpdate(obj => {
           element.style.height = obj.height + "px";
           element.style.paddingBottom = obj.paddingBottom + "px";
           element.style.paddingTop = obj.paddingTop + "px";
         })
         .onComplete(() => {
-            this.animation = null;
+          animation = null;
           element.removeAttribute('style');
           element.style.opacity = 0.99;
           setTimeout(() => {
@@ -70,32 +65,32 @@
           }, 1000);
           done();
         })
+        .group(useGlobalTweenGroup())
         .start();
-      },
+  }
 
-      leave(element, done) {
+  function leave(element, done) {
     const height = parseInt(getComputedStyle(element).height);
     const paddingTop = parseInt(getComputedStyle(element).paddingTop);
     const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
 
     element.style.overflow = 'hidden';
 
-        this.animation = new TWEEN.Tween({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom})
-          .to({height: 0, paddingTop: 0, paddingBottom: 0}, this.expandTime)
+    animation = new TWEEN.Tween({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom})
+        .to({height: 0, paddingTop: 0, paddingBottom: 0}, props.expandTime)
         .onUpdate(obj => {
           element.style.height = obj.height + "px";
           element.style.paddingBottom = obj.paddingBottom + "px";
           element.style.paddingTop = obj.paddingTop + "px";
         })
         .onComplete(() => {
-            this.animation = null;
+          animation = null;
           element.removeAttribute('style');
           done();
         })
+        .group(useGlobalTweenGroup())
         .start();
   }
-    }
-  }
 
 </script>
 

app/javascript/components/AppIcon.vue

@@ -6,6 +6,8 @@
 
 <script>
 
+  import { computed } from "vue";
+
   class IconData {
     constructor(iconicIcon, dataAttributes) {
       this.iconicIcon = iconicIcon;
@@ -49,6 +51,7 @@
   };
 
   export default {
+    emits: ["click"],
     props: {
       icon: {
         validator: (i) => iconMap[i] !== undefined
@@ -66,38 +69,21 @@
       }
     },
 
-    data() {
+    setup(props) {
+      const iconData = computed(() => iconMap[props.icon]);
+      const sizeData = computed(() => sizeMap[props.size]);
+      const iconClasses = computed(() => [sizeData.value.bulmaIconClass, sizeData.value.customIconClass]);
+      const iconicSize = computed(() => sizeData.value.iconicSize);
+      const iconicIcon = computed(() => iconData.value.iconicIcon);
+      const iconicAttributes = computed(() => iconData.value.dataAttributes);
+
       return {
-        injectedSvg: null
-      }
-    },
-
-    computed: {
-      iconData() {
-        return iconMap[this.icon];
-      },
-
-      sizeData() {
-        return sizeMap[this.size];
-      },
-
-      iconClasses() {
-        return [
-          this.sizeData.bulmaIconClass,
-          this.sizeData.customIconClass
-        ]
-      },
-
-      iconicSize() {
-        return this.sizeData.iconicSize;
-      },
-
-      iconicIcon() {
-        return this.iconData.iconicIcon;
-      },
-
-      iconicAttributes() {
-        return this.iconData.dataAttributes;
+        iconClasses,
+        iconData,
+        sizeData,
+        iconicAttributes,
+        iconicIcon,
+        iconicSize
       }
     }
   }

app/javascript/components/AppIconicIcon.vue

@@ -1,9 +1,11 @@
 <template>
-  <svg v-bind="svgAttributes" v-html="svgContent" :class="calculatedClasses"></svg>
+  <svg ref="svg" v-bind="svgAttributes" v-html="svgContent" :class="calculatedClasses"></svg>
 </template>
 
 <script>
 
+  import { computed, nextTick, onMounted, onUpdated, useTemplateRef } from "vue";
+
   import Caret from "../iconic/svg/smart/caret";
   import Check from "../iconic/svg/smart/check";
   import CircleCheck from "../iconic/svg/smart/circle-check";
@@ -68,29 +70,15 @@
       }
     },
 
-    data() {
-      return {
-        calculatedClasses: []
-      }
-    },
+    setup(props) {
+      const svgElement = useTemplateRef("svg");
+      const svgData = computed(() => iconMap[props.icon]);
+      const svgAttributes = computed(() => svgData.value.attributes);
+      const svgName = computed(() => svgAttributes.value['data-icon']);
+      const svgContent = computed(() => {
+        let content = String(svgData.value.content);
 
-    computed: {
-      svgData() {
-        return iconMap[this.icon];
-      },
-
-      svgAttributes() {
-        return this.svgData.attributes;
-      },
-
-      svgName() {
-        return this.svgAttributes['data-icon'];
-      },
-
-      svgContent() {
-        let content = String(this.svgData.content);
-
-        for (let idRep of this.svgData.idReplacements) {
+        for (let idRep of svgData.value.idReplacements) {
           let newId = `__new_id_${globalIdCounter}`;
           globalIdCounter += 1;
 
@@ -98,57 +86,70 @@
         }
 
         return content;
-      }
-    },
+      });
 
-    methods: {
+      const calculatedClasses = computed(() => {
+        const classes = (svgAttributes.value.class || "").split(" ");
 
-      rebind() {
-        const apis = APIS;
+        classes.push(`iconic-${props.size}`);
 
-        if (apis && this.svgName && apis[this.svgName]) {
-          const iconApi = apis[this.svgName](this.$el);
-          for (let func in iconApi) this.$el[func] = iconApi[func]
-        } else {
-          this.$el.update = function() {}
+        if (props.iconSizeOverride) {
+          classes.push(`iconic-icon-${props.iconSizeOverride}`);
         }
 
-        this.calculatedClasses = (this.svgAttributes.class || "").split(" ");
-
-        this.calculatedClasses.push(`iconic-${this.size}`);
-
-        if (this.iconSizeOverride) {
-          this.calculatedClasses.push(`iconic-icon-${this.iconSizeOverride}`);
+        if (props.displaySizeOverride) {
+          classes.push(`iconic-size-${props.displaySizeOverride}`);
         }
 
-        if (this.displaySizeOverride) {
-          this.calculatedClasses.push(`iconic-size-${this.displaySizeOverride}`);
-        }
+        return classes;
+      });
 
-        this.$el.update();
-      }
-    },
-
-    created() {
-      if (LOADED_APIS[this.svgName] !== true) {
-        for (let sb of this.svgData.scriptBlocks) {
+      function ensureSvgApi(name, scripts) {
+        if (!name) { return; }
+        if (LOADED_APIS[name] !== true) {
+          for (let sb of scripts) {
+            try {
               new Function(sb)(window);
+            } catch (e) {
+              console.log(sb);
+              console.log(e);
+            }
+          }
+          LOADED_APIS[name] = true;
         }
-        LOADED_APIS[this.svgName] = true;
       }
-    },
 
-    mounted() {
-
-      this.$watch(
-        function() { return [this.$attrs, this.icon, this.fluid] },
-        function() {
-          this.rebind()
-        },
-        {
-          immediate: true
+      function setupSvgApi(name) {
+        const apis = APIS;
+        if (apis && apis[name]) {
+          const iconApi = apis[name](svgElement.value);
+          for (let func in iconApi) svgElement.value[func] = iconApi[func]
+        } else {
+          svgElement.value.update = function() {}
         }
-      );
+        svgElement.value.update();
+      }
+
+      function updateScripts() {
+        ensureSvgApi(svgName.value, svgData.value.scriptBlocks);
+        setupSvgApi(svgName.value);
+      }
+
+      onMounted(() => {
+        updateScripts();
+      });
+
+      onUpdated(() => {
+        updateScripts();
+      });
+
+      return {
+        svgData,
+        svgAttributes,
+        svgName,
+        svgContent,
+        calculatedClasses
+      };
     }
   }
   

app/javascript/components/AppLoading.vue

@@ -4,10 +4,7 @@
   </div>
 </template>
 
-<script>
-  export default {
-
-  }
+<script setup>
 </script>
 
 <style lang="scss" scoped>

app/javascript/components/AppModal.vue

@@ -1,6 +1,6 @@
 <template>
-  <div ref="container">
-    <div ref="modal" :class="['popup', 'modal', { 'is-wide': wide, 'is-active': open && error === null }]">
+  <Teleport to="body">
+    <div :class="['modal', { 'is-wide': wide, 'is-active': open && error === null }]">
       <div class="modal-background" @click="close"></div>
       <div class="modal-card">
         <header class="modal-card-head">
@@ -13,17 +13,24 @@
         <section class="modal-card-body">
           <slot></slot>
         </section>
+
+        <footer class="modal-card-foot">
+          <slot name="footer">
+          </slot>
+        </footer>
       </div>
     </div>
-  </div>
+  </Teleport>
 </template>
 
-<script>
+<script setup>
 
-  import { mapState } from "vuex";
+  import { computed } from "vue";
+  import { useAppConfigStore } from "../stores/appConfig";
 
-  export default {
-    props: {
+  const emit = defineEmits(["dismiss"]);
+
+  const props = defineProps({
     open: {
       type: Boolean,
       default: false
@@ -33,30 +40,13 @@
       type: Boolean,
       default: false
     }
-    },
+  });
 
-    mounted() {
-      this.$root.$el.appendChild(this.$refs.modal);
-    },
+  const appConfig = useAppConfigStore();
+  const error = computed(() => appConfig.error);
 
-    beforeDestroy() {
-      this.$refs.container.appendChild(this.$refs.modal);
-    },
-
-    computed: {
-      ...mapState([
-        'error'
-      ])
-    },
-
-    methods: {
-      close() {
-        this.$emit("dismiss");
-      }
-    },
-
-    components: {
-    }
+  function close() {
+    emit("dismiss");
   }
 
 </script>

app/javascript/components/AppNavbar.vue

@@ -51,46 +51,27 @@
   </nav>
 </template>
 
-<script>
+<script setup>
 
+  import { ref, watch } from "vue";
   import UserLogin from "./UserLogin";
-  import { mapState } from "vuex";
+  import { storeToRefs } from "pinia";
+  import { useAppConfigStore } from "../stores/appConfig";
   import { swUpdate } from "../lib/ServiceWorker";
+  import { useRoute } from "vue-router";
 
-  export default {
-    data() {
-      return {
-        menuActive: false
-      };
-    },
+  const appConfig = useAppConfigStore();
+  const menuActive = ref(false);
+  const route = useRoute();
+  const { isAdmin, isLoggedIn, updateAvailable, user } = storeToRefs(appConfig);
 
-    computed: {
-      ...mapState([
-        'route',
-        'user',
-        'updateAvailable'
-      ])
-    },
-
-    methods: {
-      updateApp() {
+  function updateApp() {
     swUpdate();
   }
-    },
 
-    watch: {
-      route() {
-        this.menuActive = false;
-      },
-
-      user() {
-        this.menuActive = false;
-      }
-    },
-
-    components: {
-      UserLogin
-    }
-  }
+  watch(
+      () => [route, appConfig.user],
+      () => menuActive.value = false
+  );
 
 </script>

app/javascript/components/AppPager.vue

@@ -1,7 +1,7 @@
 <template>
   <nav v-show="totalPages > 1 || showWithSinglePage" class="pagination" role="navigation" :aria-label="pagedItemName + ' page navigation'">
-    <a class="pagination-previous" :title="isFirstPage ? 'This is the first page' : ''" :disabled="isFirstPage" @click.prevent="changePage(currentPage - 1)">Previous</a>
-    <a class="pagination-next" :title="isLastPage ? 'This is the last page' : ''" :disabled="isLastPage" @click.prevent="changePage(currentPage + 1)">Next page</a>
+    <a :class="{'pagination-previous': true, 'is-disabled': isFirstPage}" :title="isFirstPage ? 'This is the first page' : ''" @click.prevent="changePage(currentPage - 1)">Previous</a>
+    <a :class="{'pagination-next': true, 'is-disabled': isLastPage}" :title="isLastPage ? 'This is the last page' : ''" @click.prevent="changePage(currentPage + 1)">Next page</a>
     <ul class="pagination-list">
       <li v-for="page in pageItems" :key="page">
         <a v-if="page > 0" class="pagination-link" :class="{'is-current': page === currentPage}" href="#" @click.prevent="changePage(page)">{{page}}</a>
@@ -11,10 +11,13 @@
   </nav>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+import { computed } from "vue";
+
+const emit = defineEmits(["changePage"]);
+
+const props = defineProps({
   pagedItemName: {
     required: false,
     type: String,
@@ -48,19 +51,18 @@
     type: Boolean,
     default: false
   }
-    },
+});
 
-    computed: {
-      pageItems() {
+const pageItems = computed(() => {
   const items = new Set();
 
-        for (let x = 0; x < this.pageOuterWindow; x++) {
+  for (let x = 0; x < props.pageOuterWindow; x++) {
     items.add(x + 1);
-          items.add(this.totalPages - x);
+    items.add(props.totalPages - x);
   }
 
-        const start = this.currentPage - Math.ceil(this.pageWindow / 2);
-        const end = this.currentPage + Math.floor(this.pageWindow / 2);
+  const start = props.currentPage - Math.ceil(props.pageWindow / 2);
+  const end = props.currentPage + Math.floor(props.pageWindow / 2);
 
   for (let x = start; x <= end; x++) {
     items.add(x);
@@ -69,7 +71,7 @@
   let emptySpace = -1;
   const finalList = [];
 
-        [...items.values()].filter(p => p > 0 && p <= this.totalPages).sort((a, b) => a - b).forEach((p, idx, list) => {
+  [...items.values()].filter(p => p > 0 && p <= props.totalPages).sort((a, b) => a - b).forEach((p, idx, list) => {
     finalList.push(p);
     if (list[idx + 1] && list[idx + 1] !== p + 1) {
       finalList.push(emptySpace--);
@@ -77,30 +79,13 @@
   });
 
   return finalList;
-      },
+});
 
-      isLastPage() {
-        return this.currentPage === this.totalPages;
-      },
+const isLastPage = computed(() => props.currentPage === props.totalPages);
+const isFirstPage = computed(() => props.currentPage === 1);
 
-      isFirstPage() {
-        return this.currentPage === 1;
-      }
-    },
-
-    methods: {
-      changePage(idx) {
-        this.$emit("changePage", idx);
-      }
-    }
+function changePage(idx) {
+  emit("changePage", idx);
 }
 
 </script>
-
-<style lang="scss" scoped>
-
-  ul.pagination {
-
-  }
-
-</style>

app/javascript/components/AppProgressBar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="progress-bar" :style="progressStyle"></div>
+</template>
+
+<script setup>
+
+import { computed, ref, watch } from "vue";
+import { useAppConfigStore } from "../stores/appConfig";
+import TWEEN from '@tweenjs/tween.js';
+import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
+
+const appConfig = useAppConfigStore();
+
+const showProgress = ref(false);
+const loadingPercent = ref(0);
+let animation = null;
+
+const progressStyle = computed(() => {
+  return {
+    opacity: showProgress.value ? "1" : "0",
+    width: `${loadingPercent.value}%`,
+    height: "4px"
+  };
+});
+
+watch(() => appConfig.isLoading, val => {
+  if (val) {
+    start();
+  } else {
+    stop();
+  }
+});
+
+function start() {
+  if (!animation) {
+    showProgress.value = true;
+    animation = new TWEEN.Tween({ percent: 0 }, useGlobalTweenGroup())
+        .to({ percent: 90 })
+        .easing(TWEEN.Easing.Quartic.Out)
+        .duration(3000)
+        .onUpdate(({ percent }) => { loadingPercent.value = percent; })
+        .onComplete(({ percent }) => {})
+        .start();
+  }
+}
+
+function stop() {
+  if (animation) {
+    showProgress.value = false;
+    animation.stop();
+    animation = null;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+  @use "bulma/sass/utilities" as bulma;
+
+  .progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999999;
+    background-color: bulma.$blue;
+    transition: width 0.1s, opacity 0.3s;
+  }
+</style>

app/javascript/components/AppRating.vue

@@ -9,11 +9,13 @@
   </span>
 </template>
 
-<script>
+<script setup>
 
+import { computed, ref, useTemplateRef } from "vue";
 
-  export default {
-    props: {
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
   starCount: {
     required: false,
     type: Number,
@@ -32,80 +34,66 @@
     default: 0.5
   },
 
-      value: {
+  modelValue: {
     required: false,
     type: Number,
     default: 0
   }
-    },
+});
 
-    data() {
-      return {
-        temporaryValue: null
-      };
-    },
+const temporaryValue = ref(null);
+const ratingPercent = computed(() => ((props.modelValue || 0) / props.starCount) * 100.0);
+const wrapperEl = useTemplateRef("wrapper");
 
-    computed: {
-      ratingPercent() {
-        return ((this.value || 0) / this.starCount) * 100.0;
-      },
-
-      temporaryPercent() {
-        if (this.temporaryValue !== null) {
-          return (this.temporaryValue / this.starCount) * 100.0;
+const temporaryPercent = computed(() => {
+  if (temporaryValue.value !== null) {
+    return (temporaryValue.value / props.starCount) * 100.0;
   } else {
     return null;
   }
-      },
+});
 
-      filledStyle() {
-        const width = this.temporaryPercent || this.ratingPercent;
+const filledStyle = computed(() => {
+  const width = temporaryPercent.value || ratingPercent.value;
   return {
     width: width + "%"
   };
-      }
-    },
+});
 
-    methods: {
-      handleClick(evt) {
-        if (this.temporaryValue !== null) {
-          this.$emit("input", this.temporaryValue);
+function handleClick(evt) {
+  if (temporaryValue.value !== null) {
+    emit("update:modelValue", temporaryValue.value);
+  }
 }
-      },
 
-      handleMousemove(evt) {
-        if (this.readonly) {
+function handleMousemove(evt) {
+  if (props.readonly) {
     return;
   }
 
-        const wrapperBox = this.$refs.wrapper.getBoundingClientRect();
+  const wrapperBox = wrapperEl.value.getBoundingClientRect();
   const wrapperWidth = wrapperBox.right - wrapperBox.left;
   const mousePosition = evt.clientX;
 
   if (mousePosition > wrapperBox.left && mousePosition < wrapperBox.right) {
     const filledRatio = ((mousePosition - wrapperBox.left) / wrapperWidth);
 
-          const totalSteps = this.starCount / this.step;
+    const totalSteps = props.starCount / props.step;
     const filledSteps = Math.round(totalSteps * filledRatio);
 
-          this.temporaryValue = filledSteps * this.step;
+    temporaryValue.value = filledSteps * props.step;
+  }
 }
-      },
 
-      handleMouseleave(evt) {
-        this.temporaryValue = null;
-      }
-    },
-
-    components: {
-    }
+function handleMouseleave(evt) {
+  temporaryValue.value = null;
 }
 
 </script>
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
+  @use "bulma/sass/utilities" as bulma;
 
   span.rating {
     position: relative;
@@ -125,7 +113,7 @@
     }
 
     .filled-set {
-      color: $yellow;
+      color: bulma.$yellow;
       position: absolute;
       top: 0;
       left: 0;

app/javascript/components/AppSearchText.vue

@@ -6,61 +6,45 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+import { ref } from "vue";
 import debounce from "lodash/debounce";
 
-export default {
-  props: {
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
   placeholder: {
     required: false,
     type: String,
     default: ""
   },
 
-    value: {
+  modelValue: {
     required: false,
     type: String,
     default: ""
   }
+});
+
+const text = ref(null);
+
+const triggerInput = debounce(function() {
+      emit("update:modelValue", text.value);
     },
+    250,
+    { leading: false, trailing: true })
 
-  data() {
-    return {
-      text: null
-    };
-  },
-
-  computed: {
-
-  },
-
-  methods: {
-    triggerInput: debounce(function() {
-      this.$emit("input", this.text);
-    }, 250, {leading: false, trailing: true}),
-
-    userUpdateText(text) {
-      if (this.text !== text) {
-        this.text = text;
-        this.triggerInput();
-      }
-    },
-
-    propUpdateText(text) {
-      if (this.text === null && this.text !== text) {
-        this.text = text;
+function userUpdateText(newText) {
+  if (text.value !== newText) {
+    text.value = newText;
+    triggerInput();
   }
 }
-  },
 
-  created() {
-    this.$watch("value",
-      val => this.propUpdateText(val),
-      {
-        immediate: true
-      }
-    );
+function propUpdateText(newText) {
+  if (text.value === null && text.value !== newText) {
+    text.value = newText;
   }
 }
 

app/javascript/components/AppTagEditor.vue

@@ -2,47 +2,38 @@
   <div class="tag-editor control">
     <input ref="input" type="text" class="input" :value="tagText" @input="inputHandler" @focus="getFocus" @blur="loseFocus">
     <div class="tags">
-      <span v-for="t in value" :key="t" class="tag">{{t}}</span>
+      <span v-for="t in modelValue" :key="t" class="tag">{{t}}</span>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
-      value: {
+import {computed, nextTick, ref, useTemplateRef} from "vue";
+
+const emit = defineEmits(["update:modelValue"]);
+
+const props = defineProps({
+  modelValue: {
     required: true,
     type: Array
   }
-    },
+});
 
-    data() {
-      return {
-        hasFocus: false
-      };
-    },
+const hasFocus = ref(false);
+const tagText = computed(() => props.modelValue.join(" "));
+const inputElement = useTemplateRef("input");
 
-    computed: {
-      tagText() {
-        return this.value.join(" ");
-      }
-    },
-
-    watch: {
-    },
-
-    methods: {
-      inputHandler(el) {
+function inputHandler(el) {
   let str = el.target.value;
-        this.checkInput(str);
-        this.$nextTick(() => {
+  checkInput(str);
+  nextTick(() => {
     el.target.value = str;
   });
-      },
+}
 
-      checkInput(str) {
-        if (this.hasFocus) {
+function checkInput(str) {
+  if (hasFocus.value) {
     const m = str.match(/\S\s+\S*$/);
 
     if (m !== null) {
@@ -54,22 +45,21 @@
 
   const newTags = [...new Set(str.toString().split(/\s+/).filter(t => t.length > 0))];
 
-        if (!this.arraysEqual(newTags, this.value)) {
-          this.$emit("input", newTags);
+  if (!arraysEqual(newTags, props.modelValue)) {
+    emit("update:modelValue", newTags);
+  }
 }
-      },
 
-      getFocus() {
-        this.hasFocus = true;
-      },
+function getFocus() {
+  hasFocus.value = true;
+}
 
-      loseFocus() {
-        this.hasFocus = false;
-        this.checkInput(this.$refs.input.value);
+function loseFocus() {
+  hasFocus.value = false;
+  checkInput(inputElement.value.value);
+}
 
-      },
-
-      arraysEqual(arr1, arr2) {
+function arraysEqual(arr1, arr2) {
   if(arr1.length !== arr2.length)
     return false;
   for(let i = arr1.length; i--;) {
@@ -79,7 +69,4 @@
 
   return true;
 }
-    }
-  }
-
 </script>

app/javascript/components/AppTextField.vue

@@ -2,8 +2,8 @@
   <div class="field">
     <label v-if="label.length" class="label is-small-mobile">{{ label }}</label>
     <div :class="controlClasses">
-      <textarea v-if="isTextarea" :class="inputClasses" :value="value" @input="input" :disabled="disabled"></textarea>
-      <input v-else :type="type" :class="inputClasses" :value="value" @input="input" :disabled="disabled">
+      <textarea v-if="isTextarea" :class="inputClasses" v-model="model" :disabled="disabled"></textarea>
+      <input v-else :type="type" :class="inputClasses" v-model="model" :disabled="disabled">
       <app-icon class="is-right" icon="warning" v-if="validationError !== null"></app-icon>
     </div>
     <p v-if="helpMessage !== null" :class="helpClasses">
@@ -12,16 +12,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+import { computed } from "vue";
+
+const props = defineProps({
   label: {
     required: false,
     type: String,
     default: ""
   },
-      value: {
+  modelValue: {
     required: false,
     type: [String, Number],
     default: ""
@@ -40,53 +41,38 @@
     type: String,
     default: null
   }
-    },
+});
 
-    computed: {
-      isTextarea() {
-        return this.type === "textarea";
-      },
+const model = defineModel({
+  type: [String, Number],
+  default: ""
+});
 
-      controlClasses() {
-        return [
+const isTextarea = computed(() => props.type === "textarea");
+const controlClasses = computed(() => [
     "control",
     {
-            "has-icons-right": this.validationError !== null
+      "has-icons-right": props.validationError !== null
     }
-        ]
-      },
+  ]);
 
-      inputClasses() {
-        return [
+const inputClasses = computed(() =>[
     "is-small-mobile",
     {
-            "textarea": this.isTextarea,
-            "input": !this.isTextarea,
-            "is-danger": this.validationError !== null
+      "textarea": isTextarea.value,
+      "input": !isTextarea.value,
+      "is-danger": props.validationError !== null
     }
-        ]
-      },
+  ]);
 
-      helpMessage() {
-        return this.validationError;
-      },
-
-      helpClasses() {
-        return [
+const helpMessage = computed(() => props.validationError);
+const helpClasses = computed(() => [
   "help",
   {
-            "is-danger": this.validationError !== null
+    "is-danger": props.validationError !== null
   }
-        ];
-      }
-    },
+]);
 
-    methods: {
-      input(evt) {
-        this.$emit("input", evt.target.value);
-      }
-    }
-  }
 
 </script>
 

app/javascript/components/AppValidationErrors.vue

@@ -6,16 +6,14 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+const props = defineProps({
   errors: {
     required: false,
     type: Object,
     default: {}
   }
-    }
-  }
+});
 
 </script>

app/javascript/components/FoodEdit.vue

@@ -62,11 +62,14 @@
             <button class="button" type="button" @click="addUnit">Add Unit</button>
 
             <table class="table">
+              <thead>
               <tr>
                 <th>Name</th>
                 <th>Grams</th>
                 <th></th>
               </tr>
+              </thead>
+              <tbody>
               <tr v-for="unit in visibleFoodUnits" :key="unit.id">
                 <td>
                   <div class="control">
@@ -82,6 +85,7 @@
                   <button type="button" class="button is-danger" @click="removeUnit(unit)">X</button>
                 </td>
               </tr>
+              </tbody>
             </table>
           </div>
         </div>
@@ -96,14 +100,18 @@
           <div class="message-body">
 
             <table class="table">
+              <thead>
               <tr>
                 <th>Name</th>
                 <th>Grams</th>
               </tr>
+              </thead>
+              <tbody>
               <tr v-for="unit in food.ndbn_units">
                 <td>{{unit.description}}</td>
                 <td>{{unit.gram_weight}}</td>
               </tr>
+              </tbody>
             </table>
 
           </div>
@@ -136,13 +144,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed } from "vue";
   import api from "../lib/Api";
-  import { mapState } from "vuex";
+  import { mapState } from "pinia";
+  import { useNutrientStore } from "../stores/nutrient";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    props: {
+  const nutrientStore = useNutrientStore();
+  const nutrients = computed(() => nutrientStore.nutrientList);
+  const { loadResource } = useLoadResource();
+
+  const props = defineProps({
     food: {
       required: true,
       type: Object
@@ -157,53 +171,35 @@
       type: String,
       default: "Editing"
     }
-    },
+  });
 
-    data() {
-      return {
+  const visibleFoodUnits = computed(() => props.food.food_units.filter(iu => iu._destroy !== true));
+  const hasNdbn = computed(() => props.food.ndbn !== null);
 
-      };
-    },
-
-    computed: {
-      ...mapState({
-        nutrients: 'nutrientList'
-      }),
-
-      visibleFoodUnits() {
-        return this.food.food_units.filter(iu => iu._destroy !== true);
-      },
-
-      hasNdbn() {
-        return this.food.ndbn !== null;
-      }
-    },
-
-    methods: {
-      addUnit() {
-        this.food.food_units.push({
+  function addUnit() {
+    props.food.food_units.push({
       id: null,
       name: null,
       gram_weight: null
     });
-      },
+  }
 
-      removeUnit(unit) {
+  function removeUnit(unit) {
     if (unit.id) {
       unit._destroy = true;
     } else {
-          const idx = this.food.food_units.findIndex(i => i === unit);
-          this.food.food_units.splice(idx, 1);
+      const idx = props.food.food_units.findIndex(i => i === unit);
+      props.food.food_units.splice(idx, 1);
+    }
   }
-      },
 
-      removeNdbn() {
-        this.food.ndbn = null;
-        this.food.usda_food_name = null;
-        this.food.ndbn_units = [];
-      },
+  function removeNdbn() {
+    props.food.ndbn = null;
+    props.food.usda_food_name = null;
+    props.food.ndbn_units = [];
+  }
 
-      updateSearchItems(text) {
+  function updateSearchItems(text) {
     return api.getUsdaFoodSearch(text)
         .then(data => data.map(f => {
           return {
@@ -212,23 +208,18 @@
             description: ["#", f.ndbn, ", Cal:", f.kcal, ", Carbs:", f.carbohydrates, ", Fat:", f.lipid, ", Protein:", f.protein].join("")
           }
         }));
-      },
+  }
 
-      searchItemSelected(food) {
-        this.food.ndbn = food.ndbn;
-        this.food.usda_food_name = food.name;
-        this.food.ndbn_units = [];
+  function searchItemSelected(food) {
+    props.food.ndbn = food.ndbn;
+    props.food.usda_food_name = food.name;
+    props.food.ndbn_units = [];
 
-        this.loadResource(
-          api.postIngredientSelectNdbn(this.food)
-            .then(i => Object.assign(this.food, i))
+    loadResource(
+        api.postIngredientSelectNdbn(props.food)
+            .then(i => Object.assign(props.food, i))
     );
 
-      },
-    },
-
-    components: {
-    }
   }
 
 </script>

app/javascript/components/FoodShow.vue

@@ -53,24 +53,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  import { mapState } from "vuex";
+  import { computed } from "vue";
+  import { useNutrientStore } from "../stores/nutrient";
 
-  export default {
-    props: {
+  const props = defineProps({
     food: {
       required: true,
       type: Object
     }
-    },
+  });
 
-    computed: {
-      ...mapState({
-        nutrients: 'nutrientList'
-      }),
-    }
-  }
+  const nutrientStore = useNutrientStore();
+  const nutrients = computed(() => nutrientStore.nutrientList);
 
 </script>
 

app/javascript/components/LogEdit.vue

@@ -31,12 +31,11 @@
 
 </template>
 
-<script>
+<script setup>
 
   import RecipeEdit from "./RecipeEdit";
 
-  export default {
-    props: {
+  const props = defineProps({
     log: {
       required: true,
       type: Object
@@ -46,12 +45,7 @@
       type: Object,
       default: {}
     },
-    },
-
-    components: {
-      RecipeEdit
-    }
-  }
+  });
 
 </script>
 

app/javascript/components/LogShow.vue

@@ -21,7 +21,7 @@
           </div>
           <div class="field-body">
             <div class="field">
-              <app-rating readonly :value="log.rating"></app-rating>
+              <app-rating readonly :model-value="log.rating"></app-rating>
             </div>
           </div>
         </div>
@@ -44,22 +44,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
   import RecipeShow from "./RecipeShow";
 
-  export default {
-    props: {
+  const props = defineProps({
     log: {
       required: true,
       type: Object
     }
-    },
-
-    components: {
-      RecipeShow
-    }
-  }
+  });
 
 </script>
 

app/javascript/components/NoteEdit.vue

@@ -19,36 +19,26 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+import { computed } from "vue";
+
+const emit = defineEmits(["save", "cancel"]);
+const props = defineProps({
   note: {
     required: true,
     type: Object
   }
-    },
+});
 
-    data() {
-      return {
-      };
-    },
+const canSave = computed(() => props.note?.content?.length);
 
-    computed: {
-      canSave() {
-        return this.note && this.note.content && this.note.content.length;
+function save() {
+  emit("save", props.note);
 }
-    },
 
-    methods: {
-      save() {
-        this.$emit("save", this.note);
-      },
-
-      cancel() {
-        this.$emit("cancel");
-      }
-    }
+function cancel() {
+  emit("cancel");
 }
 
 </script>

app/javascript/components/RecipeEdit.vue

@@ -71,6 +71,7 @@
           <th>Result</th>
         </tr>
         </thead>
+        <tbody>
         <tr>
           <td>Heading</td>
           <td>
@@ -155,6 +156,7 @@ _underline_
             </p>
           </td>
         </tr>
+        </tbody>
       </table>
 
       <h3 class="title is-3">Basic Example</h3>
@@ -204,16 +206,15 @@ _underline_
   </div>
 </template>
 
-<script>
+<script setup>
 
-  import autosize from "autosize";
+  import { computed, ref, useTemplateRef, watch } from "vue";
+  import { useAutosize } from "../lib/useAutosize";
   import debounce from "lodash/debounce";
   import api from "../lib/Api";
-
   import RecipeEditIngredientEditor from "./RecipeEditIngredientEditor";
 
-  export default {
-    props: {
+  const props = defineProps({
     recipe: {
       required: true,
       type: Object
@@ -223,48 +224,32 @@ _underline_
       type: Boolean,
       default: false
     }
-    },
+  });
 
-    data() {
-      return {
-        stepPreviewCache: null,
-        isDescriptionHelpOpen: false
-      };
-    },
+  const stepTextArea = useTemplateRef("step_text_area");
+  const stepPreviewCache = ref(null);
+  const isDescriptionHelpOpen = ref(false);
 
-    computed: {
-      stepPreview() {
-        if (this.stepPreviewCache === null) {
-          return this.recipe.rendered_steps;
+  useAutosize(stepTextArea);
+
+  const stepPreview = computed(() => {
+    if (stepPreviewCache.value === null) {
+      return props.recipe.rendered_steps;
     } else {
-          return this.stepPreviewCache;
+      return stepPreviewCache.value;
     }
-      }
-    },
+  });
 
-    methods: {
+  const updatePreview = debounce(function() {
+    api.postPreviewSteps(props.recipe.step_text)
+        .then(data => stepPreviewCache.value = data.rendered_steps)
+        .catch(err => stepPreviewCache.value = "?? Error ??");
+  }, 750);
 
-      updatePreview: debounce(function() {
-        api.postPreviewSteps(this.recipe.step_text)
-          .then(data => this.stepPreviewCache = data.rendered_steps)
-          .catch(err => this.stepPreviewCache = "?? Error ??");
-      }, 750)
-    },
-
-    watch: {
-      'recipe.step_text': function() {
-        this.updatePreview();
-      }
-    },
-
-    mounted() {
-      //autosize(this.$refs.step_text_area);
-    },
-
-    components: {
-      RecipeEditIngredientEditor
-    }
-  }
+  watch(
+      () => props.recipe.step_text,
+      () => updatePreview()
+  );
 
 </script>
 

app/javascript/components/RecipeEditIngredientEditor.vue

@@ -12,18 +12,22 @@
         </div>
         <div class="column is-half">
           <table class="table is-bordered is-narrow is-size-7">
+            <thead>
             <tr>
               <th>#</th>
               <th>Unit</th>
               <th>Name</th>
               <th>Prep</th>
             </tr>
+            </thead>
+            <tbody>
             <tr v-for="i in bulkIngredientPreview">
               <td>{{i.quantity}}</td>
               <td>{{i.units}}</td>
               <td>{{i.name}}</td>
               <td>{{i.preparation}}</td>
             </tr>
+            </tbody>
           </table>
         </div>
       </div>
@@ -39,33 +43,28 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, ref } from "vue";
+  import { useMediaQueryStore } from "../stores/mediaQuery";
   import RecipeEditIngredientItem from "./RecipeEditIngredientItem";
 
-  import { mapState } from "vuex";
+  const mediaQueryStore = useMediaQueryStore();
 
-  export default {
-    props: {
+  const props = defineProps({
     ingredients: {
       required: true,
       type: Array
     }
-    },
+  });
 
-    data() {
-      return {
-        isBulkEditing: false,
-        bulkEditText: null
-      };
-    },
+  const isBulkEditing = ref(false);
+  const bulkEditText = ref(null);
+  const isMobile = computed(() => mediaQueryStore.mobile);
+  const visibleIngredients = computed(() => props.ingredients.filter(i => i._destroy !== true));
 
-    computed: {
-      ...mapState({
-        isMobile: state => state.mediaQueries.mobile
-      }),
-      bulkIngredientPreview() {
-        if (this.bulkEditText === null) {
+  const bulkIngredientPreview = computed(() => {
+    if (bulkEditText.value === null || bulkEditText.value === "") {
       return [];
     }
 
@@ -80,7 +79,7 @@
     };
 
     const parsed = [];
-        const lines = this.bulkEditText.replace("\r", "").split("\n");
+    const lines = bulkEditText.value.replace("\r", "").split("\n");
 
     for (let line of lines) {
       if (line.length === 0) { continue; }
@@ -97,16 +96,10 @@
     }
 
     return parsed;
-      },
+  });
 
-      visibleIngredients() {
-        return this.ingredients.filter(i => i._destroy !== true);
-      }
-    },
-
-    methods: {
-      createIngredient() {
-        const sort_orders = this.ingredients.map(i => i.sort_order);
+  function createIngredient() {
+    const sort_orders = props.ingredients.map(i => i.sort_order);
     sort_orders.push(0);
     const next_sort_order = Math.max(...sort_orders) + 5;
 
@@ -119,27 +112,27 @@
       ingredient_id: null,
       sort_order: next_sort_order
     };
-      },
+  }
 
-      addIngredient() {
-        this.ingredients.push(this.createIngredient());
-      },
+  function addIngredient() {
+    props.ingredients.push(createIngredient());
+  }
 
-      deleteFood(food) {
+  function deleteFood(food) {
     if (food.id) {
       food._destroy = true;
     } else {
-          const idx = this.ingredients.findIndex(i => i === food);
-          this.ingredients.splice(idx, 1);
+      const idx = props.ingredients.findIndex(i => i === food);
+      props.ingredients.splice(idx, 1);
+    }
   }
-      },
 
-      bulkEditIngredients() {
-        this.isBulkEditing = true;
+  function bulkEditIngredients() {
+    isBulkEditing.value = true;
 
     let text = [];
 
-        for (let item of this.visibleIngredients) {
+    for (let item of visibleIngredients.value) {
       text.push(
           item.quantity + " " +
           (item.units || "-") + " " +
@@ -149,16 +142,16 @@
       );
     }
 
-        this.bulkEditText = text.join("\n");
-      },
+    bulkEditText.value = text.join("\n");
+  }
 
-      cancelBulkEditing() {
-        this.isBulkEditing = false;
-      },
+  function cancelBulkEditing() {
+    isBulkEditing.value = false;
+  }
 
-      saveBulkEditing() {
-        const parsed = this.bulkIngredientPreview.filter(i => i !== null);
-        const existing = [...this.ingredients];
+  function saveBulkEditing() {
+    const parsed = bulkIngredientPreview.value.filter(i => i !== null);
+    const existing = [...props.ingredients];
     const newList = [];
 
     for (let parsedIngredient of parsed) {
@@ -177,7 +170,7 @@
       }
 
       if (newIngredient === null) {
-            newIngredient = this.createIngredient();
+        newIngredient = createIngredient();
       }
 
       newIngredient.quantity = parsedIngredient.quantity;
@@ -191,20 +184,14 @@
       newList.push({id: oldExisting.id, _destroy: true});
     }
 
-        this.ingredients.splice(0);
+    props.ingredients.splice(0);
     let sortIdx = 0;
     for (let n of newList) {
       n.sort_order = sortIdx++;
-          this.ingredients.push(n);
+      props.ingredients.push(n);
     }
 
-        this.isBulkEditing = false;
-      }
-    },
-
-    components: {
-      RecipeEditIngredientItem
-    }
+    isBulkEditing.value = false;
   }
 
 </script>

app/javascript/components/RecipeEditIngredientItem.vue

@@ -44,12 +44,13 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { useTemplateRef, watch } from "vue";
   import api from "../lib/Api";
 
-  export default {
-    props: {
+  const emit = defineEmits(["deleteFood"]);
+  const props = defineProps({
     ingredient: {
       required: true,
       type: Object
@@ -59,40 +60,34 @@
       type: Boolean,
       default: false
     }
-    },
+  });
 
-    methods: {
-      deleteFood(ingredient) {
-        this.$emit("deleteFood", ingredient);
-      },
+  const autocompleteElement = useTemplateRef("autocomplete");
 
-      updateSearchItems(text) {
+  watch(props.ingredient, (val) => {
+    if (props.ingredient.ingredient && props.ingredient.ingredient.name !== val) {
+      props.ingredient.ingredient_id = null;
+      props.ingredient.ingredient = null;
+    }
+  });
+
+  function deleteFood(ingredient) {
+    emit("deleteFood", ingredient);
+  }
+
+  function updateSearchItems(text) {
     return api.getSearchIngredients(text);
-      },
-
-      searchItemSelected(ingredient) {
-        this.ingredient.ingredient_id = ingredient.id;
-        this.ingredient.ingredient = ingredient;
-        this.ingredient.name = ingredient.name;
-      },
-
-      nameClick() {
-        if (this.ingredient.ingredient_id === null && this.ingredient.name !== null && this.ingredient.name.length > 2) {
-          this.$refs.autocomplete.updateOptions(this.ingredient.name);
   }
-      }
-    },
 
-    watch: {
-      'ingredient.name': function(val) {
-        if (this.ingredient.ingredient && this.ingredient.ingredient.name !== val) {
-          this.ingredient.ingredient_id = null;
-          this.ingredient.ingredient = null;
+  function searchItemSelected(ingredient) {
+    props.ingredient.ingredient_id = ingredient.id;
+    props.ingredient.ingredient = ingredient;
+    props.ingredient.name = ingredient.name;
   }
-      }
-    },
 
-    components: {
+  function nameClick() {
+    if (props.ingredient.ingredient_id === null && props.ingredient.name !== null && props.ingredient.name.length > 2) {
+      autocompleteElement.updateOptions(props.ingredient.name);
     }
   }
 
@@ -100,10 +95,10 @@
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
+  @use "bulma/sass/utilities" as bulma;
 
   .edit-ingredient-item {
-    border-bottom: solid 1px $grey-light;
+    border-bottom: solid 1px bulma.$grey-light;
     margin-bottom: 1.25rem;
 
     &:last-child {

app/javascript/components/RecipeShow.vue

@@ -38,7 +38,7 @@
               Ingredients
               <button class="button is-small is-primary" type="button" @click="showConvertDialog = true">Convert</button>
               <app-dropdown :open="addToTasksMenuOpen" label="Add to list" button-class="is-small is-primary" @open="addToTasksMenuOpen = true" @close="addToTasksMenuOpen = false">
-                <button class="button primary" v-for="tl in taskLists" :key="tl.id" @click="addRecipeToList(tl)">
+                <button class="button primary" v-for="tl in taskStore.taskLists" :key="tl.id" @click="addRecipeToList(tl)">
                   {{tl.name}}
                 </button>
               </app-dropdown>
@@ -65,14 +65,18 @@
         <div class="message-header" @click="showNutrition = !showNutrition">Nutrition Data</div>
         <div class="message-body" v-show="showNutrition">
           <table class="table">
+            <thead>
             <tr>
               <th>Item</th>
               <th>Value</th>
             </tr>
+            </thead>
+            <tbody>
             <tr v-for="nutrient in recipe.nutrition_data.nutrients" :key="nutrient.name">
               <td>{{nutrient.label}}</td>
               <td>{{ roundValue(nutrient.value) }}</td>
             </tr>
+            </tbody>
           </table>
 
           <h3 class="title is-5">Nutrition Calculation Warnings</h3>
@@ -146,30 +150,32 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, onMounted, ref, watch } from "vue";
+  import { useRouter } from "vue-router";
   import api from "../lib/Api";
-  import { mapActions, mapMutations, mapState } from "vuex";
+  import { useTaskStore } from "../stores/task";
 
-  export default {
-    props: {
+  const taskStore = useTaskStore();
+  const router = useRouter();
+
+  const props = defineProps({
     recipe: {
       required: true,
       type: Object
     }
-    },
+  });
 
-    data() {
-      return {
-        showNutrition: false,
-        showConvertDialog: false,
-        addToTasksMenuOpen: false,
+  const showNutrition = ref(false);
+  const showConvertDialog = ref(false);
+  const addToTasksMenuOpen = ref(false);
 
-        scaleValue: '1',
-        systemConvertValue: "",
-        unitConvertValue: "",
+  const scaleValue = ref('1');
+  const systemConvertValue = ref('');
+  const unitConvertValue = ref('');
 
-        scaleOptions: [
+  const scaleOptions = [
     '1/4',
     '1/3',
     '1/2',
@@ -180,88 +186,60 @@
     '2',
     '3',
     '4'
-        ]
-      };
-    },
+  ];
 
-    computed: {
-      ...mapState([
-          'taskLists'
-      ]),
-      
-      timeDisplay() {
-        let a = this.formatMinutes(this.recipe.active_time);
-        const t = this.formatMinutes(this.recipe.total_time);
+  const timeDisplay = computed(() => {
+    let a = formatMinutes(props.recipe.active_time);
+    const t = formatMinutes(props.recipe.total_time);
 
     if (a) {
       a = ` (${a} active)`;
     }
 
     return t + a;
-      },
+  });
 
-      sourceUrl() {
+  const sourceUrl = computed(() => {
     try {
-          return new URL(this.recipe.source);
+      return new URL(props.recipe.source);
     } catch(err) {
       return null;
     }
-      },
-
-      isSourceUrl() {
-        return this.sourceUrl !== null;
-      },
-
-      sourceText() {
-        if (this.isSourceUrl) {
-          return this.sourceUrl.host;
-        } else {
-          return this.source;
-        }
-      }
-    },
-
-    watch: {
-      recipe: {
-        handler: function(r) {
-          if (r) {
-            this.scaleValue = r.converted_scale || '1';
-            this.systemConvertValue = r.converted_system;
-            this.unitConvertValue = r.converted_unit;
-          }
-        },
-        immediate: true
-      }
-    },
-
-    methods: {
-      ...mapActions([
-          'ensureTaskLists'
-      ]),
-      
-      ...mapMutations([
-          'setCurrentTaskList'
-      ]),
-
-      addRecipeToList(list) {
-        console.log(list);
-        api.addRecipeToTaskList(list.id, this.recipe.id)
-        .then(() => {
-          this.setCurrentTaskList(list);
-          this.$router.push({name: 'task_lists'})
   });
-      },
 
-      convert() {
-        this.showConvertDialog = false;
-        this.$router.push({name: 'recipe', query: { scale: this.scaleValue, system: this.systemConvertValue, unit: this.unitConvertValue }});
-      },
+  const isSourceUrl = computed(() => sourceUrl.value !== null);
+  const sourceText = computed(() => isSourceUrl.value ? sourceUrl.value.host : props.recipe.source);
 
-      roundValue(v) {
+  watch(props.recipe, (r) => {
+    if (r) {
+      scaleValue.value = r.converted_scale || '1';
+      systemConvertValue.value = r.converted_system;
+      unitConvertValue.value = r.converted_unit;
+    }
+  }, { immediate: true });
+
+  onMounted(() => {
+    taskStore.ensureTaskLists();
+  });
+
+  function addRecipeToList(list) {
+    api.addRecipeToTaskList(list.id, props.recipe.id)
+        .then(() => {
+          taskStore.setCurrentTaskList(list);
+          router.push({name: 'task_lists'})
+        });
+  }
+
+  function convert() {
+    showConvertDialog.value = false;
+    router.push({name: 'recipe', query: { scale: scaleValue.value, system: systemConvertValue.value, unit: unitConvertValue.value }});
+  }
+
+  function roundValue(v) {
     return parseFloat(v).toFixed(2);
-      },
+  }
 
-      formatMinutes(min) {
+  function formatMinutes(min) {
     if (min) {
       const partUnits = [
         {unit: "d", minutes: 60 * 24},
@@ -286,12 +264,6 @@
       return "";
     }
   }
-    },
-    
-    mounted() {
-      this.ensureTaskLists();
-    }
-  }
 
 </script>
 

app/javascript/components/TaskItemEdit.vue

@@ -24,38 +24,41 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+  import { onMounted, useTemplateRef } from "vue";
+
+  const emit = defineEmits(["save"]);
+  const props = defineProps({
     taskItem: {
       required: true,
       type: Object
     }
-    },
+  });
 
-    methods: {
-      inputKeydown(evt) {
+  const nameElement = useTemplateRef("nameInput");
+
+  onMounted(() => focus());
+
+  function inputKeydown(evt) {
     switch (evt.key) {
       case "Enter":
         evt.preventDefault();
-            this.save();
+        save();
+    }
   }
-      },
 
-      save() {
-        this.$emit("save", this.taskItem);
-      },
+  function save() {
+    emit("save", props.taskItem);
+  }
 
-      focus() {
-        this.$refs.nameInput.focus();
+  function focus() {
+    nameElement.value.focus();
   }
-    },
 
-    mounted() {
-      this.focus();
-    }
-  }
+  defineExpose({
+    focus
+  });
 
 </script>
 

app/javascript/components/TaskItemList.vue

@@ -60,138 +60,106 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, ref, useTemplateRef } from "vue";
   import * as Errors from '../lib/Errors';
-  import { mapActions } from "vuex";
-  import cloneDeep from "lodash/cloneDeep";
-
+  import { useTaskStore } from "../stores/task";
+  import { useLoadResource } from "../lib/useLoadResource";
   import TaskItemEdit from "./TaskItemEdit";
 
-  const newItemTemplate = function(listId) {
-    return {
-      task_list_id: listId,
-      name: '',
-      quantity: '',
-      completed: false
-    };
-  };
+  const { loadResource } = useLoadResource();
+  const taskStore = useTaskStore();
+  const itemEditElement = useTemplateRef("itemEdit");
 
-  export default {
-    props: {
+  const props = defineProps({
     taskList: {
       required: true,
       type: Object
     }
-    },
+  });
 
-    data() {
+  const showAddItem = ref(false);
+  const newItem = ref(null);
+  const newItemValidationErrors = ref({});
+
+  const completedTaskItems = computed(() => (props.taskList ? props.taskList.task_items : []).filter(i => i.completed));
+  const uncompletedTaskItems = computed(() => (props.taskList ? props.taskList.task_items : []).filter(i => !i.completed));
+  const completedItemCount = computed(() => completedTaskItems.value.length);
+  const uncompletedItemCount = computed(() => uncompletedTaskItems.value.length);
+  const taskItems = computed(() => uncompletedTaskItems.value.concat(completedTaskItems.value));
+
+  function newItemTemplate() {
     return {
-        showAddItem: false,
-        newItem: null,
-        newItemValidationErrors: {}
+      task_list_id: null,
+      name: '',
+      quantity: '',
+      completed: false
     };
-    },
-
-    computed: {
-      completedItemCount() {
-        return this.taskList === null ? 0 : this.taskList.task_items.filter(i => i.completed).length;
-      },
-
-      uncompletedItemCount() {
-        return this.taskList === null ? 0 : this.taskList.task_items.filter(i => !i.completed).length;
-      },
-      completedTaskItems() {
-        return (this.taskList ? this.taskList.task_items : []).filter(i => i.completed);
-      },
-
-      uncompletedTaskItems() {
-        return (this.taskList ? this.taskList.task_items : []).filter(i => !i.completed);
-      },
-
-      taskItems() {
-        return this.uncompletedTaskItems.concat(this.completedTaskItems);
   }
-    },
 
-    methods: {
-      ...mapActions([
-        'createTaskItem',
-        'updateTaskItem',
-        'deleteTaskItems',
-        'completeTaskItems'
-      ]),
-
-      save() {
-        this.loadResource(
-          this.createTaskItem(this.newItem)
+  function save() {
+    newItem.value.task_list_id = props.taskList.id;
+    loadResource(
+        taskStore.createTaskItem(newItem.value)
             .then(() => {
-              this.newItem = newItemTemplate(this.taskList.id);
-              this.$refs.itemEdit.focus();
+              newItem.value = newItemTemplate();
+              itemEditElement.value.focus();
             })
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.newItemValidationErrors = err.validationErrors()))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => newItemValidationErrors.value = err.validationErrors()))
     )
-      },
+  }
 
-      toggleItem(i) {
-        this.loadResource(
-          this.completeTaskItems({
-            taskList: this.taskList,
+  function toggleItem(i) {
+    loadResource(
+        taskStore.completeTaskItems({
+          taskList: props.taskList,
           taskItems: [i],
           completed: !i.completed
         })
     );
-      },
+  }
 
-      toggleShowAddItem() {
-        this.newItem = newItemTemplate(this.taskList.id);
-        this.showAddItem = !this.showAddItem;
-      },
+  function toggleShowAddItem() {
+    newItem.value = newItemTemplate();
+    showAddItem.value = !showAddItem.value;
+  }
 
-      completeAllItems() {
-        const toComplete = this.taskList.task_items.filter(i => !i.completed);
-        this.loadResource(
-          this.completeTaskItems({
-            taskList: this.taskList,
+  function completeAllItems() {
+    const toComplete = props.taskList.task_items.filter(i => !i.completed);
+    loadResource(
+        taskStore.completeTaskItems({
+          taskList: props.taskList,
           taskItems: toComplete,
           completed: true
         })
     )
-      },
+  }
 
-      unCompleteAllItems() {
-        const toUnComplete = this.taskList.task_items.filter(i => i.completed);
-        this.loadResource(
-          this.completeTaskItems({
-            taskList: this.taskList,
+  function unCompleteAllItems() {
+    const toUnComplete = props.taskList.task_items.filter(i => i.completed);
+    loadResource(
+        taskStore.completeTaskItems({
+          taskList: props.taskList,
           taskItems: toUnComplete,
           completed: false
         })
     )
-      },
+  }
 
-      deleteCompletedItems() {
-        this.loadResource(
-          this.deleteTaskItems({
-            taskList: this.taskList,
-            taskItems: this.taskList.task_items.filter(i => i.completed)
+  function deleteCompletedItems() {
+    loadResource(
+        taskStore.deleteTaskItems({
+          taskList: props.taskList,
+          taskItems: props.taskList.task_items.filter(i => i.completed)
         })
     );
-      },
-
-    },
-
-    components: {
-      TaskItemEdit
-    }
   }
 
 </script>
 
 <style lang="scss" scoped>
 
-  @import "../styles/variables";
-
   .columns {
     margin-top: 0;
     margin-bottom: 0;

app/javascript/components/TaskListDropdownItem.vue

@@ -14,10 +14,13 @@
 
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+  import { ref } from "vue";
+
+  const emit = defineEmits(["select", "delete"]);
+
+  const props = defineProps({
     taskList: {
       type: Object,
       required: true
@@ -28,44 +31,38 @@
       required: false,
       default: false
     }
-    },
+  });
 
-    data() {
-      return {
-        hovering: false,
-        confirmingDelete: false
-      };
-    },
+  const hovering = ref(false);
+  const confirmingDelete = ref(false);
 
-    methods: {
-      selectList() {
-        this.$emit("select", this.taskList);
-      },
-
-      deleteList() {
-        this.confirmingDelete = false;
-        this.$emit("delete", this.taskList);
-      }
+  function selectList() {
+    emit("select", props.taskList);
   }
+
+  function deleteList() {
+    confirmingDelete.value = false;
+    emit("delete", props.taskList);
   }
 
 </script>
 
 <style lang="scss" scoped>
 
-  @import "~styles/variables";
+  @use "bulma/sass/utilities" as bulma;
+  @use 'sass:color';
 
   div.dropdown-item {
     cursor: pointer;
 
     &.hovered {
-      color: $black;
-      background-color: $background;
+      color: bulma.$black;
+      background-color: bulma.$background;
     }
 
     &.is-active {
-      color: $link-invert;
-      background-color: $link;
+      color: color.invert(bulma.$link);
+      background-color: bulma.$link;
     }
   }
 

app/javascript/components/TaskListMiniForm.vue

@@ -14,10 +14,11 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+  const emit = defineEmits(["save"]);
+
+  const props = defineProps({
     taskList: {
       required: true,
       type: Object
@@ -28,20 +29,17 @@
       type: Object,
       default: function() { return {}; }
     }
-    },
+  });
 
-    methods: {
-      save() {
-        this.$emit("save");
-      },
+  function save() {
+    emit("save");
+  }
 
-      nameKeydownHandler(evt) {
+  function nameKeydownHandler(evt) {
     switch (evt.key) {
       case "Enter":
         evt.preventDefault();
-            this.save();
-        }
-      }
+        save();
     }
   }
 

app/javascript/components/The404Page.vue

@@ -5,10 +5,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-
-  }
 
 </script>

app/javascript/components/TheAboutPage.vue

@@ -7,7 +7,7 @@
     </p>
 
     <p>
-      Parsley is released under the MIT License.  All code &copy; Dan Elbert 2020.
+      Parsley is released under the MIT License.  All code &copy; Dan Elbert 2024.
     </p>
 
     <p>
@@ -19,11 +19,7 @@
   </div>
 </template>
 
-<script>
-
-  export default {
-
-  }
+<script setup>
 
 </script>
 

app/javascript/components/TheAdminUserEditor.vue

@@ -2,11 +2,8 @@
 
 </template>
 
-<script>
+<script setup>
 
-  export default {
-
-  }
 
 </script>
 

app/javascript/components/TheAdminUserList.vue

@@ -29,24 +29,21 @@
 
 </template>
 
-<script>
+<script setup>
 
+  import { onBeforeMount, ref } from "vue";
+  import { useLoadResource } from "../lib/useLoadResource";
   import api from "../lib/Api";
 
-  export default {
-    data() {
-      return {
-        userList: []
-      };
-    },
+  const { loadResource } = useLoadResource();
+  const userList = ref([]);
 
-    created() {
-      this.loadResource(
+  onBeforeMount(() => {
+    loadResource(
         api.getAdminUserList()
-          .then(list => this.userList = list)
+            .then(list => userList.value = list)
     );
-    }
-  }
+  });
 
 </script>
 

app/javascript/components/TheCalculator.vue

@@ -40,93 +40,64 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, ref, watch } from "vue";
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        input: '',
-        outputUnit: '',
-        ingredient_name: '',
-        ingredient: null,
-        density: '',
-        output: '',
-        errors: {}
-      };
-    },
+  const { loadResource } = useLoadResource();
 
-    computed: {
-      inputErrors() {
-        if (this.errors.input && this.errors.input.length > 0) {
-          return this.errors.input.join(", ");
-        } else {
-          return null;
-        }
-      },
+  const input = ref("");
+  const outputUnit = ref("");
+  const ingredient_name = ref("");
+  const ingredient = ref(null);
+  const density = ref("");
+  const output = ref("");
+  const errors = ref({});
 
-      outputUnitErrors() {
-        if (this.errors.output_unit && this.errors.output_unit.length > 0) {
-          return this.errors.output_unit.join(", ");
-        } else {
-          return null;
-        }
-      },
+  const inputErrors = computed(() => getErrors("input"));
+  const outputUnitErrors = computed(() => getErrors("output_unit"));
+  const densityErrors = computed(() => getErrors("density"));
 
-      densityErrors() {
-        if (this.errors.density && this.errors.density.length > 0) {
-          return this.errors.density.join(", ");
-        } else {
-          return null;
-        }
-      }
-    },
-
-    methods: {
-      updateSearchItems(text) {
-        return api.getSearchIngredients(text);
-      },
-
-      searchItemSelected(ingredient) {
-        this.ingredient = ingredient || null;
-        this.ingredient_name = ingredient.name || null;
-        this.density = ingredient.density || null;
-      },
-
-      updateOutput: debounce(function() {
-        if (this.input && this.input.length > 0) {
-          this.loadResource(api.getCalculate(this.input, this.outputUnit, this.ingredient ? this.ingredient.ingredient_id : null, this.density)
+  const updateOutput = debounce(function() {
+    if (input.value && input.value.length > 0) {
+      loadResource(api.getCalculate(input.value, outputUnit.value, ingredient.value ? ingredient.value.ingredient_id : null, density.value)
           .then(data => {
-              this.output = data.output;
-              this.errors = data.errors;
+            output.value = data.output;
+            errors.value = data.errors;
           })
       );
     }
-      }, 500)
-    },
+  }, 500);
 
-    watch: {
-      'ingredient_name': function(val) {
-        if (this.ingredient && this.ingredient.name !== val) {
-          this.ingredient = null;
+  watch(ingredient_name, function(val) {
+    if (ingredient.value && ingredient.value.name !== val) {
+      ingredient.value = null;
     }
-      }
-    },
+  });
 
-    created() {
-      this.$watch(
-        function() {
-          return [this.input, this.outputUnit, this.density, this.ingredient];
-        },
-        function() {
-          this.updateOutput();
-        }
-      )
-    },
+  watch(
+      [input, outputUnit, density, ingredient],
+      () => updateOutput()
+  );
 
-    components: {
+  function updateSearchItems(text) {
+    return api.getSearchIngredients(text);
+  }
+
+  function searchItemSelected(ingredient) {
+    ingredient.value = ingredient || null;
+    ingredient_name.value = ingredient.name || null;
+    density.value = ingredient.density || null;
+  }
+
+  function getErrors(type) {
+    if (errors.value[type] && errors.value[type].length > 0) {
+      return errors.value[type].join(", ");
+    } else {
+      return null;
     }
   }
 

app/javascript/components/TheFood.vue

@@ -7,41 +7,33 @@
       <food-show :food="food"></food-show>
     </div>
 
-    <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_food', params: { id: foodId }}">Edit</router-link>
+    <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_food', params: { id: foodId }}">Edit</router-link>
     <router-link class="button" to="/foods">Back</router-link>
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, onBeforeMount, ref } from "vue";
+  import { useRoute } from "vue-router";
   import FoodShow from "./FoodShow";
-  import { mapState } from "vuex";
   import api from "../lib/Api";
+  import { useLoadResource } from "../lib/useLoadResource";
+  import { useAppConfigStore } from "../stores/appConfig";
 
-  export default {
-    data: function () {
-      return {
-        food: null
-      }
-    },
+  const { loadResource } = useLoadResource();
+  const appConfig = useAppConfigStore();
+  const route = useRoute();
 
-    computed: {
-      ...mapState({
-        foodId: state => state.route.params.id,
-      })
-    },
+  const food = ref(null);
+  const foodId = computed(() => route.params.id);
 
-    created() {
-      this.loadResource(
-        api.getFood(this.foodId)
-          .then(data => { this.food = data; return data; })
+  onBeforeMount(() => {
+    loadResource(
+        api.getFood(foodId.value)
+            .then(data => { food.value = data; return data; })
     );
-    },
-
-    components: {
-      FoodShow
-    }
-  }
+  });
 
 </script>
 

app/javascript/components/TheFoodCreator.vue

@@ -9,17 +9,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { reactive, ref } from "vue";
+  import { useRouter } from "vue-router";
   import FoodEdit from "./FoodEdit";
-  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        food: {
+  const { loadResource } = useLoadResource();
+  const router = useRouter();
+
+  const validationErrors = ref({});
+  const food = reactive({
     name: null,
     notes: null,
     ndbn: null,
@@ -50,26 +53,16 @@
     cholesterol: null,
     lipids: null,
     food_units: []
-        },
-        validationErrors: {}
-      }
-    },
+  });
 
-    methods: {
-      save() {
-        this.validationErrors = {}
-        this.loadResource(
-          api.postFood(this.food)
-            .then(() => this.$router.push('/foods'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+  function save() {
+    validationErrors.value = {}
+    loadResource(
+        api.postFood(food)
+            .then(() => router.push('/foods'))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
   }
-    },
-
-    components: {
-      FoodEdit
-    }
-  }
 
 </script>
 

app/javascript/components/TheFoodEditor.vue

@@ -14,48 +14,37 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, onBeforeMount, ref } from "vue";
+  import { useRoute, useRouter } from "vue-router";
   import FoodEdit from "./FoodEdit";
-  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data: function () {
-      return {
-        food: null,
-        validationErrors: {}
-      };
-    },
+  const { loadResource } = useLoadResource();
+  const router = useRouter();
+  const route = useRoute();
 
-    computed: {
-      ...mapState({
-        foodId: state => state.route.params.id,
-      })
-    },
+  const food = ref(null);
+  const validationErrors = ref({});
+  const foodId = computed(() => route.params.id);
 
-    methods: {
-      save() {
-        this.validationErrors = {};
-        this.loadResource(
-          api.patchFood(this.food)
-            .then(() => this.$router.push({name: 'food', params: {id: this.foodId }}))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+  onBeforeMount(() => {
+    loadResource(
+        api.getFood(foodId.value)
+            .then(data => { food.value = data; return data; })
     );
-      }
-    },
+  });
 
-    created() {
-      this.loadResource(
-        api.getFood(this.foodId)
-          .then(data => { this.food = data; return data; })
+  function save() {
+    validationErrors.value = {};
+    loadResource(
+        api.patchFood(food.value)
+            .then(() => router.push({name: 'food', params: {id: foodId.value }}))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
-    },
-
-    components: {
-      FoodEdit
-    }
   }
 
 </script>

app/javascript/components/TheFoodList.vue

@@ -3,7 +3,7 @@
     <h1 class="title">Ingredients</h1>
 
     <div class="buttons">
-      <router-link v-if="isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
+      <router-link v-if="appConfig.isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
     </div>
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="food" @changePage="changePage"></app-pager>
@@ -35,12 +35,14 @@
         <td>{{i.kcal}}</td>
         <td>{{i.density}}</td>
         <td>
-          <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_food', params: { id: i.id } }">
+          <template v-if="appConfig.isLoggedIn">
+            <router-link class="button" :to="{name: 'edit_food', params: { id: i.id } }">
               <app-icon icon="pencil"></app-icon>
             </router-link>
-          <button v-if="isLoggedIn" type="button" class="button is-danger" @click="deleteFood(i)">
+            <button type="button" class="button is-danger" @click="deleteFood(i)">
               <app-icon icon="x"></app-icon>
             </button>
+          </template>
         </td>
       </tr>
       </transition-group>
@@ -49,114 +51,80 @@
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="food" @changePage="changePage"></app-pager>
 
     <div class="buttons">
-      <router-link v-if="isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
+      <router-link v-if="appConfig.isLoggedIn" :to="{name: 'new_food'}" class="button is-primary">Create Ingredient</router-link>
     </div>
 
-    <app-confirm :open="showConfirmFoodDelete" :message="confirmFoodDeleteMessage" :cancel="foodDeleteCancel" :confirm="foodDeleteConfirm"></app-confirm>
+    <app-confirm :open="showConfirmFoodDelete" title="Delete Ingredient?" :message="confirmFoodDeleteMessage" @cancel="foodDeleteCancel" @confirm="foodDeleteConfirm"></app-confirm>
 
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, reactive, ref, watch } from "vue";
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
+  import { useAppConfigStore } from "../stores/appConfig";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        foodData: null,
-        foodForDeletion: null,
-        search: {
+  const appConfig = useAppConfigStore();
+  const { loadResource } = useLoadResource();
+
+  const foodData = ref(null);
+  const foodForDeletion = ref(null);
+  const search = reactive({
     page: 1,
     per: 25,
     name: null
-        }
-      };
-    },
+  });
 
-    computed: {
-      foods() {
-        if (this.foodData) {
-          return this.foodData.foods;
-        } else {
-          return [];
-        }
-      },
-
-      totalPages() {
-        if (this.foodData) {
-          return this.foodData.total_pages
-        }
-        return 0;
-      },
-
-      currentPage() {
-        if (this.foodData) {
-          return this.foodData.current_page
-        }
-        return 0;
-      },
-
-      showConfirmFoodDelete() {
-        return this.foodForDeletion !== null;
-      },
-
-      confirmFoodDeleteMessage() {
-        if (this.foodForDeletion !== null) {
-          return `Are you sure you want to delete ${this.foodForDeletion.name}?`;
+  const foods = computed(() => foodData.value?.foods || []);
+  const totalPages = computed(() => foodData.value?.total_pages || 0);
+  const currentPage = computed(() => foodData.value?.current_page || 0);
+  const showConfirmFoodDelete = computed(() => foodForDeletion.value !== null);
+  const confirmFoodDeleteMessage = computed(() => {
+    if (foodForDeletion.value !== null) {
+      return `Are you sure you want to delete ${foodForDeletion.value.name}?`;
     } else {
       return "??";
     }
-      }
-    },
+  });
 
-    methods: {
-      changePage(idx) {
-        this.search.page = idx;
-      },
-
-      getList: debounce(function() {
-        return this.loadResource(
-          api.getFoodList(this.search.page, this.search.per, this.search.name)
-            .then(data => this.foodData = data)
+  const getList = debounce(function() {
+    return loadResource(
+        api.getFoodList(search.page, search.per, search.name)
+            .then(data => foodData.value = data)
     );
-      }, 500, {leading: true, trailing: true}),
+  }, 500, {leading: true, trailing: true});
 
-      deleteFood(food) {
-        this.foodForDeletion = food;
-      },
-
-      foodDeleteCancel() {
-        this.foodForDeletion = null;
-      },
-
-      foodDeleteConfirm() {
-        if (this.foodForDeletion !== null) {
-          this.loadResource(
-            api.deleteFood(this.foodForDeletion.id).then(res => {
-              this.foodForDeletion = null;
-              return this.getList();
-            })
-          );
-
-          console.log("This is where the thing happens!!");
-          this.foodForDeletion = null;
-        }
-      }
-    },
-
-    created() {
-      this.$watch("search",
-        () => this.getList(),
+  watch(search,
+      () => getList(),
       {
         deep: true,
         immediate: true
       }
   );
-    },
 
-    components: {
+  function changePage(idx) {
+    search.page = idx;
+  }
+
+  function deleteFood(food) {
+    foodForDeletion.value = food;
+  }
+
+  function foodDeleteCancel() {
+    foodForDeletion.value = null;
+  }
+
+  function foodDeleteConfirm() {
+    if (foodForDeletion.value !== null) {
+      loadResource(
+          api.deleteFood(foodForDeletion.value.id).then(res => {
+            foodForDeletion.value = null;
+            return getList();
+          })
+      );
     }
   }
 

app/javascript/components/TheLog.vue

@@ -8,42 +8,34 @@
     </div>
 
     <div class="buttons">
-      <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_log', params: { id: logId }}">Edit</router-link>
+      <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_log', params: { id: logId }}">Edit</router-link>
       <router-link class="button" to="/logs">Back</router-link>
     </div>
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, onBeforeMount, ref } from "vue";
+  import { useRoute } from "vue-router";
   import LogShow from "./LogShow";
-  import { mapState } from "vuex";
   import api from "../lib/Api";
+  import { useLoadResource } from "../lib/useLoadResource";
+  import { useAppConfigStore } from "../stores/appConfig";
 
-  export default {
-    data: function () {
-      return {
-        log: null
-      }
-    },
+  const { loadResource } = useLoadResource();
+  const route = useRoute();
+  const appConfig = useAppConfigStore();
 
-    computed: {
-      ...mapState({
-        logId: state => state.route.params.id,
-      })
-    },
+  const log = ref(null);
+  const logId = computed(() => route.params.id);
 
-    created() {
-      this.loadResource(
-        api.getLog(this.logId)
-          .then(data => { this.log = data; return data; })
+  onBeforeMount(() => {
+    loadResource(
+        api.getLog(logId.value)
+            .then(data => { log.value = data; return data; })
     );
-    },
-
-    components: {
-      LogShow
-    }
-  }
+  });
 
 </script>
 

app/javascript/components/TheLogCreator.vue

@@ -16,54 +16,44 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, onBeforeMount, reactive, ref } from "vue";
+  import { useRoute, useRouter } from "vue-router";
   import LogEdit from "./LogEdit";
-  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        validationErrors: {},
-        log: {
+  const { loadResource } = useLoadResource();
+  const route = useRoute();
+  const router = useRouter();
+
+  const validationErrors = ref({});
+  const log = reactive({
     date: null,
     rating: null,
     notes: null,
     recipe: null
-        }
-      }
-    },
+  });
 
-    computed: {
-      ...mapState({
-        recipeId: state => state.route.params.recipeId,
-      })
-    },
+  const recipeId = computed(() => route.params.recipeId);
 
-    methods: {
-      save() {
-        this.log.original_recipe_id = this.recipeId;
-        this.validationErrors = {};
-
-        this.loadResource(
-          api.postLog(this.log)
-            .then(() => this.$router.push('/'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+  onBeforeMount(() => {
+    loadResource(
+        api.getRecipe(recipeId.value, null, null, null, data => log.recipe = data)
     );
-      }
-    },
+  });
 
-    created() {
-      this.loadResource(
-        api.getRecipe(this.recipeId, null, null, null, data => this.log.recipe = data)
+  function save() {
+    log.original_recipe_id = recipeId.value;
+    validationErrors.value = {};
+
+    loadResource(
+        api.postLog(log)
+            .then(() => router.push('/'))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
-    },
-
-    components: {
-      LogEdit
-    }
   }
 
 </script>

app/javascript/components/TheLogEditor.vue

@@ -16,48 +16,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  import { mapState } from "vuex";
+  import { computed, onBeforeMount, ref, watch } from "vue";
+  import { useRoute, useRouter } from "vue-router";
   import api from "../lib/Api";
   import * as Errors from "../lib/Errors";
   import LogEdit from "./LogEdit";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        validationErrors: {},
-        log: null
-      }
-    },
+  const { loadResource } = useLoadResource();
+  const route = useRoute();
+  const router = useRouter();
 
-    computed: {
-      ...mapState({
-        logId: state => state.route.params.id,
-      })
-    },
+  const validationErrors = ref({});
+  const log = ref(null);
 
-    methods: {
-      save() {
-        this.validationErrors = {};
-        this.loadResource(
-          api.patchLog(this.log)
-            .then(() => this.$router.push('/'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+  const logId = computed(() => route.params.id);
+
+  onBeforeMount(() => {
+    loadResource(
+        api.getLog(logId.value)
+            .then(data => { log.value = data; return data; })
     );
-      }
-    },
+  });
 
-    created() {
-      this.loadResource(
-        api.getLog(this.logId)
-          .then(data => { this.log = data; return data; })
+  function save() {
+    validationErrors.value = {};
+    loadResource(
+        api.patchLog(log.value)
+            .then(() => router.push('/'))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
-    },
-
-    components: {
-      LogEdit
-    }
   }
 
 </script>

app/javascript/components/TheLogList.vue

@@ -5,86 +5,64 @@
     </h1>
 
     <table class="table">
+      <thead>
       <tr>
         <th>Recipe</th>
         <th>Date</th>
         <th>Rating</th>
         <th>Notes</th>
       </tr>
+      </thead>
 
+      <tbody>
       <tr v-for="l in logs" :key="l.id">
         <td> <router-link :to="{name: 'log', params: {id: l.id}}">{{l.recipe.name}}</router-link></td>
         <td><app-date-time :date-time="l.date" :show-time="false"></app-date-time> </td>
-        <td><app-rating :value="l.rating" readonly></app-rating></td>
+        <td><app-rating :model-value="l.rating" readonly></app-rating></td>
         <td>{{l.notes}}</td>
       </tr>
+      </tbody>
 
     </table>
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, reactive, ref, watch } from "vue";
   import api from "../lib/Api";
   import debounce from "lodash/debounce";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        logData: null,
-        search: {
+  const { loadResource } = useLoadResource();
+
+  const logData = ref(null);
+  const search = reactive({
     page: 1,
     per: 25
-        }
-      };
-    },
+  });
 
-    computed: {
-      logs() {
-        if (this.logData) {
-          return this.logData.logs;
-        } else {
-          return [];
-        }
-      },
+  const logs = computed(() => logData.value?.logs || []);
+  const totalPages = computed(() => logData.value?.total_pages || 0);
+  const currentPage = computed(() => logData.value?.current_page || 0);
 
-      totalPages() {
-        if (this.logData) {
-          return this.logData.total_pages
-        }
-        return 0;
-      },
-
-      currentPage() {
-        if (this.logData) {
-          return this.logData.current_page
-        }
-        return 0;
-      }
-    },
-
-    methods: {
-      changePage(idx) {
-        this.search.page = idx;
-      },
-
-      getList: debounce(function() {
-        this.loadResource(
-          api.getLogList(this.search.page, this.search.per)
-            .then(data => this.logData = data)
+  const getList = debounce(function() {
+    loadResource(
+        api.getLogList(search.page, search.per)
+            .then(data => logData.value = data)
     );
-      }, 500, {leading: true, trailing: true})
-    },
+  }, 500, {leading: true, trailing: true});
 
-    created() {
-      this.$watch("search",
-        () => this.getList(),
+  watch(search,
+      () => getList(),
       {
         deep: true,
         immediate: true
       }
   );
-    }
+
+  function changePage(idx) {
+    search.page = idx;
   }
 
 </script>

app/javascript/components/TheNotesList.vue

@@ -9,12 +9,15 @@
     </app-modal>
 
     <table class="table">
+      <thead>
       <tr>
         <th>Note</th>
         <th>Date</th>
         <th></th>
       </tr>
+      </thead>
 
+      <tbody>
       <tr v-for="n in notes" :key="n.id">
         <td>
           {{ n.content }}
@@ -28,69 +31,61 @@
           </button>
         </td>
       </tr>
+      </tbody>
 
     </table>
   </div>
 
 </template>
 
-<script>
+<script setup>
 
+  import { onBeforeMount, ref } from "vue";
   import api from "../lib/Api";
   import NoteEdit from "./NoteEdit";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        notes: [],
-        editNote: null
-      };
-    },
+  const { loadResource } = useLoadResource();
+  const notes = ref([]);
+  const editNote = ref(null);
 
-    methods: {
-      refreshList() {
-        this.loadResource(
+  onBeforeMount(() => {
+    refreshList();
+  });
+
+  function refreshList() {
+    loadResource(
         api.getNoteList()
-            .then(data => this.notes = data)
+            .then(data => notes.value = data)
     );
-      },
+  }
 
-      addNote() {
-        this.editNote = { id: null, content: "" };
-      },
+  function addNote() {
+    editNote.value = { id: null, content: "" };
+  }
 
-      saveNote() {
-        this.loadResource(
-          api.postNote(this.editNote)
+  function saveNote() {
+    loadResource(
+        api.postNote(editNote.value)
             .then(() => {
-              this.editNote = null;
-              return this.refreshList();
+              editNote.value = null;
+              return refreshList();
             })
     );
-      },
+  }
 
-      cancelNote() {
-        this.editNote = null;
-      },
+  function cancelNote() {
+    editNote.value = null;
+  }
 
-      deleteNote(n) {
-        this.loadResource(
+  function deleteNote(n) {
+    loadResource(
         api.deleteNote(n)
             .then(() => {
-              return this.refreshList();
+              return refreshList();
             })
     );
   }
-    },
-
-    created() {
-      this.refreshList();
-    },
-
-    components: {
-      NoteEdit
-    }
-  }
 
 </script>
 

app/javascript/components/TheRecipe.vue

@@ -17,61 +17,51 @@
       <recipe-show :recipe="recipe"></recipe-show>
     </div>
 
-    <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_recipe', params: { id: recipeId }}">Edit</router-link>
+    <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_recipe', params: { id: recipeId }}">Edit</router-link>
     <router-link class="button" to="/">Back</router-link>
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, ref, watch } from "vue";
+  import { useRoute } from "vue-router";
   import RecipeShow from "./RecipeShow";
-  import { mapState } from "vuex";
   import api from "../lib/Api";
+  import { useLoadResource } from "../lib/useLoadResource";
+  import { useAppConfigStore } from "../stores/appConfig";
 
-  export default {
-    data: function () {
-      return {
-        recipe: null,
-        showNutrition: false
-      }
-    },
+  const appConfig = useAppConfigStore();
+  const route = useRoute();
+  const { loadResource } = useLoadResource();
+  const recipe = ref(null);
 
-    computed: {
-      ...mapState({
-        recipeId: state => state.route.params.id,
-        routeQuery: state => state.route.query,
-        scale: state => state.route.query.scale || null,
-        system: state => state.route.query.system || null,
-        unit: state => state.route.query.unit || null
-      }),
+  const recipeId = computed(() => route.params.id);
+  const scale = computed(() => route.query.scale || null);
+  const system = computed(() => route.query.system || null);
+  const unit = computed(() => route.query.unit || null);
+  const isScaled = computed(() => recipe.value?.converted_scale?.length !== undefined && recipe.value.converted_scale.length > 0 && recipe.value.converted_scale !== "1");
 
-      isScaled() {
-        return this.recipe.converted_scale !== null && this.recipe.converted_scale.length > 0 && this.recipe.converted_scale !== "1";
-      }
-    },
-
-    watch: {
-      routeQuery() {
-        this.refreshData();
-      }
-    },
-
-    methods: {
-      refreshData() {
-        this.loadResource(
-          api.getRecipe(this.recipeId, this.scale, this.system, this.unit, data => this.recipe = data)
+  watch(
+      () => route.query,
+      () => refreshData(),
+      { immediate: true }
   );
-      }
-    },
 
-    created() {
-      this.refreshData();
-    },
-
-    components: {
-      RecipeShow
+  watch(
+      () => recipe.value,
+      (newRecipe) => {
+        if (newRecipe) {
+          document.title = `${newRecipe.name}`;
         }
       }
+  )
+
+  function refreshData() {
+    loadResource(
+        api.getRecipe(recipeId.value, scale.value, system.value, unit.value, data => recipe.value = data)
+    );
+  }
 
 </script>
 

app/javascript/components/TheRecipeCreator.vue

@@ -13,17 +13,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { ref } from "vue";
+  import { useRouter } from "vue-router";
   import RecipeEdit from "./RecipeEdit";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        validationErrors: {},
-        recipe: {
+  const router = useRouter();
+  const { loadResource } = useLoadResource();
+
+  const validationErrors = ref({});
+  const recipe = ref({
     name: null,
     source: null,
     description: null,
@@ -33,25 +36,16 @@
     step_text: null,
     tags: [],
     ingredients: []
-        }
-      }
-    },
+  });
 
-    methods: {
-      save() {
-        this.validationErrors = {};
-        this.loadResource(
-          api.postRecipe(this.recipe)
-            .then(() => this.$router.push('/'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+  function save() {
+    validationErrors.value = {};
+    loadResource(
+        api.postRecipe(recipe.value)
+            .then(() => router.push('/'))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
   }
-    },
-
-    components: {
-      RecipeEdit
-    }
-  }
 
 </script>
 

app/javascript/components/TheRecipeEditor.vue

@@ -18,48 +18,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, onBeforeMount, ref } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  import { useLoadResource } from "../lib/useLoadResource";
   import RecipeEdit from "./RecipeEdit";
-  import { mapState } from "vuex";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
 
-  export default {
-    data: function () {
-      return {
-        recipe: null,
-        validationErrors: {}
-      }
-    },
+  const { loadResource } = useLoadResource();
+  const route = useRoute();
+  const router = useRouter();
+  const recipe = ref(null);
+  const validationErrors = ref({});
 
-    computed: {
-      ...mapState({
-        recipeId: state => state.route.params.id,
-      })
-    },
+  const recipeId = computed(() => route.params.id);
 
-    methods: {
-      save() {
-        this.validationErrors = {};
-        this.loadResource(
-          api.patchRecipe(this.recipe)
-            .then(() => this.$router.push({name: 'recipe', params: {id: this.recipeId }}))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+  onBeforeMount(() => {
+    loadResource(
+        api.getRecipe(recipeId.value, null, null, null, data => { recipe.value = data; return data; })
+    );
+  });
+
+  function save() {
+    validationErrors.value = {};
+    loadResource(
+        api.patchRecipe(recipe.value)
+            .then(() => router.push({name: 'recipe', params: {id: recipeId.value }}))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
   }
-    },
 
-    created() {
-      this.loadResource(
-        api.getRecipe(this.recipeId, null, null, null, data => { this.recipe = data; return data; })
-      );
-    },
-
-    components: {
-      RecipeEdit
-    }
-  }
 
 </script>
 

app/javascript/components/TheRecipeList.vue

@@ -2,7 +2,7 @@
   <div>
     <h1 class="title">Recipes</h1>
 
-    <router-link v-if="isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
+    <router-link v-if="appConfig.isLoggedIn" :to="{name: 'new_recipe'}" class="button is-primary">Create Recipe</router-link>
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>
 
@@ -11,7 +11,7 @@
 
 
 
-    <table class="table is-fullwidth" :class="{ small: mediaQueries.touch }">
+    <table class="table is-fullwidth" :class="{ small: isTouch }">
       <thead>
       <tr>
         <th v-for="h in tableHeader" :key="h.name">
@@ -25,10 +25,10 @@
       </tr>
       <tr>
         <td>
-          <app-search-text placeholder="search names" :value="search.name" @input="setSearchName($event)"></app-search-text>
+          <app-search-text placeholder="search names" :value="search.name" @update:modelValue="setSearchName($event)"></app-search-text>
         </td>
         <td>
-          <app-search-text placeholder="search tags" :value="search.tags" @input="setSearchTags($event)"></app-search-text>
+          <app-search-text placeholder="search tags" :value="search.tags" @update:modelValue="setSearchTags($event)"></app-search-text>
         </td>
         <td colspan="5"></td>
       </tr>
@@ -42,17 +42,19 @@
           </div>
         </td>
         <td>
-          <app-rating v-if="r.rating !== null" :value="r.rating" readonly></app-rating>
+          <app-rating v-if="r.rating !== null" :model-value="r.rating" readonly></app-rating>
           <span v-else>--</span>
         </td>
         <td>{{ r.yields }}</td>
         <td class="recipe-time">{{ formatRecipeTime(r.total_time, r.active_time) }}</td>
         <td><app-date-time :date-time="r.created_at" :show-time="false"></app-date-time></td>
         <td>
-          <app-dropdown hover v-if="isLoggedIn" class="is-right">
-            <button slot="button" class="button is-small">
+          <app-dropdown hover v-if="appConfig.isLoggedIn" class="is-right">
+            <template #button>
+              <button class="button is-small">
                 <app-icon icon="menu"></app-icon>
               </button>
+            </template>
 
             <div class="dropdown-item">
               <router-link :to="{name: 'new_log', params: { recipeId: r.id } }" class="button is-primary is-fullwidth">
@@ -83,113 +85,114 @@
     </div>
 
     <app-pager :current-page="currentPage" :total-pages="totalPages" paged-item-name="recipe" @changePage="changePage"></app-pager>
-    <app-confirm :open="showConfirmRecipeDelete" :message="confirmRecipeDeleteMessage" :cancel="recipeDeleteCancel" :confirm="recipeDeleteConfirm"></app-confirm>
+    <app-confirm :open="showConfirmRecipeDelete" title="Delete Recipe?" :message="confirmRecipeDeleteMessage" @cancel="recipeDeleteCancel" @confirm="recipeDeleteConfirm"></app-confirm>
 
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, reactive, ref, watch } from "vue";
+  import { useRouter } from 'vue-router'
   import api from "../lib/Api";
-  import debounce from "lodash/debounce";
-  import { mapMutations, mapState } from "vuex";
   import AppLoading from "./AppLoading";
+  import { useAppConfigStore } from "../stores/appConfig";
+  import { useMediaQueryStore } from "../stores/mediaQuery";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    props: {
+  const appConfig = useAppConfigStore();
+  const mediaQueries = useMediaQueryStore();
+  const { loadResource, localLoading } = useLoadResource();
+  const router = useRouter();
+
+  const props = defineProps({
     searchQuery: {
       type: Object,
       required: false,
       default: {}
     }
-    },
+  });
 
-    data() {
-      return {
-        recipeData: null,
-        recipeForDeletion: null
-      };
-    },
-
-    computed: {
-      ...mapState([
-        "mediaQueries"
-      ]),
-
-      search() {
-        return {
-          name: this.searchQuery.name || null,
-          tags: this.searchQuery.tags || null,
-          column: this.searchQuery.column || "created_at",
-          direction: this.searchQuery.direction || "desc",
-          page: this.searchQuery.page || 1,
-          per: this.searchQuery.per || 25
-        }
-      },
-
-      recipes() {
-        if (this.recipeData) {
-          return this.recipeData.recipes;
-        } else {
-          return [];
-        }
-      },
-
-      tableHeader() {
-        return [
+  const tableHeader = [
     {name: 'name', label: 'Name', sort: true},
     {name: 'tags', label: 'Tags', sort: false},
     {name: 'rating', label: 'Rating', sort: true},
     {name: 'yields', label: 'Yields', sort: false},
     {name: 'total_time', label: 'Time', sort: true},
     {name: 'created_at', label: 'Created', sort: true}
-        ]
-      },
+  ];
 
-      totalPages() {
-        if (this.recipeData) {
-          return this.recipeData.total_pages;
+  const recipeData = ref(null);
+  const recipeForDeletion = ref(null);
+  const isTouch = computed(() => mediaQueries.touch);
+
+  const search = computed(() => ({
+    name: props.searchQuery.name || null,
+    tags: props.searchQuery.tags || null,
+    column: props.searchQuery.column || "created_at",
+    direction: props.searchQuery.direction || "desc",
+    page: props.searchQuery.page || 1,
+    per: props.searchQuery.per || 25
+  }));
+
+  const recipes = computed(() => {
+    if (recipeData.value) {
+      return recipeData.value.recipes;
+    } else {
+      return [];
+    }
+  });
+
+  const totalPages = computed(() => {
+    if (recipeData.value) {
+      return recipeData.value.total_pages;
     }
     return 0;
-      },
+  });
 
-      currentPage() {
-        if (this.recipeData) {
-          return this.recipeData.current_page;
+  const currentPage = computed(() => {
+    if (recipeData.value) {
+      return recipeData.value.current_page;
     }
     return 0;
-      },
+  });
 
-      showConfirmRecipeDelete() {
-        return this.recipeForDeletion !== null;
-      },
+  const showConfirmRecipeDelete = computed(() => recipeForDeletion.value !== null);
 
-      confirmRecipeDeleteMessage() {
-        if (this.showConfirmRecipeDelete) {
-          return `Are you sure you want to delete ${this.recipeForDeletion.name}?`;
+  const confirmRecipeDeleteMessage = computed(() => {
+    if (showConfirmRecipeDelete.value) {
+      return `Are you sure you want to delete ${recipeForDeletion.value.name}?`;
     } else {
       return "??";
     }
+  });
+
+  watch(search, () => {
+    getList().then(() => appConfig.initialLoad = true);
+  }, {
+    deep: true,
+    immediate: true
+  });
+
+  function getList() {
+    return loadResource(
+        api.getRecipeList(search.value.page, search.value.per, search.value.column, search.value.direction, search.value.name, search.value.tags, data => recipeData.value = data)
+    );
   }
-    },
 
-    methods: {
-      ...mapMutations([
-        "setInitialLoad"
-      ]),
 
-      buildQueryParams() {
+  function buildQueryParams() {
     return {
-          name: this.searchQuery.name,
-          tags: this.searchQuery.tags,
-          column: this.searchQuery.column,
-          direction: this.searchQuery.direction,
-          page: this.searchQuery.page,
-          per: this.searchQuery.per
+      name: props.searchQuery.name,
+      tags: props.searchQuery.tags,
+      column: props.searchQuery.column,
+      direction: props.searchQuery.direction,
+      page: props.searchQuery.page,
+      per: props.searchQuery.per
+    }
   }
-      },
 
-      redirectToParams(params) {
+  function redirectToParams(params) {
     const rParams = {};
 
     if (params.name) {
@@ -216,17 +219,17 @@
       rParams.per = params.per;
     }
 
-        this.$router.push({name: 'recipeList', query: rParams});
-      },
+    router.push({name: 'recipeList', query: rParams});
+  }
 
-      changePage(idx) {
-        const p = this.buildQueryParams();
+  function changePage(idx) {
+    const p = buildQueryParams();
     p.page = idx;
-        this.redirectToParams(p);
-      },
+    redirectToParams(p);
+  }
 
-      setSort(col) {
-        const p = this.buildQueryParams();
+  function setSort(col) {
+    const p = buildQueryParams();
 
     if (p.column === col) {
       p.direction = p.direction === "desc" ? "asc" : "desc";
@@ -234,53 +237,47 @@
       p.column = col;
       p.direction = "asc";
     }
-        this.redirectToParams(p);
-      },
+    redirectToParams(p);
+  }
 
-      setSearchName(name) {
-        const p = this.buildQueryParams();
+  function setSearchName(name) {
+    const p = buildQueryParams();
     if (name !== p.name) {
       p.name = name;
       p.page = null;
-          this.redirectToParams(p);
+      redirectToParams(p);
+    }
   }
-      },
 
-      setSearchTags(tags) {
-        const p = this.buildQueryParams();
+  function setSearchTags(tags) {
+    const p = buildQueryParams();
     if (tags !== p.tags) {
       p.tags = tags;
       p.page = null;
-          this.redirectToParams(p);
+      redirectToParams(p);
+    }
   }
-      },
 
-      deleteRecipe(recipe) {
-        this.recipeForDeletion = recipe;
-      },
+  function deleteRecipe(recipe) {
+    recipeForDeletion.value = recipe;
+  }
 
-      recipeDeleteConfirm() {
-        if (this.recipeForDeletion !== null) {
-          this.loadResource(
-            api.deleteRecipe(this.recipeForDeletion.id).then(() => {
-              this.recipeForDeletion = null;
-              return this.getList();
+  function recipeDeleteConfirm() {
+    if (recipeForDeletion.value !== null) {
+      loadResource(
+          api.deleteRecipe(recipeForDeletion.value.id).then(() => {
+            recipeForDeletion.value = null;
+            return getList();
           })
       );
     }
-      },
+  }
 
-      recipeDeleteCancel() {
-        this.recipeForDeletion = null;
-      },
+  function recipeDeleteCancel() {
+    recipeForDeletion.value = null;
+  }
 
-      getList() {
-        return this.loadResource(
-          api.getRecipeList(this.search.page, this.search.per, this.search.column, this.search.direction, this.search.name, this.search.tags, data => this.recipeData = data)
-        );
-      },
-
-      formatRecipeTime(total, active) {
+  function formatRecipeTime(total, active) {
     let str = "";
 
     if (total && total > 0) {
@@ -297,24 +294,7 @@
 
     return str;
   }
-    },
 
-    created() {
-      this.$watch("search",
-        () => {
-          this.getList().then(() => this.setInitialLoad(true));
-        },
-        {
-          deep: true,
-          immediate: true
-        }
-      );
-    },
-
-    components: {
-      AppLoading
-    }
-  }
 
 </script>
 

app/javascript/components/TheTaskListList.vue

@@ -22,15 +22,16 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  import api from "../lib/Api";
+  import { computed, onBeforeMount, ref } from "vue";
   import * as Errors from '../lib/Errors';
-  import { mapActions, mapMutations, mapState } from "vuex";
+  import { useTaskStore } from "../stores/task";
 
   import TaskListMiniForm from "./TaskListMiniForm";
   import TaskListDropdownItem from "./TaskListDropdownItem";
   import TaskItemList from "./TaskItemList";
+  import { useLoadResource } from "../lib/useLoadResource";
 
   const newListTemplate = function() {
     return {
@@ -38,85 +39,53 @@
     };
   };
 
-  export default {
-    data() {
-      return {
-        showListDropdown: false,
-        newList: newListTemplate(),
-        newListValidationErrors: {}
-      }
-    },
+  const { loadResource } = useLoadResource();
+  const taskStore = useTaskStore();
 
-    computed: {
-      ...mapState([
-        'taskLists',
-        'currentTaskList'
-      ]),
-      listSelectLabel() {
-        if (this.currentTaskList === null) {
+  const showListDropdown = ref(false);
+  const newList = ref(newListTemplate());
+  const newListValidationErrors = ref({});
+
+  const taskLists = computed(() => taskStore.taskLists);
+  const currentTaskList = computed(() => taskStore.currentTaskList);
+  const listSelectLabel = computed(() => {
+    if (currentTaskList.value === null) {
       return "Select or Create a List";
     } else {
-          return this.currentTaskList.name;
+      return currentTaskList.value.name;
     }
+  });
+
+  onBeforeMount(() => {
+    loadResource(taskStore.refreshTaskLists());
+  });
+
+  function selectList(list) {
+    taskStore.setCurrentTaskList(list);
+    showListDropdown.value = false;
   }
-    },
 
-    methods: {
-      ...mapActions([
-        'refreshTaskLists',
-        'createTaskList',
-        'deleteTaskList',
-        'deleteTaskItems',
-        'completeTaskItems'
-      ]),
-      ...mapMutations([
-        'setCurrentTaskList'
-      ]),
-
-      selectList(list) {
-        this.setCurrentTaskList(list);
-        this.showListDropdown = false;
-      },
-
-      saveNewList() {
-        this.loadResource(
-          this.createTaskList(this.newList)
-            .then(() => this.showListDropdown = false)
-            .then(() => { this.newList = newListTemplate(); this.newListValidationErrors = {}; } )
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.newListValidationErrors = err.validationErrors()))
+  function saveNewList() {
+    loadResource(
+        taskStore.createTaskList(newList.value)
+            .then(() => showListDropdown.value = false)
+            .then(() => { newList.value = newListTemplate(); newListValidationErrors.value = {}; } )
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => newListValidationErrors.value = err.validationErrors()))
     );
-      },
+  }
 
-      deleteList(list) {
-        this.loadResource(
-          this.deleteTaskList(list)
-        );
-      },
+  function deleteList(list) {
+    loadResource(taskStore.deleteTaskList(list));
+  }
 
-
-
-      deleteAllItems() {
-        this.loadResource(
-          this.deleteTaskItems({
-            taskList: this.currentTaskList,
-            taskItems: this.currentTaskList.task_items
+  function deleteAllItems() {
+    loadResource(
+        taskStore.deleteTaskItems({
+          taskList: currentTaskList.value,
+          taskItems: currentTaskList.value.task_items
         })
     );
   }
-    },
-
-    created() {
-      this.loadResource(
-        this.refreshTaskLists()
-      );
-    },
-
-    components: {
-      TaskListMiniForm,
-      TaskListDropdownItem,
-      TaskItemList
-    }
-  }
 
 </script>
 

app/javascript/components/TheUserCreator.vue

@@ -13,42 +13,38 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { ref } from "vue";
+  import { useRouter } from "vue-router";
   import UserEdit from "./UserEdit";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
+  import { useLoadResource } from "../lib/useLoadResource";
+  import { useCheckAuthentication } from "../lib/useCheckAuthentication";
 
-  export default {
-    data() {
-      return {
-        validationErrors: {},
-        userObj: {
+  const { loadResource } = useLoadResource();
+  const { checkAuthentication } = useCheckAuthentication(loadResource);
+  const router = useRouter();
+
+  const validationErrors = ref({});
+  const userObj = ref({
     username: '',
     full_name: '',
     email: '',
     password: '',
     password_confirmation: ''
-        }
-      }
-    },
+  });
 
-    methods: {
-      save() {
-        this.validationErrors = {};
-        this.loadResource(
-          api.postUser(this.userObj)
-            .then(() => this.checkAuthentication())
-            .then(() => this.$router.push('/'))
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+  function save() {
+    validationErrors.value = {};
+    loadResource(
+        api.postUser(userObj.value)
+            .then(() => checkAuthentication())
+            .then(() => router.push('/'))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
   }
-    },
-
-    components: {
-      UserEdit
-    }
-  }
 
 </script>
 

app/javascript/components/TheUserEditor.vue

@@ -13,62 +13,55 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { ref, watch } from "vue";
+  import { useRouter } from "vue-router";
   import UserEdit from "./UserEdit";
   import api from "../lib/Api";
   import * as Errors from '../lib/Errors';
+  import { useAppConfigStore } from "../stores/appConfig";
+  import { useLoadResource } from "../lib/useLoadResource";
+  import { useCheckAuthentication } from "../lib/useCheckAuthentication";
 
-  export default {
-    data() {
-      return {
-        validationErrors: {},
-        userObj: null
-      }
-    },
+  const appConfig = useAppConfigStore();
+  const { loadResource } = useLoadResource();
+  const { checkAuthentication } = useCheckAuthentication(loadResource);
+  const router = useRouter();
 
-    created() {
-      this.refreshUser();
-    },
+  const validationErrors = ref({});
+  const userObj = ref(null);
 
-    watch: {
-      user() {
-        this.refreshUser();
-      }
-    },
+  watch(
+      () => appConfig.user,
+      () => refreshUser(),
+      { immediate: true });
 
-    methods: {
-      refreshUser() {
-        if (this.user) {
-          this.userObj = {
-            username: this.user.username,
-            full_name: this.user.full_name,
-            email: this.user.email,
+  function refreshUser() {
+    if (appConfig.user) {
+      userObj.value = {
+        username: appConfig.user.username,
+        full_name: appConfig.user.full_name,
+        email: appConfig.user.email,
         password: '',
         password_confirmation: ''
       };
     } else {
-          this.userObj = null;
+      userObj.value = null;
+    }
   }
-      },
 
-      save() {
-        this.validationErrors = {};
-        this.loadResource(
-          api.patchUser(this.userObj)
-            .then(() => this.checkAuthentication())
+  function save() {
+    validationErrors.value = {};
+    loadResource(
+        api.patchUser(userObj.value)
+            .then(() => checkAuthentication())
             .then(() => {
-              this.$router.push('/');
+              router.push('/');
             })
-            .catch(Errors.onlyFor(Errors.ApiValidationError, err => this.validationErrors = err.validationErrors()))
+            .catch(Errors.onlyFor(Errors.ApiValidationError, err => validationErrors.value = err.validationErrors()))
     );
   }
-    },
-
-    components: {
-      UserEdit
-    }
-  }
 
 </script>
 

app/javascript/components/UserEdit.vue

@@ -3,21 +3,19 @@
     <app-text-field label="Username" v-model="userObj.username"></app-text-field>
     <app-text-field label="Name" v-model="userObj.full_name"></app-text-field>
     <app-text-field label="Email" v-model="userObj.email"></app-text-field>
-    <app-text-field label="Password" v-model="userObj.password"></app-text-field>
-    <app-text-field label="Password Confirmation" v-model="userObj.password_confirmation"></app-text-field>
+    <app-text-field type="password" label="Password" v-model="userObj.password"></app-text-field>
+    <app-text-field type="password" label="Password Confirmation" v-model="userObj.password_confirmation"></app-text-field>
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
+  const props = defineProps({
     userObj: {
       required: true,
       type: Object
     }
-    }
-  }
+  });
 
 </script>
 

app/javascript/components/UserLogin.vue

@@ -34,7 +34,7 @@
               <button type="submit" class="button is-primary" :disabled="!enableSubmit">Login</button>
             </div>
             <div class="control">
-              <button class="button is-secondary" @click="showLogin = false">Cancel</button>
+              <button type="button" class="button is-secondary" @click="showLogin = false">Cancel</button>
             </div>
           </div>
 
@@ -45,59 +45,46 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  import api from "../lib/Api";
-  import { mapActions, mapState } from "vuex";
+  import { computed, nextTick, ref, useTemplateRef } from "vue";
+  import { useAppConfigStore } from "../stores/appConfig";
+  import { useLoadResource } from "../lib/useLoadResource";
 
-  export default {
-    data() {
-      return {
-        showLogin: false,
-        error: '',
-        username: '',
-        password: ''
-      };
-    },
+  const appConfig = useAppConfigStore();
+  const { loadResource } = useLoadResource();
 
-    computed: {
-      ...mapState([
-        'loginMessage'
-      ]),
-      enableSubmit() {
-        return this.username !== '' && this.password !== '' && !this.isLoading;
+  const userNameElement = useTemplateRef("usernameInput");
+
+  const showLogin = ref(false);
+  const error = ref('');
+  const username = ref("");
+  const password = ref("");
+
+  const loginMessage = computed(() => appConfig.loginMessage);
+  const enableSubmit = computed(() => username.value !== "" && password.value !== "" && !appConfig.isLoading);
+
+  function openDialog() {
+    showLogin.value = true;
+    nextTick(() => {
+      userNameElement.value.focus();
+    })
   }
-    },
 
-    methods: {
-      ...mapActions([
-        'login'
-      ]),
+  function performLogin() {
+    if (username.value !== '' && password.value !== '') {
+      const params = {username: username.value, password: password.value};
 
-      openDialog() {
-        this.showLogin = true;
-        this.$nextTick(() => this.$refs.usernameInput.focus());
-      },
-
-      performLogin() {
-        if (this.username !== '' && this.password !== '') {
-          const params = {username: this.username, password: this.password};
-
-          this.loadResource(
-            this.login(params)
+      loadResource(
+          appConfig.login(params)
               .then(data => {
                 if (data.success) {
-                  this.showLogin = false;
+                  showLogin.value = false;
                 }
               })
       );
     }
   }
-    },
-
-    components: {
-    }
-  }
 
 </script>
 

app/javascript/lib/ActionCable.js

@@ -0,0 +1,17 @@
+import * as cable from "@rails/actioncable";
+
+let consumer = null;
+
+function createChannel(baseUrl, ...args) {
+  if (consumer === null) {
+    if (baseUrl !== null && baseUrl.toString() !== "") {
+      consumer = cable.createConsumer(baseUrl);
+    } else {
+      consumer = cable.createConsumer();
+    }
+  }
+
+  return consumer.subscriptions.create(...args);
+}
+
+export { createChannel };

app/javascript/lib/Api.js

@@ -1,4 +1,4 @@
-import config from '../config';
+import config from './config';
 import * as Errors from './Errors';
 
 class Api {

app/javascript/lib/ClickStrike.js

@@ -0,0 +1,35 @@
+
+function clickStrikeClick(evt) {
+  const isStrikable = el => el && el.tagName === "LI";
+  const strikeClass = "is-strikethrough";
+
+  let t = evt.target;
+
+  while (t !== null && t !== this && !isStrikable(t)) {
+    t = t.parentElement;
+  }
+
+  if (isStrikable(t)) {
+    const classList = t.className.split(" ");
+    const strIdx = classList.findIndex(c => c === strikeClass);
+    if (strIdx >= 0) {
+      classList.splice(strIdx, 1);
+    } else {
+      classList.push(strikeClass);
+    }
+
+    t.className = classList.join(" ");
+  }
+}
+
+export function installClickStrike(app) {
+  app.directive('click-strike', {
+    beforeMount(el) {
+      el.addEventListener("click", clickStrikeClick);
+    },
+
+    unmounted(el) {
+      el.removeEventListener("click", clickStrikeClick);
+    }
+  });
+}

app/javascript/lib/GlobalMixins.js

@@ -1,84 +0,0 @@
-
-import Vue from 'vue';
-import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
-import api from "../lib/Api";
-
-Vue.mixin({
-  data() {
-    return {
-      localLoadingCount: 0
-    };
-  },
-  computed: {
-    ...mapGetters([
-      "isLoading",
-      "isLoggedIn",
-      "isAdmin"
-    ]),
-    ...mapState([
-      "user"
-    ]),
-    localLoading() {
-      return this.localLoadingCount > 0;
-    }
-  },
-  methods: {
-    ...mapActions([
-      'updateCurrentUser'
-    ]),
-    ...mapMutations([
-      'setError',
-      'setLoading'
-    ]),
-
-    loadResource(promise) {
-      this.setLoading(true);
-      this.localLoadingCount = this.localLoadingCount + 1;
-
-      return promise
-        .catch(err => this.setError(err))
-        .then(res => {
-          this.setLoading(false);
-          this.localLoadingCount = this.localLoadingCount - 1;
-          return res;
-        });
-    },
-
-    checkAuthentication() {
-      return this.loadResource(this.updateCurrentUser());
-    }
-  }
-});
-
-function clickStrikeClick(evt) {
-  const isStrikable = el => el && el.tagName === "LI";
-  const strikeClass = "is-strikethrough";
-
-  let t = evt.target;
-
-  while (t !== null && t !== this && !isStrikable(t)) {
-    t = t.parentElement;
-  }
-
-  if (isStrikable(t)) {
-    const classList = t.className.split(" ");
-    const strIdx = classList.findIndex(c => c === strikeClass);
-    if (strIdx >= 0) {
-      classList.splice(strIdx, 1);
-    } else {
-      classList.push(strikeClass);
-    }
-
-    t.className = classList.join(" ");
-  }
-}
-
-Vue.directive('click-strike', {
-  bind(el) {
-    el.addEventListener("click", clickStrikeClick);
-  },
-
-  unbind(el) {
-    el.removeEventListener("click", clickStrikeClick);
-  }
-});

app/javascript/lib/ServiceWorker.js

@@ -1,4 +1,6 @@
 
+import { useAppConfigStore } from '../stores/appConfig';
+
 function trackInstall(worker, cb) {
   worker.addEventListener('statechange', function() {
     if (worker.state == 'installed') {
@@ -18,7 +20,9 @@ function trackActive(worker, cb) {
 export function swUpdate() {
   navigator.serviceWorker.getRegistration().then(reg => {
     if (reg && reg.waiting) {
-      trackActive(reg.waiting, () => window.location.reload(true));
+      trackActive(reg.waiting, () => {
+        window.location.reload(true)
+      });
       reg.waiting.postMessage("skipWaiting");
     } else {
       window.location.reload(true);
@@ -27,10 +31,17 @@ export function swUpdate() {
 
 }
 
-export function swInit(store) {
+export function swInit() {
 
-  const updateReady = () => store.commit("setUpdateAvailable", true);
-  const clearUpdateReady = () => store.commit("setUpdateAvailable", false);
+  const updateReady = () => {
+    const store = useAppConfigStore();
+    store.updateAvailable = true;
+  };
+
+  const clearUpdateReady = () => {
+    const store = useAppConfigStore();
+    store.updateAvailable = false;
+  }
 
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('/sw.js')
@@ -53,6 +64,4 @@ export function swInit(store) {
         console.log('Registration failed with ' + error);
       });
   }
-
-
 }

app/javascript/lib/VuexResponsiveSync.js

@@ -1,49 +0,0 @@
-// Adds a module to a vuex store with a set of media query states
-
-const defaultOptions = {
-  module: "mediaQueries"
-};
-
-// Hard coded values taken directly from Bulma css
-const mobileBp = 768;
-const desktopBp = 1024;
-const widscreenBp = 1216;
-const fullHdBp = 1408;
-
-const mediaQueries = {
-  mobile: `screen and (max-width: ${mobileBp}px)`,
-  tablet: `screen and (min-width: ${mobileBp + 1}px)`,
-  tabletOnly: `screen and (min-width: ${mobileBp + 1}px) and (max-width: ${desktopBp - 1}px)`,
-  touch: `screen and (max-width: ${desktopBp - 1}px)`,
-  desktop: `screen and (min-width: ${desktopBp}px)`,
-  desktopOnly: `screen and (min-width: ${desktopBp}px) and (max-width: ${widscreenBp - 1}px)`,
-  widescreen: `screen and (min-width: ${widscreenBp}px)`,
-  widescreenOnly: `screen and (min-width: ${widscreenBp}px) and (max-width: ${fullHdBp - 1}px)`,
-  fullhd: `screen and (min-width: ${fullHdBp}px)`
-};
-
-export default function(store, options) {
-  let opts = Object.assign({}, defaultOptions, options || {});
-  const moduleName = opts.module;
-
-  const initialState = {};
-
-  for (let device in mediaQueries) {
-    const query = window.matchMedia(mediaQueries[device]);
-    query.onchange = (q) => {
-      store.commit(moduleName + "/MEDIA_QUERY_CHANGED", {mediaName: device, value: q.matches});
-    };
-    initialState[device] = query.matches;
-  }
-
-  store.registerModule(moduleName, {
-    namespaced: true,
-    state: initialState,
-    mutations: {
-      "MEDIA_QUERY_CHANGED" (state, data) {
-        state[data.mediaName] = data.value;
-      }
-    }
-  });
-
-}

app/javascript/lib/useAutosize.js

@@ -0,0 +1,9 @@
+import { onBeforeUnmount } from "vue";
+import autosize from 'autosize';
+
+export function useAutosize(elementRef) {
+  autosize(elementRef.value);
+  onBeforeUnmount(() => {
+    autosize.destroy(elementRef.value);
+  });
+}

app/javascript/lib/useCheckAuthentication.js

@@ -0,0 +1,12 @@
+import { useAppConfigStore } from "../stores/appConfig";
+
+export function useCheckAuthentication(loadResource) {
+  const appConfig = useAppConfigStore();
+  const checkAuthentication = function() {
+    return loadResource(appConfig.updateCurrentUser());
+  }
+
+  return {
+    checkAuthentication
+  }
+}

app/javascript/lib/useGlobalTweenGroup.js

@@ -0,0 +1,10 @@
+import { Group } from '@tweenjs/tween.js'
+
+let group = null;
+
+export function useGlobalTweenGroup() {
+  if (group === null) {
+    group = new Group();
+  }
+  return group;
+}

app/javascript/lib/useLoadResource.js

@@ -0,0 +1,27 @@
+import { computed, ref } from "vue";
+import { useAppConfigStore } from "../stores/appConfig";
+
+export function useLoadResource() {
+  const appConfig = useAppConfigStore();
+  const localLoadingCount = ref(0);
+  const localLoading = computed(() => localLoadingCount.value > 0);
+
+  const loadResource = async (promise) => {
+    appConfig.setLoading(true);
+    localLoadingCount.value = localLoadingCount.value + 1;
+    try {
+      return await promise;
+    } catch (error) {
+      appConfig.setError(error);
+    } finally {
+      appConfig.setLoading(false);
+      localLoadingCount.value = localLoadingCount.value - 1;
+    }
+  };
+
+  return {
+    loadResource,
+    localLoading,
+    localLoadingCount
+  };
+}

app/javascript/packs/application.js

@@ -1,17 +1,10 @@
 import '../styles';
-import "vue-resize/dist/vue-resize";
-
-import Vue from 'vue'
-import { sync } from 'vuex-router-sync';
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
 import { swInit } from "../lib/ServiceWorker";
-import responsiveSync from "../lib/VuexResponsiveSync";
-import VueProgressBar from "vue-progressbar";
-import VueResize from "vue-resize";
-import config from '../config';
-import store from '../store';
+import config from '../lib/config';
+import { installClickStrike } from "../lib/ClickStrike";
 import router from '../router';
-import '../lib/GlobalMixins';
-import App from '../components/App';
 
 import AppAutocomplete from "../components/AppAutocomplete";
 import AppConfirm from "../components/AppConfirm";
@@ -30,57 +23,40 @@ import AppTagEditor from "../components/AppTagEditor";
 import AppTextField from "../components/AppTextField";
 import AppValidationErrors from "../components/AppValidationErrors";
 
-Vue.component("AppAutocomplete", AppAutocomplete);
-Vue.component("AppConfirm", AppConfirm);
-Vue.component("AppDateTime", AppDateTime);
-Vue.component("AppDatePicker", AppDatePicker);
-Vue.component("AppDropdown", AppDropdown);
-Vue.component("AppExpandTransition", AppExpandTransition);
-Vue.component("AppIcon", AppIcon);
-Vue.component("AppIconicIcon", AppIconicIcon);
-Vue.component("AppModal", AppModal);
-Vue.component("AppNavbar", AppNavbar);
-Vue.component("AppPager", AppPager);
-Vue.component("AppRating", AppRating);
-Vue.component("AppSearchText", AppSearchText);
-Vue.component("AppTagEditor", AppTagEditor);
-Vue.component("AppTextField", AppTextField);
-Vue.component("AppValidationErrors", AppValidationErrors);
+import App from '../components/App.vue'
 
-
-Vue.use(VueProgressBar, {
-//  color: '#bffaf3',
-//  failedColor: '#874b4b',
-//   thickness: '5px',
-//   transition: {
-//     speed: '0.2s',
-//     opacity: '0.6s',
-//     termination: 300
-//   },
-//   autoRevert: true,
-//   location: 'left',
-//   inverse: false
-});
-
-Vue.use(VueResize);
-
-sync(store, router);
-responsiveSync(store);
+// Resize?
+// Progressbar?
 
 document.addEventListener('DOMContentLoaded', () => {
+  const appElement = document.getElementById('app');
+  if (!appElement) { return; }
 
-  const app = document.getElementById('app');
-  config.baseApiUrl = app.dataset.url;
-
-  window.$vm = new Vue({
-    el: '#app',
-    store,
-    router,
-    render: createElement => createElement('App'),
-    mounted() {
-      this.$nextTick(() => swInit(store));
-    },
-    components: { App }
-  });
+  config.baseApiUrl = appElement.dataset.url;
 
+  const app = createApp(App);
+  const pinia = createPinia();
+  app.use(pinia);
+  app.use(router);
+  swInit();
+  installClickStrike(app);
+
+  app.component("AppAutocomplete", AppAutocomplete);
+  app.component("AppConfirm", AppConfirm);
+  app.component("AppDateTime", AppDateTime);
+  app.component("AppDatePicker", AppDatePicker);
+  app.component("AppDropdown", AppDropdown);
+  app.component("AppExpandTransition", AppExpandTransition);
+  app.component("AppIcon", AppIcon);
+  app.component("AppIconicIcon", AppIconicIcon);
+  app.component("AppModal", AppModal);
+  app.component("AppNavbar", AppNavbar);
+  app.component("AppPager", AppPager);
+  app.component("AppRating", AppRating);
+  app.component("AppSearchText", AppSearchText);
+  app.component("AppTagEditor", AppTagEditor);
+  app.component("AppTextField", AppTextField);
+  app.component("AppValidationErrors", AppValidationErrors);
+  
+  app.mount(appElement);
 });

app/javascript/router/index.js

@@ -1,49 +1,39 @@
-import Vue from 'vue';
-import Router from 'vue-router';
+import { createRouter, createWebHashHistory } from "vue-router";
+import { nextTick } from "vue";
 
-import The404Page from './components/The404Page';
-import TheAboutPage from './components/TheAboutPage';
-import TheCalculator from './components/TheCalculator';
+import The404Page from '../components/The404Page';
+import TheAboutPage from '../components/TheAboutPage';
+import TheCalculator from '../components/TheCalculator';
 
-import TheLog from './components/TheLog';
-import TheLogList from './components/TheLogList';
-import TheLogCreator from './components/TheLogCreator';
-import TheLogEditor from './components/TheLogEditor';
+import TheLog from '../components/TheLog';
+import TheLogList from '../components/TheLogList';
+import TheLogCreator from '../components/TheLogCreator';
+import TheLogEditor from '../components/TheLogEditor';
 
-import TheFoodList from './components/TheFoodList';
-import TheFood from "./components/TheFood";
-import TheFoodEditor from "./components/TheFoodEditor";
-import TheFoodCreator from "./components/TheFoodCreator";
-import TheNotesList from './components/TheNotesList';
-import TheRecipe from './components/TheRecipe';
-import TheRecipeEditor from './components/TheRecipeEditor';
-import TheRecipeCreator from './components/TheRecipeCreator';
-import TheRecipeList from './components/TheRecipeList';
+import TheFoodList from '../components/TheFoodList';
+import TheFood from "../components/TheFood";
+import TheFoodEditor from "../components/TheFoodEditor";
+import TheFoodCreator from "../components/TheFoodCreator";
+import TheNotesList from '../components/TheNotesList';
+import TheRecipe from '../components/TheRecipe';
+import TheRecipeEditor from '../components/TheRecipeEditor';
+import TheRecipeCreator from '../components/TheRecipeCreator';
+import TheRecipeList from '../components/TheRecipeList';
 
-import TheTaskListList from './components/TheTaskListList';
+import TheTaskListList from '../components/TheTaskListList';
 
-import TheUserCreator from './components/TheUserCreator';
-import TheUserEditor from './components/TheUserEditor';
+import TheUserCreator from '../components/TheUserCreator';
+import TheUserEditor from '../components/TheUserEditor';
 
-import TheAdminUserList from './components/TheAdminUserList';
-import TheAdminUserEditor from './components/TheAdminUserEditor';
+import TheAdminUserList from '../components/TheAdminUserList';
+import TheAdminUserEditor from '../components/TheAdminUserEditor';
 
-import $store from './store';
+import { useAppConfigStore } from "../stores/appConfig";
 
-Vue.use(Router);
 
-const router = new Router({
-  routes: []
-});
-
-router.afterEach((to, from) => {
-  if (to.meta.handleInitialLoad !== true && $store.state.initialLoad === false) {
-    $store.commit("setInitialLoad", true);
-  }
-});
-
-router.addRoutes(
-  [
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes: [
     {
       path: '/',
       redirect: '/recipes'
@@ -144,10 +134,10 @@ router.addRoutes(
     {
       path: "/logout",
       name: "logout",
-      beforeEnter: (to, from, next) => {
-        const $store = router.app.$store;
-        $store.dispatch("logout")
-          .then(() => next("/"));
+      beforeEnter: async (to, from, next) => {
+        const appConfig = useAppConfigStore();
+        await appConfig.logout();
+        return next("/");
       }
     },
 
@@ -175,10 +165,22 @@ router.addRoutes(
     },
 
     {
-      path: '*',
+      path: '/:pathMatch(.*)*',
+      name: 'NotFound',
       component: The404Page
     }
   ]
-);
+});
+
+router.afterEach((to, from) => {
+  const appConfigStore = useAppConfigStore();
+  if (to.meta.handleInitialLoad !== true && appConfigStore.initialLoad === false) {
+    appConfigStore.initialLoad = true;
+  }
+
+  nextTick(() => {
+    document.title = to.meta.title || 'Parsley';
+  });
+});
 
 export default router;

app/javascript/store/index.js

@@ -1,236 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-import api from '../lib/Api';
-
-Vue.use(Vuex);
-
-export default new Vuex.Store({
-  strict: process.env.NODE_ENV !== 'production',
-  state: {
-    initialLoad: false,
-    updateAvailable: false,
-    loadingCount: 0,
-    error: null,
-    authChecked: false,
-    user: null,
-    loginMessage: null,
-
-    taskLists: [],
-    currentTaskList: null,
-
-    nutrientList: {
-      kcal: { label: "Calories", unit: "kcal" },
-      protein: { label: "Protein", unit: "g" },
-      lipids: { label: "Fat", unit: "g" },
-      carbohydrates: { label: "Carbohydrates", unit: "g" },
-      water: { label: "Water", unit: "g" },
-      sugar: { label: "Sugar", unit: "g" },
-      fiber: { label: "Fiber", unit: "g" },
-      cholesterol: { label: "Cholesterol", unit: "mg" },
-      sodium: { label: "Sodium", unit: "mg" },
-      calcium: { label: "Calcium", unit: "mg" },
-      iron: { label: "Iron", unit: "mg" },
-      magnesium: { label: "Magnesium", unit: "mg" },
-      phosphorus: { label: "Phosphorus", unit: "mg" },
-      potassium: { label: "Potassium", unit: "mg" },
-      zinc: { label: "Zinc", unit: "mg" },
-      copper: { label: "Copper", unit: "mg" },
-      manganese: { label: "Manganese", unit: "mg" },
-      vit_a: { label: "Vitamin A", unit: "μg" },
-      vit_b6: { label: "Vitamin B6", unit: "mg" },
-      vit_b12: { label: "Vitamin B12", unit: "μg" },
-      vit_c: { label: "Vitamin C", unit: "mg" },
-      vit_d: { label: "Vitamin D", unit: "μg" },
-      vit_e: { label: "Vitamin E", unit: "mg" },
-      vit_k: { label: "Vitamin K", unit: "μg" },
-      ash: { label: "ash", unit: "g" }
-
-    }
-  },
-  getters: {
-    isLoading(state) {
-      return state.loadingCount > 0;
-    },
-    isLoggedIn(state) {
-      return state.user !== null;
-    },
-    isAdmin(state) {
-      return state.user !== null && state.user.admin === true;
-    }
-  },
-  mutations: {
-    setUpdateAvailable(state, value) {
-      state.updateAvailable = value;
-    },
-
-    setInitialLoad(state, value) {
-      state.initialLoad = value;
-    },
-
-    setLoading(state, value) {
-      if (value) {
-        state.loadingCount = state.loadingCount + 1;
-      } else {
-        state.loadingCount = state.loadingCount - 1;
-      }
-      state.loading = state.loadingCount !== 0;
-    },
-
-    setError(state, value) {
-      console.log(value);
-      state.error = value;
-    },
-
-    setUser(state, user) {
-      state.authChecked = true;
-      state.user = user;
-    },
-
-    setLoginMessage(state, msg) {
-      state.loginMessage = msg;
-    },
-
-    setTaskLists(state, lists) {
-      state.taskLists = lists || [];
-    },
-
-    setCurrentTaskList(state, list) {
-      state.currentTaskList = list || null;
-    },
-
-    appendTaskItem(state, item) {
-      const listId = item.task_list_id;
-      const list = state.taskLists.find(l => l.id === listId);
-      if (list) {
-        list.task_items.push(item);
-      }
-    },
-
-    replaceTaskItem(state, item) {
-      const listId = item.task_list_id;
-      const list = state.taskLists.find(l => l.id === listId);
-      if (list) {
-        const taskIdx = list.task_items.findIndex(i => i.id === item.id);
-        if (taskIdx >= 0) {
-          list.task_items.splice(taskIdx, 1, item);
-        }
-      }
-    },
-
-    removeTaskItems(state, payload) {
-      const listId = payload.taskList.id;
-      const list = state.taskLists.find(l => l.id === listId);
-      if (list) {
-
-        list.task_items = list.task_items.filter(item => {
-          return payload.taskItems.findIndex(i => i.id === item.id) === -1;
-        });
-      }
-    },
-
-    setTaskItemCompletion(state, payload) {
-      const listId = payload.taskList.id;
-      const list = state.taskLists.find(l => l.id === listId);
-      if (list) {
-        list.task_items.forEach(item => {
-          if (payload.taskItems.findIndex(i => i.id === item.id) >= 0) {
-            item.completed = payload.completed;
-          }
-        });
-      }
-    }
-  },
-  actions: {
-    updateCurrentUser({commit}) {
-      return api.getCurrentUser()
-        .then(user => {
-          commit("setUser", user);
-          return user;
-        });
-    },
-
-    login({commit}, authData) {
-      return api.postLogin(authData.username, authData.password)
-        .then(data => {
-          if (data.success) {
-            commit("setUser", data.user);
-            commit("setLoginMessage", null);
-          } else {
-            commit("setUser", null);
-            commit("setLoginMessage", data.message);
-          }
-          return data;
-        });
-    },
-
-    logout({commit}) {
-      return api.getLogout()
-        .then(() => {
-          commit("setUser", null);
-        });
-    },
-
-    refreshTaskLists({commit, state}) {
-      const cb = function(data) {
-        commit("setTaskLists", data);
-        let ctl = null;
-
-        if (state.currentTaskList) {
-          ctl = data.find(l => l.id === state.currentTaskList.id);
-        }
-
-        ctl = ctl || data[0] || null;
-        commit("setCurrentTaskList", ctl);
-      };
-
-      return api.getTaskLists(cb)
-    },
-    
-    ensureTaskLists({dispatch, state}) {
-      if (state.user && state.taskLists.length === 0) {
-        return dispatch("refreshTaskLists");
-      } else {
-        return Promise.resolve();
-      }
-    },
-
-    createTaskList({commit, dispatch}, newList) {
-      return api.postTaskList(newList)
-        .then(data => commit("setCurrentTaskList", data))
-        .then(() => dispatch("refreshTaskLists"))
-    },
-
-    deleteTaskList({dispatch}, taskList) {
-      return api.deleteTaskList(taskList)
-        .then(() => dispatch("refreshTaskLists"));
-    },
-
-    createTaskItem({commit, dispatch}, taskItem) {
-
-      return api.postTaskItem(taskItem.task_list_id, taskItem)
-        .then(data => {
-          commit("appendTaskItem", data);
-          return data;
-        });
-    },
-
-    updateTaskItem({commit}, taskItem) {
-      return api.patchTaskItem(taskItem.task_list_id, taskItem)
-        .then(data => {
-          commit("replaceTaskItem", data);
-          return data;
-        });
-    },
-
-    deleteTaskItems({commit}, payload) {
-      return api.deleteTaskItems(payload.taskList.id, payload.taskItems)
-        .then(() => commit("removeTaskItems", payload));
-    },
-
-    completeTaskItems({commit}, payload) {
-      return api.completeTaskItems(payload.taskList.id, payload.taskItems, !payload.completed)
-        .then(() => commit("setTaskItemCompletion", payload));
-    }
-  }
-});

app/javascript/stores/appConfig.js

@@ -0,0 +1,102 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { useRoute } from "vue-router";
+import api from "../lib/Api";
+
+export const useAppConfigStore = defineStore('appConfig', () => {
+  const authChecked = ref(false);
+  const errorObject = ref(null);
+  const initialLoad = ref(false);
+  const loadingCount = ref(0);
+  const loginMessage = ref(null);
+  const updateAvailable = ref(false);
+  const userObject = ref(null);
+  const route = useRoute();
+
+  const isLoading = computed(() => {
+    return loadingCount.value > 0;
+  });
+
+  const isLoggedIn = computed(() => {
+    return userObject.value !== null;
+  });
+
+  const isAdmin = computed(() => {
+    return userObject.value?.admin === true;
+  });
+
+  const error = computed({
+    get: () => errorObject.value,
+    set: (val) => {
+      console.log(val);
+      errorObject.value = val;
+    }
+  });
+
+  const user = computed({
+    get: () => userObject.value,
+    set: (val) => {
+      userObject.value = val;
+      authChecked.value = true;
+    }
+  });
+
+  function setError(value) {
+    error.value = value;
+  }
+
+  function setLoading(value) {
+    if (value) {
+      loadingCount.value = loadingCount.value + 1;
+    } else {
+      loadingCount.value = loadingCount.value - 1;
+    }
+  }
+
+  async function updateCurrentUser() {
+    user.value = await api.getCurrentUser();
+    return user.value;
+  }
+
+  function login(authData) {
+    return api.postLogin(authData.username, authData.password)
+      .then(data => {
+        if (data.success) {
+          user.value = data.user;
+          loginMessage.value = null;
+        } else {
+          user.value = null;
+          loginMessage.value = data.message;
+        }
+        return data;
+      });
+  }
+
+  function logout() {
+    return api.getLogout()
+      .then(() => {
+        user.value = null;
+      });
+  }
+
+  return {
+    authChecked,
+    error,
+    initialLoad,
+    loadingCount,
+    loginMessage,
+    updateAvailable,
+    user,
+    route,
+
+    isAdmin,
+    isLoading,
+    isLoggedIn,
+
+    login,
+    logout,
+    setError,
+    setLoading,
+    updateCurrentUser
+  };
+});

app/javascript/stores/mediaQuery.js

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useMediaQueryStore = defineStore('mediaQuery', () => {
+  // Hard coded values taken directly from Bulma css
+  const mobileBp = 768;
+  const desktopBp = 1024;
+  const widscreenBp = 1216;
+  const fullHdBp = 1408;
+
+  const mediaQueries = {
+    mobile: `screen and (max-width: ${mobileBp}px)`,
+    tablet: `screen and (min-width: ${mobileBp + 1}px)`,
+    tabletOnly: `screen and (min-width: ${mobileBp + 1}px) and (max-width: ${desktopBp - 1}px)`,
+    touch: `screen and (max-width: ${desktopBp - 1}px)`,
+    desktop: `screen and (min-width: ${desktopBp}px)`,
+    desktopOnly: `screen and (min-width: ${desktopBp}px) and (max-width: ${widscreenBp - 1}px)`,
+    widescreen: `screen and (min-width: ${widscreenBp}px)`,
+    widescreenOnly: `screen and (min-width: ${widscreenBp}px) and (max-width: ${fullHdBp - 1}px)`,
+    fullhd: `screen and (min-width: ${fullHdBp}px)`
+  };
+
+  const store = {};
+
+  for (let device in mediaQueries) {
+    const query = window.matchMedia(mediaQueries[device]);
+    store[device] = ref(query.matches);
+
+    query.onchange = (q) => {
+      store[device].value = q.matches;
+    };
+  }
+
+  return store;
+});

app/javascript/stores/nutrient.js

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useNutrientStore = defineStore('nutrient', () => {
+  const nutrientList = ref({
+    kcal: { label: "Calories", unit: "kcal" },
+    protein: { label: "Protein", unit: "g" },
+    lipids: { label: "Fat", unit: "g" },
+    carbohydrates: { label: "Carbohydrates", unit: "g" },
+    water: { label: "Water", unit: "g" },
+    sugar: { label: "Sugar", unit: "g" },
+    fiber: { label: "Fiber", unit: "g" },
+    cholesterol: { label: "Cholesterol", unit: "mg" },
+    sodium: { label: "Sodium", unit: "mg" },
+    calcium: { label: "Calcium", unit: "mg" },
+    iron: { label: "Iron", unit: "mg" },
+    magnesium: { label: "Magnesium", unit: "mg" },
+    phosphorus: { label: "Phosphorus", unit: "mg" },
+    potassium: { label: "Potassium", unit: "mg" },
+    zinc: { label: "Zinc", unit: "mg" },
+    copper: { label: "Copper", unit: "mg" },
+    manganese: { label: "Manganese", unit: "mg" },
+    vit_a: { label: "Vitamin A", unit: "μg" },
+    vit_b6: { label: "Vitamin B6", unit: "mg" },
+    vit_b12: { label: "Vitamin B12", unit: "μg" },
+    vit_c: { label: "Vitamin C", unit: "mg" },
+    vit_d: { label: "Vitamin D", unit: "μg" },
+    vit_e: { label: "Vitamin E", unit: "mg" },
+    vit_k: { label: "Vitamin K", unit: "μg" },
+    ash: { label: "ash", unit: "g" }
+  });
+
+  return {
+    nutrientList
+  };
+});

app/javascript/stores/task.js

@@ -0,0 +1,114 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { useAppConfigStore } from "./appConfig";
+import api from "../lib/Api";
+import { createChannel } from "../lib/ActionCable";
+
+export const useTaskStore = defineStore('task', () => {
+  const taskLists = ref([]);
+  const currentTaskList = ref(null);
+  let taskChannel = null;
+
+  function replaceTaskList(list) {
+    if (taskLists.value) {
+      const listIdx = taskLists.value.findIndex(l => l.id === list.id);
+      if (listIdx >= 0) {
+        taskLists.value.splice(listIdx, 1, list);
+      }
+      if (currentTaskList.value && currentTaskList.value.id === list.id) {
+        currentTaskList.value = list;
+      }
+    }
+  }
+
+  function ensureTaskListChannel() {
+    if (taskChannel === null) {
+      taskChannel = createChannel(null, "TaskChannel", {
+        received(data) {
+          if (data && data.action === 'updated') {
+            replaceTaskList(data.task_list);
+          }
+        }
+      });
+    }
+  }
+
+  function refreshTaskLists() {
+    const cb = function(data) {
+      taskLists.value = data || [];
+      let ctl = null;
+
+      if (currentTaskList.value) {
+        ctl = data.find(l => l.id === currentTaskList.value.id);
+      }
+
+      ctl = ctl || data[0] || null;
+      setCurrentTaskList(ctl);
+      ensureTaskListChannel();
+    };
+
+    return api.getTaskLists(cb)
+  }
+
+  function ensureTaskLists() {
+    const appConfig = useAppConfigStore();
+
+    if (appConfig.user && taskLists.value.length === 0) {
+      return refreshTaskLists();
+    } else {
+      return Promise.resolve();
+    }
+  }
+
+  function setCurrentTaskList(taskList) {
+    currentTaskList.value = taskList || null;
+  }
+
+  async function createTaskList(newList) {
+    currentTaskList.value = await api.postTaskList(newList);
+    return refreshTaskLists();
+  }
+
+  async function deleteTaskList(taskList) {
+    await api.deleteTaskList(taskList);
+    return refreshTaskLists();
+  }
+
+  function createTaskItem(taskItem) {
+    return api.postTaskItem(taskItem.task_list_id, taskItem)
+      .then(data => {
+        return data;
+      });
+  }
+
+  function updateTaskItem(taskItem) {
+    return api.patchTaskItem(taskItem.task_list_id, taskItem)
+      .then(data => {
+        return data;
+      });
+  }
+
+  function deleteTaskItems(payload) {
+    return api.deleteTaskItems(payload.taskList.id, payload.taskItems);
+  }
+
+  function completeTaskItems(payload) {
+    return api.completeTaskItems(payload.taskList.id, payload.taskItems, !payload.completed);
+  }
+
+  return {
+    currentTaskList,
+    taskLists,
+
+    createTaskList,
+    deleteTaskList,
+    ensureTaskLists,
+    refreshTaskLists,
+    setCurrentTaskList,
+
+    createTaskItem,
+    updateTaskItem,
+    deleteTaskItems,
+    completeTaskItems
+  };
+});

app/javascript/styles/_responsive_controls.scss

@@ -1,107 +1,97 @@
-@mixin responsive-button-size($size) {
-  &.is-small-#{$size} {
-    @include button-small;
-  }
-
-  &.is-medium-#{$size} {
-    @include button-medium;
-  }
-
-  &.is-large-#{$size} {
-    @include button-large;
-  }
-}
+@use "bulma/sass/utilities" as bulma;
+@use "bulma/sass/utilities/controls";
+@use "bulma/sass/utilities/mixins";
 
 @mixin responsive-label-size($size) {
   &.is-small-#{$size} {
-    font-size: $size-small;
+    font-size: bulma.$size-small;
   }
 
   &.is-medium-#{$size} {
-    font-size: $size-medium;
+    font-size: bulma.$size-medium;
   }
 
   &.is-large-#{$size} {
-    font-size: $size-large;
+    font-size: bulma.$size-large;
   }
 }
 
 @mixin responsive-control-size($size) {
   &.is-small-#{$size} {
-    @include control-small;
+    @include controls.control-small;
   }
 
   &.is-medium-#{$size} {
-    @include control-medium;
+    @include controls.control-medium;
   }
 
   &.is-large-#{$size} {
-    @include control-large;
+    @include controls.control-large;
   }
 }
 
 .button {
-  @include mobile {
-    @include responsive-button-size("mobile");
+  @include mixins.mobile {
+    @include responsive-control-size("mobile");
   }
 
-  @include tablet {
-    @include responsive-button-size("tablet");
+  @include mixins.tablet {
+    @include responsive-control-size("tablet");
   }
 
-  @include desktop {
-    @include responsive-button-size("desktop");
+  @include mixins.desktop {
+    @include responsive-control-size("desktop");
   }
 
-  @include widescreen {
-    @include responsive-button-size("widescreen");
+  @include mixins.widescreen {
+    @include responsive-control-size("widescreen");
   }
 
-  @include fullhd {
-    @include responsive-button-size("fullhd");
+  @include mixins.fullhd {
+    @include responsive-control-size("fullhd");
   }
 }
 
 .label {
-  @include mobile {
+  @include mixins.mobile {
     @include responsive-label-size("mobile");
   }
 
-  @include tablet {
+  @include mixins.tablet {
     @include responsive-label-size("tablet");
   }
 
-  @include desktop {
+  @include mixins.desktop {
     @include responsive-label-size("desktop");
   }
 
-  @include widescreen {
+  @include mixins.widescreen {
     @include responsive-label-size("widescreen");
   }
 
-  @include fullhd {
+  @include mixins.fullhd {
     @include responsive-label-size("fullhd");
   }
 }
 
 .input, .textarea {
-  @include mobile {
+  @include mixins.mobile {
     @include responsive-control-size("mobile");
   }
 
-  @include tablet {
+  @include mixins.tablet {
     @include responsive-control-size("tablet");
   }
 
-  @include desktop {
+  @include mixins.desktop {
     @include responsive-control-size("desktop");
   }
 
-  @include widescreen {
+  @include mixins.widescreen {
     @include responsive-control-size("widescreen");
   }
 
-  @include fullhd {
+  @include mixins.fullhd {
     @include responsive-control-size("fullhd");
   }
 }

app/javascript/styles/_variables.scss

@@ -1,35 +0,0 @@
-
-
-// coolors.co pallet
-$coolors-dark: rgba(29, 30, 24, 1);
-$coolors-blue: rgba(67, 127, 151, 1);
-$coolors-green: rgba(121, 167, 54, 1);
-$coolors-red: #ab4c34;
-$coolors-yellow: rgba(240, 162, 2, 1);
-
-//$family-sans-serif: "Verdana", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
-$family-serif: Georgia, "Times New Roman", Times, serif;
-
-// Bluma default overrides
-//$green: #79A736;
-//$red: #d4424e;
-//$blue: #9c36a7;
-
-$green: $coolors-green;
-$blue: $coolors-blue;
-$red: $coolors-red;
-$yellow: $coolors-yellow;
-$dark: $coolors-dark;
-
-$primary: $green;
-$family-primary: $family-serif;
-
-$modal-content-width: 750px;
-
-
-// Make all Bulma variables and functions available
-@import "~bulma/sass/utilities/initial-variables";
-@import "~bulma/sass/utilities/functions";
-@import "~bulma/sass/utilities/derived-variables";
-
-//$dropdown-item-hover-background-color: $white-ter;

app/javascript/styles/_wide_modal.scss

@@ -1,5 +1,9 @@
 
-@include until($desktop) {
+@use "bulma/sass/utilities" as bulma;
+@use "bulma/sass/utilities/mixins";
+
+
+@include mixins.until(bulma.$desktop) {
   .modal.is-wide {
     .modal-content, .modal-card {
       margin: 0 20px;
@@ -8,7 +12,7 @@
   }
 }
 
-@include from($desktop) {
+@include mixins.from(bulma.$desktop) {
   .modal.is-wide {
     .modal-content, .modal-card {
       margin: 0 auto;

app/javascript/styles/index.scss

@@ -1,18 +1,22 @@
-@import "./variables";
+// coolors.co pallet
+$coolors-dark: rgba(29, 30, 24, 1);
+$coolors-blue: rgba(67, 127, 151, 1);
+$coolors-green: rgba(121, 167, 54, 1);
+$coolors-red: #ab4c34;
+$coolors-yellow: rgba(240, 162, 2, 1);
 
-@import "~bulma/sass/utilities/_all";
-@import "~bulma/sass/base/_all";
-@import "~bulma/sass/components/dropdown";
-@import "~bulma/sass/components/navbar";
-@import "~bulma/sass/components/level";
-@import "~bulma/sass/components/message";
-@import "~bulma/sass/components/modal";
-@import "~bulma/sass/components/pagination";
-@import "~bulma/sass/components/panel";
-@import "~bulma/sass/elements/_all";
-@import "~bulma/sass/form/_all";
-@import "~bulma/sass/grid/columns";
-@import "~bulma/sass/layout/section";
+$family-serif: Georgia, "Times New Roman", Times, serif;
+
+@use "bulma/versions/bulma-no-dark-mode" as bulma with (
+  $family-primary: $family-serif,
+  $green: $coolors-green,
+  $blue: $coolors-blue,
+  $red: $coolors-red,
+  $yellow: $coolors-yellow,
+  $dark: $coolors-dark,
+  $primary: $coolors-green,
+  $modal-content-width: 750px
+);
 
 @import "./responsive_controls";
 @import "./wide_modal";
@@ -28,7 +32,7 @@ body {
 }
 
 body {
-  background-color: $grey-dark;
+  background-color: bulma.$grey-dark;
   padding-bottom: 2rem;
 }
 
@@ -37,13 +41,13 @@ body {
 
   .container {
     padding: 1rem;
-    background-color: $white;
+    background-color: bulma.$white;
     min-height: 75vh;
   }
 }
 
 .title, .subtitle, .navbar, .button, .pagination, .modal-card-title, th {
-  font-family: $family-sans-serif;
+  font-family: bulma.$family-sans-serif;
 }
 
 .pagination:not(:last-child) {

app/models/food.rb

@@ -91,15 +91,15 @@ class Food < Ingredient
         :vit_e,
         :vit_d,
         :vit_k,
-        :cholesterol
+        :cholesterol,
+        [:lipids, :lipid],
+        [:density, :density_best_guess]
     ]
 
     copy_fields.each do |f|
-      self.send("#{f}=".to_sym, food.send(f.to_sym))
+      to, from = f.is_a?(Array) ? f : [f, f]
+      self.send("#{to}=".to_sym, food.send(from.to_sym))
     end
-
-    self.lipids = food.lipid
-    self.density = food.density_best_guess
   end
 
 end

app/models/task_item.rb

@@ -1,7 +1,7 @@
 class TaskItem < ApplicationRecord
   include DefaultValues
 
-  belongs_to :task_list, touch: true
+  belongs_to :task_list, touch: true, inverse_of: :task_items
 
   validates :name, presence: true
 

app/models/task_list.rb

@@ -1,7 +1,7 @@
 class TaskList < ApplicationRecord
 
   belongs_to :user
-  has_many :task_items, dependent: :delete_all
+  has_many :task_items, dependent: :delete_all, inverse_of: :task_list
 
   validates :name,
             presence: true,
@@ -18,7 +18,7 @@ class TaskList < ApplicationRecord
       if ri.ingredient.is_a?(Recipe)
         add_recipe_ingredients(ri.ingredient, recurse_depth + 1)
       else
-        item = self.task_items.detect { |i| i.name.downcase == ri.name.downcase } || TaskItem.new(name: ri.name, task_list: self)
+        item = self.task_items.detect { |i| i.name.downcase == ri.name.downcase } || task_items.build(name: ri.name)
         quantity_str = [ri.quantity, ri.units].delete_if { |i| i.blank? }.join(' ')
         if item.quantity.blank?
           item.quantity = quantity_str