add midnight theme and fix some styles

2026-04-26 18:23:47 +02:00 · 2026-01-18 15:45:36 +09:00
parent 46750d3a0c
commit c326e4fd3e
37 changed files with 655 additions and 471 deletions
--- a/src/components/dialogs/GroupDialog/GroupDialog.vue
+++ b/src/components/dialogs/GroupDialog/GroupDialog.vue
@@ -377,21 +377,15 @@
                            <div v-for="room in groupDialog.instances" :key="room.tag" style="width: 100%">
                                <div style="margin: 5px 0">
                                    <Location :location="room.tag" style="display: inline-block" />
-                                    <InviteYourself :location="room.tag" style="margin-left: 5px" />
-                                    <TooltipWrapper side="top" content="RefreshCw player count">
-                                        <Button
-                                            class="rounded-full ml-1 w-6 h-6 text-xs text-muted-foreground hover:text-foreground"
-                                            size="icon"
-                                            variant="outline"
-                                            @click="refreshInstancePlayerCount(room.tag)"
-                                            ><RefreshCw class="h-4 w-4" />
-                                        </Button>
-                                    </TooltipWrapper>
-                                    <LastJoin :location="room.tag" :currentlocation="lastLocation.location" />
-                                    <InstanceInfo
+                                    <InstanceActionBar
+                                        class="ml-1"
                                        :location="room.tag"
+                                        :currentlocation="lastLocation.location"
                                        :instance="room.ref"
-                                        :friendcount="room.friendCount" />
+                                        :friendcount="room.friendCount"
+                                        :show-launch="false"
+                                        refresh-tooltip="RefreshCw player count"
+                                        :on-refresh="() => refreshInstancePlayerCount(room.tag)" />
                                </div>
                                <div
                                    v-if="room.users.length"
@@ -1244,6 +1238,7 @@

    import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
    import GroupPostEditDialog from './GroupPostEditDialog.vue';
+    import InstanceActionBar from '../../InstanceActionBar.vue';
    import PreviousInstancesGroupDialog from '../PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';

    import * as workerTimers from 'worker-timers';
--- a/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBansColumns.jsx
@@ -18,7 +18,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -70,7 +69,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -80,7 +81,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -98,19 +101,25 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    },
    {
        accessorKey: 'joinedAt',
        header: () => t('dialog.group_member_moderation.joined_at'),
        size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        )
    },
    {
        accessorKey: 'bannedAt',
        header: () => t('dialog.group_member_moderation.banned_at'),
        size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.bannedAt, 'long')}</span>
+        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationBlockedColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -68,7 +67,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -87,7 +90,9 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationInvitesColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -68,7 +67,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -87,7 +90,9 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationJoinRequestsColumns.jsx
@@ -16,7 +16,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -68,7 +67,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -78,7 +79,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -87,7 +90,9 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    }
 ];
--- a/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
+++ b/src/components/dialogs/GroupDialog/groupMemberModerationMembersColumns.jsx
@@ -18,7 +18,6 @@ export const createColumns = ({
        header: () => null,
        size: 55,
        enableSorting: false,
-        enableResizing: false,
        cell: ({ row }) => {
            const original = row.original;
            return (
@@ -70,7 +69,9 @@ export const createColumns = ({
        cell: ({ row }) => {
            const original = row.original;
            const useColors = !!(randomUserColours?.value ?? randomUserColours);
-            const colorStyle = useColors ? { color: original?.user?.$userColour } : null;
+            const colorStyle = useColors
+                ? { color: original?.user?.$userColour }
+                : null;

            return (
                <span
@@ -80,7 +81,9 @@ export const createColumns = ({
                        onShowUser?.(original?.userId);
                    }}
                >
-                    <span style={colorStyle}>{original?.user?.displayName}</span>
+                    <span style={colorStyle}>
+                        {original?.user?.displayName}
+                    </span>
                </span>
            );
        }
@@ -98,14 +101,18 @@ export const createColumns = ({
        accessorKey: 'managerNotes',
        header: () => t('dialog.group_member_moderation.notes'),
        cell: ({ row }) => (
-            <span onClick={(e) => e.stopPropagation()}>{row.original?.managerNotes}</span>
+            <span onClick={(e) => e.stopPropagation()}>
+                {row.original?.managerNotes}
+            </span>
        )
    },
    {
        accessorKey: 'joinedAt',
        header: () => t('dialog.group_member_moderation.joined_at'),
        size: 170,
-        cell: ({ row }) => <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        cell: ({ row }) => (
+            <span>{formatDateFilter(row.original?.joinedAt, 'long')}</span>
+        )
    },
    {
        accessorKey: 'visibility',