Skip to content

Added color field in environment model and ui #922

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
shashank-lol wants to merge 1 commit into from
Closed

Added color field in environment model and ui #922

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion lib/consts.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,8 @@ enum HistoryRetentionPeriod {
enum ItemMenuOption {
edit("Rename"),
delete("Delete"),
duplicate("Duplicate");
duplicate("Duplicate"),
editColor("Change Color");

const ItemMenuOption(this.label);
final String label;
Expand Down
27 changes: 0 additions & 27 deletions lib/dashbot/providers/dashbot_window_notifier.g.dart
View file
Open in desktop

This file was deleted.

8 changes: 6 additions & 2 deletions lib/providers/environment_providers.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:ui';

import 'package:apidash/consts.dart';
import 'package:apidash/providers/providers.dart';
import 'package:apidash/utils/file_utils.dart';
Expand Down Expand Up @@ -104,11 +106,12 @@ class EnvironmentsStateNotifier
}
}

void addEnvironment() {
void addEnvironment({Color? color}) {
final id = getNewUuid();
final newEnvironmentModel = EnvironmentModel(
id: id,
values: [],
color: color??kGlobalColor
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing space after the null coalescing operator. Should be color ?? kGlobalColor instead of color??kGlobalColor for better code readability and consistency.

Suggested change
color: color??kGlobalColor
color: color ?? kGlobalColor

Copilot uses AI. Check for mistakes.
);
state = {
...state!,
Expand All @@ -124,12 +127,13 @@ class EnvironmentsStateNotifier

void updateEnvironment(
String id, {
String? name,
String? name, Color? color,
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The parameter formatting is inconsistent. The name and color parameters should be on separate lines or follow a consistent pattern. Currently name, Color? color, appears on one line while other parameters have different formatting.

Suggested change
String? name, Color? color,
String? name,
Color? color,

Copilot uses AI. Check for mistakes.
List<EnvironmentVariableModel>? values,
}) {
final environment = state![id]!;
final updatedEnvironment = environment.copyWith(
name: name ?? environment.name,
color: color ?? environment.color,
values: values ?? environment.values,
);
state = {
Expand Down
1 change: 1 addition & 0 deletions lib/screens/common_widgets/environment_dropdown.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ class EnvironmentDropdown extends ConsumerWidget {
return EnvironmentPopupMenu(
value: environments?[activeEnvironment],
options: environmentsList,
color: environments?[activeEnvironment]?.color,
onChanged: (value) {
if (value != null) {
ref.read(activeEnvironmentIdStateProvider.notifier).state = value.id;
Expand Down
67 changes: 66 additions & 1 deletion lib/screens/envvar/environments_pane.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:math';
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The dart:math import is only used for Random() to select a random color. Consider using dart:math show Random for a more explicit import, or use a different approach like cycling through colors based on the current number of environments to provide more predictable color assignment.

Suggested change
import 'dart:math';
import 'dart:math' show Random;

Copilot uses AI. Check for mistakes.

import 'package:apidash_core/apidash_core.dart';
import 'package:apidash_design_system/apidash_design_system.dart';
import 'package:flutter/material.dart';
Expand All @@ -23,9 +25,10 @@ class EnvironmentsPane extends ConsumerWidget {
children: [
SidebarHeader(
onAddNew: () {
Color newColor = kEnvColors[Random().nextInt(kEnvColors.length)];
ref
.read(environmentsStateNotifierProvider.notifier)
.addEnvironment();
.addEnvironment(color: newColor);
},
),
kVSpacer10,
Expand Down Expand Up @@ -182,6 +185,7 @@ class EnvironmentItem extends ConsumerWidget {
isActive: id == activeEnvironmentId,
isGlobal: id == kGlobalEnvironmentId,
name: environmentModel.name,
color: environmentModel.color,
selectedId: selectedId,
editRequestId: editRequestId,
setActive: (value) {
Expand Down Expand Up @@ -225,7 +229,68 @@ class EnvironmentItem extends ConsumerWidget {
.read(environmentsStateNotifierProvider.notifier)
.duplicateEnvironment(id);
}
if (item == ItemMenuOption.editColor) {
showEnvColorPickerDialog(
context,
ref.read(environmentsStateNotifierProvider.notifier),
id,
);
}
},
);
}
}

void showEnvColorPickerDialog(
BuildContext context,
EnvironmentsStateNotifier notifier,
String id,
) {
Comment on lines +244 to +248
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The showEnvColorPickerDialog function lacks documentation. Consider adding a doc comment explaining its purpose and parameters:

/// Shows a dialog for selecting an environment color from a predefined palette.
///
/// The dialog displays the available colors from [kEnvColors] with hover effects
/// and updates the environment's color when a selection is made.
void showEnvColorPickerDialog(

Copilot uses AI. Check for mistakes.
showDialog(
context: context,
builder: (context) {
Color? hoveredColor;

return StatefulBuilder(
builder: (context, setState) => AlertDialog(
title: const Text('Pick a color'),
content: SizedBox(
width: 250,
child: Wrap(
spacing: 12,
runSpacing: 12,
children: kEnvColors.map((color) {
final isHovered = color == hoveredColor;

final displayColor = isHovered
? Color.alphaBlend(
Colors.black.withValues(alpha: 0.25), color)
: color;

return MouseRegion(
onEnter: (_) => setState(() => hoveredColor = color),
onExit: (_) => setState(() => hoveredColor = null),
child: GestureDetector(
onTap: () {
notifier.updateEnvironment(id, color: color);
Navigator.of(context).pop();
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
width: 36,
height: 36,
decoration: BoxDecoration(
color: displayColor,
shape: BoxShape.circle,
),
),
),
);
}).toList(),
),
),
),
);
},
);
}
31 changes: 22 additions & 9 deletions lib/widgets/card_sidebar_environment.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
this.isGlobal = false,
this.isActive = false,
this.name,
this.color,
this.selectedId,
this.editRequestId,
this.setActive,
Expand All @@ -27,6 +28,7 @@ class SidebarEnvironmentCard extends StatelessWidget {
final bool isGlobal;
final bool isActive;
final String? name;
final Color? color;
final String? selectedId;
final String? editRequestId;
final void Function(bool?)? setActive;
Expand All @@ -41,8 +43,8 @@ class SidebarEnvironmentCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final Color color =
isGlobal ? colorScheme.secondaryContainer : colorScheme.surface;
final colorDot = color;
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extra space between assignment operator. Should be final colorDot = color; instead of final colorDot = color; (note the double space).

Suggested change
final colorDot = color;
final colorDot = color;

Copilot uses AI. Check for mistakes.
final Color surfaceColor = colorScheme.surface;
final Color colorVariant = colorScheme.surfaceContainer;
final Color surfaceTint = colorScheme.primary;
bool isSelected = selectedId == id;
Expand All @@ -61,8 +63,8 @@ class SidebarEnvironmentCard extends StatelessWidget {
color: isSelected && !isGlobal
? colorScheme.brightness == Brightness.dark
? colorVariant
: color
: color,
: surfaceColor
: surfaceColor,
margin: EdgeInsets.zero,
child: InkWell(
borderRadius: kBorderRadius8,
Expand Down Expand Up @@ -109,11 +111,22 @@ class SidebarEnvironmentCard extends StatelessWidget {
border: InputBorder.none,
),
)
: Text(
nm,
softWrap: false,
overflow: TextOverflow.fade,
),
: Row(
children: [
Container(width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: colorDot),
margin: kPe8,
),
Text(
nm,
softWrap: false,
overflow: TextOverflow.fade,
),
Comment on lines +116 to +127
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Inconsistent formatting: The opening brace should be on the same line as the Row widget. Additionally, the Container widget parameters should follow consistent indentation. Current code has width and height on the same line but other properties on separate lines.

Suggested change
Container(width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: colorDot),
margin: kPe8,
),
Text(
nm,
softWrap: false,
overflow: TextOverflow.fade,
),
Container(
width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: colorDot,
),
margin: kPe8,
),
Text(
nm,
softWrap: false,
overflow: TextOverflow.fade,
),

Copilot uses AI. Check for mistakes.
],
),
),
Visibility(
visible: isSelected && !inEditMode && !isGlobal,
Expand Down
6 changes: 5 additions & 1 deletion lib/widgets/popup_menu_env.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ class EnvironmentPopupMenu extends StatelessWidget {
this.value,
this.options,
this.onChanged,
this.color
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Missing trailing comma after the color parameter. Adding a trailing comma improves code formatting consistency with Dart style guidelines.

Suggested change
this.color
this.color,

Copilot uses AI. Check for mistakes.
});

final EnvironmentModel? value;
final void Function(EnvironmentModel? value)? onChanged;
final List<EnvironmentModel>? options;
final Color? color;

@override
Widget build(BuildContext context) {
Expand All @@ -30,13 +32,15 @@ class EnvironmentPopupMenu extends StatelessWidget {
e,
(e.id == kGlobalEnvironmentId)
? "Global"
: getEnvironmentTitle(e.name).clip(30)
: getEnvironmentTitle(e.name).clip(30),
)) ??
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Missing trailing comma after the closing parenthesis on line 35. This would improve formatting consistency. The line should end with a comma after the closing parenthesis of getEnvironmentTitle(e.name).clip(30).

Suggested change
)) ??
,)) ??

Copilot uses AI. Check for mistakes.
[],
width: width,
tooltip: "Select Environment",
onChanged: onChanged,
isOutlined: true,
borderColor: color,
colorResolver: (env) => env?.color,
);
}
}
4 changes: 4 additions & 0 deletions packages/apidash_core/lib/consts.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,5 @@
import 'package:flutter/material.dart';

enum EnvironmentVariableType { variable, secret }

const kGlobalColor = Colors.blue;
15 changes: 14 additions & 1 deletion packages/apidash_core/lib/models/environment_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import 'dart:ui';

import 'package:freezed_annotation/freezed_annotation.dart';
import '../consts.dart';

Expand All @@ -15,6 +17,7 @@ class EnvironmentModel with _$EnvironmentModel {
required String id,
@Default("") String name,
@Default([]) List<EnvironmentVariableModel> values,
@ColorConverter() @Default(kGlobalColor) Color color
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] Missing trailing comma after the color parameter. Adding a trailing comma improves code formatting consistency with Dart style guidelines.

Suggested change
@ColorConverter() @Default(kGlobalColor) Color color
@ColorConverter() @Default(kGlobalColor) Color color,

Copilot uses AI. Check for mistakes.
}) = _EnvironmentModel;

factory EnvironmentModel.fromJson(Map<String, Object?> json) =>
Expand All @@ -39,7 +42,7 @@ class EnvironmentVariableModel with _$EnvironmentVariableModel {
}

const kEnvironmentVariableEmptyModel =
EnvironmentVariableModel(key: "", value: "");
EnvironmentVariableModel(key: "", value: "");
Comment on lines 44 to +45
Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed from const to non-const unnecessarily. Since kEnvironmentVariableEmptyModel is a constant expression with literal values, it should remain const for compile-time optimization. The removal of const here appears to be unintended.

Copilot uses AI. Check for mistakes.
const kEnvironmentSecretEmptyModel = EnvironmentVariableModel(
key: "", value: "", type: EnvironmentVariableType.secret);

Expand Down Expand Up @@ -80,3 +83,13 @@ class EnvironmentVariableSuggestion {
int get hashCode =>
environmentId.hashCode ^ variable.hashCode ^ isUnknown.hashCode;
}

Copy link

Copilot AI Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The ColorConverter class lacks documentation. Consider adding a doc comment explaining its purpose, such as:

/// Converts between Flutter's [Color] type and an integer representation for JSON serialization.
/// Uses ARGB32 format for storage.
class ColorConverter implements JsonConverter<Color, int> {
Suggested change
/// Converts between Flutter's [Color] type and an integer representation for JSON serialization.
/// Uses ARGB32 format for storage.

Copilot uses AI. Check for mistakes.
class ColorConverter implements JsonConverter<Color, int> {
const ColorConverter();

@override
Color fromJson(int json) => Color(json);

@override
int toJson(Color object) => object.toARGB32();
}
Loading