From 0b2b9a713bf9d384366f2d40e9e58c6b88425ef4 Mon Sep 17 00:00:00 2001
From: rshigg <90143161+rshigg@users.noreply.github.com>
Date: Tue, 17 Jan 2023 09:25:36 -0330
Subject: [PATCH] feat: add grayscale mode to user preferences (#1177)

---
 components/account/AccountAvatar.vue |  1 +
 components/status/StatusActions.vue  |  2 +-
 components/status/StatusCard.vue     |  2 +-
 components/status/StatusPoll.vue     |  2 +-
 composables/settings/definition.ts   |  2 ++
 layouts/default.vue                  |  4 +++-
 locales/en-US.json                   |  1 +
 pages/settings/preferences/index.vue | 20 +++++++++++++-------
 styles/global.css                    | 26 ++++++++++++++++++++++++++
 9 files changed, 49 insertions(+), 11 deletions(-)

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index da7a3fff..26953d8d 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -19,6 +19,7 @@ const error = $ref(false)
     :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
     :alt="$t('account.avatar_description', [account.username])"
     loading="lazy"
+    class="account-avatar"
     :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
     :style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
     v-bind="$attrs"
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 6b761d05..96a4fab9 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -33,7 +33,7 @@ const reply = () => {
 </script>
 
 <template>
-  <div flex justify-between>
+  <div flex justify-between items-center class="status-actions">
     <div flex-1>
       <StatusActionButton
         :content="$t('action.reply')"
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 2fc94e0c..db6d5b0a 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -125,7 +125,7 @@ const showReplyTo = $computed(() => !replyToMain && !directReply)
           p="t-1 b-0.5 x-1px"
           relative text-secondary ws-nowrap
         >
-          <div i-ri:repeat-fill me-46px text-green w-16px h-16px />
+          <div i-ri:repeat-fill me-46px text-green w-16px h-16px class="status-boosted" />
           <div absolute top-1 ms-24px w-32px h-32px rounded-full>
             <AccountHoverWrapper :account="rebloggedBy">
               <NuxtLink :to="getAccountRoute(rebloggedBy)">
diff --git a/components/status/StatusPoll.vue b/components/status/StatusPoll.vue
index 4ad4ec3a..d9410de8 100644
--- a/components/status/StatusPoll.vue
+++ b/components/status/StatusPoll.vue
@@ -43,7 +43,7 @@ const votersCount = $computed(() => poll.votersCount ?? poll.votesCount ?? 0)
 </script>
 
 <template>
-  <div flex flex-col w-full items-stretch gap-2 py3 dir="auto">
+  <div flex flex-col w-full items-stretch gap-2 py3 dir="auto" class="poll-wrapper">
     <form v-if="!poll.voted && !poll.expired" flex="~ col gap3" accent-primary @click.stop="noop" @submit.prevent="vote">
       <label v-for="(option, index) of poll.options" :key="index" flex="~ gap2" items-center>
         <input name="choices" :value="index" :type="poll.multiple ? 'checkbox' : 'radio'" cursor-pointer>
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 4c64dba0..cd050316 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -7,6 +7,7 @@ export interface PreferencesSettings {
   hideBoostCount: boolean
   hideFavoriteCount: boolean
   hideFollowerCount: boolean
+  grayscaleMode: boolean
   experimentalVirtualScroller: boolean
   experimentalGitHubCards: boolean
   experimentalUserPicker: boolean
@@ -56,6 +57,7 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
   hideBoostCount: false,
   hideFavoriteCount: false,
   hideFollowerCount: false,
+  grayscaleMode: false,
   experimentalVirtualScroller: true,
   experimentalGitHubCards: true,
   experimentalUserPicker: true,
diff --git a/layouts/default.vue b/layouts/default.vue
index 31af5879..6f73ea45 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -10,10 +10,12 @@ const showUserPicker = logicAnd(
   usePreferences('experimentalUserPicker'),
   () => useUsers().value.length > 1,
 )
+
+const isGrayscale = usePreferences('grayscaleMode')
 </script>
 
 <template>
-  <div h-full>
+  <div h-full :data-mode="isHydrated && isGrayscale ? 'grayscale' : ''">
     <main flex w-full mxa lg:max-w-80rem>
       <aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
         <div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
diff --git a/locales/en-US.json b/locales/en-US.json
index 4c493f6c..4dfd9129 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -357,6 +357,7 @@
     "notifications_settings": "Notifications",
     "preferences": {
       "github_cards": "GitHub Cards",
+      "grayscale_mode": "Grayscale mode",
       "hide_boost_count": "Hide boost count",
       "hide_favorite_count": "Hide favorite count",
       "hide_follower_count": "Hide follower count",
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 4cc3b69e..e2ea0191 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -10,6 +10,11 @@ const userSettings = useUserSettings()
 
 <template>
   <MainContent back-on-small-screen>
+    <template #title>
+      <h1 text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        {{ $t('settings.preferences.label') }}
+      </h1>
+    </template>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'hideBoostCount')"
       @click="togglePreferences('hideBoostCount')"
@@ -28,15 +33,16 @@ const userSettings = useUserSettings()
     >
       {{ $t('settings.preferences.hide_follower_count') }}
     </SettingsToggleItem>
-    <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.preferences.label') }}</span>
-      </div>
-    </template>
-    <h3 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'grayscaleMode')"
+      @click="togglePreferences('grayscaleMode')"
+    >
+      {{ $t('settings.preferences.grayscale_mode') }}
+    </SettingsToggleItem>
+    <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $t('settings.preferences.title') }}
-    </h3>
+    </h2>
     <SettingsToggleItem
       :checked="getPreferences(userSettings, 'experimentalVirtualScroller')"
       @click="togglePreferences('experimentalVirtualScroller')"
diff --git a/styles/global.css b/styles/global.css
index b6c404ee..e8e00c47 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -250,3 +250,29 @@ footer {
 .squircle {
   clip-path: url(#avatar-mask);
 }
+
+/* 
+Grayscale mode 
+Setting each element filter to a different var
+allows controlling them individually
+*/
+[data-mode="grayscale"] img,
+[data-mode="grayscale"] video {
+  filter: grayscale(var(--media-grayscale, 1));
+  transition: filter .23s ease-in-out .2s;
+}
+[data-mode="grayscale"] pre {
+  filter: grayscale(var(--code-grayscale, 1));
+}
+[data-mode="grayscale"] .poll-wrapper {
+  filter: grayscale(var(--poll-grayscale, 1));
+}
+[data-mode="grayscale"] .status-actions, 
+[data-mode="grayscale"] .status-boosted {
+  filter: grayscale(var(--status-grayscale, 1));
+}
+
+[data-mode="grayscale"] img:hover,
+[data-mode="grayscale"] video:hover {
+  filter: grayscale(0);
+}
\ No newline at end of file