From 38f623eee7ff41a4cc43d07d4952239cd38e3ccd Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Wed, 10 Dec 2025 10:05:14 +0100
Subject: [PATCH] [Glitch] Minor Wrapstodon tweaks, add stub Storybook page

Port 91500a7f53d844768213b7a8801b9829dbbe13b6 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../annual_report/annual_report.stories.tsx   | 131 ++++++++++++++++++
 .../glitch/features/annual_report/index.tsx   |   1 -
 .../annual_report/shared_page.module.css      |   2 +-
 .../glitch/styles/mastodon/theme/index.scss   |   2 +-
 4 files changed, 133 insertions(+), 3 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/features/annual_report/annual_report.stories.tsx

diff --git a/app/javascript/flavours/glitch/features/annual_report/annual_report.stories.tsx b/app/javascript/flavours/glitch/features/annual_report/annual_report.stories.tsx
new file mode 100644
index 0000000000..290671c0f1
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/annual_report/annual_report.stories.tsx
@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import {
+  accountFactoryState,
+  // statusFactoryState
+} from '@/testing/factories';
+
+import { AnnualReport } from '.';
+
+const meta = {
+  title: 'Components/AnnualReport',
+  component: AnnualReport,
+  args: {
+    context: 'standalone',
+  },
+  parameters: {
+    state: {
+      accounts: {
+        '1': accountFactoryState(),
+      },
+      // statuses: {
+      //   '1': statusFactoryState(),
+      // },
+      annualReport: {
+        state: 'available',
+        report: {
+          schema_version: 2,
+          share_url: '#',
+          account_id: '1',
+          year: 2025,
+          data: {
+            archetype: 'lurker',
+            time_series: [
+              {
+                month: 1,
+                statuses: 0,
+                followers: 0,
+                following: 0,
+              },
+              {
+                month: 2,
+                statuses: 0,
+                followers: 0,
+                following: 0,
+              },
+              {
+                month: 3,
+                statuses: 0,
+                followers: 0,
+                following: 0,
+              },
+              {
+                month: 4,
+                statuses: 0,
+                followers: 0,
+                following: 0,
+              },
+              {
+                month: 5,
+                statuses: 1,
+                followers: 1,
+                following: 3,
+              },
+              {
+                month: 6,
+                statuses: 7,
+                followers: 1,
+                following: 0,
+              },
+              {
+                month: 7,
+                statuses: 2,
+                followers: 0,
+                following: 0,
+              },
+              {
+                month: 8,
+                statuses: 2,
+                followers: 0,
+                following: 0,
+              },
+              {
+                month: 9,
+                statuses: 11,
+                followers: 0,
+                following: 1,
+              },
+              {
+                month: 10,
+                statuses: 12,
+                followers: 0,
+                following: 1,
+              },
+              {
+                month: 11,
+                statuses: 6,
+                followers: 0,
+                following: 1,
+              },
+              {
+                month: 12,
+                statuses: 4,
+                followers: 0,
+                following: 0,
+              },
+            ],
+            top_hashtags: [
+              {
+                name: 'Mastodon',
+                count: 14,
+              },
+            ],
+            top_statuses: {
+              by_reblogs: '1',
+              by_replies: '1',
+              by_favourites: '1',
+            },
+          },
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof AnnualReport>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => <AnnualReport {...args} />,
+};
diff --git a/app/javascript/flavours/glitch/features/annual_report/index.tsx b/app/javascript/flavours/glitch/features/annual_report/index.tsx
index b759610b46..7abdd913f1 100644
--- a/app/javascript/flavours/glitch/features/annual_report/index.tsx
+++ b/app/javascript/flavours/glitch/features/annual_report/index.tsx
@@ -28,7 +28,6 @@ export const shareMessage = defineMessage({
   defaultMessage: 'I got the {archetype} archetype!',
 });
 
-// Share = false when using the embedded version of the report.
 export const AnnualReport: FC<{ context?: 'modal' | 'standalone' }> = ({
   context = 'standalone',
 }) => {
diff --git a/app/javascript/flavours/glitch/features/annual_report/shared_page.module.css b/app/javascript/flavours/glitch/features/annual_report/shared_page.module.css
index 99b713c05d..d50023b137 100644
--- a/app/javascript/flavours/glitch/features/annual_report/shared_page.module.css
+++ b/app/javascript/flavours/glitch/features/annual_report/shared_page.module.css
@@ -5,7 +5,7 @@
 
 .footer {
   text-align: center;
-  margin-top: 1rem;
+  margin-top: 2rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
diff --git a/app/javascript/flavours/glitch/styles/mastodon/theme/index.scss b/app/javascript/flavours/glitch/styles/mastodon/theme/index.scss
index 8e275e514a..a907299887 100644
--- a/app/javascript/flavours/glitch/styles/mastodon/theme/index.scss
+++ b/app/javascript/flavours/glitch/styles/mastodon/theme/index.scss
@@ -6,7 +6,7 @@
 html {
   @include base.palette;
 
-  &[data-user-theme='system'] {
+  &:where([data-user-theme='system']) {
     color-scheme: dark light;
 
     @media (prefers-color-scheme: dark) {