[Glitch] Minor Wrapstodon tweaks, add stub Storybook page

Port 91500a7f53 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

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} />,
+};

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',
 }) => {

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;

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) {